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

2 квітня 2026 року Figma випустила Make Kits і Make Attachments, і ці два інструменти вирішують описану проблему. Принципова зміна полягає в тому, як штучний інтелект розуміє контекст конкретного продукту ще до того, як дизайнер напише перший рядок запиту.

Що таке Figma Make

Figma Make – це середовище всередині Figma, де можна генерувати інтерактивні прототипи за допомогою ШІ. Дизайнер описує, що потрібно отримати, і модель будує повноцінний React-компонент або UI-сценарій в браузері без перемикання між інструментами.

На відміну від AI-генераторів зображень або простих wireframe-інструментів, Make працює з реальним кодом. Прототипи є клікабельними, мають стани, переходи та валідацію. За своїми можливостями вони значно ближчі до живого продукту, ніж до статичного мокапу.

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

Make Kits: дизайн-система як частина контексту для ШІ

Make Kits розв'язують цю проблему на рівні того, як інструмент отримує вхідні дані, а не через уточнення запитів.

Кіт являє собою структурований пакет, який поєднує три складові: npm-пакети з компонентами вашої бібліотеки, стилі й токени з вашої Figma-бібліотеки, а також guidelines, тобто текстові інструкції про те, як і коли використовувати кожен елемент.

Третя складова є найважливішою. Модель має розуміти логіку, яка стоїть за кожним елементом: ця кнопка застосовується лише для деструктивних дій, цей відступ використовується виключно в модальних вікнах, ця іконка не поєднується з певним текстовим стилем. Саме guidelines всередині кіту передають цей контекст і значною мірою визначають якість кінцевого результату.

Технічно кіти підтримують як публічні npm-пакети, так і пакети через приватний реєстр Figma. Це важливо для команд, які не хочуть відкривати свою систему компонентів назовні. Компанія може опублікувати кіт усередині організації, адміністратор затверджує його, і далі кожен новий прототип у команді будується на одній спільній основі.

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

Make Attachments

Якщо кіти відповідають за знання про дизайн-систему, то Attachments відповідають за передачу специфічного контексту конкретного проєкту.

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

Тепер файли можна прикріплювати прямо до запиту, і вони працюють у двох режимах.

  • У режимі контексту дизайнер прикріплює PRD, бренд-гайдлайни, код або будь-яку іншу документацію. Make читає ці матеріали й враховує їх під час генерації.
  • У режимі контенту дизайнер прикріплює реальні зображення, SVG-ілюстрації, датасети у форматі CSV або JSON, відеофайли. Make використовує ці матеріали безпосередньо в прототипі замість заглушок, і фотографія реального продукту потрапляє саме туди, де раніше стояв порожній сірий прямокутник.

Список підтримуваних форматів охоплює PDF, markdown, файли коду (TSX, JS, CSS та інші), CSV, JSON, медіафайли (JPEG, PNG, GIF, MP4, MP3) та SVG.

Чому це важливо для роботи з дизайн-системами

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

Make Kits починають переносити частину цієї роботи на рівень AI-інструментів. Якщо систему компонентів правильно задокументовано і вкладено у кіт, нові члени команди або зовнішні підрядники отримують цей контекст автоматично. Їм більше не потрібно читати гайдлайн на 50 сторінок перш ніж починати прототипувати, бо необхідні знання вже закладені в самому інструменті.

Для фрілансерів це теж суттєва зміна, оскільки вони часто входять у нові проєкти практично без підготовки. Якщо клієнт надає Make Kit замість PDF із гайдлайнами, час на ознайомлення з системою скорочується в кілька разів, і перші результати можна показати набагато швидше.

Практичні сценарії для команд і фрілансерів

Щоб краще зрозуміти, де ці інструменти справді змінюють процес, варто розглянути конкретні ситуації.

Онбординг нових дизайнерів. Молодший дизайнер, який щойно приєднався до команди, раніше витрачав кілька днів або навіть тиждень на те, щоб розібратися з дизайн-системою. З Make Kit він відкриває редактор і відразу будує прототипи в системі компонентів команди, бо весь необхідний контекст уже закладений у кіті. Знання, яке раніше передавалося усно або через документи, тепер є частиною інструменту.

Прототипування флоу з юридичними обмеженнями. Команда фінтех-продукту прикріплює до запиту PDF з compliance-вимогами, CSV з реальними даними кроків онбордингу та скриншоти поточного продукту. Make генерує прототип, який враховує всі ці обмеження.

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

Швидка ітерація після зустрічі зі стейкхолдерами. Продукт-менеджер просить показати ще один варіант з іншою логікою кроків. Замість кількох годин роботи дизайнер витрачає хвилин 20 у Make з тим самим кітом і скоригованим описом запиту, і стейкхолдери бачать нову версію ще до кінця робочого дня.

Обмеження та відкриті питання

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

По-друге, якість генерованих прототипів прямо залежить від якості самого кіту. Якщо guidelines написані розмито або компоненти погано задокументовані, Make не зможе компенсувати цей недолік власними можливостями. Неякісний вхідний контекст неминуче призводить до неякісного результату.

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

Нарешті, Make Kits не синхронізуються з кодовою базою в реальному часі. Якщо розробники оновили компонент у продакшені, кіт не оновиться автоматично і вимагатиме ручного оновлення та перепублікації.

Що це означає для дизайнерів і студій

Figma послідовно будує платформу, де AI-інструменти стають невід'ємною частиною процесу, а не опціональними доповненнями. Спочатку з'явилися Variables і Dev Mode, потім Figma Make як окреме середовище для AI-прототипування, тепер інфраструктура для передачі контексту між дизайн-системою і генеративними інструментами.

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

Для студій, що працюють із кількома клієнтами паралельно, Make Kits можуть стати операційною перевагою. Добре побудований кіт для кожного клієнта означає менше часу на занурення при поверненні до проєкту після паузи, а також більш консистентний результат незалежно від того, хто з команди веде конкретне завдання.

Висновок

У лютому 2026 Figma запустила Codex to Figma, інтеграцію, яка дозволяє переносити реальні запущені інтерфейси в Figma для аналізу та уточнення. У березні 2026 з'явилися AI Agents, здатні проектувати безпосередньо на канвасі. Квітневі Make Kits і Attachments продовжують ту саму логіку, і кожне нове оновлення розширює кількість контексту, до якого AI-інструменти мають доступ.

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

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