First Draft і Figma Make: в чому різниця і коли їх використовувати
Ця стаття є частиною курсу «Штучний інтелект у Figma: від дослідження до прототипу». У ній розглянемо інструменти First Draft і Figma Make, та розберемо різницю між ними.
У Figma є два інструменти для генерації інтерфейсів на основі штучного інтелекту – First Draft і Figma Make. Обидва перетворюють текстовий запит на готовий макет, але вирішують різні задачі. У цій статті розберемося, який із них і коли доречніший.
First Draft
First Draft генерує UI-концепції на основі короткого промпту. Його головна цінність – швидкість. Цей інструмент дає кілька варіантів структури екрану, від яких можна відштовхнутися, показати клієнту напрямок, перевірити ідею, зібрати перший каркас і вже потім рухатися далі.
Щоб запустити First Draft:
- Відкрийте Actions → First Draft.
- Оберіть Basic Site або Basic App залежно від того, що генеруєте.
- Скористайтеся готовими підказками Figma або введіть власний промпт.
На виході отримуєте сторінку, зібрану з реальних компонентів бібліотеки Figma – зі стилем, кольором і палітрою, яку інструмент підбирає під тематику.
Після генерації результат можна підлаштувати й перемикатися між варіантами палітри, змінювати тему на світлу або темну, заокруглювати кути чи коригувати шрифт через Make Changes.
Важливо розуміти, що First Draft – це інструмент для старту, а не для розвитку. Він не дозволяє нарощувати сторінки, підключати дизайн-системи або будувати прототипи. Кнопки в результаті можуть бути розставлені нелогічно, а зображення – не з'явиться зовсім. Це базова основа, яку дизайнер далі опрацьовує самостійно.
Figma Make
Figma Make — значно потужніший інструмент. Він теж приймає текстовий запит і генерує інтерфейс, але на цьому схожість із First Draft закінчується. Figma Make дозволяє розвивати дизайн через чат і додавати нові екрани, підключати дизайн-системи, редагувати окремі елементи без перегенерації всього макета, і навіть будувати клікабельні прототипи.
Щоб запустити Figma Make:
- Натисніть плюсик у верхній навігації → Figma Make.
- Відкриється інтерфейс: зліва – чат з ШІ, справа – живий перегляд дизайну.
- Якщо починаєте з нуля – просто вписуєте промпт, і Figma Make генерує інтерфейс самостійно.
- Якщо вже є схематичний макет – виділяєте його у файлі, натискаєте Send to Figma Make і пишете інструкцію, що з ним зробити. Інструмент бере вашу структуру як основу і наповнює її стилем і деталями.
- Якщо хочете відштовхнутися від готового рішення – у розділі Core є бібліотека шаблонів за категоріями, кожен з яких можна одразу переглянути в браузері як клікабельний прототип і відредагувати через Remix.
Редагування – найсильніша сторона Figma Make. Через чат можна описати будь-яку зміну. Якщо потрібна точкова правка – є Point & Edit: натискаєте на конкретну секцію в превʼю і пишете інструкцію тільки для неї.
Якщо хочете працювати в межах конкретної дизайн-системи, підключіть бібліотеку перед генерацією – Figma Make автоматично використовуватиме її компоненти і стилі. Бібліотеку потрібно підключити заздалегідь у налаштуваннях файлу.
Коли дизайн готовий, перенести макети у звичайний файл Figma можна через Copy to Design – по одній сторінці за раз. Якщо робите вебсайт – його можна опублікувати прямо з Figma Make, і він отримає реальний URL.
Що обрати
Обидва інструменти доповнюють один одного, а не конкурують. First Draft підходить, коли потрібно швидко отримати кілька варіантів концепцій на старті проєкту або перевірити ідею до того, як витрачати час на деталізацію. Figma Make – коли є конкретна задача: зібрати повноцінний прототип, довести схематичний макет до візуальної концепції або розробити новий екран у межах вже існуючого дизайну.
Найефективніша схема – використовувати їх послідовно: First Draft для першої концепції, Figma Make для її розвитку і нарощування.
