Ілюстрація 11. Що знадобиться для роботи
Claude Code можна підключити безпосередньо до Figma і з його допомогою створити повноцінну дизайн-систему з нуля: змінні, токени, компоненти та готові екрани. У цьому посібнику розберемо весь процес покроково — від встановлення до фінального екрана логіну.
Перед початком переконайтеся, що у вас є:
- Claude Code desktop app — застосунок із трьома режимами: Chat, Code та Agentic.
- Активна підписка Claude — безкоштовний акаунт для цього робочого процесу не підходить.
- Акаунт Figma — принаймні з одним відкритим робочим файлом.
- Час — 30–45 хвилин без відволікань для проходження повного робочого процесу.
Цей робочий процес витрачає ліміти використання Claude. Збірка складного компонента на кшталт кнопки зі 120+ варіантами може спожити значну частину вашого годинного ліміту. Почніть із простіших завдань, щоб відчути процес, перш ніж братися за великі проєкти.
Що знадобиться для роботи — ілюстрація 22. Встановлюємо Claude Code
Перейдіть на claude.ai/download і завантажте Claude Code desktop app для вашої ОС (macOS або Windows).
Після встановлення застосунок попросить пройти автентифікацію — увійдіть за даними вашої підписки Claude. Після цього відкриється інтерфейс із трьома режимами:
- Chat — стандартний розмовний Claude.
- Code — для задач написання коду.
- Agentic — тут відбувається основна робота з Figma.
Для роботи з Figma використовується режим Agentic: саме він дозволяє Claude виконувати автономні дії, включаючи пряму роботу з вашим Figma-полотном.
Що знадобиться для роботи — ілюстрація 33. Підключаємо Claude до Figma через MCP
Це ключовий крок, який робить весь робочий процес можливим. Claude підключається до Figma через сервер MCP (Model Context Protocol).
Порядок підключення:
- У застосунку Claude Code перейдіть у Settings.
- Відкрийте розділ MCP Servers.
- Натисніть «Add MCP Server».
- Оберіть Figma зі списку доступних інтеграцій.
- Пройдіть автентифікацію через акаунт Figma (OAuth-флоу).
- Після підключення Figma з’явиться у списку активних MCP-серверів.
Як перевірити, чи все працює:
Відкрийте будь-який файл Figma у браузері та поставте Claude просте запитання:
Якщо Claude описує вміст вашого файлу — з’єднання встановлено. Якщо ні — перевірте конфігурацію MCP-сервера та переконайтеся, що файл Figma відкритий.
Перед початком роботи створіть окремий файл Figma або виділену сторінку всередині існуючого. Це ізолює експерименти від робочих матеріалів.
Крок 3 — Створюємо повну систему змінних за допомогою AI — ілюстрація 44. Створюємо повну систему змінних за допомогою AI
Замість того, щоб вручну створювати десятки змінних кольору, типографіки та відступів, Claude збирає всю токен-архітектуру самостійно.
Промпт для створення системи змінних:
Що Claude створює в результаті:
Claude починає автономно працювати у файлі Figma. Через кілька хвилин у панелі Variables з’являється:
- Primitive Colors — повний набір колірних рамп, правильно організованих за колекціями.
- Semantic Colors — усі коректно посилаються на примітивну колекцію (не захардкожені hex-значення, а реальні зв'язки).
- Токени інтерфейсу — фон, текст, іконки та межі зі станами hover та active.
- Типографічна система — текстові стилі, прив’язані до відповідних змінних.
- Токени розмірів — шкали відступів та радіусів, готові до використання.
Семантичні токени правильно аліасовані до примітивів — це означає, що зміна одного примітивного кольору автоматично каскадується по всій системі. Саме так будується грамотна дизайн-система вручну, тільки тут це займає хвилини, а не години.
Після генерації перевірте колірні значення за гайдлайнами вашого бренду. AI обирає розумні дефолти, але конкретний відтінок вашого бренду, ймовірно, відрізняється від згенерованого. Змініть примітиви — і весь семантичний шар оновиться автоматично.
5. Створюємо складний компонент кнопки: 120+ варіантів
Справжній стрес-тест робочого процесу — компонент кнопки не в спрощеному вигляді, а з повною суворістю дизайн-системи.
Промпт для створення компонента:
На генерацію йде помітно більше часу та значна частина ліміту використання. В результаті виходить повноцінний сет компонентів із більш ніж 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 зібрати повноцінний екран, використовуючи дизайн-систему, яку щойно створив? Ключова умова — не генерувати все заново, а використовувати існуючі компоненти та змінні.
Промпт для створення екрана логіну:
Що 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 правильно вибудовує структуру, але деталі потребують людського погляду.