Figma to Code MCP

Figma to Code MCP

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

Подключить Figma to Code MCP

Выберите способ запуска и свой 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-to-code-mcp": {
      "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 to Code MCP

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

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

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

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

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

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

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

Общее

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

Технологии

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

Описание

Возможности

  • Преобразует макеты Figma в JSON, оптимизированный для LLM.
  • Удаляет метаданные Figma: ограничения, прототипы, bounding boxes.
  • Сокращает объём данных до 99.5% без потери смысла для UI.
  • Именует свойства в стиле CSS: backgroundColor, gap, padding.
  • Разрешает Figma-переменные в конкретные значения (нужен Enterprise).
  • Экспортирует векторные слои в файлы SVG.
  • Отдаёт прямые URL на заливки изображений.
  • Рендерит выбранные ноды в PNG.
  • Сворачивает повторяющиеся UI-паттерны.
  • Использует inline-стили — не нужно парсить отдельные словари.

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

Сервер ставится одной командой. Для работы нужен токен Figma.

1. Установите пакет:

npx -y @tmegit/figma-to-code-mcp

2. Добавьте сервер в конфигурацию MCP-клиента. Пример для Claude Desktop или Cursor:

{ "mcpServers": { "figma-to-code": { "command": "npx", "args": ["-y", "@tmegit/figma-to-code-mcp"], "env": { "FIGMA_ACCESS_TOKEN": "ваш_токен_доступа_Figma" } } } }

3. Перезапустите клиент.

Токену Figma нужны права: file_content:read, library_content:read. Для работы с переменными — file_variables:read (доступно на тарифе Enterprise).

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

  • «Сгенерируй React-компонент на основе главного экрана из Figma. Запрос: get_figma_design с ключом файла.»
  • «Экспортируй иконку меню из макета в SVG. Используй get_figma_design и read_vector_svg.»
  • «Создай HTML/CSS страницу по дизайну из Figma. Все цвета приведи к CSS-переменным.»
  • «Найди все изображения в макете и покажи их URL с помощью get_image_fills.»

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

  • Язык: TypeScript
  • Транспорт: stdio
  • Лицензия: MIT
  • Требования: Node.js, Figma Personal Access Token
  • Клиенты: Claude Desktop, Cursor, Continue.dev, любой MCP-клиент со stdio

Поделиться