Figma MCP Bridge

Pairing with Hopp

Хотя существуют и другие замечательные MCP-серверы для Figma, такие как Figma-Context-MCP, одной из проблем является ограничение API для бесплатных пользователей.

Лимит для бесплатных аккаунтов составляет 6 запросов в месяц, да, именно в месяц.

Figma MCP Bridge — это решение данной проблемы. Это плагин + MCP-сервер, который транслирует данные документа Figma в реальном времени в AI-инструменты, не достигая лимитов API Figma. Это Figma MCP для всех нас ✊

Демо

Посмотрите демо создания интерфейса в Cursor с помощью Figma MCP Bridge

Смотреть видео

Быстрый старт

1. Добавьте MCP-сервер в ваш любимый AI-инструмент

Добавьте следующее в конфигурацию MCP вашего AI-инструмента (например, Cursor, Windsurf, Claude Desktop):

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

Это всё — не нужно скачивать или устанавливать никакие бинарные файлы.

2. Добавьте плагин Figma

Скачайте плагин со страницы последнего релиза, затем в Figma перейдите в Plugins > Development > Import plugin from manifest и выберите файл manifest.json из папки plugin/.

3. Начните использовать 🎉

Откройте файл Figma, запустите плагин и начните задавать запросы вашему AI-инструменту. MCP-сервер автоматически подключится к плагину.

Если вы хотите узнать больше о том, как это работает, прочитайте раздел Как это работает.

Доступные инструменты

Инструмент	Описание
`get_document`	Получить дерево документа текущей страницы Figma
`get_selection`	Получить текущие выбранные узлы в Figma
`get_node`	Получить конкретный узел Figma по ID (формат с двоеточием, например `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. Добавьте MCP-сервер в ваш любимый AI-инструмент

Для локальной разработки добавьте следующее в конфигурацию MCP вашего AI-инструмента:

{
  "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. Вы запускаете его внутри файла Figma, для которого хотите использовать MCP-сервер, и он отвечает за получение всей необходимой вам информации.

2. MCP-сервер

MCP-сервер — это ядро Figma MCP Bridge. Поскольку плагин Figma соединяется с MCP-сервером через WebSocket-соединение, MCP-сервер отвечает за:

Обработку WebSocket-соединений от плагина Figma
Пересылку вызовов инструментов в плагин Figma
Маршрутизацию ответов обратно в плагин Figma
Управление выбором лидера (так как у нас может быть только одно WS-соединение с MCP-сервером одновременно)

┌─────────────────────────────────────────────────────────────────────────────┐
│                              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. Добавьте MCP-сервер в ваш любимый AI-инструмент

2. Добавьте плагин Figma

3. Начните использовать 🎉

Доступные инструменты

Локальная разработка

1. Клонируйте этот репозиторий локально

2. Соберите сервер

3. Соберите плагин

4. Добавьте MCP-сервер в ваш любимый AI-инструмент

Структура

Как это работает

1. Плагин Figma

2. MCP-сервер

Resources

Looking for Admin?

Latest Blog Posts

MCP directory API