Figma Dev Mode MCP (공식)
메타데이터
설정 스니펫
{
"mcpServers": {
"figma-dev-mode": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@anthropic-ai/figma-mcp"],
"env": {
"FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
}
}
}
}
제공 도구
| 도구명 | 설명 | Claude Code 호출 |
|---|
get_file | Figma 파일 전체 구조 조회 | mcp__figma-dev-mode__get_file |
get_node | 특정 노드(프레임/컴포넌트) 상세 조회 | mcp__figma-dev-mode__get_node |
get_design_tokens | 디자인 토큰 추출 (색상, 타이포, 간격) | mcp__figma-dev-mode__get_design_tokens |
get_component_code | 컴포넌트 → 코드 변환 | mcp__figma-dev-mode__get_component_code |
사용 사례
- Figma 공식 Dev Mode 기반 디자인→코드 양방향 워크플로우
- 디자인 시스템 토큰 자동 추출 및 코드 동기화
- 컴포넌트 단위 코드 생성 (React, CSS, Tailwind)
- 디자인 변경 감지 및 코드 업데이트 자동화
기존 figma.md와의 차이
| 항목 | figma.md (GLips/Figma-Context-MCP) | figma-dev-mode.md (figma/mcp-server-guide) |
|---|
| 제공자 | 커뮤니티 (GLips) | Figma 공식 |
| 초점 | 컨텍스트 제공 (구조/스타일/레이아웃) | Dev Mode 코드 변환 |
| 용도 | 디자인 정보 참조 | 디자인→코드 직접 변환 |
주의사항
- Figma Access Token: Figma > Settings > Personal Access Tokens에서 발급
- Dev Mode 기능 사용 시 Figma Professional/Organization 플랜 필요
- 대용량 파일은 노드 단위로 조회 권장
- 커뮤니티 버전(
figma.md)과 병행 사용 가능 — 용도에 따라 선택