Figma MCP

AI Agent를 활용해 Figma 디자인을 React 코드로 변환하는 Model Context Protocol(MCP)를 제공합니다.

빠른 설치

Figma 설정에서 Personal Access Token (PAT)을 발급받을 수 있습니다.

PAT가 있는 경우: Figma URL을 복사해서 AI Agent에게 전달하는 REST API 방식으로 사용할 수 있습니다.
PAT가 없는 경우: Figma 플러그인을 통해 실시간으로 선택한 레이어를 가져오는 WebSocket 방식을 사용해야 합니다.

각 방식의 상세한 차이점은 아래 설치 섹션을 참고하세요.

claude mcp add seed-design-figma \
  --env FIGMA_PERSONAL_ACCESS_TOKEN=${FIGMA_PERSONAL_ACCESS_TOKEN} \
  -- bunx -y @seed-design/mcp@latest

codex mcp add seed-design-figma \
  --env FIGMA_PERSONAL_ACCESS_TOKEN=${FIGMA_PERSONAL_ACCESS_TOKEN} \
  -- bunx -y @seed-design/mcp@latest

~/.gemini/settings.json 파일에 다음을 추가합니다:

{
  "mcpServers": {
    "seed-design-figma": {
      "command": "bunx",
      "args": ["-y", "@seed-design/mcp@latest"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "<YOUR_FIGMA_PERSONAL_ACCESS_TOKEN>"
      }
    }
  }
}

~/Library/Application Support/Claude/claude_desktop_config.json 파일에 다음을 추가합니다:

{
  "mcpServers": {
    "seed-design-figma": {
      "command": "bunx",
      "args": ["-y", "@seed-design/mcp@latest"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "<YOUR_FIGMA_PERSONAL_ACCESS_TOKEN>"
      }
    }
  }
}

먼저 백그라운드에서 WebSocket 서버를 실행하고, Figma에서 MCP 플러그인을 설치합니다.

WebSocket 서버 실행을 위해 Bun 런타임이 필요합니다. --bun flag를 사용해주세요.

bunx --bun @seed-design/mcp@latest socket

그 다음 MCP 서버를 등록합니다.

claude mcp add seed-design-figma \
  -- bunx -y @seed-design/mcp@latest

codex mcp add seed-design-figma \
  -- bunx -y @seed-design/mcp@latest

~/.gemini/settings.json 파일에 다음을 추가합니다:

{
  "mcpServers": {
    "seed-design-figma": {
      "command": "bunx",
      "args": ["-y", "@seed-design/mcp@latest"]
    }
  }
}

~/Library/Application Support/Claude/claude_desktop_config.json 파일에 다음을 추가합니다:

{
  "mcpServers": {
    "seed-design-figma": {
      "command": "bunx",
      "args": ["-y", "@seed-design/mcp@latest"]
    }
  }
}

설치

Figma 접근 방식 선택

Figma URL과 Personal Access Token으로 레이어 정보를 가져옵니다.

Figma 설정에서 Personal Access Token을 발급받습니다.

토큰에 다음 권한을 부여해주세요.

file_content:read
file_metadata:read
file_variables:read
library_assets:read
library_content:read
team_library_content:read
file_dev_resources:read

MCP가 환경 변수를 통해 해당 토큰을 사용할 수 있도록 합니다. MCP 서버 등록 단계에서 FIGMA_PERSONAL_ACCESS_TOKEN 환경 변수를 설정해주세요.

WebSocket 서버와 Figma 플러그인을 통해 Figma 앱에서 실시간으로 선택한 레이어 정보를 가져옵니다.

get_selection 등 실시간 선택 기반 도구는 이 방식에서만 동작합니다.

백그라운드에서 WebSocket 서버를 실행합니다.

WebSocket 서버 실행을 위해 Bun 런타임이 필요합니다. --bun flag를 사용해주세요.

bunx --bun @seed-design/mcp@latest socket

Figma에서 MCP 플러그인을 설치하고 실행합니다.

MCP 서버 등록

`--mode` 옵션으로 도구 범위 제한하기

MCP 서버 실행 시 --mode 옵션을 명시하면 해당 모드에서 사용 가능한 도구만 등록하여 context 크기를 줄일 수 있습니다.

--mode 옵션을 제공하지 않는 경우 기본값으로 all 모드가 사용됩니다.

모드	도구	비고
`all` (기본값)	모든 도구 등록	PAT 있으면 REST 우선, WS 전용 도구는 WS 사용
`rest`	REST API 도구만 등록	`get_selection` 등 WS 전용 도구 미등록
`websocket`	WebSocket 도구만 등록	현재 모든 도구가 WebSocket 동작 가능, PAT 무시

FIGMA_PERSONAL_ACCESS_TOKEN 환경 변수를 설정해야 합니다.

항상 REST API만 사용한다면 --mode=rest 플래그를 추가해도 됩니다.

.mcp.json

{
  "mcpServers": {
    "seed-design-figma": {
      "command": "bunx",
      "args": ["-y", "@seed-design/mcp@latest"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "${FIGMA_PERSONAL_ACCESS_TOKEN}"
      }
    }
  }
}

FIGMA_PERSONAL_ACCESS_TOKEN 환경 변수는 설정하지 않아도 됩니다.

항상 WebSocket만 사용한다면 --mode=websocket 플래그를 추가해도 됩니다.

.mcp.json

{
  "mcpServers": {
    "seed-design-figma": {
      "command": "bunx",
      "args": ["-y", "@seed-design/mcp@latest"]
    }
  }
}

사용하기

Figma에서 레이어의 URL을 복사(⌘ + L)합니다.
LLM 도구에게 요청합니다.

https://www.figma.com/design/abc123/MyDesign?node-id=123-456 이 레이어의 React 코드를 가져와주세요.

Figma에서 레이어를 선택합니다.
LLM 도구에게 요청합니다.

지금 선택한 레이어의 React 코드를 가져와주세요.

주요 툴 목록

REST API + WebSocket 공통

Figma URL 또는 fileKey + nodeId를 전달하면 REST API로, nodeId만 전달하면 WebSocket으로 동작합니다. 모든 모드에서 등록됩니다.

툴	설명
`get_node_info`	레이어의 구조 정보를 반환합니다.
`get_nodes_info`	여러 레이어의 구조 정보를 한 번에 반환합니다.
`get_node_react_code`	레이어의 React 코드를 생성합니다.
`get_component_info`	컴포넌트의 key와 속성 정의를 반환합니다.
`find_nodes`	하위 레이어를 이름(정규식)으로 검색하여 ID 목록을 반환합니다.
`retrieve_color_variable_names`	SEED Design 색상 변수 이름 목록을 반환합니다.

WebSocket 전용

Figma 플러그인과 통신이 필요합니다. websocket 또는 all 모드에서 등록됩니다.

툴	설명
`get_selection`	현재 선택한 레이어의 ID를 반환합니다.
`get_document_info`	현재 열린 Figma 문서의 정보를 반환합니다.
`export_node_as_image`	레이어를 이미지(PNG, JPG, SVG, PDF)로 내보냅니다.
`add_annotations`	레이어에 Annotation을 추가합니다.
`get_annotations`	레이어의 Annotation을 가져옵니다.
`join_channel`	특정 채널에 참가합니다.

Figma MCP

커스텀 설정 사용하기

On this page