Claude Desktop + Figma Desktop양방향 디자인 워크플로우

2026년 4월 가이드

Claude Desktop + Figma Desktop
양방향 디자인 워크플로우

MCP 서버 설정부터 디자인 생성, 코드 변환까지 — 완전 가이드

📑 목차

1. 이게 뭔데? — 전체 그림
2. 사전 준비물 체크리스트
3. Figma Desktop MCP 서버 설정
4. Claude Desktop에서 MCP 연결
5. 워크플로우 A — Claude로 Figma에 디자인 만들기
6. 워크플로우 B — Figma 디자인을 코드로 변환
7. 풀 사이클 양방향 워크플로우
8. Figma Skills 총정리
9. 프로 팁 & 안티패턴
10. 트러블슈팅 & FAQ

1. 이게 뭔데? — 전체 그림

Claude Desktop의 Code 탭과 Figma Desktop 앱을 MCP(Model Context Protocol)로 연결하면, AI가 Figma 파일을 직접 읽고 쓸 수 있게 된다.

"스크린샷 찍어서 붙여넣기" 같은 게 아니다. Claude가 Figma의 레이어 구조, 변수, 컴포넌트 속성, Auto Layout 설정까지 구조화된 데이터로 인식한다.

💡 핵심 개념

방향 1 (Code → Figma) : Claude가 Figma 캔버스에 직접 디자인 요소를 생성
방향 2 (Figma → Code) : Figma의 디자인을 Claude가 읽어서 프로덕션 코드로 변환

이 두 방향이 합쳐져서 양방향 순환 워크플로우가 완성된다.

# 전체 흐름도

Claude Desktop (Code 탭)
    ↕ MCP 연결
Figma Desktop
    ↓
[Write to Canvas] Claude → Figma에 디자인 토큰/컴포넌트/화면 생성
[Read Design]     Figma → Claude가 디자인 읽어서 코드 생성
[Code to Canvas] 코드로 만든 UI → 다시 Figma로 캡처
    ↓
프로젝트에 적용 (React/Next.js/Vue 등)

2. 사전 준비물 체크리스트

항목	요구사항	비고
Claude Desktop	v1.2581.0 이상	claude.com/download
Claude 요금제	Pro($20/월) 이상	Code 탭은 Pro부터 사용 가능
Figma Desktop	최신 버전	figma.com/downloads
Figma 계정	유료 Full seat (쓰기) 또는 Dev seat (읽기전용)	Write to Canvas는 Full seat 필수
OS	macOS (Apple Silicon 권장) 또는 Windows 10+	Intel Mac은 Cowork 불가

3. Figma Desktop MCP 서버 설정

Figma Desktop 앱에서 MCP 서버를 활성화해야 한다. 이게 "Figma가 외부 AI 도구와 통신할 수 있는 문"을 여는 것이다.

✅ STEP BY STEP

Step 1 — Figma Desktop 앱 실행

Figma Design 파일을 하나 연다. (아무 파일이나 OK)

Step 2 — Dev Mode 진입

캔버스에서 아무것도 선택하지 않은 상태에서, 상단 툴바의 토글 스위치를 클릭하여 Dev Mode로 전환한다.

Step 3 — MCP 서버 활성화

우측 사이드바에서 MCP 서버 토글을 켠다. 화면 하단에 "MCP server is enabled and running" 확인 메시지가 나타난다.

Step 4 — URL 복사

Copy URL 버튼을 클릭한다. 기본값은 http://127.0.0.1:3845/mcp이다. 다음 단계에서 사용하므로 복사해 둔다.

⚠️ 주의

Figma Desktop 앱이 열려있고 MCP 서버가 켜진 상태를 유지해야 한다. 앱을 닫으면 MCP 연결이 끊긴다. 또한 작업할 Figma 파일이 열려 있어야 Claude가 해당 파일에 접근할 수 있다.

4. Claude Desktop에서 MCP 연결

