실습

04. 실습 — Figma to Code

목표

Figma to Code 플러그인을 설치하고, 같은 컴포넌트를 Tailwind / Flutter / SwiftUI 3가지로 변환해본다. 이후 AI로 후처리하여 재사용 가능한 컴포넌트로 만든다.

준비물

•

Figma 계정

•

Figma to Code 플러그인 설치 (Plugins → Manage → 검색)

•

VS Code + Copilot

•

Node.js 18+

•

(선택) Flutter SDK / Xcode — 결과물 직접 실행해보고 싶다면

실습 1단계 — 디자인 준비

Figma Community에서 무료 디자인 파일 1개 복제

Card / Button / Modal 같은 명확한 컴포넌트 1개 선택

체크: Auto Layout이 적용되어 있어야 결과 품질이 좋음

체크: 노드 트리가 깔끔히 정리되어 있음

실습 2단계 — Tailwind 변환

컴포넌트 선택 → Plugins → Figma to Code 실행

출력: Tailwind, JSX 모드 선택

색상 모드: Tailwind palette (가까운 색으로 매핑)

Copy → VS Code의 새 파일 practice/01-tailwind.tsx에 붙여넣기

체크: 디자인과 시각적으로 비슷한지 (브라우저 미리보기 또는 Tailwind Play https://play.tailwindcss.com/)

실습 3단계 — Flutter 변환

동일 컴포넌트 선택 (그대로)

플러그인 출력: Flutter

옵션: Material, Stateless

Copy → practice/02-flutter.dart

체크: Flutter SDK 있다면 flutter create 후 위젯에 붙여 실행

실습 4단계 — SwiftUI 변환

플러그인 출력: SwiftUI

Copy → practice/03-swiftui.swift

체크: 코드 구조가 VStack/HStack 기반인지

실습 5단계 — Custom Color 모드 비교

플러그인에서 Color: Custom (hex) 모드로 변경

Tailwind 다시 변환 → practice/04-tailwind-customcolor.tsx

두 결과 비교

•

Tailwind palette: 일관성 ↑, 정확도 ↓

•

Custom hex: 정확도 ↑, 디자인 시스템 일치 ↓

체크: 어떤 모드가 우리 프로젝트에 맞는지 의사결정

실습 6단계 — AI 후처리 (재사용 컴포넌트화)

Copilot에 practice/01-tailwind.tsx 열고:

이 정적 마크업을 React 컴포넌트로 리팩토링해줘.
- 적절한 props 추론 (name, description, image 등)
- TypeScript 타입 정의
- src/components/Card.tsx 로 저장
- hex 색상이 있으면 인라인 그대로 유지
Plain Text
복사

체크: Props 받는 재사용 컴포넌트로 변환 완료

실습 7단계 — 디자인 토큰 치환

Copilot:

이 파일의 hex 색상들을 tailwind.config.js의 theme.extend로 등록하고,
컴포넌트는 토큰 이름(bg-brand-500 등)을 사용하도록 수정해줘.
Plain Text
복사

체크:

•

tailwind.config.js에 색상 토큰 등록

•

컴포넌트에서 hex 사라짐

실습 8단계 — 다른 도구와 비교

같은 컴포넌트를 다음 3가지 방식으로 변환하고 결과 비교:

Figma to Code (Tailwind JSX)

공식 Figma MCP (Copilot 채팅)

Framelink MCP (URL 기반)

비교 항목:

•

코드 품질 / 가독성

•

디자인 정확도

•

컴포넌트 분리 정도

•

디자인 토큰 활용도

•

작업 시간

회고 체크리스트

어떤 도구가 어떤 상황에 적합한지 정리됐는가?

AI + 결정적 변환의 하이브리드 워크플로의 장점은?

디자인 토큰 매핑이 가장 잘 되는 도구는?

Flutter/SwiftUI까지 필요한 프로젝트라면 어떤 도구 조합이 최적인가?