ids-use 소개

ids-use는 Figma 시안과 밀당 디자인시스템(DS) 코드를 양방향으로 변환하는 도구입니다.
Figma에서 그린 화면을 React + Panda CSS 코드로 추출하고, 반대로 코드를 Figma 시안으로 그려 넣습니다.

1. 무엇을 하나요

export는 Figma 시안을 코드로 추출하고, create·render는 코드를 Figma 시안으로 그립니다.

예를 들어 Figma의 체크박스 인스턴스를 ids-use export 하면 <Checkbox size="md" /> 코드가 되고, 반대로 그 코드를 create 하면 Figma에 체크박스 시안이 그려집니다.

터미널에서 명령어를 직접 입력할 수도 있고, MCP를 사용하면 Cursor·Claude 같은 AI에 연결해 "이 시안 코드로 뽑아줘"처럼 자연어로 요청할 수도 있습니다.

2. 언제 쓰나요

① Figma 시안으로 개발 시작 개발자
 완성된 Figma 시안을 export해 React + Panda 코드로 바로 구현을 시작합니다.

② Figma 시안이 없는 화면 개발 개발자
 아직 디자인 시안이 없는 화면도, 개발자가 기다리지 않고 AI(MCP)로 바로 코드부터 개발합니다.

③ Figma 시안 없이 개발된 화면 공유 개발자디자이너
 디자인 시안 없이 코드로 먼저 개발된 화면을, render로 Figma 시안으로 그려 디자이너에게 공유해 컨펌받습니다.

④ 디자이너가 새 화면을 빠르게 초안 디자이너
 컴포넌트를 손으로 배치하는 대신 AI로 초안을 받아(create·render), 그 위에서 레이아웃과 디테일을 다듬습니다.

3. 시작하기

ids-use를 처음 사용하신다면 설치부터 하세요. 한 번만 세팅을 하시면, 그다음부터는 명령어 한 줄로 사용하실 수 있습니다.

준비를 마쳤다면 원하는 방향으로 시작하세요.

• Figma 시안 → 코드 (export)
• 코드 → Figma 시안 (create · render)