figbridge

figbridge

rudraptpsinghMIT
7 звёзд1 форков
Figbridge — бесплатный локальный мост между Figma и кодом. Это одновременно плагин для Figma Desktop и MCP-сервер для передачи данных. Figbridge решает конкретную задачу: дать ИИ-агенту прямой доступ к дизайну и наоборот — импортировать код в Figma. Агент читает экраны, токены и компоненты. Или загружает в Figma целый сайт по URL. После импорта агент может проверить качество вёрстки, сравнить её с эталоном из репозитория и даже сгенерировать патч. Всё работает полностью локально. Не нужен аккаунт, API-ключи или интернет (кроме самого Figma и агента).
ДизайнFigma
Подключить MCPОткрыть на GitHub
Подключение

Подключить figbridge

Выберите способ запуска и свой MCP-клиент. Ниже останется одна готовая инструкция, которую можно проверить и скопировать.

1

Способ подключения

2

Куда подключить

3

Скопируйте и проверьте

Claude

Official Figma remote MCP server with OAuth.

  1. 1.Получите endpoint и токен доступа, если он требуется.
  2. 2.Добавьте remote MCP endpoint в Claude.
  3. 3.Проверьте подключение в списке доступных инструментов.
json
{
  "mcpServers": {
    "figbridge": {
      "url": "https://mcp.figma.com/mcp",
      "transport": "http"
    }
  }
}

Official docs include Claude Code, Codex, Cursor, VS Code, and Xcode setup.

Claude Code plugin and Codex app plugin are preferred paths where available.

Инструкция собрана из данных карточки и пока не отмечена как проверенная редакцией. Сверьте команду с README источника и не передавайте лишние права или секреты.

Как оценить figbridge

figbridge относится к Дизайн, Figma. Ниже собраны проверяемые признаки, по которым его можно сравнить с другими серверами каталога.

Происхождение
Проект сообщества
Лицензия
MIT
Реализация
JavaScript
Транспорт
stdio

Что проверить перед выбором

  • Изучите README, открытые issues и историю последних изменений в репозитории.
  • Проверьте команду установки и зависимости перед запуском в рабочем окружении.
  • Ограничьте доступ MCP-сервера только нужными файлами, API и переменными окружения.

Карточка отредактирована 20.07.2026.

Автоматическая проверка источника ещё не выполнена. Внешних источников в карточке: 1.

Характеристики

Общее

  • СтатусСообщество
  • Разработчикrudraptpsingh
  • ЛицензияMIT

Технологии

  • Языки
    JavaScript
  • Транспорт
    stdio

Описание

Возможности

  • Живой мост: включите Live bridge в плагине — любое выделение в Figma автоматически передаётся агенту.
  • Импорт URL: загрузите любую веб-страницу прямо в Figma как набор фреймов, слоёв и стилей.
  • Предварительная диагностика: команда preflight_import оценивает сложность страницы перед скачиванием.
  • Аудит дизайна: проверьте импортированный макет по пяти критериям соответствия оригиналу.
  • Патчи для репозитория: сравните импорт с исходным кодом и получите готовый патч.
  • Пакет для офлайн-анализа: get_agent_bundle создаёт ZIP с иерархией, токенами, компонентами и инструкциями.
  • Гибридная загрузка: для видео и динамических страниц под редактируемые слои подкладывается скриншот.
  • Захват из Chrome/Edge: расширение передаёт видимую область, всю страницу или выбранный элемент в Figbridge.
  • 45 инструментов MCP: чтение, каталогизация, запись, проверка и экспорт дизайн-систем.
  • Детерминированность: что выбрали в Figma — то и получает агент, без перезаписи LLM.

Как подключить

  1. Клонируйте репозиторий плагина для Figma.
  2. Запустите инициализацию MCP-сервера: npx -y figbridge-mcp init
  3. Откройте Figma Desktop, запустите плагин и включите Live bridge.
  4. Добавьте конфигурацию в ваш MCP-клиент (например, Claude Desktop): { "mcpServers": { "figbridge": { "command": "npx", "args": ["-y", "figbridge-mcp"] } } }
  5. Перезапустите клиент.

Примеры запросов

  • «Прочитайте текущий фрейм в Figma, извлеките токены цветов и напишите Tailwind-конфигурацию».
  • «Импортируйте страницу example.com в Figma как новый файл, разбейте на слои по тегам».
  • «Проверьте импортированный макет на отличия от оригинала, особенно шрифты и отступы».
  • «Соберите пакет данных с текущего экрана и подготовьте AGENTS.md для передачи другому разработчику».

Технические детали

  • Язык: JavaScript
  • Транспорт: stdio
  • Лицензия: MIT (полностью бесплатно, открытый код)
  • Совместимость: Claude Desktop, Claude Code, Cursor, Continue, Cline и любые другие MCP-клиенты

Поделиться