AI-агент у Figma, представлений на Config 2026, — це не черговий плагін, а помічник, який живе всередині полотна й виконує багатокрокові задачі за текстовим завданням: збирає екрани з вашої дизайн-системи, редагує макет по опису, шукає референси в інтернеті прямо у Figma й приводить варіанти до єдиного вигляду. Коротко: там, де раніше ви клікали, тепер ви формулюєте — а агент робить чорнову роботу, лишаючи вам рішення. У цій статті розберемо, що він реально вміє, де помиляється і як вбудувати його в процес, щоб отримати швидкість, а не хаос.

Одразу застереження: фічі викочуються поетапно й частина доступна не в кожному тарифі. Тому нижче — не переказ анонсу, а погляд практика на те, які саме задачі варто віддавати агенту вже зараз, а які ще ні.

Чим агент відрізняється від старих AI-плагінів?

Плагіни минулого покоління робили один крок: «згенеруй текст», «підбери колір», «створи аватар». Агент відрізняється тим, що тримає контекст задачі й виконує ланцюжок дій. Ви кажете «зроби екран налаштувань профілю в стилі нашої системи» — і він не просто малює прямокутники, а тягне ваші компоненти, застосовує токени, розкладає в Auto Layout і підставляє правдоподібний контент.

Практична різниця в тому, що агент оперує вашою бібліотекою, а не абстрактним «гарним UI з інтернету». Це і робить його корисним для продуктової команди: результат одразу в мові вашого продукту, а не generic-макет, який доведеться переробляти з нуля.

Що агент реально вміє

Якщо відкинути маркетинг, корисних режимів кілька:

  • Генерація екранів із вашої системи. Не «намалюй кнопку», а «збери флоу онбордингу з трьох кроків нашими компонентами».
  • Редагування по опису. «Зроби цю картку компактнішою, прибери підзаголовок, підвищ контраст CTA» — агент вносить зміни, зберігаючи прив'язку до токенів.
  • Приведення до єдиного вигляду. Береш десяток різнобійних екранів від різних людей — просиш уніфікувати відступи, типографіку й стани.
  • Веб-пошук усередині Figma. Референси, патерни, конкурентні рішення — без перемикання на браузер.
  • Пояснення й аудит. «Що не так з доступністю цього екрана?» — і агент вказує на контраст, розміри тач-зон, порядок фокуса.

Помітьте закономірність: усі корисні режими спираються на те, що у вас уже є зріла дизайн-система. Агент — це підсилювач порядку, а не його замінник. На хаотичному файлі без токенів і компонентів він генерує такий самий хаос, тільки швидше. Тому найбільший приріст від агента отримують не ті, хто щойно почав, а команди, які вже інвестували в систему — їм є з чого збирати.

Веб-пошук прямо у Figma: навіщо це дизайнеру?

Найнедооціненіша функція — саме веб-пошук усередині полотна. Здається дрібницею, але вона змінює ритм роботи. Раніше пошук референсу означав перемикання контексту: браузер, вкладки, скриншоти, повернення. Кожне таке перемикання коштує уваги й тягне за собою «ой, заодно перевірю пошту».

Коли пошук живе в тому ж вікні, дослідження стає частиною дизайну, а не окремою сесією прокрастинації. Ви просите агента знайти, як великі фінтех-застосунки показують графік балансу, — і одразу порівнюєте зі своїм екраном, не виходячи з файлу. Для мене це головна причина, чому агент економить не хвилини, а концентрацію.

Одне застереження: ставтеся до знайденого критично. Агент приносить те, що поширене, а поширене не означає правильне — половина «стандартних» патернів у фінтеху завалює доступність або веде користувача до помилки. Використовуйте пошук, щоб швидко побачити поле рішень, а не щоб скопіювати перше-ліпше. Референс — це стартова точка думки, а не готова відповідь.

Реальні кейси застосування

Де це працює найкраще у моїй практиці над фінтех-продуктами:

Чернетки нового флоу. Замість години на скелет із 5 екранів — агент збирає чернетку за пару хвилин вашими компонентами. Ви одразу правите суть, а не малюєте прямокутники.

