Skip to main content
Glama
deenesjakoruzh
gethopp

Figma MCP Bridge

by gethopp
OverviewSchemaRelated ServersScoreDiscussions
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 installed

A
license - permissive license
-
quality - not tested
A
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
1wRelease cycle
18Releases (12mo)
Commit activity
Issues opened vs closed

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

  • mcp-figma

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

  • Figma MCP Go

    tunglt1810
    A
    license
    -
    quality
    A
    maintenance
    Figma MCP server with full read/write access via plugin bridge — no API token, no rate limits. 83 tools for design automation: styles, variables, components, prototypes, and content.
    8
    MIT

  • figma-mcp-rust

    alvinindra
    A
    license
    -
    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.
    22
    MIT

View all related MCP servers

Related MCP Connectors

  • Figma MCP Server

    The Figma MCP server brings Figma design context directly into your AI workflow.

  • anythingmcp

    Self-hosted MCP gateway: turn any API, database or MCP server into AI connectors — no code.

  • mcp

    MCP server connecting AI agents to non-custodial staking data across 130+ networks.

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/gethopp/figma-mcp-bridge'

If you have feedback or need assistance with the MCP directory API, please join our Discord server