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

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

Figma MCP даёт Claude Code прямой доступ к вашему макету – цвета, отступы, компоненты, варианты. Дизайн → код без потерь при переводе.

8 апреля 2026

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

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

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

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

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

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

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

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

bash

claude plugin install figma@claude-plugins-official

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

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

bash

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

bash

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

Что 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`, прочитает все слои и выдаст структурированный отчёт: какие секции, какие компоненты, какая система отступов.

Prompt

Анализ Figma макета

Проанализируй мой Figma дизайн по ссылке [вставить URL фрейма]. Выдели – общую структуру layout, цветовую палитру, типографику, повторяющиеся компоненты, spacing-систему. Не генерируй код, только анализ.

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

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

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

Prompt

Извлечение design tokens

Извлеки design tokens из моего Figma файла. цвета (primary, secondary, neutral шкалы), типографику (font-family, sizes, weights, line-heights), spacing (padding, gap, margin шкала), border-radius, shadows. Сохрани в tokens.css или tailwind.config.ts.

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

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

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

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

Prompt

Генерация компонента

Сгенерируй компонент Button из моего Figma дизайна. Используй design tokens из tokens.css. Учти все варианты: primary, secondary, ghost, disabled. Сверь spacing, border-radius и типографику с макетом через Figma MCP.

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

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

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

Prompt

Сборка страницы

Собери секцию Hero из моего Figma макета. Используй готовые компоненты (Button, Navigation). Layout, отступы и адаптивность – точно по макету через Figma MCP. Сверь результат через get_screenshot.

Три 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.

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.