Figma-Context-MCP

Figma-Context-MCP

felixAnhaltMIT
3 звёзд
Figma-Context-MCP (ранее Figma To Code MCP) — это MCP-сервер для интеграции Figma с AI-ассистентами. Он извлекает из Figma-файлов только те данные, которые нужны языковым моделям для построения UI и генерации кода. Сервер удаляет внутреннюю разметку Figma (bounding boxes, constraints, прототипы) и сводит файл к чистому описанию дизайна: компоновка, стили, текст, компоненты. Размер данных уменьшается на 99,5% — типичный файл 65 МБ сжимается до 128 КБ. Имена свойств приводятся к CSS-стандарту (backgroundColor, flexDirection и т.д.), что улучшает понимание нейросетью. Сервер подходит разработчикам, которые используют Cursor, Claude Desktop и другие инструменты с MCP для превращения макетов в код. Сервер автоматически разрешает переменные Figma в финальные значения, обрабатывает SVG и сворачивает повторяющиеся паттерны. Всё это AI быстрее и точнее создаёт компоненты на основе дизайн-систем.
DesignAi-mlFigma
Открыть на GitHub

Установка

npx -y @tmegit/figma-developer-mcp

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

Общее

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

Технологии

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

Описание

Возможности

  • Извлекает данные дизайна из Figma-файла через инструмент get_figma_design — на выходе CSS-совместимая структура, готовая к использованию LLM.
  • Сокращает размер передаваемых данных на 99,5% без потери значимой для UI информации.
  • Приводит имена свойств к CSS: вместо Figma-атрибутов использует backgroundColor, flexDirection, padding и т.д.
  • Сохраняет полную информацию для построения интерфейса: расположение, стили, текст, вложенность компонентов.
  • Автоматически сжимает повторяющиеся UI-паттерны (pattern collapsing), уменьшая дублирование.
  • Экспортирует векторную графику в SVG-файлы на диск для встраивания иконок и иллюстраций в код.
  • Извлекает URL заливок изображений (get_image_fills) — удобно для скачивания ассетов.
  • Рендерит любые узлы Figma в PNG (render_node_images) для быстрой визуализации.
  • Конвертирует векторные узлы в читаемый SVG-код (read_vector_svg) для точного переноса графики.
  • Разрешает переменные Figma в реальные значения (опционально, для Enterprise-планов).

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

  1. Установите сервер через npx:
    npx -y @tmegit/figma-developer-mcp
  2. Получите персональный токен доступа Figma (Personal Access Token) с правами file_content:read, library_content:read и, опционально, file_variables:read
  3. Добавьте сервер в конфигурацию MCP-клиента, например Claude Desktop. Пример настройки в файле claude_desktop_config.json: { "mcpServers": { "figma-to-code": { "command": "npx", "args": ["-y", "@tmegit/figma-developer-mcp"], "env": { "FIGMA_ACCESS_TOKEN": "ваш_токен_здесь" } } } }
  4. Перезапустите клиент, чтобы сервер начал работу.

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

  • «Покажи структуру главного экрана из Figma в формате для AI-генерации кода»
  • «Извлеки все изображения из макета и дай ссылки на файлы»
  • «Преобразуй все векторные элементы в SVG и сохрани в отдельную папку»
  • «Сгенерируй React-компонент карточки на основе выделенного фрейма»
  • «Создай CSS-стили из этого Figma-файла, используя оптимизированные данные»

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

  • Язык реализации: TypeScript
  • Транспорт: stdio (встроенный в MCP)
  • Лицензия: MIT
  • Совместимые клиенты: Claude Desktop, Cursor, Continue.dev, и любые MCP-хосты
  • Необходим доступ к API Figma и персональный токен

Поделиться