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-клиентов.
ДизайнAI и машинное обучениеFigma
Подключить MCPОткрыть на GitHub
Подключение

Подключить Figma Context MCP AIR

Выберите способ запуска и свой 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": {
    "figma-context-mcp-air": {
      "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 источника и не передавайте лишние права или секреты.

Как оценить Figma Context MCP AIR

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

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

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

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

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

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

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

Общее

  • СтатусСообщество
  • Разработчик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)

Вопросы и ответы

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

Figma Context MCP AIR не отмечен в каталоге как официальный MCP-сервер. Перед установкой проверьте владельца репозитория, лицензию и запрашиваемые разрешения.

В карточке разработчиком указан compassalessandrolorenz.

В карточке перечислены транспорты: stdio.

В карточке приведена команда установки или запуска: npx -y figma-context-mcp-air. Перед выполнением проверьте источник пакета и требования проекта.

Для проекта указана лицензия MIT. Условия использования нужно сверять с файлом лицензии исходного репозитория.

В карточке указаны языки реализации: TypeScript.

MCP-сервер связан в каталоге с карточкой сервиса figma.

Поделиться