480 ₴
Гайд для дизайнерів · доступ одразу

Рутину у Figma робить Claude. Дизайн робиш ти.

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

480 ₴≈ $1213 розділів
Отримати гайд
claude

› збери екран «Кошик» з компонентів нашої дизайн-системи

✓ прочитав файл: 42 компоненти, 18 змінних

→ створюю фрейм Cart / Mobile

→ ставлю інстанси: Header, CartItem ×3, Summary, Button

→ роблю скріншот і звіряю

✓ готово: відступи по сітці 8, кольори зі змінних

Figma-конектор підключено
Cart / Mobile
Кошик
95 ₴
120 ₴
80 ₴
Разом295 ₴
Оформити
Claude
✓ 0 захардкоджених кольорів

Чотири частини, які роблять з чат-бота колегу у Figma

[ налаштовуєш один раз ]
01 Ти задача звичайними словами
02 Claude Code
Projectзнає клієнта Скілизнає правила
03 Figma-конектор MCP: читає і змінює файл
04 Твій файл шари, змінні, компоненти
скріншот результату → Claude перевіряє себе і править
  • ✦

    Ти ставиш задачу

    Як колезі: «Збери екран кошика з наших компонентів» або «Зроби мобільну версію цієї сторінки».

  • ✦

    Project дає контекст

    Бриф, аудиторія, тон бренду і вже ухвалені рішення. Не треба пояснювати проєкт у кожному чаті.

  • ✦

    Скіли дають метод

    Порядок дій, правила неймінгу і перевірки. Тому Claude бере інстанси і змінні, а не малює прямокутники.

  • ✦

    Конектор дає руки

    Claude сам відкриває файл, вносить зміни, робить скріншот і звіряє з задачею, поки результат не збігається.

13 розділів. Кожен показано так, як він виглядає в роботі

[ від підключення до хендофу ]
Проєкт · Кав'ярня «Зерно»

Знання проєкту

PDFбриф.pdf
MDаудиторія.md
MDtone-of-voice.md
XLSконкуренти.xlsx
Конектори
Figma
підключено · читання і запис
Що вже є у файлі?
Бачу 3 сторінки, 42 компоненти і 18 змінних кольору. Почнемо з головної?

старт · один раз на проєкт

00

Figma-конектор і Project

Конектор дає Claude доступ до твого файлу: він бачить шари, змінні й компоненти і вносить правки. Project зберігає бриф, аудиторію і тон бренду, тож контекст не треба пояснювати в кожному чаті. Налаштування займає хвилин 20.

Скіли
✓figma-use
✓design-system
✓naming
✓qa-check
Замовити
Rectangle 12
fill: #FF6B35
padding: 13 / 9
◇ Button / Primary
fill: color/primary
padding: space/4 · space/3
01

Скіли та плагіни для дизайнера

Без скілів Claude малює з нуля: HEX-коди замість змінних і прямокутники замість інстансів. Скіли задають порядок дій і перевірки, тож результат одразу спирається на твою дизайн-систему.

Розбери 5 конкурентів кав'ярні на Подолі: ціни, тон, слабкі місця
ЗакладЦінаСлабке місце
Kava Labнема онлайн-замовлення
Bean&Coхолодний тон
Podil Brewслабкі фото
Mlynнема сніданків
💡 Ніша: передзамовлення з телефону, щоб забрати каву без черги.
02

Ресьорч і знайомство Claude з проєктом

Claude розбирає конкурентів, аудиторію і нішу та зводить висновки в таблицю. Кілька днів ресьорчу стискаються до години, а поради стають конкретними під цей бізнес.

Головна
Меню
Про нас
Доставка
Контакти
Кава
Десерти
Зони
8 сторінок · 3 хв
03

Структура та візуалізація у Figma

Карта сайту і вайрфрейми з'являються прямо на полотні. Ти не малюєш стрілочки прямокутниками, а обговорюєш з клієнтом логіку сторінок.

Кав'ярня біля річки, ранні люди, крафт. Дай 3 напрямки
Ранкове світло
тепло · повільно
Річковий туман
тиша · свіжістьобрано
Майстерня
руки · дерево
Чому туман: ранок біля води, перша кава в тиші. Холодні тони вирізняють вас серед «теплих» сусідів.
04

Напрямок дизайну: Claude як партнер для думок

Коли працюєш сам, легко ходити по колу звичних рішень. Claude накидає десятки асоціацій і палітр, ти обираєш ті, що чіпляють. Бонус: словесне обґрунтування, з яким ідею легше продати клієнту.

Реєстрація
Онбординг
Оплата
✓ Готово
Картку відхилено?
Інша картка
Екранів у флоу: 0
05

Юзер флоу

Реєстрація, онбординг, оплата, відновлення пароля. Claude не забуває гілки на кшталт «а якщо картку відхилено?», а з готового флоу ти отримуєш повний перелік екранів, тобто чесну оцінку обсягу.

Змінні
color/bg
color/text
color/primary
color/danger
12radius/m
16space/4
Button lightdark
DefaultHoverDisabled PrimaryКнопкаКнопкаКнопка Second.КнопкаКнопкаКнопка GhostКнопкаКнопкаКнопка
06

