Figma Context MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

Figma 데이터를 토큰 효율적인 YAML/JSON 형태로 반환 — 원본 API의 거대한 응답이 아님
컴포넌트 인스턴스와 오버라이드 해결
디자인 토큰(색상, 텍스트 스타일, 간격)을 이름으로 표시
선택한 노드의 이미지 내보내기 — 시각적 참고용
읽기 전용 — Figma 파일에 다시 쓰지 않습니다

라이브 데모

실제 사용 모습

figma.replay ▶ 준비됨

0/0

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "figma",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "figma-developer-mcp"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add figma -- npx -y figma-developer-mcp

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: Figma Context

Figma 프레임에서 React/SwiftUI/Tailwind 코드 생성하기

👤 디자인된 화면을 구현하는 프론트엔드 개발자 ⏱ ~30 min intermediate

언제 쓸까: 화면/컴포넌트에 대한 Figma 프레임이 있고 첫 80%의 코드를 충실하게 생성하고 싶을 때.

사전 조건

Figma 개인 액세스 토큰 — figma.com → Settings → Personal access tokens; 범위를 file_read로 설정
Figma 파일 URL — Figma 파일에서 URL을 복사하세요. MCP가 파일 키와 노드 ID를 추출할 수 있습니다.

흐름

프레임 데이터 가져오기

<Figma URL with node-id를 붙여넣기>의 Figma 노드를 가져옵니다. 레이아웃, 텍스트 콘텐츠, 색상, 자식 구조를 반환하세요.✓ 복사됨

→ 실제 값이 있는 계층적 노드 데이터 — '가져올 수 없음'이 아닌
데이터 기반의 코드 생성

이것과 정확히 일치하는 React + Tailwind 컴포넌트를 생성하세요. Figma 데이터의 실제 16진수 색상과 픽셀 값을 사용하세요. 근사값이 아니라.✓ 복사됨

