Figma + Claude Code — как спроектировать UI до первой строки кода и не переделывать потом

Figma + Claude Code — как спроектировать UI до первой строки кода и не переделывать потом

Знакомая ситуация: пишешь промпт «сделай дашборд», Claude Code выдаёт что-то работающее, но выглядит это как упражнение первокурсника в Bootstrap. Переделываешь раз, два, десять — и в итоге тратишь на «дизайн промптами» больше времени, чем если бы открыл Figma и нарисовал макет.

Оказывается, можно не выбирать. С февраля 2026 года Figma и Claude Code работают в двустороннем режиме: рисуешь в Figma → передаёшь через MCP → получаешь код → отправляешь обратно в Figma для ревью. И это не маркетинговая сказка — workflow реально работает, но с нюансами.

TL;DR: Проектируем UI в Figma (или генерируем через Figma Make), подключаем Figma MCP к Claude Code одной командой, получаем код, который повторяет макет. Три альтернативных инструмента для подключения, конкретные команды и 5 граблей, на которые наступают все.

Зачем вообще проектировать до кода

Промпт «сделай красивый лендинг» — это лотерея. AI не знает, какие цвета в вашем бренде, какой spacing вы используете и как должна выглядеть кнопка в hover-состоянии. Каждая итерация через промпт — это 5-15 тысяч токенов на переделку.

Figma решает эту проблему: вы один раз рисуете макет с точными цветами, отступами и компонентами, а Claude Code читает эти данные напрямую через MCP. Не «посмотри на скриншот и угадай», а «вот тебе spacing 16px, цвет #1E40AF, компонент Button с вариантами default/hover/disabled».

По данным LogRocket, команды с настроенным MCP и дизайн-системой сокращают время первичной разработки на 50-70%.

Шаг 1: Готовим Figma-файл, который AI поймёт

Просто нарисовать красивый макет недостаточно. Figma MCP читает структуру файла — слои, переменные, компоненты. Если структура хаотичная, Claude получит мусор на входе и выдаст мусор на выходе.

Переменные и токены

Создайте Figma Variables для всего, что повторяется: цвета, отступы, размеры шрифтов, радиусы скруглений. Это аналог дизайн-токенов — Claude Code прочитает их и сгенерирует CSS-переменные или Tailwind-классы, а не захардкоженные значения.

// Что Claude получит из правильно настроенных Variables:
--color-primary: #1E40AF;
--spacing-md: 16px;
--radius-lg: 12px;
--font-size-body: 16px;

Auto Layout — обязателен

Auto Layout в Figma напрямую маппится в CSS Flexbox: direction, alignment, padding, gap. Без Auto Layout Claude получает абсолютные координаты и генерирует position: absolute для каждого элемента — верный путь к неадаптивному макету.

Компоненты и варианты

Если у вас кнопка используется в 12 местах — это должен быть один Component с вариантами (default, hover, disabled, loading), а не 12 разных прямоугольников. Claude Code распознает компоненты и переиспользует их в коде.

Имена слоёв

Frame 1247 не скажет AI ничего. hero-section/cta-button — другое дело. По рекомендациям LogRocket, используйте иерархические имена: секция/элемент. Для массового переименования — плагин Rename It.

Шаг 2: Подключаем Figma к Claude Code

Тут три пути — от простого к продвинутому.

Путь A: Официальный Figma MCP (рекомендуется для старта)

Одна команда в терминале:

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

Потом в Claude Code набираете /mcp, выбираете Figma, авторизуетесь через браузер. Готово.

Что умеет: читать дизайн (переменные, компоненты, стили, Auto Layout), генерировать код из выбранных фреймов, отправлять UI обратно в Figma через generate_figma_design.

Что НЕ умеет: создавать новые элементы в Figma, модифицировать существующие дизайны. Это read-only + code-to-canvas.

Лимиты по документации Figma:

• Starter — 6 вызовов в месяц (практически бесполезно)
• Pro/Org (Dev/Full seat) — 200 вызовов в день, 15-20 в минуту
• Enterprise — 600 вызовов в день

Путь B: figma-use — полный контроль через терминал

figma-use — open-source CLI с 100+ командами, который даёт полный read/write доступ к Figma. Это то, чего не хватает в официальном MCP.

npm install -g figma-use

Запускаем Figma с remote debugging:

# macOS
open -a Figma --args --remote-debugging-port=9222

# Windows
"%LOCALAPPDATA%\Figma\Figma.exe" --remote-debugging-port=9222

Проверяем подключение:

figma-use status

Теперь Claude Code может не только читать, но и создавать фреймы, текст, компоненты, устанавливать стили и экспортировать результат. figma-use поддерживает даже декларативный JSX-синтаксис — описываешь дизайн как React-компонент, и он рендерится в Figma.

Важно: начиная с Figma 126+, remote debugging заблокирован по умолчанию. Используйте figma-use daemon start --pipe как альтернативу.

Путь C: Chrome DevTools Protocol — без MCP вообще

Подход от intodesignsystems.com — Claude Code подключается к Figma Desktop через Chrome DevTools Protocol. Figma в браузере использует Chromium, и его Plugin API доступен через DevTools.

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Плюсы: работает с бесплатными аккаунтами, не тратит лимиты MCP, быстрее за счёт локального соединения.

