Как создавать дизайн: Figma + Claude Code

Зачем это нужно

Классический workflow дизайнера: рисуешь макет в Figma, передаёшь разработчику, получаешь результат «почти как в макете, но не совсем». Цвета чуть другие, отступы на глаз, шрифт не тот. Потому что developer интерпретирует макет вручную.

Figma MCP убирает эту прослойку. Claude Code подключается напрямую к вашему Figma-файлу и видит всё: каждый слой, каждый цвет в HEX, каждый отступ в пикселях, каждый вариант компонента. Перевод дизайна в код становится точным, а не приблизительным.

Результат: дизайнер сам шипит свой дизайн. Или разработчик получает код, который pixel-perfect совпадает с макетом. Без промежуточных файлов, без потерь при переводе.

Подключение Figma MCP

Figma выпустила официальный MCP-сервер. Два варианта подключения:

Через плагин (рекомендуется)

claude plugin install figma@claude-plugins-official

Плагин автоматически настраивает MCP и добавляет Agent Skills для типовых сценариев.

Через команду

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

Для глобальной настройки (все проекты):

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

Авторизация

После подключения:

1. Запустите новую сессию Claude Code
2. Введите /mcp в чате
3. Выберите figma → Authenticate
4. Браузер откроет страницу авторизации Figma – разрешите доступ
5. Проверка: /mcp должен показать Authentication successful

Что Claude Code видит в Figma

После подключения Claude Code получает доступ к 14 инструментам. Ключевые:

get_design_context – основной инструмент. Читает выбранный фрейм и возвращает его структуру в виде React + Tailwind кода (фреймворк настраивается). Включает все цвета, отступы, типографику, компоненты.

get_variable_defs – извлекает design tokens: переменные цветов, spacing, typography. Если вы используете Figma Variables – Claude получит их как готовые токены для кода.

get_metadata – слоевое дерево файла: ID, имена, типы, позиции, размеры каждого элемента.

get_screenshot – скриншот выбранного фрейма для визуального сравнения. Claude сопоставляет свой код с картинкой.

search_design_system – поиск по библиотекам компонентов, переменных и стилей. Найдёт кнопку, карточку или цвет по имени.

use_figma – двусторонний: Claude может не только читать, но и создавать/редактировать объекты прямо в Figma canvas.

По умолчанию get_design_context возвращает React + Tailwind. Для другого стека используйте create_design_system_rules – Claude создаст файл правил под ваш фреймворк.

4-фазный workflow

Фаза 1: анализ дизайна

Начните с полного анализа макета. Claude должен понять структуру до того, как начнёт генерировать код.

Claude вызовет get_design_context и get_metadata, прочитает все слои и выдаст структурированный отчёт: какие секции, какие компоненты, какая система отступов.

Фаза 2: извлечение design tokens

После анализа – извлекаем токены дизайна в код.

Если в Figma используются Variables – Claude получит их напрямую через get_variable_defs. Если нет – извлечёт из стилей конкретных элементов.

Фаза 3: генерация компонентов

Теперь поочерёдно генерируем компоненты. Начинайте с маленьких, заканчивайте большими.

Claude вызовет get_design_context для конкретного компонента, прочитает все варианты и сгенерирует код с точными значениями из макета.

Порядок генерации: Button → Input → Card → Navigation → Section layouts.

Фаза 4: сборка страниц

Когда компоненты готовы – собираем полные секции и страницы.

Claude читает layout фрейма, использует готовые компоненты и собирает секцию с точным spacing.

Три workflow для разных задач

A: Design System → Full Site

Для крупных проектов с дизайн-системой в Figma.

1. Извлечь tokens → tokens.css
2. Сгенерировать все компоненты из библиотеки
3. Собрать страницы из компонентов
4. Проверить через get_screenshot

Медленнее, но результат – полная консистентность. Подходит для продуктов с несколькими страницами.

B: Speedrun одной страницы

Для быстрого прототипирования или лендинга.

1. Скормить Claude весь фрейм страницы разом
2. Попросить сгенерировать всё за один проход
3. Доработать детали итеративно

Быстрее, но компоненты не переиспользуются. Подходит для лендингов и one-pager.

C: Component First

Для зрелых дизайнеров с выстроенной системой.

1. Настроить Code Connect – связать Figma-компоненты с реальными компонентами кода
2. Claude будет использовать ваши существующие компоненты вместо генерации новых
3. Только layout и сборка – через MCP

Самый чистый результат. Требует предварительной настройки Code Connect через Figma CLI.

Подготовка Figma-файла: чеклист

Качество кода напрямую зависит от качества Figma-файла. Перед подключением MCP:

Именование слоёв – замените Frame1268 и Group5 на CardContainer, CTA_Button, profile-card. Имя слоя = контекст для LLM.

Auto Layout везде – задаёт flexDirection, padding, gap. Без Auto Layout Claude угадывает отступы. С Auto Layout – читает точные значения.

Figma Variables – цвета, spacing, border-radius через Variables, не захардкоженные значения. MCP читает переменные и передаёт как токены.

Компоненты – всё что повторяется (кнопки, карточки, инпуты) должно быть компонентом с вариантами.

Аннотации – для поведений, которые визуально не очевидны: «при клике открывается drawer», «scroll horizontal», «tooltip on hover».

Rate limits

Количество запросов зависит от тарифа Figma:

• Starter/Free – 6 запросов в месяц. Фактически только попробовать
• Pro/Org – 200 в день, 10–15 в минуту. Хватает на полноценную работу
• Enterprise – 600 в день, 20 в минуту

Инструменты use_figma и generate_figma_design (запись в canvas) – сейчас бесплатны в бета, но будут тарифицироваться отдельно.

Честные ограничения

Только OAuth – Personal Access Token не работает с официальным remote MCP. Если нужен PAT – используйте сторонний сервер GLips/Figma-Context-MCP.

React + Tailwind по умолчанию – get_design_context возвращает код в этом стеке. Для Vue, Svelte или plain CSS нужно настроить rules-файл через create_design_system_rules.

Нет экспорта ассетов – SVG, PNG, иконки через MCP не экспортируются. Только скриншот через get_screenshot. Ассеты придётся экспортировать из Figma вручную.

Нет синхронизации кода → Figma – generate_figma_design конвертирует live UI в слои Figma, но автосинхронизация изменений кода обратно в макет не поддерживается.

Rate limits на бесплатном тарифе – 6 запросов в месяц. Для реальной работы нужен Pro.

Итого: ваш чеклист

1. Подготовьте Figma-файл: именование слоёв, Auto Layout, Variables, компоненты
2. Подключите MCP: claude plugin install figma@claude-plugins-official
3. Авторизуйтесь через OAuth в /mcp
4. Фаза 1 – анализ макета (без кода)
5. Фаза 2 – извлечение tokens в CSS/Tailwind
6. Фаза 3 – генерация компонентов поочерёдно
7. Фаза 4 – сборка страниц из компонентов
8. Сверка через get_screenshot