Figma에서 Claude Code까지: 디자이너를 위한 플레이북

1┌─────────────────────────────────────────────────────────────────────────┐
2│                                                                         │
3│   이전 (인계 지옥)                      이후 (바이브 코딩)              │
4│   ────────────────                      ───────────────                 │
5│                                                                         │
6│   디자인                               디자인                           │
7│      ↓                                    ↓                             │
8│   스펙 문서                             Claude가 Figma를 직접 읽음      │
9│      ↓                                    ↓                             │
10│   개발자가 해석                         프롬프트: "이걸 만들어줘"       │
11│      ↓                                    ↓                             │
12│   검토                                 프로덕션 코드                    │
13│      ↓                                    ↓                             │
14│   피드백 루프 ×10                      출시 🚀                          │
15│      ↓                                                                  │
16│   "일단 비슷하게"                      소요 시간: 몇 분                 │
17│                                                                         │
18│   소요 시간: 몇 주                                                      │
19│                                                                         │
20└─────────────────────────────────────────────────────────────────────────┘

1Figma.com → 프로필 클릭 (좌측 상단) → 설정 → 보안
2→ 개인 액세스 토큰 → 새 토큰 생성 → 즉시 복사

1claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx

1Claude Code에서 다음을 입력: /mcp
2다음이 표시되어야 함: figma ✓ 연결됨

1┌─────────────────────────────────────────────────────────────────────────┐
2│                         당신의 FIGMA 파일                                │
3├─────────────────────────────────────────────────────────────────────────┤
4│                                                                         │
5│   ┌─────────────────────────────────────────────────────────────────┐   │
6│   │  CLAUDE가 읽을 수 있는 것                                       │   │
7│   ├─────────────────────────────────────────────────────────────────┤   │
8│   │  ✓ 레이어 이름 및 계층 구조    ✓ Auto Layout 설정              │   │
9│   │  ✓ 색상 (칠, 선)              ✓ 컴포넌트 변형                  │   │
10│   │  ✓ 타이포그래피 스타일        ✓ 간격 및 패딩                   │   │
11│   │  ✓ 효과 (그림자, 블러)        ✓ 제약 조건                      │   │
12│   │  ✓ 디자인 토큰/변수           ✓ 텍스트 콘텐츠                  │   │
13│   └─────────────────────────────────────────────────────────────────┘   │
14│                                                                         │
15│   ┌─────────────────────────────────────────────────────────────────┐   │
16│   │  CLAUDE가 읽을 수 없는 것                                       │   │
17│   ├─────────────────────────────────────────────────────────────────┤   │
18│   │  ✗ 실제 이미지 픽셀          ✗ 프로토타입 인터랙션            │   │
19│   │  ✗ 댓글 및 피드백            ✗ 버전 기록                      │   │
20│   └─────────────────────────────────────────────────────────────────┘   │
21│                                                                         │
22└─────────────────────────────────────────────────────────────────────────┘

1다음에 있는 내 Figma 디자인을 읽어줘:
2https://www.figma.com/design/[YOUR-FILE-ID]/[FILE-NAME]
3
4다음을 알려줘:
51. 페이지 구조 개요
62. 주요 섹션 목록
73. 사용 중인 색상 팔레트
84. 타이포그래피 스타일
95. 식별 가능한 컴포넌트

1Figma 파일에서 다음을 추출하고 생성해줘:
2
31. 다음을 포함하는 Tailwind 설정:
4   - 디자인과 일치하는 사용자 정의 색상
5   - 글꼴 패밀리 및 크기
6   - 보이는 내용 기반 간격 스케일
7
82. 백업용 CSS 변수 파일
9
10색상은 의미론적 이름(primary, secondary, accent, neutral)으로 포맷팅해줘.

1내 Figma 파일에 있는 [COMPONENT NAME]을 봐줘.
2
3다음을 충족하는 React 컴포넌트를 생성해줘:
4- 정확한 스타일(색상, 간격, 타이포그래피) 일치
5- Tailwind CSS 사용
6- 내가 정의한 모든 변형 지원 (있는 경우)
7- TypeScript로 완전한 타입 지정
8- 디자인 기반 hover/focus 상태 포함

1내 Figma 디자인에서 [SECTION NAME] 섹션을 생성해줘.
2
3요구 사항:
4- 디자인과 정확히 일치
5- 반응형으로 제작:
6  - 모바일 (<768px): [레이아웃 설명]
7  - 데스크탑 (≥768px): [레이아웃 설명]
8- 의미론적 HTML 사용 (section, nav, main, article)
9- 디자인에 있는 모든 텍스트 콘텐츠 포함