Минусы: если Claude получает доступ к браузеру, он может сделать что угодно с вашим файлом — удалить, изменить настройки аккаунта. Проверяйте каждый tool call.

Баг: если figma объект не определён, откройте и закройте любой плагин в Figma — это инициализирует API.

Шаг 3: Workflow — от макета к коду

Макет готов, MCP подключён. Вот конкретный workflow:

Из Figma в код

Кликаете правой кнопкой на фрейм в Figma → Copy link to selection. В Claude Code:

Вот мой макет: [ссылка на фрейм]
Используй React + Tailwind. Сохрани все отступы и цвета из дизайна.
Компоненты Button и Input уже есть в src/components/ui/.

Claude Code через MCP прочитает переменные, Auto Layout, компоненты — и сгенерирует код, который повторяет макет. Не идеально (об этом ниже), но на 70-80% точно с первой попытки.

Из кода обратно в Figma

Написали фичу в Claude Code, хотите показать дизайнеру? Запускаете preview в браузере и пишете:

Отправь текущий UI в Figma

Claude Code вызывает generate_figma_design, который захватывает рендер из браузера и конвертирует его в редактируемые слои Figma. Дизайнер получает не скриншот, а полноценный файл с Auto Layout.

Code Connect — убийца рассинхрона

По оценке LogRocket, Code Connect — способ номер один получить консистентное переиспользование компонентов. Вы связываете Figma-компонент с реальным React-компонентом в коде, и Claude видит не просто «прямоугольник с текстом», а <Button variant="primary" size="lg">. Но есть нюанс — Code Connect доступен только на Organization и Enterprise планах.

Шаг 4: Figma Make — генерируем макет промптами

Не умеете рисовать в Figma? Figma Make генерирует интерактивные прототипы из текстовых промптов. Пишете «дашборд для аналитики с тёмной темой, графиками и sidebar-навигацией» — получаете редактируемый макет.

Потом этот макет передаёте в Claude Code через MCP как обычный Figma-файл.

Совет от UiStudioz: разбивайте сложные проекты на фазы — layout → content → interactions → polish. AI путается, когда просишь всё сразу.

С января 2026 года Figma Make прототипы встраиваются прямо в Figma Design — можно генерировать промптом, а потом дорабатывать руками.

Подводные камни

1. Официальный MCP выдаёт 85-90% неточные стили

На форуме Figma пользователи жалуются: цвета не те, размеры шрифтов не совпадают, border-radius теряется. Тот же макет в Figma Make (на бэкенде Claude Sonnet) воспроизводится точно, а через MCP — нет. Проблема в том, как MCP сериализует дизайн-данные, а не в самой модели.

Что помогает: явно указывайте в промпте «сохрани точные значения цветов и отступов из Figma Variables» и используйте Variables Visualizer плагин для экспорта JSON с токенами.

2. Claude Code зависает на больших файлах

Баг #36469: если вызвать get_design_context на большом Figma-ноде, Claude Code уходит в «Considering...» на часы без таймаута и без ошибки. Работайте с конкретными фреймами, а не с целыми страницами.

3. Starter-план = 6 вызовов в месяц

На бесплатном Starter-плане Figma вы получаете 6 вызовов MCP в месяц. Этого хватит ровно на один эксперимент. Для реальной работы нужен Pro (200 вызовов/день) — это $15/месяц за Dev seat.

4. generate_figma_design доступен не всем

По отчётам с форума Figma, generate_figma_design (code-to-canvas) работает только через Remote MCP и только в Claude Code, Codex и VS Code. Desktop MCP Server эту функцию не поддерживает.

5. WSL на Windows — отдельная боль

Figma MCP Server биндится на 127.0.0.1, а WSL создаёт виртуальный интерфейс. Claude Code в WSL не может достучаться до десктопного MCP без ручной настройки проброса портов.

Вердикт

Из всех подходов самый практичный для старта — официальный Figma MCP + хорошо структурированный файл с Variables, Auto Layout и компонентами. Это даёт 70-80% точность с первой попытки и не требует хаков.

Если нужен полный контроль — figma-use превращает терминал в Figma-редактор, но требует возни с remote debugging.

А вот Chrome DevTools Protocol — подход для экспериментаторов, а не для продакшен-workflow: слишком много рисков безопасности.

Главное, что реально экономит время — не сам MCP, а подготовка Figma-файла. Variables, Auto Layout, нормальные имена слоёв — без этого любой инструмент выдаёт мусор. С этим — любой из трёх путей работает достойно.

Как попробовать

1. Установите Figma MCP — одна команда:

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

2. Подготовьте файл — создайте Variables для цветов и отступов, примените Auto Layout ко всем контейнерам, переименуйте слои (секция/элемент)

3. Попробуйте эти промпты:

   • Вот мой макет: [ссылка]. Сгенерируй React-компонент с Tailwind, сохрани все цвета и отступы из Figma Variables
   • Покажи структуру дизайна из этого фрейма: [ссылка] — чтобы понять, что именно Claude видит через MCP
   • Отправь текущий UI в Figma — после того как код работает в браузере

4. Проверьте подключение — наберите /mcp в Claude Code, убедитесь что Figma показывает статус connected

5. Документация: официальный гайд Figma MCP, figma-use на GitHub, структурирование файлов для MCP