Ілюстрація 1 Збільшити

Ілюстрація 1

1. Що знадобиться для роботи

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

Перед початком переконайтеся, що у вас є:

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

Увага

Цей робочий процес витрачає ліміти використання Claude. Збірка складного компонента на кшталт кнопки зі 120+ варіантами може спожити значну частину вашого годинного ліміту. Почніть із простіших завдань, щоб відчути процес, перш ніж братися за великі проєкти.

Що знадобиться для роботи — ілюстрація 2 Збільшити

Що знадобиться для роботи — ілюстрація 2

2. Встановлюємо Claude Code

Перейдіть на claude.ai/download і завантажте Claude Code desktop app для вашої ОС (macOS або Windows).

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

Chat — стандартний розмовний Claude.
Code — для задач написання коду.
Agentic — тут відбувається основна робота з Figma.

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

Що знадобиться для роботи — ілюстрація 3 Збільшити

Що знадобиться для роботи — ілюстрація 3

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

Це ключовий крок, який робить весь робочий процес можливим. Claude підключається до Figma через сервер MCP (Model Context Protocol).

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

У застосунку Claude Code перейдіть у Settings.
Відкрийте розділ MCP Servers.
Натисніть «Add MCP Server».
Оберіть Figma зі списку доступних інтеграцій.
Пройдіть автентифікацію через акаунт Figma (OAuth-флоу).
Після підключення Figma з’явиться у списку активних MCP-серверів.

Як перевірити, чи все працює:

Відкрийте будь-який файл Figma у браузері та поставте Claude просте запитання:

text

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

Якщо Claude описує вміст вашого файлу — з’єднання встановлено. Якщо ні — перевірте конфігурацію MCP-сервера та переконайтеся, що файл Figma відкритий.

Порада

Перед початком роботи створіть окремий файл Figma або виділену сторінку всередині існуючого. Це ізолює експерименти від робочих матеріалів.

Крок 3 — Створюємо повну систему змінних за допомогою AI — ілюстрація 4 Збільшити

Крок 3 — Створюємо повну систему змінних за допомогою AI — ілюстрація 4

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.
Типографічна система — текстові стилі, прив’язані до відповідних змінних.
Токени розмірів — шкали відступів та радіусів, готові до використання.

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

Порада

Після генерації перевірте колірні значення за гайдлайнами вашого бренду. 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 іноді потребують ручного прибирання.

Примітка

Підсумок: цей 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 правильно вибудовує структуру, але деталі потребують людського погляду.