# Створюємо дизайн-систему у 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** — безкоштовний акаунт для цього робочого процесу не підходить.
- **Акаунт Figma** — принаймні з одним відкритим робочим файлом.
- **Час** — 30–45 хвилин без відволікань для проходження повного робочого процесу.

> [!WARNING]
> Цей робочий процес витрачає ліміти використання 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

Це ключовий крок, який робить весь робочий процес можливим. 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** — усі коректно посилаються на примітивну колекцію (не захардкожені hex-значення, а реальні зв'язки).
- **Токени інтерфейсу** — фон, текст, іконки та межі зі станами hover та active.
- **Типографічна система** — текстові стилі, прив’язані до відповідних змінних.
- **Токени розмірів** — шкали відступів та радіусів, готові до використання.

Семантичні токени правильно аліасовані до примітивів — це означає, що зміна одного примітивного кольору автоматично каскадується по всій системі. Саме так будується грамотна дизайн-система вручну, тільки тут це займає хвилини, а не години.

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

## 5. Створюємо складний компонент кнопки: 120+ варіантів

Справжній стрес-тест робочого процесу — компонент кнопки не в спрощеному вигляді, а з повною суворістю дизайн-системи.

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

```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 години — з варіантами, токенами та авто-розкладкою — 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 показує себе найкраще. Повна токен-архітектура, на яку вручну йдуть години, збирається за хвилини, і структура виходить правильною.
- **Скаффолдинг компонентів:** генерація скелета складних компонентів із коректним auto-layout, налаштованими properties та токенами економить величезну кількість часу.
- **Компонування екранів:** створення структурованих layout-ів, що використовують наявні компоненти та токени дизайн-системи, дає реально корисний результат.
- **Консистентність дизайн-системи:** оскільки правила задаються в промпті заздалегідь, Claude підтримує консистентність жорсткіше, ніж більшість дизайнерів роблять це вручну.

**Де AI поки не дотягує:**

- **Візуальні нюанси:** у AI немає художнього смаку. Результати структурно коректні, але позбавлені тонких правок, які роблять дизайн по-справжньому витонченим.
- **Іконки та ілюстрації:** Claude погано справляється з генерацією нормальних іконок. Завжди надавайте референсні іконки або використовуйте профільні плагіни.
- **Ліміти використання:** складні компоненти швидко вичерпують ліміти Claude. Плануйте сесії завчасно.
- **Позиціонування:** absolute positioning та обробка overflow іноді потребують ручного прибирання.

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

## 8. Поради щодо промптів: патерни, які працюють

Після практики з цим workflow виявилися патерни, які стабільно дають кращий результат:

- **Явно вказуйте на використання токенів:** завжди пишіть «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 panel, Layers panel, властивості компонентів. AI правильно вибудовує структуру, але деталі потребують людського погляду.