프로세스

02. 프로세스 — 공식 Figma MCP

전체 흐름

[Figma Desktop App]
       │  (선택된 노드/프레임)
       ▼
[Figma MCP Server (localhost:3845)]
       │  (MCP Protocol)
       ▼
[AI Client: Copilot / Claude / Cursor]
       │  (자연어 + 도구 호출)
       ▼
[코드 / 디자인 분석 결과]
Plain Text
복사

단계별 처리

1) Figma Desktop App에서 노드 선택

•

디자이너/개발자가 Figma에서 컴포넌트나 프레임을 클릭

•

MCP Server가 현재 선택 상태를 메모리에 보관

2) AI 클라이언트에서 도구 호출

•

사용자가 "선택한 컴포넌트를 React + Tailwind로 만들어줘" 입력

•

클라이언트가 MCP 도구 목록에서 적절한 함수 선택

•

일반적으로 다음 순서로 호출:

get_selection — 현재 선택된 노드 ID/메타데이터

get_code — 노드를 코드로 변환 (React/HTML/CSS)

get_image — 노드의 시각적 스크린샷

get_variable_defs — 사용된 디자인 토큰 정보

3) AI가 코드 생성 / 답변 생성

•

MCP가 반환한 구조화된 데이터를 기반으로 LLM이 최종 결과물 생성

•

단순 스크린샷 기반보다 노드 트리 기반 변환이라 정확도 높음

주요 MCP Tool

도구	설명	활용
get_selection	현재 선택 노드 정보	시작점
get_code	노드 → 코드 변환	React/Vue 등
get_image	노드 스크린샷 (PNG)	LLM 비전 입력 보조
get_variable_defs	사용된 Variable(토큰)	디자인 시스템 매핑
get_code_connect_map	Code Connect 매핑 정보	기존 컴포넌트 재사용

Code Connect 활용

•

Figma의 Code Connect 기능과 연계

•

이미 코드로 존재하는 컴포넌트를 Figma 노드와 매핑

•

MCP가 생성 시 "이 디자인은 코드 측 <Button variant='primary'>로 매핑된다"는 정보 전달

•

결과: 불필요한 신규 코드 생성 방지 + 기존 디자인 시스템 유지

데이터 흐름의 강점

•

Vector Tree 직접 분석 → 픽셀 OCR 방식보다 정확

•

Variable/토큰 정보 보존 → 하드코딩된 색상이 아닌 토큰 참조 유지

•

컴포넌트 인스턴스 인식 → 재사용 가능한 컴포넌트로 출력

한계

•

복잡한 Auto Layout / Constraints는 완벽 변환 어려움

•

코드 스타일(파일 구조, 네이밍)은 클라이언트 측 프롬프트로 제어해야 함

•

한 번에 너무 큰 페이지를 변환하면 토큰 한계 초과