Figma MCP Bridge

Pairing with Hopp

Figma-Context-MCP와 같은 훌륭한 Figma MCP 서버들이 존재하지만, 한 가지 문제는 무료 사용자를 위한 API 제한입니다.

무료 계정의 제한은 한 달에 6회 요청이며, 네, 한 달에 6회입니다.

Figma MCP Bridge는 이 문제를 해결하기 위한 솔루션입니다. 이 도구는 Figma API 속도 제한에 걸리지 않고 실시간 Figma 문서 데이터를 AI 도구로 스트리밍하는 플러그인 + MCP 서버로, 우리 모두를 위한 Figma MCP입니다 ✊

데모

Figma MCP Bridge를 사용하여 Cursor에서 UI를 빌드하는 데모 보기

영상 보기

빠른 시작

1. 즐겨 사용하는 AI 도구에 MCP 서버 추가

AI 도구의 MCP 구성(예: Cursor, Windsurf, Claude Desktop)에 다음을 추가하세요:

{
  "figma-bridge": {
    "command": "npx",
    "args": ["-y", "@gethopp/figma-mcp-bridge"]
  }
}

이것으로 끝입니다. 다운로드하거나 설치할 바이너리가 없습니다.

2. Figma 플러그인 추가

최신 릴리스 페이지에서 플러그인을 다운로드한 다음, Figma에서 Plugins > Development > Import plugin from manifest로 이동하여 plugin/ 폴더의 manifest.json 파일을 선택하세요.

3. 사용 시작 🎉

Figma 파일을 열고 플러그인을 실행한 다음, AI 도구에 프롬프트를 입력하세요. MCP 서버가 자동으로 플러그인에 연결됩니다.

작동 원리에 대해 더 알고 싶다면 작동 원리 섹션을 읽어보세요.

사용 가능한 도구

도구	설명
`get_document`	현재 Figma 페이지 문서 트리 가져오기
`get_selection`	Figma에서 현재 선택된 노드 가져오기
`get_node`	ID로 특정 Figma 노드 가져오기 (콜론 형식, 예: `4029:12345`)
`get_styles`	모든 로컬 페인트, 텍스트, 효과 및 그리드 스타일 가져오기
`get_metadata`	파일 이름, 페이지 및 현재 페이지 정보 가져오기
`get_design_context`	디자인 컨텍스트 이해에 최적화된 깊이 제한 트리 가져오기
`get_variable_defs`	모든 변수 컬렉션, 모드 및 값(디자인 토큰) 가져오기
`get_screenshot`	노드를 PNG/SVG/JPG/PDF로 내보내기 (base64 인코딩)
`save_screenshots`	스크린샷을 로컬 파일 시스템으로 직접 내보내고 저장하기

로컬 개발

1. 이 저장소를 로컬에 복제

git clone git@github.com:gethopp/figma-mcp-bridge.git

2. 서버 빌드

cd server && npm install && npm run build

3. 플러그인 빌드

cd plugin && bun install && bun run build

4. 즐겨 사용하는 AI 도구에 MCP 서버 추가

로컬 개발을 위해 AI 도구의 MCP 구성에 다음을 추가하세요:

{
  "figma-bridge": {
    "command": "node",
    "args": ["/path/to/figma-mcp-bridge/server/dist/index.js"]
  }
}

구조

Figma-MCP-Bridge/
├── plugin/   # Figma plugin (TypeScript/React)
└── server/   # MCP server (TypeScript/Node.js)
    └── src/
        ├── index.ts      # Entry point
        ├── bridge.ts     # WebSocket bridge to Figma plugin
        ├── leader.ts     # Leader: HTTP server + bridge
        ├── follower.ts   # Follower: proxies to leader via HTTP
        ├── node.ts       # Dynamic leader/follower role switching
        ├── election.ts   # Leader election & health monitoring
        ├── tools.ts      # MCP tool definitions
        └── types.ts      # Shared types

작동 원리

Figma MCP Bridge에는 두 가지 주요 구성 요소가 있습니다:

1. Figma 플러그인

Figma 플러그인은 Figma MCP Bridge의 사용자 인터페이스입니다. MCP 서버를 사용하려는 Figma 파일 내에서 이 플러그인을 실행하며, 필요한 모든 정보를 가져오는 역할을 합니다.

2. MCP 서버

MCP 서버는 Figma MCP Bridge의 핵심입니다. Figma 플러그인이 WebSocket 연결을 통해 MCP 서버와 연결되면, MCP 서버는 다음을 담당합니다:

Figma 플러그인으로부터의 WebSocket 연결 처리
Figma 플러그인으로 도구 호출 전달
Figma 플러그인으로 응답 라우팅
리더 선출 처리 (한 번에 하나의 MCP 서버에 하나의 WS 연결만 가능하기 때문)

┌─────────────────────────────────────────────────────────────────────────────┐
│                              FIGMA (Browser)                                │
│  ┌───────────────────────────────────────────────────────────────────────┐  │
│  │                         Figma Plugin                                  │  │
│  │                    (TypeScript/React)                                 │  │
│  └───────────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      │ WebSocket
                                      │ (ws://localhost:1994/ws)
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                          PRIMARY MCP SERVER                                 │
│                         (Leader on :1994)                                   │
│  ┌─────────────────────────────────────────────────────────────────────┐    │
│  │  Bridge                                    Endpoints:               │    │
│  │  • Manages WebSocket conn                  • /ws    (plugin)        │    │
│  │  • Forwards requests to plugin             • /ping  (health)        │    │
│  │  • Routes responses back                   • /rpc   (followers)     │    │
│  └─────────────────────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────────────────────┘
                           ▲                              ▲
                           │ HTTP /rpc                    │ HTTP /rpc
                           │ POST requests                │ POST requests
                           │                              │
         ┌─────────────────┴───────────┐    ┌─────────────┴───────────────┐
         │    FOLLOWER MCP SERVER 1    │    │    FOLLOWER MCP SERVER 2    │
         │                             │    │                             │
         │  • Pings leader /ping       │    │  • Pings leader /ping       │
         │  • Forwards tool calls      │    │  • Forwards tool calls      │
         │    via HTTP /rpc            │    │    via HTTP /rpc            │
         │  • If leader dies →         │    │  • If leader dies →         │
         │    attempts takeover        │    │    attempts takeover        │
         └─────────────────────────────┘    └─────────────────────────────┘
                    ▲                                      ▲
                    │                                      │
                    │ MCP Protocol                         │ MCP Protocol
                    │ (stdio)                              │ (stdio)
                    ▼                                      ▼
         ┌─────────────────────────────┐    ┌─────────────────────────────┐
         │      AI Tool / IDE 1        │    │      AI Tool / IDE 2        │
         │      (e.g., Cursor)         │    │      (e.g., Cursor)         │
         └─────────────────────────────┘    └─────────────────────────────┘

Figma MCP Bridge

Figma MCP Bridge

데모

빠른 시작

1. 즐겨 사용하는 AI 도구에 MCP 서버 추가

2. Figma 플러그인 추가

3. 사용 시작 🎉

사용 가능한 도구

로컬 개발

1. 이 저장소를 로컬에 복제

2. 서버 빌드

3. 플러그인 빌드

4. 즐겨 사용하는 AI 도구에 MCP 서버 추가

구조

작동 원리

1. Figma 플러그인

2. MCP 서버

Resources

Looking for Admin?

Latest Blog Posts

MCP directory API