계속 추가 중…

참고하면 좋은 피그마 공식 레포지토리 주소: https://github.com/figma/sds/blob/main/figma.config.json

코드와 피그마 사이의 간격 줄이기

결국 피그마 코드 커넥트는 피그마에 작성된 내용을 기반으로 코드가 생성되는 것이기 때문에 디자인 시스템 코드 구현과 피그마에서의 구현이 최대한 일치하는 것이 좋다. 하지만 피그마는 개발자가 컴포넌트를 작성하는 것처럼 동작하지 않기에 충분한 커뮤니케이션을 하며 맞춰나가야한다.

• 특정 prop이 다양한 enum을 가질 수 있을 때, 피그마에서 그걸 구현하려면 n개만큼의 경우의 수가 추가되어야한다. 케이스가 prop a가 3개 b가 6개라면 18개의 경우의 수가 추가되어야한다.
• 특정 prop이 선택적으로 들어가야하는 경우, figma.boolean을 사용하면 이 분기를 코드 커넥트상에서 나타낼 수 있다.

figma.connect(Avatar, '<FIGMA_Avatar>', {
  props: {
    ...
    src: figma.boolean('hasSrc', {
      true: '여기에 이미지 주소를 입력하세요',
      false: undefined,
    }),
  },
  example: ({ children, ...props }) => <Avatar {...props}>{children}</Avatar>,
});

위처럼 작성하면 피그마에서 hasSrc 프로퍼티가 true일 때만 src 프로퍼티가 보여진다.

Use AI for prop mapping

피그마의 AI 플랜을 포함한 엔터프라이즈 멤버쉽을 사용하고 있는 경우, npx figma connect 사용시 AI로 props 매핑해주는 기능을 쓸 수 있다.

importPaths

figma connect publish를 통해 dev mode에 코드가 보여질 때 import 경로를 변경할 수 있음 원래는 Button.figma.tsx에 하드코딩된 경로를 보여준다.

import Button from "../src/components/Button"
<Button>
    ...
</Button>

figma.config.json에 설정을 적용하여

{
  "codeConnect": {
    "importPaths": {
      "src/*": "@shared/ds-react"
    },
    ...
  }
}

아래처럼 변경할 수 있다.

import Button from "@shared/ds-react"
<Button>
    ...
</Button>

imports

importsPaths를 사용해 원하는 결과를 얻을 수 없을 때, 강제로 덮어쓰는 용도로 사용하면 좋다.

figma.connect(Button, "https://...", {
  imports: ["import { Button } from '@lib'"]
})

documenturlsubstitutions

피그마에서 재사용 가능한 노드는 URL이 존재하는데, 이를 코드에 하드코딩하게되면 디자인 시안상에서의 노드변화가 있을 때 코드에 영향이 많이 갈 수 있다. 이를 방지할 수 있도록 figma 노드 URL을 변수로써 다룰 수 있게 해준다.

"documentUrlSubstitutions": {
  "<FIGMA_ICONS_BASE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi",
}

figma.connect(Icon, '<FIGMA_ICONS_BASE>', {
  ...
})