이제 Claude Desktop 쪽에서 "Figma에 연결하겠다"고 설정해야 한다. 두 가지 방법이 있다.

방법 A — Desktop MCP (로컬 연결) ⭐ 추천

Figma Desktop 앱과 직접 통신하는 방식. Figma 앱이 열려 있으면 바로 작동한다.

Step 1 — Claude Desktop에서 Code 탭 진입

좌측 상단 아이콘 호버 → Code 탭 선택 → 세션 시작 (Local 환경, 작업 폴더 지정)

Step 2 — 통합 터미널에서 MCP 추가

Code 탭의 터미널 패널을 열고 (Ctrl + `) 아래 명령어를 입력한다:

# Figma Desktop MCP 서버를 Claude에 등록
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Step 3 — Claude Desktop 재시작

설정 변경이 반영되도록 앱을 재시작한다.

Step 4 — 연결 확인

Code 탭의 채팅 패널에서 /mcp를 입력한다. figma-desktop ✓ connected가 보이면 성공.

방법 B — Remote MCP (Figma 클라우드 연결)

Figma Desktop 앱이 없어도 되는 방식. 더 넓은 기능을 지원하지만 별도 인증이 필요하다.

Step 1 — Figma 플러그인 설치

Code 탭 터미널에서:

claude plugin install figma@claude-plugins-official

Step 2 — 인증

/plugin 입력 → Installed 탭 → figma 선택 → Enter → 브라우저에서 "Allow access" 클릭

Step 3 — 확인

/plugin 다시 입력 → Installed 탭에서 figma가 connected로 표시되면 완료.

비교	방법 A (Desktop MCP)	방법 B (Remote MCP)
Figma 앱 필수?	✅ 열려 있어야 함	❌ 없어도 됨
인증 방식	로컬 HTTP 연결	OAuth (브라우저)
기능 범위	열린 파일만 접근	모든 파일 접근 가능
Skills 포함?	❌ 수동 설치 필요	✅ 자동 포함
Write to Canvas	✅	✅
추천 대상	기업/보안이 중요한 환경	일반 사용자 (더 편리)

💡 팁

두 방법을 동시에 설정해도 된다. Figma Desktop 앱이 열려 있으면 Desktop MCP가 작동하고, 닫혀 있으면 Remote MCP를 통해 접근하는 방식으로 유연하게 사용할 수 있다.

5. 워크플로우 A — Claude로 Figma에 디자인 만들기

Claude가 Figma 캔버스에 직접 디자인 요소를 생성하는 흐름이다. figma-use (Write to Canvas) 기능을 통해 Figma Plugin API를 실행하여 편집 가능한 네이티브 Figma 콘텐츠를 만든다.

STEP 1 — 새 Figma 파일 생성

Claude Desktop Code 탭에서 프롬프트:

새 Figma 디자인 파일을 만들어줘. 이름은 "My Design System"으로.

→ Claude가 figma-create-new-file 스킬을 사용하여 Figma 파일을 생성하고 링크를 반환한다.

STEP 2 — 디자인 토큰(변수) 자동 생성

Claude Desktop Code 탭에서 프롬프트:

이 Figma 파일에 디자인 시스템을 만들어줘: [Figma 파일 URL] 다음을 생성해줘: 1. Color 변수 컬렉션 (Primary, Secondary, Neutral, Semantic) - Light 모드와 Dark 모드 포함 2. Spacing 변수 (4px 단위: 4, 8, 12, 16, 20, 24, 32, 48, 64) 3. Typography 스타일 (Heading 1~6, Body, Caption) 4. Border Radius 변수 (sm, md, lg, xl, full) 5. Shadow 효과 스타일 (sm, md, lg)

→ Claude가 figma-use로 Figma Variables, 스타일, 프레임을 캔버스에 직접 생성한다. 첫 번째 영상에서 변수 200개를 자동으로 만든 것이 바로 이 과정이다.

STEP 3 — 컴포넌트 라이브러리 자동 생성

이 Figma 파일을 사용해서: [Figma 파일 URL] 위에서 만든 변수를 활용하여 컴포넌트 라이브러리를 만들어줘: - Button (Primary, Secondary, Ghost / sm, md, lg) - Input (Default, Error, Disabled) - Card (기본형, 이미지형) - Badge (Info, Success, Warning, Error) 각 컴포넌트는: - Auto Layout 적용 - 위에서 만든 Variables 바인딩 - Variants로 구성

STEP 4 — 전체 화면 디자인 생성

이 Figma 파일에: [Figma 파일 URL] 대시보드 페이지를 디자인해줘. - 기존에 만든 디자인 시스템 컴포넌트를 활용 - Header, Sidebar, Main Content 영역 구성 - MetricCard 4개, DataTable 1개, Chart 영역 포함 - 반응형: Desktop(1440px), Tablet(768px), Mobile(375px)

# Claude가 Figma 캔버스에서 할 수 있는 것
✓ 프레임, 컴포넌트, 변형(Variants) 생성
✓ Variables (변수) 생성 및 바인딩
✓ Auto Layout 설정
✓ 텍스트/색상/효과 스타일 생성
✓ 기존 라이브러리 컴포넌트 인스턴스 배치

# 아직 못 하는 것 (베타 제한)
✗ 이미지/비디오 에셋 삽입
✗ 커스텀 폰트 적용
✗ 호출당 20KB 응답 제한 → 큰 작업은 나눠서 진행

6. 워크플로우 B — Figma 디자인을 코드로 변환

이미 Figma에 있는 디자인을 Claude가 읽어서 프로덕션 코드로 변환하는 흐름이다. 두 번째 영상의 핵심 내용.

# Claude가 Figma에서 읽을 수 있는 것
✓ 레이어 이름 & 계층 구조   ✓ Auto Layout 설정
✓ 색상 (fills, strokes)     ✓ 컴포넌트 Variants
✓ 타이포그래피 스타일      ✓ 스페이싱 & 패딩
✓ 효과 (그림자, 블러)      ✓ 제약 조건(Constraints)
✓ 디자인 토큰/변수        ✓ 텍스트 콘텐츠

# 읽을 수 없는 것
✗ 실제 이미지 픽셀        ✗ 프로토타입 인터랙션
✗ 댓글 & 피드백           ✗ 버전 히스토리

PHASE 1 — 디자인 분석

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

PHASE 2 — 디자인 토큰 추출 → Tailwind 설정

Figma 파일에서 디자인 토큰을 추출해서: 1. Tailwind config 생성: - 디자인에 맞는 커스텀 색상 - 폰트 패밀리와 사이즈 - 스페이싱 스케일 2. CSS 변수 파일도 백업용으로 생성 색상은 시맨틱 이름으로 (primary, secondary, accent, neutral)

PHASE 3 — 컴포넌트 단위 구현

내 Figma 파일의 "Button/Primary" 컴포넌트를 보고: [Figma 프레임 URL] React + TypeScript 컴포넌트로 구현해줘. - Tailwind CSS 사용, Figma 변수를 디자인 토큰에 매핑 - Figma에 정의된 모든 Variants 지원 - hover/focus/disabled 상태 포함 - Figma Auto Layout에 맞는 반응형 처리

PHASE 4 — 섹션별 페이지 구현

# ❌ 이렇게 하지 말 것 "전체 페이지를 한 번에 만들어줘" # ✅ 이렇게 할 것 — 섹션별로 나눠서 1단계: "Figma의 Hero 섹션을 구현해줘" [Figma URL] 2단계: "이어서 Features 섹션을 구현해줘" [Figma URL] 3단계: "Testimonials 섹션을 구현해줘" [Figma URL] 4단계: "마지막으로 Footer를 구현해줘" [Figma URL]

PHASE 5 — 한방 프롬프트 (자동화 스킬 사용)

Remote MCP(방법 B)로 연결한 경우 figma-implement-design 스킬을 사용할 수 있다:

이 Figma 디자인을 내 프로젝트에 구현해줘: [Figma 프레임 URL] 프로젝트 스택: Next.js 14 + Tailwind CSS + TypeScript 기존 컴포넌트가 있으면 재사용하고, 없으면 새로 생성해줘.

→ 이 스킬은 Figma 디자인을 읽고, 에셋 추출, 코드 생성, 원본 디자인과 비교 검증까지 자동으로 수행한다.

7. 풀 사이클 양방향 워크플로우

두 영상의 내용을 합치면, 실전에서는 이런 순서로 진행한다.

🎨 Phase 1: 디자인 시스템 구축 (Code → Figma)

Claude Desktop → Figma에 토큰(변수) 생성
Claude Desktop → Figma에 기본 컴포넌트 라이브러리 생성
Figma Desktop에서 검토/정리/퍼블리시

↓

🖥️ Phase 2: 화면 디자인 (Code → Figma)

Claude Desktop → Figma에 주요 화면 레이아웃 생성
또는 Figma Make로 AI 화면 생성
Figma Desktop에서 디자이너가 검토/수정/확정

↓

⚡ Phase 3: 코드 구현 (Figma → Code)

확정된 Figma URL을 Claude Desktop에 전달
Claude가 MCP로 디자인 읽기 → 코드 생성
Diff 패널에서 코드 리뷰 → 수락 → 프로젝트 적용

↓

🔄 Phase 4: 동기화 & 반복 (Code ↔ Figma)

코드에서 변경된 UI → Code to Canvas로 Figma 캡처
Figma에서 다시 리뷰/반복

💡 Claude Desktop 활용 포인트

Code 탭의 프리뷰 패널에서 개발 서버 결과물을 바로 확인하고, Diff 패널에서 코드 변경사항을 리뷰한 뒤 Cmd+Enter(macOS) / Ctrl+Enter(Windows)로 일괄 수락하면 된다.

8. Figma Skills 총정리

Figma Skills는 Claude에게 "이 작업은 이렇게 하면 돼"라고 미리 알려주는 사전 제작된 지침이다. Remote MCP(방법 B)로 설치하면 자동 포함된다.

스킬	용도	방향
figma-use	캔버스에 직접 쓰기 (프레임, 컴포넌트, 변수 생성/수정)	Code → Figma
figma-create-new-file	새 Figma 파일 생성 (Design / FigJam)	Code → Figma
figma-generate-library	코드베이스 기반 → Figma 디자인 시스템 라이브러리 구축	Code → Figma
figma-generate-design	코드의 페이지를 Figma 화면으로 생성	Code → Figma
figma-implement-design	Figma 디자인 → 프로젝트 코드로 변환	Figma → Code
figma-code-connect	Figma 컴포넌트 ↔ 코드 구현체 연결	양방향
figma-create-design-system-rules	코드베이스 분석 → 디자인 시스템 규칙 자동 생성	설정

⚠️ 참고

Write to Canvas(figma-use)는 현재 베타 기간 중 무료로 제공되고 있다. 향후 사용량 기반 유료 기능으로 전환될 예정. 유료 플랜의 Full seat과 Dev seat(읽기 전용만)에서 사용 가능하다.

9. 프로 팁 & 안티패턴

✅ 이렇게 하세요 — 프로 팁 7가지

1. 레이어 이름 = CSS 클래스

nav-links ✓   Group 5 ✗ — Claude가 레이어 이름을 보고 코드에서의 역할을 판단한다.

2. 섹션 단위로 작업

Hero → Features → Testimonials → Footer 순서로 하나씩. 전체 페이지를 한 번에 요청하면 품질이 떨어진다.

3. Figma URL 직접 참조

"Figma의 Features 섹션에 있는 카드를 봐줘" ✓
"둥근 모서리에 그림자 있는 카드 만들어줘" ✗

4. 스택을 먼저 알려주기

"Next.js 14 + Tailwind + TypeScript 사용 중" — Claude가 프로젝트 컨벤션에 맞춰 코드를 생성한다.

5. 이미지 에셋은 미리 export

MCP는 이미지 픽셀을 읽지 못한다. Figma에서 이미지를 미리 export → /public 폴더에 넣고 경로를 알려줘야 한다.

6. CLAUDE.md에 디자인 규칙 저장

프로젝트 루트의 CLAUDE.md에 디자인 시스템 규칙을 기록해두면, 매번 반복 설명 없이 일관된 결과물이 나온다.

7. Auto Layout은 필수

Auto Layout이 있어야 Claude가 Flexbox/Grid로 자연스럽게 변환한다. 절대 좌표(Absolute position)만 있으면 반응형 코드를 생성하기 어렵다.

❌ 이러면 실패한다 — 안티패턴

안티패턴	왜 실패하나	올바른 방법
스크린샷으로 디자인 전달	토큰 데이터 없음, 모호함	Figma URL로 직접 접근
색상 하드코딩	디자인 시스템 업데이트 시 깨짐	Figma Variables 사용
전체 페이지 한 번에 요청	품질 저하, 응답 제한 초과	섹션별 점진적 진행
레이어 이름 방치	Claude가 구조를 파악 못 함	시맨틱 네이밍 규칙 적용
시각적 검증 생략	코드↔디자인 불일치 누적	항상 Figma 원본과 비교
반응형 스펙 누락	Claude가 추측해서 구현	Figma에 반응형 프레임 구성

10. 트러블슈팅 & FAQ

Q. /mcp 입력했는데 figma가 connected로 안 뜬다

→ Figma Desktop 앱이 열려 있는지, Dev Mode에서 MCP 서버가 켜져 있는지 확인. Claude Desktop을 재시작해 볼 것.

Q. Write to Canvas가 작동하지 않는다

→ Figma Full seat인지 확인. Dev seat는 읽기 전용이라 캔버스 쓰기 불가. 또한 해당 파일에 편집 권한이 있어야 한다.

Q. 토큰 생성 중 중간에 멈춘다

→ 호출당 20KB 제한 때문일 수 있다. 한 번에 200개 변수를 요청하지 말고, 카테고리별로 나눠서 요청 (색상 먼저, 그 다음 간격, 타이포 순서로).

Q. Claude Desktop Code 탭이 보이지 않는다

→ Pro 이상 요금제인지 확인. 무료 플랜에서는 Code 탭을 사용할 수 없다. 앱 버전이 v1.2581.0 이상인지 확인.

Q. 생성된 코드에서 이미지가 깨진다

→ MCP는 이미지 픽셀을 전송하지 않는다. Figma에서 이미지를 수동으로 export → 프로젝트 /public에 넣고 → 프롬프트에서 "Hero 이미지는 /public/hero.png에 있어"라고 알려줘야 한다.

Q. Desktop MCP와 Remote MCP를 둘 다 쓸 수 있나?

→ 가능하다. 동시에 설정해두면 상황에 따라 유연하게 사용할 수 있다.

📎 참고 자료

영상 참고
디자인하는AI — AI가 Figma 변수 200개를 혼자 만듦
피튜브 — Claude Code + Figma로 일관된 디자인 하는 방법

공식 문서
Figma 공식 — Claude Code MCP 서버 설정 가이드
Figma 공식 — Figma Skills for MCP
Figma 개발자 문서 — Write to Canvas
Figma 블로그 — Claude Code to Figma 소개
Anthropic 공식 — Claude Code 문서

요약: 빠른 시작 3줄

① Figma Desktop → Dev Mode → MCP 서버 켜기
② Claude Desktop Code 탭 → 터미널에서
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
③ Figma URL + 프롬프트로 디자인 생성/코드 변환 시작