Figma MCP — 디자인을 LLM 컨텍스트로
Figma MCP — 디자인을 LLM 컨텍스트로
디자인 도구의 정보를 코드 작성 LLM 에 전달하는 시도가 늘어나고 있습니다. 디자이너가 만든 화면을 LLM 에게 보여주고 컴포넌트·토큰·레이아웃을 코드로 옮기는 자리에서 Figma 의 위치가 가장 큽니다. 2025 년에 Figma 가 공식 Dev Mode MCP 서버를 공개하면서 이 흐름이 표준화 단계로 들어갔습니다.
1. Figma 에 대한 이야기
Dylan Field · Evan Wallace 가 2012 년 시작한 브라우저 기반 디자인 도구. 2016 년 베타 공개됐고 2022 년 Adobe 인수 발표 후 2023 년 인수 무산을 거쳐 독립 회사로 남았습니다. 디자인의 단일 진실원 (SSOT) 으로 다수 팀에서 쓰입니다.
Dev Mode (2023) — 개발자 전용 모드. 디자인을 코드 친화적으로 보여 주고, 측정·자산 다운로드·코드 스니펫 (CSS/iOS/Android) 을 노출. 디자이너 라이선스와 별도로 개발자 라이선스.
Dev Mode MCP Server (2025) — Figma 가 공개한 MCP 서버. Figma 데스크탑 앱 안에서 로컬 MCP 서버를 띄우고, 같은 머신의 MCP 클라이언트가 붙어 디자인 정보를 가져가도록.
커뮤니티 MCP 서버 — GLips/Figma-Context-MCP 같은 커뮤니티 서버. Figma REST API 를 호출해 디자인 일부 정보를 LLM 컨텍스트로 가공.
2. Figma REST API
Figma 는 파일 단위 REST API 를 제공합니다 (api.figma.com). 개인 액세스 토큰 또는 OAuth 로 인증한 뒤 파일·노드·이미지·코멘트를 가져옵니다. 모든 자동화·MCP 서버의 데이터 출처가 결국 여기.
3. 공식 MCP 흐름
- Figma 데스크탑 앱에서 Dev Mode MCP 서버를 켭니다.
- 클라이언트 (Cursor · Claude Desktop) 의
mcp.json에 로컬 서버 엔드포인트 등록. - 사용자가 "이 프레임을 React 컴포넌트로" 같은 지시를 내릴 때 클라이언트가 MCP 도구로 Figma 에서 노드·이미지·메타데이터를 가져옵니다.
- LLM 이 가져온 정보를 컨텍스트로 코드 작성.
4. 커뮤니티 서버 흐름
REST API 키를 환경 변수로 받아 STDIO MCP 서버로 도는 모양:
{
"mcpServers": {
"figma-context": {
"command": "npx",
"args": ["-y", "figma-context-mcp"],
"env": { "FIGMA_API_KEY": "figd_..." }
}
}
}
REST API 의 한도 (레이트 리밋 · 파일 크기 한도) 가 그대로 적용됩니다.
5. 노출되는 데이터
- 파일·노드 트리 (레이아웃·자식 관계).
- 컴포넌트·인스턴스 정보.
- 토큰 (색·텍스트 스타일·간격) 일부.
- 자동 생성된 이미지·SVG.
- 코멘트·버전.
LLM 친화 형식으로 가공되는지 또는 raw JSON 으로 노출되는지는 서버 구현에 따라 다릅니다.
6. 디자인 → 코드 자동화 도구
| 도구 | 출자 | 메모 |
|---|---|---|
| Locofy | Locofy.ai | 디자인 → React · 다양한 프레임워크. |
| Builder.io / Visual Copilot | Builder.io | Figma 플러그인 + AI 코드 변환. |
| Anima | Anima | 디자인 → React/Vue/HTML. |
| Figma 자체 코드 패널 | Figma Dev Mode | CSS/iOS/Android 스니펫 자동. |
| 직접 REST API + 자체 변환 | 사내 | 디자인 시스템 토큰 동기화. |
7. 다른 디자인 도구 · 토큰 표준
- Penpot — 오픈소스 디자인 도구. 자체 API 와 LLM 통합 시도.
- Sketch — macOS 전용. 플러그인 생태계.
- Adobe XD — 신규 개발 축소.
- Lottie / Rive — 모션·인터랙션 자료.
W3C Design Tokens Community Group 이 디자인 토큰 JSON 포맷 명세를 작성 중. 토큰 표준이 정해지면 LLM · MCP 가 다루기 쉬워집니다.
8. 디자인 → 컴포넌트 변환
Figma 프레임 → MCP 도구로 노드·이미지 가져오기
→ LLM 에 컴포넌트 명세·코딩 규칙 함께 전달
→ React/Vue/Flutter 코드 초안
→ 사람이 정리·테스트
LLM 코딩 보조 도구의 에이전트 모드와 결합되면 코드 적용까지 한 흐름.
토큰 동기화 — 디자인 토큰 (색 · 간격 · 타이포) 을 코드 변수 · CSS custom property 로 동기화하는 자리.
9. 한계의 인식
- 시맨틱 (어떤 색이 brand-primary 인지) 이 디자인에서 명시되지 않은 경우 LLM 이 추측.
- 같은 화면이 여러 컴포넌트의 합성인지 단일 노드인지 결정이 사람의 판단.
- 반응형 행동·인터랙션은 디자인에 충분히 표현되지 않을 수 있음.
생성된 코드를 그대로 받아쓰지 않고 사람이 리뷰·정리하는 모양이 보편적입니다.
10. 자주 걸리는 자리
베타 기능 변동 — Dev Mode MCP 서버는 비교적 새로운 기능이라 인터페이스가 바뀔 수 있습니다. 공식 릴리스 노트.
REST API 한도 — 큰 파일·잦은 호출은 레이트 리밋. 캐시·배치 호출.
토큰 노출 — 개인 액세스 토큰을 설정 파일에 평문 저장하면 유출 위험. 환경 변수·시크릿 매니저.
컴포넌트 의미 추론 — 자동 생성 코드가 단일 큰 컴포넌트로 묶이는 경향. 사람이 의미 단위로 분해.
이미지로의 도피 — 복잡 그래픽을 그대로 이미지로 내보내면 접근성·반응성·다크모드가 약해집니다. 가능한 자리는 SVG · 토큰 매핑.
저작권·권한 — 디자인 자료의 소유·라이선스 확인. 외부 서비스 송신 정책.
다국어·텍스트 길이 — Figma 의 단일 텍스트가 다국어로 옮겨질 때 길이가 달라져 레이아웃이 깨질 수 있음.
하고픈 말
Figma MCP 는 디자인 → 코드 자동화의 가장 빠른 출발점입니다. 다만 자동 생성된 코드는 의미 단위 분해 · 접근성 · 반응형 · 다크모드 같은 자리에서 사람의 정리가 여전히 필요합니다. 토큰 표준이 자리 잡으면 LLM 의 시맨틱 추측이 줄어들 가능성.
Next
- google-adk
- claude-code-skills
Figma Dev Mode · Figma REST API · Figma Dev Mode MCP · Locofy · Builder.io Visual Copilot · Anima · W3C Design Tokens Format · MCP 를 참고합니다.