Figma и ИИ-агент: MCP-серверы для переноса дизайна в код

Какой сервер для какой задачи

• Превратить макет в код по ссылке на фрейм — Figma MCP Server или Framelink MCP for Figma.
• Дать агенту создавать фреймы, текст и авто-лейаут в Figma — Talk to Figma MCP или Claude Talk to Figma MCP.
• Собрать из стилей Figma файлы DESIGN.md и SKILL.md с правилами для агента — генератор DESIGN.md для Figma.
• Выгрузить изображения из файла Figma на Яндекс Диск — MCP-сервер экспорта из Figma.

Все шесть работают с Figma Desktop или API Figma, поэтому сначала проверьте, что у вас есть доступ к сервису. О ситуации с доступом из России написано в отдельном разделе ниже.

Макет в код

Figma MCP Server

Figma MCP Server, 2 тыс. ★ репозитория, это руководство по официальному серверу Figma, расширение для Gemini CLI и отдельные скиллы. По ссылке на фрейм или слой агент получает переменные, компоненты, раскладку и ассеты, а затем пишет код. Если подключен Code Connect, сгенерированный код переиспользует настоящие компоненты вашего проекта. Удаленный сервер умеет и менять файлы Figma: фреймы, компоненты, переменные и авто-лейаут. Вход идет через OAuth. Инструменты чтения ограничены по частоте, на бесплатном плане и на местах View или Collab вызовов очень мало. Запись на холст бесплатна только на время беты. Риск средний, потому что сервер может менять содержимое файлов.

• для Claude Code claude mcp add --transport http figma https://mcp.figma.com/mcp
• для Cursor npx skillfoxx add mcp/figma-mcp-server --agent cursor

Framelink MCP for Figma

Framelink MCP for Figma, 16 тыс. ★ репозитория, получает данные файла, фрейма или группы через API Figma по ссылке из чата. Перед передачей модели сервер отбрасывает лишнее и оставляет раскладку и стили. Меньший контекст помогает агенту точнее воспроизвести макет на любом фреймворке. Сервер сделан под Cursor, но подключается к любому клиенту с MCP. Нужен личный токен доступа Figma. Сложные эффекты и нестандартные слои могут потеряться, потому что сервер отдает упрощенные данные. Риск средний.

• для Claude Code npx skillfoxx add mcp/framelink-mcp-for-figma --agent claude-code
• для Cursor npx skillfoxx add mcp/framelink-mcp-for-figma --agent cursor

Рисовать в Figma из агента

Talk to Figma MCP

Talk to Figma MCP, 7 тыс. ★ репозитория, связывает агента с Figma через MCP-сервер, плагин для Figma и локальный WebSocket. Агент читает документ и выделение, создает прямоугольники, фреймы, секции и текст, задает авторазметку, отступы и заливку. Есть массовая замена текста и работа с аннотациями. Нужны Bun, запущенный сервер bun socket и установленный плагин Figma, а агент подключается к общему каналу. Риск средний. Установку через skillfoxx карточка не поддерживает, берите конфигурацию автора для Cursor из карточки.

Claude Talk to Figma MCP

Claude Talk to Figma MCP, 666 ★ репозитория, развивает ту же схему: агент соединяется с Figma Desktop через локальный websocket и плагин, который ставится вручную из манифеста. Работает с бесплатным аккаунтом Figma, лицензия Dev Mode не нужна. Поддерживается параллельная работа нескольких агентов. Нужны Node.js и Figma Desktop. Риск средний.

• для Claude Code npx skillfoxx add mcp/claude-talk-to-figma-mcp --agent claude-code
• для Cursor npx skillfoxx add mcp/claude-talk-to-figma-mcp --agent cursor

Стили Figma в правила для агента

Генератор DESIGN.md для Figma, 153 ★ репозитория, читает из открытого файла стили и переменные: цвета, типографику, отступы, радиусы, эффекты и семейства компонентов. На их основе плагин собирает DESIGN.md с токенами и SKILL.md с правилами для агента, включая доступность по WCAG 2.2 AA. Работает в Figma Desktop, из исходников собирается через npm install и npm run build. Сгенерированный SKILL.md нужно проверить и дописать вручную. Риск средний.

Экспорт картинок на Яндекс Диск

MCP-сервер экспорта из Figma разбирает файл Figma с любой структурой и строит план экспорта: какие узлы, в каких форматах и под какими именами станут файлами и архивами. Сервер показывает превью с путями и просит подтверждение, прежде чем что-либо скачивать. После согласия он выгружает изображения через REST API Figma, упаковывает их в ZIP и загружает на Яндекс Диск. Нужны токены Figma и Яндекс Диска. Пакет в npm не опубликован, сервер собирается из репозитория по командам автора. Риск средний.

Figma из России

В карточках серверов указано, что Figma ограничила работу с российскими пользователями и доступ к сервису и его API из России не гарантирован. Это касается и официального сервера, и Framelink, и серверов Talk to Figma, потому что все они ходят в Figma.

Если доступа к Figma нет, перенос дизайна в код возможен без макета. Скиллы из статьи про снятие дизайн-системы с готового сайта берут токены с публичной страницы. А для генерации интерфейса с нуля пригодятся скиллы для дизайна.