Figma MCP — 디자인을 LLM 컨텍스트로

디자인 도구의 정보를 코드 작성 LLM 에 전달하는 시도가 늘어나고 있습니다. 디자이너가 만든 화면을 LLM 에게 보여주고 컴포넌트·토큰·레이아웃을 코드로 옮기는 자리에서 Figma 의 위치가 가장 큽니다. 2025 년에 Figma 가 공식 Dev Mode MCP 서버를 공개하면서 이 흐름이 표준화 단계로 들어갔습니다.

1. Figma 에 대한 이야기

Dylan Field · Evan Wallace 가 2012 년 시작한 브라우저 기반 디자인 도구. 2016 년 베타 공개됐고 2022 년 Adobe 인수 발표 후 2023 년 인수 무산을 거쳐 독립 회사로 남았습니다. 디자인의 단일 진실원 (SSOT) 으로 다수 팀에서 쓰입니다.

Dev Mode (2023) — 개발자 전용 모드. 디자인을 코드 친화적으로 보여 주고, 측정·자산 다운로드·코드 스니펫 (CSS/iOS/Android) 을 노출. 디자이너 라이선스와 별도로 개발자 라이선스.

Dev Mode MCP Server (2025) — Figma 가 공개한 MCP 서버. Figma 데스크탑 앱 안에서 로컬 MCP 서버를 띄우고, 같은 머신의 MCP 클라이언트가 붙어 디자인 정보를 가져가도록.

커뮤니티 MCP 서버 — GLips/Figma-Context-MCP 같은 커뮤니티 서버. Figma REST API 를 호출해 디자인 일부 정보를 LLM 컨텍스트로 가공.

2. Figma REST API

Figma 는 파일 단위 REST API 를 제공합니다 (api.figma.com). 개인 액세스 토큰 또는 OAuth 로 인증한 뒤 파일·노드·이미지·코멘트를 가져옵니다. 모든 자동화·MCP 서버의 데이터 출처가 결국 여기.

3. 공식 MCP 흐름

1. Figma 데스크탑 앱에서 Dev Mode MCP 서버를 켭니다.
2. 클라이언트 (Cursor · Claude Desktop) 의 mcp.json 에 로컬 서버 엔드포인트 등록.
3. 사용자가 "이 프레임을 React 컴포넌트로" 같은 지시를 내릴 때 클라이언트가 MCP 도구로 Figma 에서 노드·이미지·메타데이터를 가져옵니다.
4. LLM 이 가져온 정보를 컨텍스트로 코드 작성.

4. 커뮤니티 서버 흐름

REST API 키를 환경 변수로 받아 STDIO MCP 서버로 도는 모양:

{
  "mcpServers": {
    "figma-context": {
      "command": "npx",
      "args": ["-y", "figma-context-mcp"],
      "env": { "FIGMA_API_KEY": "figd_..." }
    }
  }
}

REST API 의 한도 (레이트 리밋 · 파일 크기 한도) 가 그대로 적용됩니다.

5. 노출되는 데이터

• 파일·노드 트리 (레이아웃·자식 관계).
• 컴포넌트·인스턴스 정보.
• 토큰 (색·텍스트 스타일·간격) 일부.
• 자동 생성된 이미지·SVG.
• 코멘트·버전.

LLM 친화 형식으로 가공되는지 또는 raw JSON 으로 노출되는지는 서버 구현에 따라 다릅니다.

6. 디자인 → 코드 자동화 도구

도구	출자	메모
Locofy	Locofy.ai	디자인 → React · 다양한 프레임워크.
Builder.io / Visual Copilot	Builder.io	Figma 플러그인 + AI 코드 변환.
Anima	Anima	디자인 → React/Vue/HTML.
Figma 자체 코드 패널	Figma Dev Mode	CSS/iOS/Android 스니펫 자동.
직접 REST API + 자체 변환	사내	디자인 시스템 토큰 동기화.

7. 다른 디자인 도구 · 토큰 표준

• Penpot — 오픈소스 디자인 도구. 자체 API 와 LLM 통합 시도.
• Sketch — macOS 전용. 플러그인 생태계.
• Adobe XD — 신규 개발 축소.
• Lottie / Rive — 모션·인터랙션 자료.

W3C Design Tokens Community Group 이 디자인 토큰 JSON 포맷 명세를 작성 중. 토큰 표준이 정해지면 LLM · MCP 가 다루기 쉬워집니다.

8. 디자인 → 컴포넌트 변환

Figma 프레임 → MCP 도구로 노드·이미지 가져오기
            → LLM 에 컴포넌트 명세·코딩 규칙 함께 전달
            → React/Vue/Flutter 코드 초안
            → 사람이 정리·테스트

LLM 코딩 보조 도구의 에이전트 모드와 결합되면 코드 적용까지 한 흐름.

토큰 동기화 — 디자인 토큰 (색 · 간격 · 타이포) 을 코드 변수 · CSS custom property 로 동기화하는 자리.

9. 한계의 인식

• 시맨틱 (어떤 색이 brand-primary 인지) 이 디자인에서 명시되지 않은 경우 LLM 이 추측.
• 같은 화면이 여러 컴포넌트의 합성인지 단일 노드인지 결정이 사람의 판단.
• 반응형 행동·인터랙션은 디자인에 충분히 표현되지 않을 수 있음.

생성된 코드를 그대로 받아쓰지 않고 사람이 리뷰·정리하는 모양이 보편적입니다.

10. 자주 걸리는 자리

베타 기능 변동 — Dev Mode MCP 서버는 비교적 새로운 기능이라 인터페이스가 바뀔 수 있습니다. 공식 릴리스 노트.

REST API 한도 — 큰 파일·잦은 호출은 레이트 리밋. 캐시·배치 호출.

토큰 노출 — 개인 액세스 토큰을 설정 파일에 평문 저장하면 유출 위험. 환경 변수·시크릿 매니저.

컴포넌트 의미 추론 — 자동 생성 코드가 단일 큰 컴포넌트로 묶이는 경향. 사람이 의미 단위로 분해.

이미지로의 도피 — 복잡 그래픽을 그대로 이미지로 내보내면 접근성·반응성·다크모드가 약해집니다. 가능한 자리는 SVG · 토큰 매핑.

저작권·권한 — 디자인 자료의 소유·라이선스 확인. 외부 서비스 송신 정책.

다국어·텍스트 길이 — Figma 의 단일 텍스트가 다국어로 옮겨질 때 길이가 달라져 레이아웃이 깨질 수 있음.

하고픈 말

Figma MCP 는 디자인 → 코드 자동화의 가장 빠른 출발점입니다. 다만 자동 생성된 코드는 의미 단위 분해 · 접근성 · 반응형 · 다크모드 같은 자리에서 사람의 정리가 여전히 필요합니다. 토큰 표준이 자리 잡으면 LLM 의 시맨틱 추측이 줄어들 가능성.

Next

• google-adk
• claude-code-skills

Figma Dev Mode · Figma REST API · Figma Dev Mode MCP · Locofy · Builder.io Visual Copilot · Anima · W3C Design Tokens Format · MCP 를 참고합니다.