Repolode
Предложить
southleft

southleft/figma-console-mcp

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

Open source альтернатива:Figma Dev Mode

Открыть на GitHubСайт
Звёзды
3,165
Форки
287
Открытые issues
9
Последний коммит
9 дней назад

Что это?

Figma Console MCP — сервер Model Context Protocol, который открывает доступ к файлам Figma для AI-клиентов, таких как Claude, Cursor и Codex. Он считывает переменные, компоненты, стили и структуру файлов, а также может вносить изменения в Figma: создавать фреймы и компоненты, управлять переменными и режимами, редактировать текст, заливки и макеты через плагин Desktop Bridge, работающий в Figma Desktop.

Помимо базовых операций чтения и записи, проект помогает работать с дизайн-системами. Он синхронизирует переменные Figma с DTCG JSON и несколькими форматами токенов в обоих направлениях, проверяет соответствие компонента Figma его реализации в коде, выполняет проверки доступности в стиле WCAG и генерирует документацию компонентов. Инструменты возвращают структурированные данные — например, токены, варианты и привязки, — чтобы сгенерированный код соответствовал стеку команды.

Для полного доступа на запись нужна настройка NPX или Local Git: она работает на Node.js и предоставляет 130 инструментов. Cloud Mode позволяет веб-клиентам с AI, например Claude.ai, подключаться к запущенному плагину без Node.js и предлагает 105 инструментов. Удалённая конечная точка SSE доступна только для чтения.

Ключевые возможности

  • 01Считывает переменные, компоненты, стили и структуру файлов Figma для работы с AI
  • 02Создаёт и редактирует во Figma фреймы, компоненты, текст, заливки и Auto Layout
  • 03Синхронизирует токены дизайна в обоих направлениях с DTCG JSON, CSS, Tailwind и другими форматами
  • 04Сравнивает компоненты Figma с реализациями в коде и сообщает о различиях
  • 05Выполняет проверки доступности на основе WCAG и формирует оценки доступности компонентов
  • 06Работает с Claude Code, Cursor, Windsurf, Claude Desktop, Codex и Gemini CLI

Сценарии использования

  • Позволяет AI-ассистенту создавать UI-макеты и компоненты прямо в файле Figma
  • Помогает команде синхронизировать переменные Figma с токенами дизайна в коде
  • Помогает проверить, соответствует ли реализованный компонент макету Figma, до утверждения
  • Помогает выявлять проблемы с именованием, токенами и доступностью в дизайн-системе

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

  1. 1

    Получите персональный токен доступа Figma в справке Figma

  2. 2

    Добавьте сервер в клиент MCP с помощью npx (пример для 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
  3. 3

    Импортируйте манифест плагина Desktop Bridge в Figma Desktop и запустите его

  4. 4

    Перезапустите клиент MCP, чтобы загрузить конфигурацию

Что важно знать

  • Для доступа ко всем функциям необходимы Figma Desktop и подключение плагина Desktop Bridge.
  • Режим Remote SSE доступен только для чтения и не позволяет создавать или изменять дизайны.
  • Для некоторых функций, например variables, требуется тарифный план Figma Enterprise.

В подборках

Open source фреймворки и приложения для ИИ-агентовMCP-серверы

Темы

#figma#mcp#design-system#design-tokens#ai-agent#accessibility#typescript#ai#design-systems#figma-api

Частые вопросы

Что такое figma-console-mcp?
MCP-сервер подключает AI-ассистентов к Figma: извлекает токены дизайна, создаёт и редактирует макеты, проверяет соответствие дизайна коду и доступность. Figma Console MCP — сервер Model Context Protocol, который открывает доступ к файлам Figma для AI-клиентов, таких как Claude, Cursor и Codex. Он считывает переменные, компоненты, стили и структуру файлов, а также может вносить изменения в Figma: создавать фреймы и компоненты, управлять переменными и режимами, редактировать текст, заливки и макеты через плагин Desktop Bridge, работающий в Figma Desktop.
figma-console-mcp можно использовать бесплатно? Какая у него лицензия?
figma-console-mcp распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
figma-console-mcp всё ещё поддерживается?
Активно поддерживается. Последний коммит в figma-console-mcp — 29 окт. 2026 г..
Для чего можно использовать figma-console-mcp?
Позволяет AI-ассистенту создавать UI-макеты и компоненты прямо в файле Figma Помогает команде синхронизировать переменные Figma с токенами дизайна в коде Помогает проверить, соответствует ли реализованный компонент макету Figma, до утверждения Помогает выявлять проблемы с именованием, токенами и доступностью в дизайн-системе
Как установить figma-console-mcp?
Получите персональный токен доступа Figma в справке Figma Добавьте сервер в клиент MCP с помощью npx (пример для 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 Импортируйте манифест плагина Desktop Bridge в Figma Desktop и запустите его Перезапустите клиент MCP, чтобы загрузить конфигурацию
Где скачать figma-console-mcp?
Исходный код и инструкции по установке — на GitHub: https://github.com/southleft/figma-console-mcp

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

Manavarya09 / design-extract

CLI открывает любой сайт в headless-браузере и извлекает его дизайн-систему в виде токенов DTCG, конфига Tailwind, переменных Figma и других форматов.

Инструменты разработчика#design-system#design-tokens#css
4,8 тыс.+388 за неделю405HTMLMITАктивно поддерживаетсяОбновлён позавчера

VoltAgent / awesome-design-md

Подборка файлов DESIGN.md с сайтов брендов, которые помогают AI-агентам для программирования создавать интерфейсы в соответствии с их дизайн-системами.

Обучающие материалы#design-system#design-tokens#ai-coding
125,9 тыс.+1,2 тыс. за неделю13,9 тыс.MITОбновлён 10 дней назад