Figma MCP

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

설치

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 플러그인을 설치하고 실행합니다.

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

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

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

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

MCP 서버 등록

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와 속성 정의를 반환합니다.
`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