JW's AI_Stash

2.2.1 도구 개요

6 min read

도구 개요

Figma MCP 서버가 제공하는 13개 도구의 역할과 분류를 설명한다. 업데이트: 2026-03-10

핵심 요약

구분내용
📖 도구 수13개 (공식 문서 기준)
💡 분류코드 생성 5종 / Code Connect 5종 / FigJam 2종 / 인증 1종
🎯 핵심 도구get_design_context — 레이아웃·컴포넌트 정보를 AI에 전달하는 메인 도구
⚠️ 주의generate_figma_design, whoami는 원격 서버 전용

목차

  1. 도구 전체 목록
  2. 코드 생성 도구
  3. Code Connect 도구
  4. FigJam 도구
  5. 인증 도구
  6. 서드파티 vs 공식 도구 구별

1. 도구 전체 목록

도구분류서버
get_design_context코드 생성원격 + 데스크톱
get_variable_defs코드 생성원격 + 데스크톱
get_screenshot코드 생성원격 + 데스크톱
get_metadata코드 생성원격 + 데스크톱
generate_figma_design코드 생성원격 전용
get_code_connect_mapCode Connect원격 + 데스크톱
add_code_connect_mapCode Connect원격 + 데스크톱
get_code_connect_suggestionsCode Connect원격 + 데스크톱
send_code_connect_mappingsCode Connect원격 + 데스크톱
create_design_system_rulesCode Connect원격 + 데스크톱
get_figjamFigJam원격 + 데스크톱
generate_diagramFigJam원격 + 데스크톱
whoami인증원격 전용

2. 코드 생성 도구

get_design_context

Figma 노드의 디자인 정보를 AI가 코드 생성에 활용할 수 있는 형태로 추출한다. 가장 많이 사용하는 핵심 도구다.

  • 기본 출력: React + Tailwind CSS 코드 컨텍스트
  • 커스터마이징: Vue, HTML+CSS, iOS(SwiftUI), Android(Jetpack Compose) 등

get_variable_defs

Figma 파일에 정의된 디자인 토큰을 반환한다.

  • 색상 변수 (Color Variables)
  • 간격·크기 토큰 (Spacing, Size)
  • 타이포그래피 스타일 (Font Family, Size, Weight)
  • → CSS 변수, Design Token JSON 등으로 변환 가능

get_screenshot

선택한 노드 또는 프레임의 스크린샷을 캡처한다.

  • 레이아웃 시각적 확인용
  • 코드 생성 시 AI의 레이아웃 이해 보조

get_metadata

레이어 구조를 XML 형태로 반환한다.

  • 레이어 ID, 이름, 유형, 위치(x, y), 크기(w, h)
  • 컴포넌트 ID, 변형(Variant) 정보
  • 부모-자식 계층 구조

generate_figma_design (원격 서버 전용)

실행 중인 웹 앱의 UI를 Figma 레이어로 역변환한다. 코드 → Figma 방향의 역방향 워크플로우.

  • 지원: Claude Code, Codex, VS Code (2026년 기준)
  • 로컬 개발 서버를 먼저 실행한 상태에서 사용

3. Code Connect 도구

디자인 시스템 컴포넌트와 코드베이스 컴포넌트를 연결(매핑)하는 도구 그룹이다.

도구역할
get_code_connect_mapFigma 노드 ID ↔ 코드베이스 컴포넌트 경로 매핑 조회
add_code_connect_map새 매핑 수동 추가
get_code_connect_suggestionsAI가 자동으로 매핑 제안
send_code_connect_mappings제안된 매핑 확정 및 전송
create_design_system_rules디자인 시스템 변환 규칙 파일 생성

Code Connect가 설정된 컴포넌트에서 get_design_context를 호출하면 실제 코드베이스의 컴포넌트 코드가 포함된 컨텍스트가 반환된다. 디자인 시스템과 강하게 통합된 환경에서 코드 품질이 크게 향상된다.

4. FigJam 도구

도구역할
get_figjamFigJam 보드를 XML + 스크린샷으로 변환하여 AI에 전달
generate_diagramMermaid 문법 → FigJam 다이어그램 자동 생성

generate_diagram 사용 예:

이 ERD를 Mermaid로 작성했는데 FigJam 다이어그램으로 만들어줘:
erDiagram
  USER ||--o{ ORDER : places
  ORDER ||--|{ ITEM : contains

5. 인증 도구

whoami (원격 서버 전용)

현재 인증된 사용자 정보를 반환한다.

{
  "email": "user@example.com",
  "plan": "professional",
  "seatType": "dev"
}

연결 확인 및 플랜/시트 유형 확인에 활용한다.

6. 서드파티 vs 공식 도구 구별

커뮤니티에서 자주 언급되지만 공식 Figma MCP가 아닌 도구들이 있다.

도구출처공식 여부
get_design_contextFigma 공식✅
generate_figma_designFigma 공식✅
get_fileGLips/Figma-Context-MCP❌ 서드파티
get_component서드파티 구현체❌ 서드파티
get_node서드파티 구현체❌ 서드파티

서드파티 MCP 서버도 유용하지만, Figma 공식 지원을 받지 않는다. 공식 도구 우선 사용을 권장한다.

문서 탐색

이전다음
2.1.3 설정 실전 예시2.2.2 도구 활용 가이드

참고 자료

출처URL신뢰도
도구 및 프롬프트 공식 목록https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/★★★★★
Figma MCP 서버 공식 소개https://developers.figma.com/docs/figma-mcp-server/★★★★★
Code Connect 공식 문서https://developers.figma.com/docs/code-connect/★★★★★

Graph View

Backlinks