개요

• SSAFY 자율 프로젝트를 진행하며 Figma API를 사용하기로 함.
• 해당 부분에 대한 원활한 소통을 위해 필요한 API에 대해 정리.
• 필요한 내용에 대해서만 정리하기에 추가 내용은 docs 참고 바람
• https://www.figma.com/developers/api

Authentication

• Authentication을 진행하는 방법은 두가지가 있음.
  • 1. Personal Authentication
  • 2. OAuth2 Authentication

Figma Files

1. 공통적으로 가지는 값들

{
  id : string
  name: string
  visible: boolean // default: true
  type: string
  rotation : number // rotation 돌리기 관련
  pluginData : Any // 플러그인 쓰지마!!!!
  sharedPluginData : Any // 쓰지말라고!
  componentPropertyReferences : Map<String, String>
}

2. Node type에 따른 속성 값들

• 객체 형태로 작성하겠음.

  {
    DOCUMENT: {
      children: Node[]
    }
    CANVAS: {
      children : Node[]
      backgroundColor : Color
      prototypeStartNodeID : String
      flowStartingPoints : FlowStartingPoint[]
      prototypeDevice : PrototypeDevice
      exportSettings : ExportSetting[]
    }
    FRAME: {
      children : Node[]
      locked: boolean
      background : Paint[]
      backgroundColor : Color
      fills : Paint[]
      stroke : Paint[]
      strokeWeight : Number
      strokeAlign : String
      cornerRadius : Number
      rectangleCornerRadii : Number[]
      exportSettings : ExportSetting[]
      blendMode : BlendMode
      preserveRatio : Boolean
      constraints : LayoutConstraint
      layoutAlign : String // INHERIT, STRETCH 등의 데이터와 IN CENTER MAX STRETCH 등 데이터인듯
      transitionNodeID : 적다 말았으니 이따 여기서부터 재작성하자... 양이 넘 많으니 공통점 좀 추려서 진행하자
    }
    GROUP : FRAME과 동일
    VECTOR: {}
    BOOLEAN_OPERATION: {}
    STAR: {}
    LINE: {}
    ELLIPSE: {}
    REGULAR_POLYGON: {}
    RECTANGLE: {}
    TABLE: {}
    TABLE_CELL: {}
    TEXT: {}
    SLICE: {}
    COMPONENT: {}
    COMPONENT_SET: {}
    INSTANCE: {}
    STICKY: {}
    SHAPE_WITH_TEXT: {}
    CONNECTOR: {}
    WASHI_TAPE: {}
  }
  

3. 각 속성들의 타입들 관련 내용

• 먼 미래에 작성 예정

GET file

1. 전체 파일 data fetch 하기 => depth를 2로 하면 document (0) => section (1) => frame (2)

// AxiosRequestConfig
{
  method: `get`,
  baseURL: `https://api.figma.com`,
  url: `/v1/files/파일키` //
  headers: {
    Authorization: `Bearer 피그마 access 토큰`
  },
  params: {
    version: 옵셔널값,
    ids: 옵셔널 배열타입 특정 노드들 배열로 가져오는듯,
    depth: 옵셔널number타입 값 깊이 지정, // 이 값을 통해 적절히 받아오면 될 듯 하다!
    plugin_data: 옵셔널 string
    branch_data: 옵셔널 불리언값
  }
}

// AxiosResponse
{
  document: {
    id, name, type, scrollBehavior, children
  },
  components: {
    컴포넌트ID: {key, name, description, remote, documentationLinks}
  },
  componentSets: {없어서 몰루},
  schemaVersion: 0,
  styles: {
    컴포넌트ID: {key, name, styleType, remote, description}
  }
  name: 플젝 이름,
  lastModified: 최근 수정,
  thumbnailUrl: 썸네일url 바로 나오는듯,
  version: 숫자,
  role: 역할,
  editorType: figma 고정인듯,
  linkAccess: 정해진 특정 몇 string인듯
}

2. 특정 노드 data fetch하기

• https://www.figma.com/file/:key/:title?node-id=:id
• 해당 요청은 프레임이든 뭐든 우클릭해서 copy/paste as에서 copy link로 복사해오면 된다.