1┌─────────────────────────────────────────────────────────────────────────┐
2│                           MCP 작동 방식                                 │
3└───────────────────────────────┬─────────────────────────────────────────┘
4                                │
5        ┌───────────────────────┼───────────────────────┐
6        ▼                       ▼                       ▼
7┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
8│  FIGMA 디자인     │  │     FIGJAM        │  │   FIGMA MAKE      │
9│  ─────────────    │  │  ─────────────    │  │  ─────────────    │
10│                   │  │                   │  │                   │
11│  디자인 파일      │  │  와이어프레임 &   │  │  AI 생성 UI       │
12│  → 프로덕션       │  │  사용자 흐름 →    │  │  → 코드베이스에   │
13│  코드             │  │  작동하는 앱      │  │  주입             │
14│                   │  │                   │  │                   │
15│  ⭐ 가장 많이 사용 │  │  🎯 강력함        │  │  ⚡ 가장 빠름     │
16└───────────────────┘  └───────────────────┘  └───────────────────┘
17        │                       │                       │
18        ▼                       ▼                       ▼
19┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
20│ "이 Figma 디자인  │  │ "내 사용자 흐름   │  │ "이 Make 디자인을 │
21│ 에서 랜딩 페이지  │  │ 을 읽고 Next.js   │  │ 내 기존 포트폴리오│
22│ 를 만들어줘"      │  │ 라우트 구조를     │  │ 앱에 추가해줘"    │
23│                   │  │ 만들어줘"         │  │                   │
24└───────────────────┘  └───────────────────┘  └───────────────────┘

1STEP 1                    STEP 2                    STEP 3
2───────────────────────────────────────────────────────────────────
3"내 디자인 시스템         "기본 컴포넌트 생성:       "이 컴포넌트들을
4파일을 읽고 모든         Button, Card, Input,       사용해서 홈페이지
5토큰을 추출해줘"        Badge"                     구축"
6        │                        │                        │
7        └────────────────────────┴────────────────────────┘
8                                 │
9                                 ▼
10                    STEP 4: 페이지를 하나씩 추가
11                    "이제 가격 페이지를 만들어줘"
12                    "이제 회사 소개 페이지를 만들어줘"

1"[URL]을 읽고, 토큰을 추출하고, 모든 섹션으로 전체 페이지를 생성하고,
2반응형으로 만들고, Next.js + Tailwind를 사용해줘. 시작."
3
4     ┌──────────────────────────────────────────────────────────┐
5     │  ⚠️  Figma 파일이 적절한 이름 지정과 Auto Layout으로     │
6     │     잘 정리되어 있을 때 가장 잘 작동합니다               │
7     └──────────────────────────────────────────────────────────┘

1┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
2│ 토큰    │ → │ 원자    │ → │ 분자    │ → │ 섹션    │ → │ 페이지  │
3│ (색상,  │    │ (버튼,  │    │ (카드,  │    │ (히어로,│    │ (전체   │
4│ 글꼴)  │    │ 입력)   │    │ 내비)   │    │ 푸터)   │    │ 페이지) │
5└─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

1┌─────────────────────────────────────────────────────────────────────────┐
2│  이름 지정                                                              │
3│  [ ] 레이어는 의미론적 이름 사용   hero-section ✓   Frame 427 ✗        │
4│  [ ] 컴포넌트는 명확하게 명명     Button/Primary ✓  Component 1 ✗     │
5│  [ ] 변형에는 설명적인 속성 사용  size=lg ✓        variant=2 ✗        │
6├─────────────────────────────────────────────────────────────────────────┤
7│  구조                                                                   │
8│  [ ] 모든 컨테이너에 Auto Layout  Flexbox 준비 완료 ✓  절대 위치 난장판 ✗│
9│  [ ] 평평한 계층 구조 (최소 중첩) 깔끔한 DOM ✓      Div 수프 ✗        │
10│  [ ] 섹션이 명확하게 분리됨       쉬운 파싱 ✓       혼란 ✗            │
11├─────────────────────────────────────────────────────────────────────────┤
12│  토큰                                                                   │
13│  [ ] 색상이 스타일로 정의됨      추출 가능 ✓      하드코딩 ✗          │
14│  [ ] 타이포그래피가 텍스트 스타일로 정의  일관됨 ✓     무작위 ✗       │
15│  [ ] 간격이 일관됨               체계적 ✓         임의적 ✗            │
16└─────────────────────────────────────────────────────────────────────────┘

11. 레이어 이름을 CSS 클래스처럼 지정하세요
2   nav-links ✓    Group 5 ✗
3
42. 섹션별로 작업하세요
5   히어로 → 기능 → 사용후기 → 푸터
6   (한 번에 전체 페이지를 요청하지 마세요)
7
83. Figma를 직접 참조하세요
9   "기능 섹션에 있는 카드를 봐줘"
10   (아님: "둥근 모서리가 있는 카드를 만들어줘")
11
124. 먼저 에셋을 내보내세요
13   이미지는 수동 내보내기 필요 → /public 폴더
14   그런 다음 Claude에게: "히어로 이미지는 /public/hero.png에 있어"
15
165. 사용 스택을 미리 알려주세요
17   "Next.js 14 + Tailwind + TypeScript를 사용하고 있어"
18   (Claude가 당신의 컨벤션에 맞출 것입니다)

1내 Figma 디자인을 코드로 변환하고 싶어.
2
3Figma URL: [URL 붙여넣기]
4
5스택: Next.js 14 + Tailwind CSS + TypeScript
6
7다음을 해줘:
81. 먼저 디자인을 분석하고 무엇이 보이는지 알려줘
92. 색상 팔레트를 추출하고 Tailwind 설정을 만들어줘
103. 그럼 내가 어떤 섹션을 먼저 구축할지 알려줄게
11
12단계별로 진행하자.