클로드 피그마 연동: Figma MCP로 디자인→코드 변환 (Claude Code, 2026)

피그마(Figma)에 그린 화면을 Claude가 직접 읽고 코드로 바꿔 줍니다. 다만 한 가지 짚을 점 — 이 연동은 claude.ai 채팅이 아니라 Claude Code(터미널)나 VS Code·Cursor 같은 MCP 지원 도구에서 Figma MCP 서버로 이뤄집니다. 2026년 2월 Figma가 Claude Code와의 양방향 통합을 공식 발표했습니다(디자인→코드, 코드→캔버스). 이 글은 연결 방법(원격·데스크톱), 할 수 있는 일, 플랜·사용량, 한계를 정리합니다.

먼저 — claude.ai 채팅이 아니라 Claude Code

노션·구글 커넥터와 달리, Figma MCP는 claude.ai 웹 채팅에서는 동작하지 않습니다. Claude Code, VS Code, Cursor 등 MCP를 지원하는 클라이언트에서 사용하세요(Figma 공식 안내·포럼 확인). 디자이너·개발자의 디자인→코드 작업이 주 용도입니다.

무엇을 할 수 있나

• 프레임 → 코드: 선택한 Figma 프레임을 코드로 변환
• 디자인 컨텍스트 추출: 변수·컴포넌트·레이아웃 데이터를 IDE로 가져오기(디자인 시스템에 유용)
• FigJam 다이어그램 생성: 프롬프트·코드로 아키텍처·ERD 생성
• Make 리소스 가져오기
• Code to Canvas: 코드로 만든 라이브 UI를 편집 가능한 Figma 레이어로 보내기(원격 서버·일부 클라이언트)

연결 방법 ① 원격 서버 (권장)

대부분의 사용자에게 권장되며 기능이 가장 많습니다. 데스크톱 앱이 없어도 됩니다.

1. Claude Code 설치: npm install -g @anthropic-ai/claude-code
2. 공식 Figma 플러그인 설치(= MCP 설정 + Agent Skills): claude plugin install figma@claude-plugins-official
3. Claude Code 재시작 후 /plugin → Installed 탭 → figma 선택 → 인증 시작
4. 브라우저에서 Allow access로 Figma 계정 인증 → 터미널로 돌아와 /plugin 다시 실행 → “connected” 확인

플러그인 대신 직접 추가하려면: claude mcp add --transport http figma https://mcp.figma.com/mcp 실행 후 /mcp에서 figma 선택 → Authenticate → Allow Access.

연결 방법 ② 데스크톱(로컬) 서버

조직·엔터프라이즈의 특정 케이스용입니다(공식은 원격을 권장).

1. Figma 데스크톱 앱을 최신으로 업데이트하고 디자인 파일을 엽니다.
2. Dev Mode로 전환(툴바 토글) → 우측 사이드바에서 MCP 서버 켜기(또는 Figma 메뉴 → Preferences → Enable Dev Mode MCP Server).
3. 표시되는 주소 http://127.0.0.1:3845/mcp를 복사합니다.
4. 등록: claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

데스크톱 서버는 Figma 앱이 열려 있고 서버가 켜져 있을 때만 동작합니다.

디자인을 코드로 — 사용법

• 링크 방식: Figma에서 프레임·레이어 링크를 복사해 Claude Code에 전달합니다 — 예: “이 디자인을 React + Tailwind 반응형으로 구현해줘. https://www.figma.com/design/…?node-id=123-456”. 클라이언트가 URL에서 node-id를 추출해 해당 객체만 가져옵니다.
• 선택 방식: (데스크톱) Figma에서 프레임을 선택한 뒤 요청하면 더 정확합니다.

디자인 시스템(컴포넌트 라이브러리)을 연결하고 Code Connect를 쓰면 실제 컴포넌트를 재사용해 코드 일관성이 올라갑니다.

플랜·사용량

Figma MCP 서버는 Figma Dev Mode의 일부입니다.

• Starter 플랜 또는 View·Collab 좌석: 월 약 6회 도구 호출로 제한
• Professional·Organization·Enterprise의 Dev·Full 좌석: 분당 제한(Figma REST API Tier 1과 동일)
• 캔버스 쓰기(Code to Canvas)는 베타 기간 동안 무료 — 추후 사용량 기반 유료 예정

실무에는 Pro 이상 + Dev/Full 좌석을 권장합니다. 플랜·한도는 바뀔 수 있으니 figma.com에서 확인하세요(시점에 따라 변동).

안 될 때 / 한계

1. 서버가 목록에 없음: Claude Code를 완전히 재시작합니다(MCP 연결은 시작 시 초기화).
2. 인증: /mcp → figma → Authenticate → 브라우저 OAuth.
3. 데스크톱 서버: Figma 앱이 열려 있고 MCP가 켜져 있는지 확인합니다.
4. claude.ai 웹앱으로는 안 됨: 반드시 Claude Code 등 MCP 클라이언트에서 사용합니다.

한계: 기존 코드의 정밀 수정엔 약하고, 여러 화면(멀티프레임) 플로우는 추가 작업이 필요하며, 결과는 완성 코드가 아니라 시작점입니다(상태 관리·이벤트·엣지 케이스는 직접 보완).

관련: MCP 연결·사용법(4가지), 클로드 MCP 추천 서버, 노션 연동 가이드, 구글 연동 가이드, 커넥터 보안 · 슬랙 연동 가이드

출처: Figma 공식 문서(help.figma.com·developers.figma.com), Figma 블로그, github.com/figma/mcp-server-guide. 명령어·플랜·한도는 2026년 기준이며 변동될 수 있습니다. 정확한 최신 정보는 Figma·Claude Code 공식 문서를 확인하세요. usingclaude.com은 비공식 정보 사이트입니다.