Варіанти для тестів. Треба три версії одного екрана під A/B — агент клонує й змінює за описом, зберігаючи систему. Наведення ладу перед хендофом. Уніфікація відступів і станів на десятках екранів — саме та нудьга, яку не шкода віддати. Швидкий аудит доступності. Перший прохід по контрасту й тач-зонах, перш ніж кликати замовляти повний WCAG-аудит.

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

Як вбудувати агента в процес, а не в хаос

Найбільша помилка команд — пустити агента в бойовий файл без правил. Через тиждень у бібліотеці зʼявляються дублі компонентів, «майже такі самі» стилі й екрани, які ніхто не памʼятає, хто згенерував. Кілька запобіжників, які я раджу:

  1. Агент працює на окремій сторінці-пісочниці, а в бойовий файл потрапляє лише те, що людина свідомо перенесла.
  2. Він збирає з наявних компонентів, а не створює нові. Якщо потрібного компонента немає — це сигнал доробити систему, а не плодити локальні копії.
  3. Кожна згенерована пачка проходить рев'ю, як пул-реквест у коді. Немає рев'ю — немає мержа в основну бібліотеку.
  4. Промпти зберігаються. Хороший запит на генерацію екрана — актив команди, як сніпет коду. Ведіть спільний документ вдалих формулювань.

Ті самі принципи, що й у роботі зі скриптами: автоматизуємо рутину, але тримаємо межу якості через рев'ю. Докладніше про скриптовий підхід — у матеріалі про 7 скриптів Claude для дизайнера.

Де агент поки що спотикається

Чесна картина потрібна не менше за список переваг. Слабких місць кілька, і всі вони системні, а не «баги, які скоро полагодять». По-перше, агент погано тримає складну логіку станів: умовні екрани, залежні поля, різні гілки флоу він спрощує до найпростішого варіанта й тихо ігнорує краєві випадки. По-друге, він схильний до «правдоподібного середнього» — рішення, яке виглядає нормально, але не має характеру; для лендінга чи промо це смертельно. По-третє, він не знає контексту вашого бізнесу: чому цей крок обовʼязковий за комплаєнсом, чому цю кнопку не можна прибирати, які дані чутливі.

Звідси проста лінія розмежування: віддавайте агенту роботу, де правильних відповідей багато й вони приблизно рівноцінні (розкладка, чернетки, уніфікація), і лишайте собі роботу, де правильна відповідь одна й ціна помилки висока.

Чи замінить агент дизайнера?

Ні — але змінить, за що дизайнеру платять. Цінність зміщується від «швидко намалювати» до «поставити агенту правильну задачу й відбракувати посереднє». Виграють ті, хто розуміє систему глибше за агента: хто знає, чому саме цей відступ, чому цей стан, чому цей патерн ламається на довгому контенті. Агент чудово виконує — але не знає, що правильно. Це рішення лишається людині, і саме воно стає дефіцитним навиком.

Природне продовження цієї логіки — Code Layers, де дизайн-шар і код стають одним об'єктом. Живі розбори роботи з агентом на реальних файлах я викладаю на YouTube-каналі — там видно і сильні сторони, і місця, де він упевнено помиляється.

З чого почати вже сьогодні

Не намагайтеся одразу перебудувати весь процес під агента — так найшвидше розчаруватися. Візьміть одну задачу, де ціна помилки низька, а нудьги багато, і віддайте її повністю. Мій рекомендований перший крок — генерація чернеток нового флоу на сторінці-пісочниці. Тиждень такої практики дає більше розуміння меж агента, ніж будь-який анонс.

Далі — три речі, які варто зробити до масштабування на команду:

  • Приберіть систему до ладу. Чим чистіші компоненти й токени, тим кращий вихід агента. Брудна бібліотека = брудна генерація.
  • Заведіть спільний банк промптів. Формулювання, що дало хороший екран, — це актив, який економить час усій команді.
  • Домовтеся про рев'ю. Ніщо згенероване не потрапляє в бойовий файл без погляду людини. Це правило рятує бібліотеку від тихого розповзання.

Коли ці три звички стануть рутиною, агент перестане бути атракціоном і стане інструментом — таким же буденним, як Auto Layout колись.

AI-агент у Figma — це важіль, а не автопілот. Дасте йому чіткі межі й хорошу дизайн-систему — отримаєте швидкість. Пустите без правил — отримаєте технічний борг, тільки згенерований удвічі швидше. Вибір, як завжди, за процесом, а не за інструментом.