프로세스

02. 프로세스 — Framelink MCP

전체 흐름

[Figma 파일 URL / fileKey + nodeId]
           │
           ▼
[AI Client (Copilot/Claude)]
           │  MCP Tool Call
           ▼
[Framelink MCP Server (npx 프로세스)]
           │  HTTPS
           ▼
[Figma REST API]
           │  JSON (노드 트리, 이미지)
           ▼
[정제된 컨텍스트 → LLM]
           │
           ▼
[코드 / 분석 / 문서]
Plain Text
복사

URL → fileKey/nodeId 파싱

Figma URL 예시:

<https://www.figma.com/design/abcXYZ123/My-File?node-id=12-345>
Plain Text
복사

•

fileKey = abcXYZ123

•

nodeId = 12:345 (URL의 12-345는 콜론 형식으로 변환됨)

Framelink MCP는 URL을 자동 파싱해 처리합니다.

단계별 처리

1) 노드 트리 조회

•

get_figma_data(fileKey, nodeId) 호출

•

Figma REST /v1/files/{key}/nodes?ids=... 사용

•

결과: 깊이 제한된 노드 트리(JSON)

◦

절대 좌표 → 상대 좌표 변환

◦

불필요한 메타데이터 제거 (LLM 토큰 절약)

2) 이미지/에셋 다운로드

•

download_figma_images(fileKey, nodeIds, scale) 호출

•

Figma REST /v1/images/{key} 사용

•

PNG/SVG로 로컬에 저장 → 코드에서 import 가능

3) LLM 컨텍스트 구성

•

MCP가 노드 트리 JSON을 압축/요약해 LLM에 전달

•

LLM은 이 정보를 기반으로 React/HTML/CSS/Vue 등 코드 생성

데이터 정제 특징

Framelink MCP의 핵심 가치는 Figma REST 응답을 LLM 친화적으로 가공하는 것:

•

픽셀 단위 좌표 → Flexbox/Grid 의도 추론

•

색상 RGB → HEX/Token 매핑

•

텍스트 노드 → 의미적 태그(h1/h2/p) 추론

•

이미지/아이콘 분리 → 별도 다운로드 지시

주요 MCP Tool

도구	설명
get_figma_data	파일/노드 트리 조회 (메인)
download_figma_images	노드 이미지 PNG/SVG 다운로드

(공식 MCP 대비 도구 수는 적지만, get_figma_data 하나가 매우 풍부한 정보를 반환)

강점

•

링크 공유만으로 협업 — 디자이너가 URL만 던지면 끝

•

무료 / 오픈소스 — 라이선스 부담 없음

•

다양한 클라이언트 호환 — stdio MCP라 거의 모든 도구에서 사용 가능

•

REST 기반 — Figma 정책 변동에 강건

한계

•

Code Connect 미지원 → 기존 컴포넌트 매핑은 프롬프트로 안내해야 함

•

Variables(토큰) 정보는 Figma API 권한/플랜에 따라 제한

•

거대한 페이지 통째 분석 시 토큰 폭증 → 작은 노드로 쪼개야 함

•

디자이너의 "현재 선택" 같은 즉시성은 없음

권장 사용 패턴

디자이너가 PR/티켓에 Figma 노드 URL 첨부

개발자가 Copilot에 URL 붙여넣고 "이 화면 React로 만들어줘"

MCP가 노드/이미지 가져오고 → 코드 생성

컴포넌트별로 반복하여 점진적 통합