Дизайн-система

Змінні, стилі тексту, компоненти з варіантами і станами, світла й темна тема. Claude робить це послідовно, з однаковими назвами, а ребрендинг потім зводиться до заміни кількох змінних.

Профіль
Налаштування
FAQ
Claude
з 24 компонентів твоєї DS
07

Claude сам створює екрани і блоки

Більшість екранів типові: списки, форми, профіль, налаштування, FAQ. Claude складає їх з твоїх компонентів, а ти витрачаєш час на 2–3 ключові екрани, де потрібна ідея.

Default Loading Empty Error Довгий текст
Флет вайтЗамовлення №1042 · 95 ₴Готується
☕Ще жодного замовленняОбери каву в менюДо меню
!Не вдалося завантажитиПеревір інтернет і спробуй щеПовторити
Раф на кокосовому з солоною карамеллю і подвійним шотомЗамовлення №1042 · 145 ₴Готується
08

Стани та edge cases

Завантаження, порожньо, помилка, довгий текст. Коли станів немає в макеті, їх вигадує розробник, і продукт виглядає недоробленим. Повний набір закриває половину питань на хендофі.

Desktop · 1440
Tablet · 768
Mobile · 375
ти правиш тільки рішення
09

Адаптиви

Переставити колонки, зменшити кегль, сховати меню в бургер: механічна робота. Claude робить першу версію планшета і мобільного, ти правиш тільки те, що потребує ока дизайнера.

Шари
#Frame 4821Hero
▭Rectangle 12Hero / Background
▤Group 7Hero / Content
TTextTitle
TText copy 2Subtitle
◇Button (detached)Button / Primary
47шарів без назви
23кольори поза змінними
9від'єднаних інстансів
✓ auto layout усюди
10

Прибирання у Figma-файлі

«Frame 4821», «Group 7», від'єднані інстанси, кольори поза змінними. Claude перейменовує шари, вмикає auto layout і прив'язує все до токенів. Нудна задача, яку всі відкладають, і ідеальна для AI.

Оформлення замовлення

Оберіть зручний час, і ми приготуємо каву до вашого приходу.

Вкажіть час з 08:00 до 21:00
Замовити
1Контраст 2.9:14.7:1 ✓
2Зона натиску 28 px44 px ✓
3Нема тексту помилкидодано ✓
11

UX-аудит і доступність

Контраст, зони натиску, ієрархія, тексти помилок. Проблема, знайдена в макеті, коштує хвилини, у коді дні. А аудит можна продавати клієнтам окремою послугою.

Замовити 16 16 44 r 12
Button / Primary

Розмір44 · padding 16 / 12 · r 12

Станиdefault, hover, pressed, disabled, loading

Колірcolor/primary → hover: primary-600

Поведінкаloading блокує повторне натискання

12

Документація для розробників

Специфікації компонентів, відступи, стани і поведінка. Хендоф займає один дзвінок замість десятків питань у месенджері, а ти виглядаєш як дизайнер продуктової команди.

Claude не замінює дизайнера. Він забирає все, що повторюється.

ти
  • ідея і концепція
  • смак, композиція, деталі
  • 2–3 ключові «вау»-екрани
  • розмова з клієнтом і рішення
claude
  • ресьорч і структура
  • дизайн-система і типові екрани
  • стани, адаптиви, порядок у файлі
  • аудит і документація
Андрій Колодяженський

Андрій КолодяженськийProduct-дизайнер · 8+ років у дизайні

Вело
Сноуборд
Трейл
Ультра
Гори

Понад 50 запущених продуктів: SaaS, CRM, мобільні застосунки, сайти. Останні місяці веду Figma-проєкти разом з Claude: мобільні застосунки, дизайн-системи, адаптиви з веб-версій.

Тому я зібрав гайд, як працювати у Figma з Claude без рутини

Тут те, що реально працює на клієнтських файлах, а не в демо: які скіли ставити, як формулювати задачі і де Claude досі треба перевіряти.

andrii-designer.com ↗

Це гайд, а не курс. Відкрив розділ, зробив у своєму файлі.

Без відеолекцій на 20 годин і домашок: 13 розділів, промпти до кожного кроку, готові скіли і оновлення гайду безкоштовно.

FC-01 · гайд + промпти + скіли
480 ₴≈ $12
доступодразу

Оплата карткою через monobank

Питання

Що потрібно, щоб почати?

Платна підписка Claude і акаунт Figma. Які саме тарифи підходять і як усе підключити, описано в першому розділі.

Треба вміти програмувати?

Ні. Claude Code звучить страшно, але ти спілкуєшся з ним звичайною мовою. Жодного рядка коду писати не доведеться.

Чим це відрізняється від гайду No Figma?

No Figma про те, як робити сайти одразу в коді без макета. Цей гайд для тих, хто працює у Figma: з клієнтами, командою, застосунками, і хоче прибрати рутину саме там.

Підійде, якщо я тільки починаю?

Так, якщо ти вже знаєш основи Figma: компоненти, auto layout, змінні. Гайд не вчить дизайну, він прискорює те, що ти вже вмієш.

Як я отримаю доступ?

Одразу після оплати відкриється сторінка з доступом до гайду.