Figma и Claude Code через MCP

Дизайнер отдал тебе макет в Figma, а превращать его в код — на тебе. Обычный путь: открываешь фрейм, вручную вымеряешь отступы, подбираешь цвета, переписываешь всё в компоненты. Долго и с ошибками на глаз. Figma сделала официальный MCP-сервер, который убирает этот разрыв: агент сам читает выбранный фрейм прямо из Figma и превращает его в стартовый код. В этом гайде подключим Figma к Claude Code одной командой и разберём, как этим пользоваться — и где у этой магии честные границы.

Короткий ответ

У Figma есть официальный MCP-сервер (Dev Mode MCP). Он даёт агенту читать твои макеты и превращать выбранный фрейм в код. Подключается в Claude Code одной командой, дальше проходишь авторизацию через Figma прямо в чате. Подключается к серверу не любой инструмент, а клиент с поддержкой этого MCP — среди них VS Code, Cursor и Claude Code. После подключения ты выделяешь фрейм в Figma, просишь агента сгенерировать по нему код — и получаешь отправную точку, которую он же дальше доводит.

Сразу честно: это не кнопка «сделай пиксель-в-пиксель продакшн». Сервер превращает фрейм дизайнера в стартовый код, который агент потом уточняет, а человек проверяет. Ценность в том, что старт идёт не с пустого места и не с прищуренного глаза, а из реальной структуры макета.

Что понадобится

• Аккаунт Figma с доступом к нужному файлу. Работа идёт с реальными фреймами твоего проекта.
• Установленный Claude Code — команда claude доступна в терминале.
• Dev Mode в Figma — режим для передачи дизайна в разработку. Именно в нём живёт MCP-сервер.

Рекомендованный способ поставить всё сразу — плагин Figma: он приносит и настройки MCP-сервера, и готовые Agent Skills под типовые сценарии. Чтобы включить сервер на стороне Figma: ничего не выделяя, переключись в Dev Mode, затем включи MCP-сервер в правой панели.

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

Подключение — это удалённый HTTP-сервер: он уже развёрнут на стороне Figma, локально ничего поднимать не надо, ты просто указываешь адрес. Команда:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Здесь figma — имя, под которым сервер будет виден в списке, а дальше идёт его адрес. После добавления сервер требует авторизацию — её проходишь прямо внутри чата Claude Code. Набери:

/mcp

В списке выбери figma и запусти авторизацию (Authenticate). Откроется OAuth-поток Figma — подтверди доступ (Allow Access). Если всё прошло, увидишь сообщение вроде «Authentication successful. Connected to figma». Проверить статус можно ещё раз той же командой:

/mcp

Сервер должен числиться подключённым. С этого момента у агента появились руки в твой Figma — он может читать выбранные фреймы.

Важно: подключается к серверу Figma не любой MCP-клиент, а поддерживаемый — среди них VS Code, Cursor, Claude Code; полный актуальный список Figma держит в каталоге MCP. Если твой инструмент в него не входит — подключение не выйдет, и это ожидаемо, а не баг.

Как этим пользоваться

Базовый сценарий простой и ровно ради него всё затевалось: выделяешь фрейм в Figma и просишь агента сгенерировать по нему код. В интерфейсе это называется «generate code from selected frames» — сгенерировать код по выбранным фреймам.

Практически это выглядит так. В Figma ты выбираешь один экран или целый флоу. В Claude Code просишь: собери по выделенному фрейму компонент на твоём стеке. Агент читает структуру макета через MCP, а не гадает по картинке, и выдаёт первый проход кода. Дальше — обычная итеративная работа: «этот блок вынеси в отдельный компонент», «отступы подгони под сетку», «состояния кнопки добавь». Хорошо заходит и на сборку целого потока экранов, и на доведение одного экрана.

Разница с привычным «сделай как на скриншоте» — принципиальная. Скриншот плоский: по нему не видно, где намеренный отступ, а где случайный, где компонент, а где просто цветной прямоугольник. Читая фрейм напрямую, агент получает структуру, а не пиксели, — и стартовый код ближе к замыслу дизайнера.

Code Connect и правила дизайн-системы

Есть слой поверх базовой генерации — Code Connect. Он связывает компоненты в Figma с реальными компонентами в твоём коде. Смысл: когда агент видит в макете, скажем, кнопку из дизайн-системы, он не изобретает её заново, а знает, какому компоненту в твоём проекте она соответствует.

На этой же основе сервер умеет генерировать правила дизайн-системы, выровненные под твою кодовую базу, — то есть подсказки агенту, как именно у вас принято собирать интерфейс. Это то, что превращает разовую генерацию в предсказуемую: не «похожий на макет код каждый раз по-новому», а код, который ложится в твои существующие компоненты и договорённости.

Ключевая мысль: без Code Connect агент собирает интерфейс с нуля по картинке фрейма. С Code Connect он переиспользует то, что у тебя уже есть. Чем ближе связь макета с кодом, тем меньше ручной доводки после.

Частые ошибки

FAQ

Нужно ли уметь программировать, чтобы подключить Figma?

Само подключение — одна команда claude mcp add --transport http и авторизация в /mcp. Код ты не пишешь. Но чтобы осмысленно доводить сгенерированное, базовое понимание своего стека всё же пригодится — итерации идут на языке кода.

Это делает готовый продакшн-код?

Нет. На выходе — отправная точка: код, собранный по структуре фрейма, который агент дальше уточняет, а человек проверяет. Ждать пиксель-в-пиксель финального приложения из макета не стоит. Это ускоряет старт, а не отменяет разработку.

Любой редактор может подключиться к серверу Figma?

Не любой. Нужен клиент с поддержкой этого MCP — среди них VS Code, Cursor и Claude Code; полный список Figma публикует в каталоге MCP. Инструмент вне списка сервер не пустит — это ожидаемое ограничение, а не сбой.

Зачем нужен Code Connect, если и так генерирует код?

Без него агент каждый раз собирает интерфейс заново по картинке. Code Connect связывает компоненты макета с твоими реальными компонентами, а генерация правил дизайн-системы выравнивает вывод под твою кодовую базу. Итог — меньше ручной доводки и предсказуемый результат.

Итог

Figma Dev Mode MCP — это официальный мост между макетом и кодом: агент читает выбранный фрейм прямо из Figma и превращает его в стартовый код, а не гадает по скриншоту. Подключается одной командой плюс OAuth в /mcp, подключаться может не любой редактор, а поддерживаемый — среди них VS Code, Cursor и Claude Code. Code Connect и правила дизайн-системы делают вывод предсказуемым и выровненным под твой проект. Держи в голове честную рамку: на выходе отправная точка, которую доводит агент и проверяет человек, — не финальный продакшн.

А про то, как получить макет вообще без Figma — одними словами, — читай гайд Claude Design — макет словами.