→ bg-blue-500이 아닌 bg-[#1A2B3C]처럼 실제 값을 참조하는 코드
내보내기로 교차 확인

동일한 프레임을 PNG로 내보내세요. 생성된 컴포넌트의 예상 렌더링과 비교하고 차이점을 지적하세요.✓ 복사됨

→ '비슷해 보임'이 아닌 구체적인 차이 (누락된 아이콘, 잘못된 패딩)

결과: 픽셀 수준으로 충실한 첫 번째 초안 — 재구축 대신 개선할 수 있습니다.

함정

Auto-layout vs 절대 위치는 flex/grid와 다르게 매핑됨 — Figma 프레임이 auto-layout을 사용할 때 flexbox를 선호하도록 Claude에 말하세요. 아닐 때는 절대 위치
벡터 아이콘은 Claude가 그대로 인라인 처리하는 SVG 경로로 반환됨 — 아이콘을 /icons/*.svg로 분리 추출하고 컴포넌트로 참조하도록 하세요.

함께 쓰기: filesystem · github

Figma 디자인 토큰을 코드베이스에 동기화하기

👤 디자인 시스템 관리자 ⏱ ~20 min intermediate

언제 쓸까: 디자이너가 Figma에서 팔레트/타이포그래피를 업데이트했고 토큰 JSON을 맞춰야 할 때.

흐름

게시된 스타일 가져오기

Figma 파일 <key>에서 모든 게시된 색상 스타일, 텍스트 스타일, 효과 스타일을 나열하세요. 카테고리별로 그룹화하세요.✓ 복사됨

→ 이름과 값이 포함된 완전한 토큰 목록
코드베이스와 비교

/design-tokens/tokens.json을 읽으세요. 이 파일이 마지막으로 동기화된 이후 Figma에서 변경된 토큰을 보여주세요 (추가됨, 제거됨, 값 변경됨).✓ 복사됨

→ 토큰별 차이 — 이전/새로 옮김
적용 및 PR 열기

tokens.json을 Figma와 일치하도록 업데이트하세요. 제목이 'sync: design tokens YYYY-MM-DD'인 PR을 열고 설명에 차이를 포함시키세요.✓ 복사됨

→ 검토 가능한 차이가 있는 PR이 열렸습니다.

결과: 코드 쪽 토큰이 Figma와 동기화된 상태로 유지됩니다. 더 이상 '브랜드 색상이 약간 다른 이유는 뭐야' 티켓이 없습니다.

함정

이름이 바뀐 토큰은 삭제+추가처럼 보임 — Claude가 휴리스틱으로 이름 바꾸기를 감지하도록 하세요 (같은 값, 비슷한 이름) 그리고 인간 검토를 위해 지적하세요.

함께 쓰기: filesystem · github

Figma 파일에서 개발 사양(간격, 크기, 복사) 추출하기

👤 Dev Mode 없이 Figma 핸드오프를 검토하는 엔지니어 ⏱ ~15 min beginner

언제 쓸까: Figma Dev Mode는 없지만 화면에 대한 픽셀 사양이 필요할 때.

흐름

화면 가져오기

Figma 노드 <id>의 모든 리프 요소 목록을 절대 위치, 크기, 텍스트 콘텐츠와 함께 제공하세요.✓ 복사됨

→ x/y/w/h가 있는 요소의 표 형식 덤프
사양 문서 요청

이를 개발자 지향 사양으로 변환하세요: 섹션별로, 간격 값(마진/패딩)이 위치에서 유추됨.✓ 복사됨

→ 구체적인 CSS 동등 값이 있는 사양 문서
엣지 케이스 확인

텍스트가 설계된 너비를 초과하면 어떻게 됩니까? 디자인이 줄바꿈 동작, 잘림, 또는 성장을 지정합니까? 지정되지 않았으면 디자이너에게 플래그 설정하세요.✓ 복사됨

→ 조용한 가정이 아닌 미해결 질문 목록

결과: Dev Mode 지원을 위해 모두를 위한 좌석을 구매하지 않고도 빌드 가능한 사양.

함정

디자이너가 토큰 값 대신 임의의 간격(13px, 17px) 사용 — Claude에 가장 가까운 토큰 값으로 반올림하지만 편차를 기록하도록 요청하세요. 그래서 디자이너가 정리할 수 있습니다.

함께 쓰기: filesystem

조합

다른 MCP와 조합해 10배 효율

figma + filesystem

Figma에서 코드를 생성하고 컴포넌트 파일에 직접 쓰기

Figma 노드 <id>를 가져옵니다. 정확히 일치하는 React 컴포넌트를 생성하고 filesystem MCP를 사용하여 src/components/Card.tsx에 쓰세요.✓ 복사됨

figma + github

새로운 컴포넌트가 포함된 PR을 열고 설명에 Figma 링크 포함

Figma <url>에서 Card 컴포넌트를 생성하세요. 커밋, 푸시, PR을 열고 코드 변경과 소스 Figma 링크를 모두 포함시키세요.✓ 복사됨

figma + chrome-devtools

빌드, 브라우저에서 렌더링, 스크린샷, Figma 내보내기와 시각적으로 비교

새로운 컴포넌트를 빌드하세요. localhost:3000/preview/card에서 렌더링하세요. 스크린샷을 찍으세요. Figma PNG 내보내기와 시각적으로 비교하고 시각적 차이를 나열하세요.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
get_figma_data	fileKey: str, nodeId?: str, depth?: int	프레임 또는 전체 파일을 에이전트 친화적인 형태로 가져오기	1개의 Figma API 호출 (무료 등급: 1500/분)
download_figma_images	fileKey: str, nodes: [{nodeId, fileName}], localPath: str, format?: 'png'\|'svg', scale?: number	디자인 자산(아이콘, 일러스트레이션, 스크린샷)을 로컬로 내보내기	노드당 1개의 Figma 렌더 호출

비용 및 제한

운영 비용

API 쿼터: Figma 무료 플랜: 1,500개 요청/분. 대화형 사용에 충분합니다.
호출당 토큰: 간단한 모드는 페이로드를 프레임당 약 1-5k 토큰으로 유지합니다. 전체 파일은 커질 수 있습니다 — nodeId로 제한하세요.
금액: MCP는 무료입니다. Figma API 액세스는 모든 Figma 계정에서 무료입니다.
팁: 항상 할 수 있을 때 nodeId를 전달하세요 — 전체 파일을 가져오는 것은 낭비입니다.

보안

권한, 시크릿, 파급범위

최소 스코프: file_read

자격 증명 저장: 환경 변수 FIGMA_API_KEY의 개인 액세스 토큰. 절대로 커밋하지 마세요.

데이터 외부 송신: api.figma.com에 대한 모든 호출

절대 부여 금지:

file_write — MCP는 이것이 필요하지 않습니다. 쓰기 가능한 토큰을 사용하면 실수로 편집할 위험이 있습니다.

개인 액세스 토큰은 강력합니다 — 읽기 전용으로 범위 지정된 토큰을 사용하고 주기적으로 회전하세요.
Figma 파일 콘텐츠(디자인)가 LLM 공급자에 컨텍스트로 전달됩니다. 파일이 민감한 경우 전체 파일보다 노드 범위 가져오기를 선호하세요.

문제 해결

자주 발생하는 오류와 해결

403 금지됨

토큰이 해당 파일에 액세스할 수 없습니다. 파일이 토큰이 볼 수 있는 팀/워크스페이스에 있는지 확인하세요. 공유 커뮤니티 파일의 경우 다른 토큰을 사용하세요.

확인: curl -H 'X-Figma-Token: $FIGMA_API_KEY' https://api.figma.com/v1/me

URL에서 파일 키를 추출할 수 없음

형식 https://www.figma.com/file/<KEY>/... 또는 https://www.figma.com/design/<KEY>/...를 사용하세요. URL 파싱이 실패하면 fileKey를 명시적으로 전달하세요.

응답이 매우 크고 컨텍스트를 초과함

프레임으로 범위를 좁히려면 nodeId를 전달하거나, 순회를 제한하려면 depth: 2를 전달하세요.

이미지 내보내기가 '지원되지 않는 노드 타입'으로 실패

일부 노드 타입(섹션, 슬라이스)은 내보낼 수 없습니다. 대신 실제 프레임 또는 컴포넌트를 선택하세요.

대안

Figma Context 다른 것과 비교

대안	언제 쓰나	단점/장점
Figma official Dev Mode MCP (beta)	Figma Dev Mode가 있고 공식 통합을 원할 때	더 새로우며 Dev Mode 구독이 필요합니다. 시간이 지남에 따라 더 깊은 Figma 기능 지원
Figma REST API directly via shell	전체 API 표면(변수, 분기, 댓글)을 원할 때	원본 API 응답은 크고 LLM이 이해하기 어렵습니다.

Figma Context