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

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

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

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

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

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

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

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

```bash
claude plugin install figma@claude-plugins-official
```

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

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

```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
```

### Авторизация

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

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

:::warning
Официальный remote MCP использует OAuth, не Personal Access Token. PAT работает только со сторонними серверами (например, GLips/Figma-Context-MCP). Если вам нужен PAT – ищите сторонние решения.
:::

## Что 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 должен понять структуру до того, как начнёт генерировать код.

:::prompt
title: Анализ Figma макета
label: Prompt

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

:::

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

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

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

:::prompt
title: Извлечение design tokens
label: Prompt

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


:::

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

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

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

:::prompt
title: Генерация компонента
label: Prompt

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

:::

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

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

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

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

:::prompt
title: Сборка страницы
label: Prompt

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

:::

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».

:::warning
Плохо структурированный файл с безымянными слоями и без Auto Layout даст плохой код. MCP не сделает магию из хаоса – он точно переведёт то, что вы ему дали.
:::

## 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`

:::cta
Вступить в Edge Lab
https://edgelab.su
:::