Figma Context MCP

메타데이터

항목	값
패키지명	`figma-context-mcp`
Transport	stdio
카테고리	devtools (design)
설치 방식	`npx -y figma-context-mcp`
필수 환경변수	`FIGMA_ACCESS_TOKEN`
선택 환경변수	없음
공식 문서	https://github.com/GLips/Figma-Context-MCP
최근 검증일	2026-03-21

설정 스니펫

{
  "mcpServers": {
    "figma": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-context-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
      }
    }
  }
}

제공 도구

도구명	설명	Claude Code 호출
`get_file`	Figma 파일 구조 조회	`mcp__figma__get_file`
`get_node`	특정 노드(프레임/컴포넌트) 조회	`mcp__figma__get_node`
`get_styles`	스타일(색상/타이포) 조회	`mcp__figma__get_styles`
`get_components`	컴포넌트 라이브러리 조회	`mcp__figma__get_components`
`get_tokens`	디자인 토큰 추출	`mcp__figma__get_tokens`
`get_layout`	레이아웃 구조 분석	`mcp__figma__get_layout`

사용 사례

Dev Mode: Figma 디자인 → 코드 변환 컨텍스트 제공
레이아웃/컴포넌트/토큰 정보로 정확한 UI 구현
디자인 시스템 동기화 (Figma ↔ 코드 컴포넌트)
디자인 리뷰 시 자동 비교

주의사항

Figma Access Token: Figma > Settings > Personal Access Tokens에서 발급
Dev Mode 활용 시 Figma Professional/Organization 플랜 필요
대용량 파일은 노드 단위로 조회 권장 (전체 파일 조회 시 느림)
발견일: 2026-03-21 | 출처: kdyintel --all Scout