Figma 시안 → 코드

Figma 시안을 밀당 DS의 React 코드로 변환할 때 export를 사용합니다. 먼저 설치를 마친 뒤 ids-use launch로 Figma를 켜 두세요.

이 문서는 터미널(CLI)로 쓰는 방법입니다. 명령어 대신 AI에게 자연어로 요청하려면 채팅으로 쓰기 (MCP)를 참고하세요.

1. 변환할 대상 지정

   다음 두 방법 중 하나를 사용합니다.

   ① Figma에서 프레임·컴포넌트를 클릭해 선택
   ② 프레임·컴포넌트를 우클릭 → Copy link to selection(선택 항목 링크 복사) 으로 링크 복사

2. export로 코드 추출

   React + Panda 파일로 저장되며, 이미지·벡터는 assets/에 자동으로 포함됩니다.

   ① 프레임·컴포넌트를 선택한 경우: 그대로 실행

   bash

   ids-use export --component MyForm --out ./MyForm.tsx

   ② 링크를 복사한 경우: 링크를 인자로 붙이기

   bash

   ids-use export "https://figma.com/design/…?node-id=40783-206169" \
     --component MyForm --out ./MyForm.tsx

   • --component <이름> 지정한 이름의 완결된 컴포넌트(export function <이름>() {…})로 감쌉니다. 생략하면 JSX 조각만 생성됩니다.
   • --out <경로> 파일로 저장하고, 이미지·벡터를 assets/에 내려받아 import까지 연결합니다. 생략하면 화면에 출력됩니다.

   MyForm·./MyForm.tsx는 예시입니다. 원하는 이름과 경로로 바꿔 쓰세요.

3. 직접 해보기 — 테스트 시안

   연습용 Test 시안 파일 열기 → 좌측 패널의 Layers(레이어)에서 코드생성테스트-1 노드를 아래 그림처럼 클릭해 선택하고 export를 실행해 보세요.

   

   bash

   # 위처럼 노드를 선택한 뒤 실행
   # --out 은 원하는 경로로 (상대경로는 지금 터미널이 있는 폴더 기준)
   ids-use export --component TestForm --out <원하는 경로>/TestForm.tsx

추출 결과가 비거나 어긋난다면, 대개 시안이 변환 규칙을 벗어난 경우입니다(컴포넌트 detach, 도형으로 그리기, raw 값 등).

원인·해결은 Figma 작성 규칙을 참고하세요.