# Создаём дизайн-систему в Figma с помощью Claude Code

> Пошаговое руководство по созданию полноценной дизайн-системы в Figma с помощью Claude Code: токены, компоненты, переменные и готовые экраны.

![Иллюстрация 1](/api/guides-media/automation/figma-design-system-with-claude-code/images/figma-design-system-with-claude-code-step-01.webp)

## 1. Что понадобится для работы

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

Перед началом убедитесь, что у вас есть:

- **Claude Code desktop app** — приложение с тремя режимами: Chat, Code и Agentic.
- **Активная подписка Claude** — бесплатный аккаунт для этого workflow не подходит.
- **Аккаунт Figma** — с хотя бы одним открытым рабочим файлом.
- **Время** — 30–45 минут без отвлечений для прохождения полного цикла.

> [!WARNING]
> Этот workflow расходует лимиты использования Claude. Сборка сложного компонента вроде кнопки со 120+ вариантами может съесть значительную часть вашего часового лимита. Начните с более простых задач, чтобы освоиться, прежде чем браться за масштабные проекты.

![Что понадобится для работы — иллюстрация 2](/api/guides-media/automation/figma-design-system-with-claude-code/images/figma-design-system-with-claude-code-step-02.webp)

## 2. Устанавливаем Claude Code

Перейдите на [claude.ai/download](https://claude.ai/download) и скачайте Claude Code desktop app для вашей ОС (macOS или Windows).

После установки приложение попросит пройти аутентификацию — войдите с данными вашей подписки Claude. После этого откроется интерфейс с тремя режимами:

- **Chat** — стандартный разговорный Claude.
- **Code** — для задач по написанию кода.
- **Agentic** — здесь происходит основная работа с Figma.

Для работы с Figma используется режим **Agentic**: именно он позволяет Claude выполнять автономные действия, включая прямое взаимодействие с вашим Figma-холстом.

![Что понадобится для работы — иллюстрация 3](/api/guides-media/automation/figma-design-system-with-claude-code/images/figma-design-system-with-claude-code-step-03.webp)

## 3. Подключаем Claude к Figma через MCP

Это ключевой шаг, который делает весь workflow возможным. Claude подключается к Figma через сервер MCP (Model Context Protocol).

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

1. В приложении Claude Code перейдите в **Settings**.
2. Откройте раздел **MCP Servers**.
3. Нажмите **«Add MCP Server»**.
4. Выберите **Figma** из списка доступных интеграций.
5. Пройдите аутентификацию через Figma-аккаунт (OAuth-флоу).
6. После подключения Figma появится в списке активных MCP-серверов.

**Как проверить, что всё работает:**

Откройте любой Figma-файл в браузере и задайте Claude простой вопрос:

```text
Can you see my current Figma file? What's on the canvas?
```

Если Claude описывает содержимое вашего файла — соединение установлено. Если нет — проверьте конфигурацию MCP-сервера и убедитесь, что Figma-файл открыт.

> [!TIP]
> Перед началом работы создайте отдельный Figma-файл или выделенную страницу внутри существующего. Это изолирует эксперименты от рабочих материалов.

![Шаг 3 — Создаём полную систему переменных с помощью AI — иллюстрация 4](/api/guides-media/automation/figma-design-system-with-claude-code/images/figma-design-system-with-claude-code-step-04.webp)

## 4. Создаём полную систему переменных с помощью AI

Вместо того чтобы вручную создавать десятки переменных цвета, типографики и отступов, Claude собирает всю токен-архитектуру самостоятельно.

**Промпт для создания системы переменных:**

```text
In my Figma file, create a complete design token system with the following structure:

1. Primitive Colors — create a full range of colours: grays (50–900), primary blue (50–900), secondary green (50–900), error red (50–900), warning amber (50–900), and success green (50–900). Use industry-standard hex values.
2. Semantic Colors — create a semantic layer that references the primitive colours: background-primary, background-secondary, text-primary, text-secondary, text-disabled, icon-primary, icon-secondary, border-default, border-strong. Also add hover and active state variants for interactive elements.
3. Primitive Dimensions — create a spacing scale: 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80. And a radius scale: 0, 2, 4, 8, 12, 16, 9999 (full round).
4. Semantic Typography — create a typography token system for: display-large, display-medium, heading-1 through heading-4, body-large, body-medium, body-small, caption, and overline. Include font family, font size, line height, and font weight as separate tokens. Also create Figma text styles and map the typography variables to them.
```

**Что Claude создаёт в результате:**

Claude начинает автономно работать в Figma-файле. Через несколько минут в панели Variables появляется:

- **Primitive Colors** — полный набор цветовых шкал, правильно организованных по коллекциям.
- **Semantic Colors** — все ссылки на primitive-коллекцию корректны (не захардкоженные hex-значения, а реальные связи).
- **Токены интерфейса** — фон, текст, иконки и границы с hover и active состояниями.
- **Типографическая система** — текстовые стили, привязанные к соответствующим переменным.
- **Токены размеров** — шкалы отступов и скруглений, готовые к использованию.

Семантические токены правильно слинкованы с примитивами — изменение одного примитивного цвета автоматически каскадируется по всей системе. Именно так строится грамотная дизайн-система вручную, только здесь это занимает минуты, а не часы.

> [!TIP]
> После генерации проверьте значения цветов по гайдлайнам вашего бренда. AI выбирает разумные дефолты, но точный оттенок вашего бренда может отличаться. Измените примитивы — и весь семантический слой обновится автоматически.

## 5. Создаём сложный компонент кнопки: 120+ вариантов

Настоящий стресс-тест workflow — компонент кнопки со всей строгостью дизайн-системы.

**Промпт для создания компонента:**

```text
Create a button component in my Figma file with the following specifications:

Variants:
- Type: Primary, Secondary, Tertiary, Danger
- Size: Small (32px height), Medium (40px height), Large (48px height)
- State: Default, Hover, Active, Disabled
- Layout: Label only, Label + Leading icon, Label + Trailing icon, Icon only, Label + Leading icon + Trailing icon

Requirements:
- Use the variable tokens we just created for all colours, spacing, and radius
- Apply proper auto-layout with appropriate padding and gap values from our dimension tokens
- Use the correct text styles from our typography system
- For icons, use a simple placeholder icon (16x16 for small, 20x20 for medium, 24x24 for large)
- Make sure component properties are properly set up for easy variant switching
- Add proper naming convention: Button/[Type]/[Size]/[State]/[Layout]
```

На генерацию уходит заметно больше времени и ощутимая часть лимита запросов. В итоге получается полноценный сет компонентов из более чем 120 вариантов.

**Что работает отлично:**

- **Структура авто-раскладки:** правильные padding и gap, взятые из токенов размеров.
- **Назначение цветов:** primary-кнопки используют primary-цвета, danger — error-reds, всё из семантических токенов.
- **Текстовые стили:** применены корректно ко всем размерам.
- **Свойства компонента:** настроены для бесшовного переключения состояний.
- **Конвенция нейминга:** полностью соблюдена.

**Что потребует ручной доработки:**

- **Иконки:** Claude с трудом создаёт качественные иконки. Генерируются заглушки, но не всегда точные. Лучше указать простую форму («use a star shape» или «use an arrow») либо вставить вектор вручную.
- **Состояние загрузки (Loading state):** позиционирование спиннера может сбиться из-за абсолютного позиционирования — потребуется быстрая ручная правка.
- **Небольшие расхождения в padding:** у нескольких вариантов могут слегка отличаться отступы (исправление занимает 2–3 минуты).

Для компонента, на ручную сборку которого с нуля обычно уходит 2–3 часа — со всеми вариантами, токенами и auto-layout — Claude выполняет около 85% работы корректно. Оставшиеся 15% — быстрая ручная доводка.

## 6. Верстаем экран на основе дизайн-системы

Финальный тест: сможет ли Claude собрать полноценный экран, используя только что созданную дизайн-систему? Ключевое условие — не генерировать всё заново, а использовать созданные компоненты и переменные.

**Промпт для создания экрана логина:**

```text
Design a login screen in my Figma file using the design system we've created.

Use the following specifications:
- Frame: 1440x900 desktop size
- Layout: Split screen — left side with a branded visual/illustration area, right side with the login form
- Right side form includes: Logo placeholder at top, "Welcome back" heading (use heading-2 text style), email input field, password input field with show/hide toggle, "Forgot password?" text link, primary login button (use our button component — large size, primary type), "Or continue with" divider, social login buttons (Google, Apple), "Don't have an account? Sign up" text at bottom
- Use our variable tokens for all colours, spacing, and typography
- Apply proper auto-layout throughout
- Left side: Use background-secondary colour with a centered placeholder for illustration
```

**Что Claude собирает в результате:**

Готовый экран логина с правильной структурой. Общий лейаут выдержан — split-screen, форма логично сгруппирована, дизайн-токены применены по всему макету.

**Что впечатляет:**

- **Переиспользование компонентов:** Claude использует именно созданный компонент кнопки, а не рисует новый стилизованный прямоугольник.
- **Типографическая иерархия:** heading styles, body text, caption — всё взято из системы токенов.
- **Последовательные отступы:** строго по шкале размеров.
- **Общая композиция:** профессиональная и готовая к верстке.
- **Авто-раскладка:** применена корректно, что делает экран адаптивным.

**Что потребует доработки:**

- Визуальная полировка социальных кнопок авторизации.
- Заглушка иллюстрации на левой панели базовая (ожидаемо).
- Небольшие выравнивания во внутренних отступах формы.

Результат — не прототип на выброс, а добротная основа, которую можно развивать дальше.

## 7. Честный разбор: где AI справляется, а где нет

**Где Claude + Figma работает исключительно хорошо:**

- **Системы переменных и токенов:** здесь AI раскрывается лучше всего. Полная токен-архитектура собирается за минуты вместо часов ручного труда.
- **Скаффолдинг компонентов:** генерация скелета сложных компонентов со 120+ вариантами, настроенными свойствами и токенами экономит массу времени.
- **Компоновка экранов:** создание структурированных лейаутов на основе созданных токенов и компонентов даёт отличный рабочий результат.
- **Консистентность дизайн-системы:** правила соблюдаются строже, чем многими дизайнерами вручную.

**Где AI пока не дотягивает:**

- **Тонкие визуальные нюансы:** у AI нет вкуса. Результаты структурно верны, но лишены тонких деталей, делающих дизайн изысканным.
- **Иконки и графика:** Claude плохо рисует векторные иконки. Всегда используйте референсы или проверенные плагины.
- **Лимиты использования:** сложные компоненты быстро расходуют квоты Claude. Планируйте работу сессиями.
- **Позиционирование:** абсолютное позиционирование и overflow иногда требуют ручной очистки.

> [!NOTE]
> **Итог:** этот workflow не заменяет продуктовое мышление, но радикально ускоряет фазу реализации. Claude берёт на себя 70–85% рутинной механической работы, освобождая время для ключевых решений: стратегии, сценариев пользователя, edge cases и финальной полировки.

## 8. Советы по промптам: паттерны, которые работают

Практика показала паттерны, дающие стабильно лучший результат:

- **Явно требуйте использовать токены:** всегда пишите «use the variable tokens we created», иначе Claude может захардкодить значения напрямую.
- **Задавайте конвенцию нейминга:** Claude следует любому указанному паттерну. Будьте точны, чтобы избежать путаницы в названиях.
- **Разбивайте задачи на этапы:** не просите создать токены, компоненты и экраны в одном промпте. Делайте это пошагово.
- **Ссылайтесь на существующие элементы:** пишите «use our button component» вместо абстрактного «create a button».
- **Задавайте размеры явно:** «40px height with 12px vertical padding and 16px horizontal padding» работает в разы точнее, чем «medium size».
- **Всегда проверяйте результат:** сверяйте панели Variables и Layers — AI выстраивает логику, но финальный контроль остаётся за человеком.