Figma To Code MCP — макет Figma в код

Установка

Работает в

• Cursor
• Claude Code
• SourceCraft
• Koda
• Coddy

Ручная установка

{"mcpServers": {"Figma To Code MCP": {"command": "npx", "args": ["-y", "@tmegit/figma-to-code-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]}}}

Что делает

Figma To Code MCP помогает превратить макет Figma в код. Вы вставляете в чат Cursor или другого агента ссылку на файл, фрейм или группу и просите реализовать дизайн. Сервер запрашивает данные через Figma API и отдает агенту сжатое описание интерфейса: цвета, шрифты, отступы, эффекты и текст. Служебные метаданные Figma в него не попадают. Имена свойств взяты из CSS (`backgroundColor`, `flexDirection`, `fontSize`), стили записаны прямо в узлах, раскладка описана примитивами flexbox без абсолютного позиционирования. Переменные Figma сервер превращает в реальные значения. Повторяющиеся элементы интерфейса схлопываются в шаблоны. Автор приводит пример сжатия реального файла с 65 МБ до 128 КБ. Четыре инструмента: `get_figma_design` возвращает описание дизайна и умеет выгружать SVG в заданную папку, `get_image_fills` достает ссылки на картинки-заливки, `render_node_images` рендерит узлы в PNG, `read_vector_svg` читает векторный узел как SVG. По умолчанию формат ответа YAML, переключатель `--json` включает JSON.

Для кого. Для фронтенд-разработчиков, которые верстают по макетам Figma вместе с агентом в Cursor или Claude Code и экономят контекст на разборе большого файла.

Пример запроса к агенту

Вот ссылка на фрейм в Figma. Сверстай этот экран на React и Tailwind, значения цветов и отступов бери из переменных макета

MCP

Транспорт

stdio, http

Авторизация

API-ключ

Ограничения

Нужны Node.js 18 или новее и личный токен Figma с правами `file_content:read` и `library_content:read`. Права `file_variables:read` нужны для чтения переменных, и они доступны только на тарифе Enterprise. Без Enterprise отключите разрешение переменных параметром `resolveVariables: false`.

Один вызов `get_figma_design` делает несколько запросов к Figma API: к узлам, стилям, локальным переменным и библиотекам. На тарифе Professional лимиты составляют 10 запросов в минуту для первого уровня, 25 для второго и 50 для третьего. Кэш библиотек хранится по умолчанию 7 дней и включается, только если заданы ключи файлов библиотек.

Сервер запускается локально через npx и обращается к API Figma с вашим токеном. Последний коммит в репозитории датирован августом 2026 года.

Как отключить. Удалите блок Figma To Code MCP из файла конфигурации MCP вашего клиента и перезапустите его. Токен Figma можно отозвать в настройках аккаунта Figma.

Коротко о README

Описание начинается с перечня преимуществ: сжатие данных, CSS-имена свойств, полные данные для верстки, стили внутри узлов, раскрытие переменных, экспорт SVG и схлопывание шаблонов. Дальше идут таблицы инструментов, прав токена, параметров запуска и вызовов Figma API с уровнями лимитов. Параметры можно задать флагами или переменными окружения, флаг имеет приоритет. В конце автор ссылается на Figma Context MCP от GLips как на источник идеи.