Figma × Claude Code 통합이란?
2026년 2월 17일, Figma와 Anthropic이 공식 파트너십을 발표했습니다. 핵심은 "Code to Canvas" — Claude Code로 만든 실제 동작하는 UI를 클릭 한 번에 Figma 편집 가능 프레임으로 가져오는 기능입니다.
단순한 스크린샷이 아닙니다. 레이어가 분리된 진짜 Figma 디자인 아티팩트로 캡처되어, 팀이 바로 주석 달고 수정할 수 있습니다.
왜 나왔을까? — 해결하려는 문제
기존 디자인-개발 파이프라인은 항상 단방향이었습니다:
- 디자이너가 Figma에서 설계 → 개발자가 코드로 구현 → 끝
그런데 Claude Code, Cursor 같은 AI 코딩 도구가 등장하면서 역방향 문제가 생겼습니다. AI가 1~2분 만에 동작하는 UI를 뚝딱 만들어줍니다. 하지만:
- "이 UI를 팀원들이랑 어떻게 검토하지?"
- "여러 버전을 만들었는데 어디서 비교하지?"
- "디자이너한테 보여주려면 또 Figma로 재작업해야 해?"
Code to Canvas는 이 병목을 해결합니다. AI가 만든 코드를 그대로 Figma 캔버스로 끌어와 팀 전체가 함께 검토할 수 있습니다.
설치 및 설정 방법 (2분이면 끝!)
준비물
- Figma 데스크탑 앱 (웹 버전 불가)
- Claude Code CLI 설치
- Node.js 환경
Step 1: Figma MCP 서버 활성화
Figma 데스크탑 앱을 열고:
- 환경설정(Preferences) 메뉴 진입
- "Dev Mode MCP Server" 옵션 활성화
- 로컬에서
http://127.0.0.1:3845/sse로 자동 실행됨
Step 2: Claude Code에 Figma MCP 연결
터미널에서 단 한 줄만 입력합니다:
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sseStep 3: 연결 확인
claude mcp list
# figma-dev-mode-mcp-server가 목록에 표시되면 완료!설정 끝입니다. 이제 실제로 써봅시다.
실전 활용 워크플로우 4단계
① Claude Code로 UI 빌드
로컬 개발 서버, 스테이징, 프로덕션 환경 — 브라우저에서 실행되는 모든 UI가 대상입니다. Claude Code로 원하는 UI를 만들거나 기존 사이트를 열어둡니다.
# 예시: 로그인 페이지 만들기
claude "로그인 폼 UI를 만들어줘. 이메일 + 비밀번호 + 소셜 로그인 버튼 포함"② Figma로 전송 명령
Claude Code 대화창에 딱 한 마디만 입력합니다:
Send this to Figma현재 브라우저에 실행 중인 UI의 실제 렌더링 상태를 캡처해서 Figma로 전송합니다.
③ Figma 캔버스에서 편집
Figma를 열면 캡처된 UI가 편집 가능한 프레임으로 올라와 있습니다. 이제 할 수 있는 것들:
- 레이어 이름 변경 및 정리
- 컬러, 폰트, 간격 수정
- 팀원 태그하여 주석 달기
- 프레임 복제해서 여러 버전 나란히 비교
- 컴포넌트로 변환
④ 멀티스크린 세션 활용
여러 화면을 한 번에 캡처할 수 있습니다. 온보딩 플로우 전체, 결제 과정 전체를 순서대로 Figma에 펼쳐두면 UX 플로우 검토가 훨씬 쉬워집니다.
# 여러 페이지 순차 전송
"로그인 화면을 Figma로 보내줘"
# (화면 이동 후)
"대시보드 화면도 Figma로 보내줘"
# (화면 이동 후)
"설정 페이지도 Figma로 보내줘"
# → Figma에 3개 프레임이 나란히 정렬됨이런 상황에서 특히 유용해요
🎯 디자인 의사결정 빠르게
AI로 UI 시안 3가지를 만들고 모두 Figma에 올린 후, 팀이 캔버스에서 바로 비교 검토. 회의에서 "어떤 게 좋아?" 물어보는 시간이 확 줄어듭니다.
🎯 클라이언트 리뷰
개발 단계의 프로토타입을 Figma에 올려 클라이언트가 직접 주석을 달 수 있게. 코드에 접근권한 없이도 피드백 가능합니다.
🎯 디자인 시스템 업데이트 검토
새 컴포넌트를 개발 환경에서 구현 → Figma로 캡처 → 기존 디자인 시스템과 나란히 비교해서 정합성 확인.
🎯 반응형 디자인 검토
모바일, 태블릿, 데스크탑 각각 캡처해서 Figma 한 파일에 정렬. 브레이크포인트별 레이아웃을 한눈에 확인.
지원 에디터 목록
Figma MCP 서버는 Claude Code 외에도 다양한 AI 코딩 도구와 연동됩니다:
- Claude Code (Anthropic) — 네이티브 지원
- Cursor
- VS Code (GitHub Copilot과 연동)
- Windsurf
- OpenAI Codex
현실적인 한계점도 알아두세요
- 🖥️ Figma 데스크탑 앱 필수 — 웹 브라우저 버전에서는 사용 불가
- 🎬 복잡한 애니메이션 미재현 — CSS 트랜지션, 스크롤 인터랙션 등은 정지 이미지로만 캡처
- 🔄 완벽한 레이어 분리는 아님 — 복잡한 UI일수록 레이어가 병합되어 들어오는 경우 있음
- 📱 CLI 환경 위주 — 현재는 주로 터미널 기반, GUI 플러그인 확장 예정
- 🔗 완전한 양방향은 아직 — Figma 수정사항을 코드로 다시 반영하는 "역방향 싱크"는 별도 작업 필요
실무 팁 5가지
- 캡처 전 브라우저 줌 100% 확인 — 줌 레벨이 다르면 Figma 프레임 크기가 달라짐
- 다크모드/라이트모드 각각 캡처 — 테마별로 별도 프레임으로 정리하면 비교가 편리함
- 캡처 직후 프레임명 정리 — 자동 생성된 이름 대신 "Login_v1", "Dashboard_mobile" 식으로 명명
- Figma 페이지 단위로 플로우 분리 — 온보딩/메인/설정을 각각 다른 페이지에 정리하면 관리하기 좋음
- 실패한 시안도 보관 — 채택되지 않은 버전도 "Rejected" 섹션에 유지하면 나중에 참고 가능
마치며
Figma × Claude Code 통합은 "AI가 코드를 만들어주면 끝"이 아니라, "팀이 함께 검토하고 결정하는 공간"으로 AI 개발 결과물을 연결해주는 다리입니다. 개발자와 디자이너가 같은 캔버스에서 동일한 아티팩트를 보며 대화할 수 있다는 것 — 협업 방식 자체가 바뀌는 변화입니다.
설정도 2분이면 끝나니, 지금 바로 한 번 써보세요!
