코드 → Figma 시안

코드로 작성한 화면을 Figma 시안으로 생성할 때 create·render를 사용합니다. 생성된 시안은 Figma에서 그대로 수정할 수 있습니다. 먼저 설치를 마친 뒤 ids-use launch로 Figma를 켜 두세요.

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

1. 컴포넌트 하나 생성하기

1. 시안 생성 (create)

   create로 컴포넌트 하나를 시안으로 생성합니다. --props로 값을 지정합니다.

   bash

   ids-use create checkbox --props '{"labelText":"약관 동의","size":"md"}'

   

2. 페이지 전체 생성하기

render로 페이지(TSX) 전체를 시안으로 생성합니다. 컴포넌트 하나보다 신경 쓸 것이 많아, 아래 순서로 진행합니다.

1. 사용할 수 있는 요소 확인 (cheatsheet)

   render에서 사용할 수 있는 태그·prop·<Text variant>·토큰을 한 화면에 보여줍니다. 여기에 없는 것은 생성할 수 없습니다.

   bash

   ids-use cheatsheet

2. 생성 전에 미리 검사 (--dry)

   Figma에 반영하지 않고 코드만 점검합니다. New IDS에 없는 이름은 경고와 함께 빠지고, 이런 유실 경고가 있으면 render가 기본적으로 중단됩니다. 확인한 뒤 그대로 진행하려면 --force를 붙입니다. (레이아웃 관련 경고는 배치 의도만 확인하면 되고, render를 중단시키지 않습니다.) 경고 코드별 원인·해결은 Figma 작성 규칙에 정리돼 있습니다.

   bash

   ids-use render --file page.tsx --dry

3. 시안 생성 (render)

   점검이 끝나면 실제로 생성합니다. 컴포넌트·import가 많아 빌드가 오래 걸리면 기본 대기 시간(180초)을 넘겨 실패할 수 있으니, 그럴 때는 --timeout(초)으로 늘려 주세요.

   bash

   ids-use render --file page.tsx --timeout 600

3. 확인하고 다듬기

생성된 시안은 현재 열려 있는 Figma 파일에 들어갑니다.
위치·텍스트 등은 Figma에서 바로 수정하면 되고, 값만 바꾸고 싶을 때는 update를 사용합니다.

1. 생성된 결과를 이미지로 저장 (screenshot)

   bash

   # 생성된 결과를 이미지로 저장 (눈으로 확인)
   ids-use screenshot <노드 ID> --out result.png

2. ids-use로 생성된 시안 수정 (update)

   bash

   # 이미 있는 인스턴스의 값만 수정
   ids-use update <노드 ID> checkbox --props '{"size":"lg"}'

   <노드 ID>는 create·render를 실행하면 결과로 함께 출력됩니다.

4. 유의사항

사용할 수 있는 컴포넌트를 찾으려면 ids-use list로 전체 목록을 보거나 ids-use search 체크박스, ids-use search 선택, ids-use search 동의처럼 키워드로 검색하면 됩니다(한글·영문 모두 지원).

자동 변환이 되지 않는 컴포넌트는 지원 컴포넌트 & 생성 결과를 참고하세요.