Figma-Context-MCP-AIR

Figma-Context-MCP-AIR

compassalessandrolorenzMIT
1 звёзд
Figma-Context-MCP-AIR связывает Figma и ИИ-ассистентов по протоколу MCP. Модель получает структурированные данные макета: координаты блоков, цвета, тексты, отступы. Никаких скриншотов и ручного описания — AI видит дизайн как код. Сервер упрощает сырой ответ Figma API. Он оставляет только значимые для вёрстки данные и отдаёт их в JSON или XML. Это снижает нагрузку на модель, ускоряет ответ и повышает точность генерации кода. Подходит для Cursor, Claude, Windsurf и других MCP-клиентов.
DesignAi-mlFigma
Открыть на GitHub

Установка

npx -y figma-context-mcp-air

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

Общее

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

Технологии

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

Описание

Возможности

  • Получает полную структуру макета: расположение, слои, текст, стили, компоненты. Возвращает в JSON или YAML.
  • Скачивает PNG- и SVG-изображения из Figma по ID узла прямо на локальный диск.
  • Делает скриншот указанного узла в base64 для визуальной проверки содержимого AI.
  • Выгружает все токены дизайн-системы: цвета, типографику, отступы, эффекты и стили.
  • Генерирует файл с правилами дизайн-системы под ваш фреймворк (React, Vue, Svelte).
  • Извлекает содержимое FigJam-досок: стикеры, соединительные линии, фигуры в XML.
  • Проверяет подлинность токена Figma и показывает ваш тарифный план.
  • Отдаёт иерархию слоёв в XML для быстрого поиска элементов перед полной выгрузкой.

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

Получите Personal Access Token в Figma (Настройки → Личные токены доступа).

Установите сервер через npx:

npx -y figma-context-mcp-air --figma-api-key=ВАШ_КЛЮЧ --stdio

Или добавьте в конфигурацию MCP-клиента, например `claude_desktop_config.json`:

{ "mcpServers": { "Figma MCP AIR": { "command": "npx", "args": ["-y", "figma-context-mcp-air", "--figma-api-key=ВАШ_КЛЮЧ", "--stdio"] } }}

Для Windows замените команду на `cmd` и укажите аргументы: `["/c", "npx", "-y", "figma-context-mcp-air", "--figma-api-key=ВАШ_КЛЮЧ", "--stdio"]`.

Перезапустите клиент — сервер запустится автоматически.

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

  • «Сверстай страницу регистрации из Figma (file_key) на React и TypeScript. Используй переменные из `get_variable_defs` для цветов.»
  • «Найди на FigJam-доске (file_key) все стикеры с текстом TODO и сохрани их в файл tasks.md.»
  • «Сделай скриншот компонента Header и скачай иконку поиска в SVG в папку assets.»
  • «Сгенерируй документацию дизайн-системы для Tailwind на основе Figma-файла.»

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

  • Язык: TypeScript
  • Транспорт: stdio
  • Установка: npx -y figma-context-mcp-air
  • Лицензия: MIT
  • Совместимость: Claude Desktop, Cursor, Windsurf, VS Code (Cline, Continue)

Поделиться