Figma Console MCP — дизайн-система как API для ИИ-агентов

Figma Console MCP — это MCP-сервер, который подключает ИИ-ассистентов к Figma. Слоган проекта: «Ваша дизайн-система как API». Сервер работает в обе стороны: он извлекает данные дизайна для кода и одновременно умеет создавать и менять макеты в Figma по запросу из чата. Проект написан на TypeScript, распространяется под лицензией MIT и собрал около 3,3 тысячи звёзд на GitHub.

Главная идея — отдать модели точные данные вместо догадок. Сервер передаёт ИИ токены, варианты компонентов, привязки и состояния в структурированном виде. Он не навязывает фреймворк и корпоративный стиль, поэтому сгенерированный код следует стеку и соглашениям вашей команды.

Что умеет

• Извлечение дизайн-системы — переменные, компоненты и стили одним вызовом.
• Двусторонняя синхронизация токенов — экспорт переменных Figma в DTCG JSON и ещё девять форматов: CSS, Tailwind, SCSS, Style Dictionary, Tokens Studio и другие. Плюс обратная запись правок из кода в Figma. Это заменяет экспортный конвейер Style Dictionary и Tokens Studio.
• Создание дизайна — компоненты, фреймы и целые макеты прямо в Figma. Набор компонентов с вариантами создаётся одним вызовом: например, три состояния на два размера дадут шесть готовых вариантов.
• Управление переменными — создание, обновление, переименование и удаление токенов.
• Визуальная отладка — скриншоты для контекста и мониторинг консоли плагина в реальном времени.
• История версий — список версий, сравнение снимков файла, генерация changelog и поиск того, кто и когда ввёл конкретное свойство или вариант.
• FigJam и Slides — стикеры, блок-схемы и таблицы на досках; программное управление презентациями.
• Проверка доступности — 14 проверок WCAG прямо на канвасе плюс сканирование кода через axe-core.

Четыре способа подключения

Итог простой. Remote SSE только читает данные. Cloud Mode открывает запись из веб-клиентов, которым недоступен Node.js. NPX даёт все 130 инструментов плюс мониторинг в реальном времени.

Установка

Для Claude Code всё делается одной командой:

claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest

Для Cursor, Windsurf и Claude Desktop конфигурация такая:

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Дальше пять шагов:

1. Создайте personal access token в Figma (он начинается с figd_) с разрешениями на чтение.
2. Добавьте сервер в конфигурацию MCP-клиента, как показано выше.
3. Импортируйте плагин Desktop Bridge в Figma Desktop из файла ~/.figma-console-mcp/plugin/manifest.json.
4. Перезапустите клиент.
5. Проверьте связь фразой «Check Figma status», затем попросите создать простой фрейм — это подтвердит доступ на запись.

Desktop Bridge — плагин для Figma Desktop. Он общается с сервером по WebSocket на портах 9223–9232, и для запуска Figma не нужны отладочные флаги. Именно плагин даёт работу с переменными на любом тарифе Figma, включая Free: он использует Plugin API, а не Enterprise REST API.

В Cloud Mode веб-клиент отправляет команды через облачный MCP-сервер, который передаёт их по WebSocket в плагин. Сопряжение проходит по шестизначному коду: агент называет код, вы вводите его в плагине.

Ключевые инструменты

• figma_get_design_system_kit — вся дизайн-система одним вызовом: токены, компоненты, стили и визуальные спецификации.
• figma_execute — универсальный инструмент: исполняет любой код Figma Plugin API. Через него агент создаёт фреймы, текст, компоненты и целые макеты.
• figma_create_component_set — набор компонентов с вариантами одним декларативным вызовом. Матрица { State: ["default", "hover"], Size: ["sm", "lg"] } превращается в четыре готовых варианта на канвасе.
• figma_check_design_parity — детерминированное сравнение компонента в Figma с его кодом: визуал, отступы, типографика, токены, API компонента, доступность. Результат — оценённый отчёт со списком правок.
• figma_export_tokens и figma_import_tokens — экспорт и импорт токенов с полным циклом применения: создание недостающих переменных, переименование, настоящие алиасы, удаления только в режиме replace. Переменные Figma сохраняют свои ID, поэтому переименование на любой из сторон не создаёт дубликаты.
• figma_lint_design — линт WCAG и правил дизайн-системы прямо на канвасе, с разметкой по уровням AA и best practice.
• figma_audit_design_system_report — аудит здоровья дизайн-системы в духе Lighthouse: шесть категорий, у каждой находки указано, чинится ли она этим же сервером.

После создания дизайна агент сам проверяет результат по циклу: выполнить код → сделать скриншот → проверить выравнивание и отступы → поправить → подтвердить финальным скриншотом.

Извлечение дизайн-системы из кодовой базы

В Local Mode доступно семейство инструментов figma_ds_*. Оно превращает производственную кодовую базу в дизайн-систему:

• figma_ds_analyze — сканирует код: определяет фреймворк и слой стилей, ранжирует компоненты по частоте использования, находит дубликаты и классифицирует архитектуру.
• figma_ds_extract_tokens — извлекает токены в DTCG. Для каждого токена фиксируется происхождение: файл, строка, частота, уверенность.
• figma_ds_scaffold и figma_ds_setup_storybook — генерируют пакет дизайн-системы с обвязкой Storybook под стили исходного приложения.
• figma_ds_verify — детерминированные проверки точности: парсинг DTCG, целостность алиасов, разрешение var() в вёрстке.

Готовые токены загружаются обратно в Figma через figma_import_tokens.

MCP Apps

Кроме текстовых ответов, сервер поддерживает MCP Apps — интерактивные HTML-интерфейсы прямо в чате. Сейчас их два. Token Browser показывает токены по коллекциям с фильтрами и колонками режимов Light и Dark. Design System Dashboard считает здоровье дизайн-системы по шести категориям. Возможность помечена как экспериментальная и работает в клиентах с поддержкой ext-apps, например в Claude Desktop. Без поддержки MCP Apps тот же аудит доступен обычным инструментом figma_audit_design_system_report.

Чем отличается от официального MCP-сервера Figma

Проект позиционирует себя как дополнение, а не замену. Официальный сервер Figma фокусируется на контексте «дизайн → код», Code Connect и создании контента. Figma Console MCP — на операциях с дизайн-системой: детерминированные проверки, экспорт токенов в десять форматов, работа с переменными на любом тарифе, документация компонентов с историей дизайна и git, извлечение дизайн-системы из кодовой базы. Оба сервера могут работать в одном MCP-клиенте одновременно.

Ссылки

• Документация проекта
• Полное руководство по установке
• Каталог всех 130 инструментов
• Сравнение режимов подключения
• Changelog