프로세스

02. 프로세스 — Figma to Code

전체 흐름

[Figma 노드 선택]
       │
       ▼
[Figma to Code Plugin (플러그인 UI)]
       │  Figma Plugin API
       ▼
[노드 트리 분석 → 중간 표현(IR)]
       │
       ▼
[프레임워크별 코드 생성기]
       │  (Tailwind / Flutter / SwiftUI ...)
       ▼
[플러그인 패널에서 코드 출력]
       │
       ▼
[Copy → IDE 붙여넣기]
Plain Text
복사

단계별 처리

1) 노드 트리 수집

•

Figma Plugin API의 figma.currentPage.selection 활용

•

선택된 노드의 모든 자식 노드 재귀 탐색

•

각 노드의 속성 추출:

◦

위치/크기 (x, y, width, height)

◦

Auto Layout 정보 (방향, 간격, 패딩, 정렬)

◦

Fill / Stroke / Effect (색상, 그림자)

◦

Typography (폰트, 크기, 굵기, 정렬)

◦

Constraint (반응형 동작)

2) 중간 표현(Intermediate Representation) 생성

•

노드를 프레임워크 비종속적 트리로 변환

•

각 노드를 다음 중 하나로 분류:

◦

Container (Frame / Group)

◦

Text

◦

Image / Vector

◦

Shape (Rectangle / Ellipse)

•

Auto Layout → Flexbox 의도 변환

•

Constraint → 반응형 의도 변환

3) 프레임워크별 코드 생성

프레임워크	변환 규칙
Tailwind	IR → div + Tailwind 유틸리티 클래스
Flutter	IR → Column/Row/Container + Padding/Decoration
SwiftUI	IR → VStack/HStack + modifier 체인
HTML/CSS	IR → 시맨틱 태그 + class 기반 CSS

4) 색상/스타일 매핑

•

Tailwind 모드: 가장 가까운 Tailwind 색상 클래스로 매핑 (bg-blue-500 등)

◦

정확도 우선이면 Custom Color 모드로 전환 (bg-[#2563EB])

•

Flutter 모드: Color(0xFFXXXXXX) 형태

•

SwiftUI 모드: Color(red:..., green:..., blue:...) 또는 Asset Catalog

강점

•

결정적(Deterministic) — 같은 디자인 → 항상 같은 코드

•

AI 토큰 비용 0

•

다중 프레임워크 지원 — 모바일까지 커버

•

오프라인 동작 — 네트워크 불필요

한계

•

컴포넌트 시멘틱 추론 불가 — 모든 출력이 평탄한 div/Container 트리

◦

"이건 Button이다" 같은 의미 매핑은 사람/AI가 후처리

•

Props 추론 없음 — 정적 마크업 위주

•

상태/인터랙션 없음 — hover, onClick 등 수동 추가

•

디자인 시스템 토큰 매핑 약함 — 직접 hex 값 출력 위주

AI 도구와의 결합 패턴

Figma to Code로 Flutter/SwiftUI 초안 생성

Copilot 등 AI에 코드 붙여넣고:

이 코드를 의미 단위로 컴포넌트 분리하고,
props 추론해서 재사용 가능하게 리팩토링해줘.
디자인 토큰은 theme/tokens.dart 사용.
Plain Text
복사

AI가 정제 → 디자인 시스템에 통합

→ 결정적 변환 + AI 의미 추론의 하이브리드 워크플로