Figma MCP는 이 문제를 해결한다. AI 에이전트가 Figma 파일에 직접 접근해 정확한 수치·컴포넌트 구조·디자인 토큰을 가져온 뒤 코드를 생성한다.
2. MCP 프로토콜 개요
MCP(Model Context Protocol)는 Anthropic이 설계한 개방형 표준이다. AI 에이전트와 외부 데이터 소스 사이의 통신 규격을 통일한다.
flowchart TD
A[AI 에디터\nClaude Code / Cursor / VS Code] --> B[MCP 클라이언트]
B --> C[Figma MCP 서버\nmcp.figma.com 또는 127.0.0.1:3845]
C --> D[Figma 파일\n레이아웃·컴포넌트·토큰]
D --> C
C --> B
B --> A
역할
설명
MCP 클라이언트
AI 에디터 내부 MCP 처리 모듈
MCP 서버 (Figma)
Figma 데이터를 AI가 이해할 수 있는 형태로 가공·전달
도구(Tools)
서버가 제공하는 개별 기능 단위 (get_design_context 등 13종)
3. Figma MCP 서버 유형
두 가지 연결 방식을 제공한다.
구분
원격 서버
데스크톱 서버
엔드포인트
https://mcp.figma.com/mcp
http://127.0.0.1:3845/mcp
요건
모든 플랜 사용 가능
유료 Dev/Full 시트 필요
Figma 앱
불필요
데스크톱 앱 실행 필수
주요 차이
generate_figma_design, whoami 도구 포함
로컬 선택 영역 직접 참조 가능
권장 대상
빠른 시작, 원격 협업
로컬 디자인 작업 집중 환경
4. 지원 클라이언트
2025년 Schema 컨퍼런스 기준 공식 지원 클라이언트 목록:
클라이언트
원격 서버
데스크톱 서버
Claude Code
O
O
VS Code (GitHub Copilot)
O
O
Cursor
O
O
Windsurf
O
O
Codex (OpenAI)
O
O
Gemini CLI
O
O
Amazon Q
O
O
Android Studio
O
O
Kiro, Replit, Warp 외
O
O
generate_figma_design 도구는 현재 원격 서버 + Claude Code / Codex / VS Code 전용이다.