Skip to main content
Glama
deenesjakoruzh
gethopp

Figma MCP Bridge

by gethopp
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Hybrid

Figma MCP Bridge

Pairing with Hopp

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

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

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

Он поддерживает одновременное подключение нескольких файлов Figma; откройте плагин в каждом файле, и ваш AI-агент сможет запрашивать любой из них по fileKey. Работа с одним файлом происходит точно так же, как и раньше, без каких-либо изменений.

Демо

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

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

Related MCP server: Figma Bridge MCP

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

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-сервер автоматически подключится к плагину.

Чтобы работать с несколькими файлами, просто откройте плагин в каждом файле Figma. Мост поддерживает все соединения активными, и ваш AI-агент может обращаться к любому из них по fileKey.

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

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

Инструмент

Описание

list_files

Список всех подключенных файлов Figma (поддерживает рабочие процессы с несколькими файлами)

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

Экспорт и сохранение скриншотов напрямую в локальную файловую систему

Все инструменты принимают необязательный параметр fileKey, когда подключено несколько файлов Figma. Используйте list_files, чтобы обнаружить подключенные файлы и их ключи.

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

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. Он поддерживает реестр WebSocket-соединений, индексируемых по fileKey, поэтому несколько файлов Figma могут быть подключены одновременно. Сервер отвечает за:

  • Обработку WebSocket-соединений от одного или нескольких экземпляров плагина Figma

  • Маршрутизацию вызовов инструментов к нужному файлу на основе fileKey

  • Пересылку ответов обратно AI-клиенту

  • Управление выбором лидера (так как у нас может быть только одно 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)         │
         └─────────────────────────────┘    └─────────────────────────────┘

This server cannot be deployed

Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

Maintenance

ActivityActive
ResponsivenessUnresponsive

Resources

Related MCP Connectors

Related MCP Servers

  • mcp-figma

    tranhoangtu-it
    A
    license
    Not graded
    quality
    D
    maintenance
    Bridges AI clients to Figma Desktop via Plugin API and WebSocket, enabling real-time design manipulation without rate limits.
    1,213 npm
    MIT

  • figma-mcp-rust

    alvinindra
    A
    license
    Not graded
    quality
    A
    maintenance
    An MCP server that enables AI tools to read and write Figma designs via a plugin bridge, bypassing the Figma REST API and rate limits.
    61
    MIT

  • figma-meta-mcp

    shinjiyu
    A
    license
    A
    quality
    C
    maintenance
    Figma MCP server that lets agents execute arbitrary JavaScript inside a running Figma desktop app via a local development plugin, enabling real-time document inspection and manipulation while avoiding REST API rate limits.
    3
    MIT