지원 컴포넌트 & 생성 결과

ids-use가 무엇을 자동 변환하고, export가 어떤 코드를 만드는지 정리했습니다.

1. 지원 목록 확인

이 문서는 분류 기준을 설명합니다. 실제 목록은 수동으로 관리하지 않으며, defs/가 단일 소스이고 아래 명령이 이를 그대로 읽어 옵니다.

ids-use list              # def가 등록된 컴포넌트 전체
ids-use search <키워드>    # 이름으로 찾기
ids-use get <comp>        # 해당 컴포넌트의 props·슬롯 상세

AI(MCP)로 연결했다면 list_components·search_components·get_component 도구가 같은 일을 합니다.

이 문서 아래쪽 5. 지원 컴포넌트 목록에서 같은 목록을 표로 검색해 볼 수도 있습니다.

2. 자동화 분류

Figma가 담는 것은 구조와 스타일, 담지 않는 것은 데이터와 행동·로직(함수·데이터 배열·콜백)입니다. 이 경계가 자동화 가능 여부를 가릅니다.

선언형: 완전 자동

• 무엇: 화면에 보이는 것이 곧 JSX prop·children·slot인 컴포넌트입니다.
• 지원: create·export·update·render를 모두 지원하고 CDP 왕복 검증까지 통과합니다.
• 대상: button·checkbox·chip·dialog·input·select·popover·tooltip 등 대부분의 DS 컴포넌트. compound(tab·toggleButton·boxTab·treeListItem 등 슬롯에 반복 아이템을 조립하는 부류)도 같은 def 체계로 슬롯을 수집해 조립합니다.

명령형·데이터: 스캐폴드로 핸드오프

• 무엇: data·columns·filter 함수·toast.warning() 같은 런타임 코드를 받는 컴포넌트입니다.
• 자동이 안 되는 이유: Figma에는 그 런타임 정보가 없어 완성 코드를 만들 수 없습니다.
• 대신 하는 것: ids-use reference <comp>가 스캐폴드 + API 요약을 내고, export는 <Table/>과 레퍼런스 포인터 주석을 생성합니다.
• 대상: Table(TanStack data·columns), Combobox(ark-ui filter·async), Toast·dialogConfirm(명령형 호출), DatePicker·TimeField(value·onChange 런타임)

def 대상 아님

• 무엇: 자동 변환 def를 만들지 않는 부류입니다.
• 대상:

아이콘·그래픽은 컴포넌트 변환(def)이 아니라 카탈로그로 관리되는 별도 자산입니다. Figma에서 컴포넌트의 아이콘 자리를 instance swap(인스턴스 교체)으로 원하는 자산으로 바꾸면, export가 @mildang/icons·@mildang/graphics에서 자동으로 import합니다. 쓸 수 있는 전체 목록은 아이콘 · 그래픽 갤러리에서 확인하세요.

3. 생성 결과

export가 만드는 코드의 형태를 알아 두면, 생성 후 무엇을 손봐야 하는지 빠르게 판단할 수 있습니다.

// Figma의 Button 인스턴스 → 자동 변환
import { Button } from '@mildang/design-system/Button';

<Button variant="primary" size="md">저장하기</Button>

import { css } from '@mildang/styled-system/css';

<div className={css({ display: 'flex', gap: '8', p: '16' })}>…</div>

생성 후 체크리스트

아래 항목을 하나씩 확인해 보세요.

• import 경로가 올바른지 확인
• 불필요한 중첩 div 제거
• 필요 시 반응형 스타일 추가
• 이벤트 핸들러·상태 관리 로직 추가

4. 새 컴포넌트 매핑 추가

어떤 컴포넌트가 DS 컴포넌트로 변환되지 않고 매번 일반 HTML로 생성된다면(3. 생성 결과의 "매핑 없는 노드 폴백" 참고), def를 추가해 자동 변환 대상으로 만들 수 있습니다.

새 컴포넌트 지원은 @mildang/figma core의 defs/에 def 하나를 추가하는 일입니다. def를 등록하면 create·export·update·render가 한 번에 인식하고, 왕복 검증(roundtrip)으로 확인합니다. 구체적인 파일 위치·명령어는 아래를 따르세요.

• 상세 절차: def 정의 파일 위치와 등록 방법, 검증까지 단계별로 안내합니다. packages/figma/ids-use/CLAUDE.md의 "새 컴포넌트·변환 추가하기" 표를 보세요.
• 요약 절차: 위 과정을 짧게 정리한 체크리스트입니다. /figma-mapping 스킬(.agents/skills/figma-mapping/SKILL.md)에 있습니다.

5. 지원 컴포넌트 목록

현재 publish 스냅샷 기준으로 자동 변환되는 컴포넌트입니다. 이름·용도·주요 props로 검색할 수 있습니다.