На Config 2025 у травні Figma представила Figma Make, нову функцію «від запитань до коду», яка дозволяє дизайнерам і продуктовим командам перейти від концепції до функціонального прототипу лише за кілька запитань. Прихильники дизайну, дизайнери та продуктові менеджери Figma місяцями заглиблювалися у Figma Make, експериментували з його функціями та розширювали його межі. Тепер Figma використовує цей практичний досвід і перетворює його на вісім практичних порад і найкращих практик, а також кілька зразків запитань для натхнення, розроблених, щоб допомогти вам максимально використати потенціал Figma Make.
- Завантажте деталі у свій перший запит заздалегідь
Чим більше деталей ви вкажете про свій дизайн у початковому запиті, тим менше подальших обмінів вам знадобиться для отримання бажаного результату. «Краще отримати початкову генерацію якомога ближчою до вашого бачення, внісши лише незначні корективи — виправлення результату за допомогою кількох подальших запитів займає набагато більше часу», — каже дизайнер Ана Бойєр.
Ось деякі ключові деталі, які слід включити до вашого початкового запиту:
- Завдання : Що має робити Figma Make
- Контекст : Куди підходить цей потік або екран
- Ключові елементи дизайну: важливі функції, які має включати Figma Make
- Очікувана поведінка: що відбувається з цими елементами під час взаємодії
- Обмеження: такі речі, як пристрій, макет або візуальний стиль
Ця стратегія фронтального завантаження вимагає не лише чіткого бачення потоку та специфікацій вашого продукту перед запуском підказок у Figma Make, але й обміну цим контекстом з правильними підказками. Ви також можете використовувати помічника штучного інтелекту для вдосконалення ваших підказок — вони нададуть детальні інструкції та готові до використання фрагменти коду, які можна буде вставити безпосередньо у ваш Make для розширених ефектів.
На практиці
Менеджер з питань дизайнерів Figma Грег Хантун ітерував з різними підходами, поки не знайшов робочу версію 1 для свого набору для візуалізації ефектів миші. Його найуспішніша пропозиція містила:
- Огляд проекту
- Специфікація платформи
- Мета та варіант використання
- Список основних функцій
- Керівництво по стилю дизайну
- Технічні характеристики
Грег також включив цей чіткий перший крок у свою підказку: «Перший крок: Створіть компонент накладення базової сітки з регульованими розмірами та станами наведення курсору» (First step: Build the base grid overlay component with adjustable dimensions and placeholder hover states).
Візуалізація ефекту миші від Грега Хантуна у Figma Make
- Очистіть свої файли дизайну, перш ніж переносити їх у Figma Make
Хоча Figma Make може створювати дизайни з нуля (0→1), він також чудово перетворює ваші існуючі дизайни Figma на інтерактивні прототипи (1→1). Щоб допомогти Figma Make отримати найкращий можливий результат, приділіть час організації та гігієні файлів, переконавшись, що ви навели лад у будь-якому кадрі, який плануєте скопіювати та вставити у вікно запрошення. Чим чистіший ваш вхідний дизайн, тим кращий ваш результат. Використання правильних обмежень кадрів та налаштувань автоматичного розміщення є найважливішим параметром для забезпечення того, щоб ваші файли дизайну добре інтерпретувалися у Figma Make, але найменування шарів на основі їхнього вмісту чи призначення також може допомогти.
Ви можете використовувати деякі з існуючих функцій штучного інтелекту Figma Design, такі як «Запропонувати автоматичне розміщення» та «Перейменувати шари за допомогою штучного інтелекту» , або навіть плагіни, такі як «Очистити документ», щоб швидко впорядкувати свої кадри та підготувати їх до перенесення у Figma Make.
На практиці
Менеджерка продукту Figma Холлі Лі успішно створила мікровзаємодію музичного плеєра, наведену нижче, за допомогою одного запиту, і все це завдяки попередньому налаштуванню надійної структури «Автоматичне розміщення у Figma Design» (Auto Layout у Figma Design).
Ось її підказка: «Будь ласка, зробіть цей CD-програвач інтерактивним, CD повинен обертатися, коли я відтворюю трек. Дякую!»
Оригінальний файл дизайну з автоматичним макетом
Figma Make втілює дизайн у життя
- Розбийте складні проекти на керовані кроки
Навіть за наявності чіткого першого запиту, складні проекти можуть вимагати багатьох додаткових підказок. Розбиття цих подальших дій на менші, цілеспрямовані кроки дає кращі результати, ніж спроби виправити все одразу. «Чим менший обсяг, тим детальнішим може бути LLM», — каже дизайнер продукту Теммі Таабассум. «Наскільки добре Figma Make працює, залежить від того, наскільки великий або складний ваш запит, а також від специфіки вашої мови».
Ваша велика та детальна перша підказка допоможе закласти основу для подальшої роботи, і звідти вам потрібно буде поступово вносити невеликі зміни. Застосування такого поступового підходу після початкової підказки дозволяє вам поступово створювати складні інтерфейси, кадр за кадром будувати багатосторінкові потоки та контролювати загальний напрямок дизайну.
На практиці
Щоб створити повнофункціональну фінансову панель інструментів із процесом адаптації, альфа-тестерка Антонелла Родрігес використала понад 150 підказок. Вона почала з широкого опису основних функцій, які їй були потрібні, бажаного макета та візуального орієнтира, потім очистила вивід v1 та заглибилася у вміст кожної окремої сторінки, щоб заповнювати їх по одній частині за раз.
Декілька підказок, які використовувала Антонелла для подальшої роботи:
- Додайте стікери на сторінку щоденника, щоб додати нотатки.
- Додайте таблицю з категорією, типом витрат, сумою в доларах США, сумою в песо, нотатками, датою на сторінці «Фінанси».
- Додайте прапорець, щоб вказати, яку валюту ви використовуєте, долари США чи аргентинські песо.
Фінансова панель інструментів від користувача Антонелли Родрігес у Figma Make
Щоб створити інтерактивний 3D-світ для цьогорічної основної доповіді Config London, дизайнерка продуктів Теммі Таабассум працювала з кількома різними елементами. Після початкової пропозиції створити 3D-дослідника Лондона з відомими пам’ятками, Теммі запропонувала Figma Make розділити кожну 3D-пам’ятку — Біг-Бен, Лондонське око, Тауерський міст та інші — на окремі закодовані файли. Це спростило та пришвидшило вдосконалення окремих компонентів, не впливаючи на середовище всього файлу.
Підказка Теммі: «Чи можете ви перемістити код Big Ben у новий файл?»
3D-дослідник Лондона у Figma Make
Один компонент переміщується в окремий файл у Figma Make
- Використовуйте власні компоненти для забезпечення візуальної узгодженості
Під час роботи у Figma Make копіювання та вставка компонента — або фрейму з кількома компонентами — може бути дуже потужним інструментом. Компоненти з вашої бібліотеки, які вже оснащені автоматичним розміщенням та узгодженим найменуванням шарів, часто добре інтерпретуються у вашому Make.
Ви також можете вставляти компоненти у вікно підказки Figma Make як візуальну точку відліку для створеного дизайну. Отримавши уявлення про те, як виглядає частина інтерфейсу, Figma Make може підібрати його стиль та інтервали, ефективно дотримуючись правил вашої системи дизайну без потреби в додаткових поясненнях чи роз’ясненнях.
Додаткова порада: функція вказівки та редагування Figma Make — це чудовий спосіб замінити загальні компоненти у вашій версії v1 на специфічний інтерфейс користувача з ваших бібліотек. Виберіть елемент у попередньому перегляді, вставте свій власний компонент у поле запиту та введіть наступний запит: «Замініть цей компонент на цей дизайн».
На практиці
Команда дизайнерів-захисників створила наведений нижче додаток для продуктивності, використовуючи компоненти з найновішого набору Material 3 Design Kit. Щоб створити цей додаток, вони вставили два компоненти з файлу системи дизайну в Figma Make, а потім виконали цю команду:
«Створіть додаток для підвищення продуктивності, який допоможе користувачам керувати завданнями та визначати їх пріоритетність, стежити за календарем та збирати письмові та голосові нотатки. Використовуйте доданий компонент навігації, адаптувавши його вміст відповідно до потреб. Для вкладки календаря використовуйте доданий компонент календаря. Решта сторінок повинні візуально відповідати стилю цих компонентів»
Потім команда вдосконалила базову версію, вибравши компоненти за допомогою point та editing, а потім запропонувала Figma Make замінити їх варіантами дизайн-системи Material 3.
Заміна компонентів за допомогою Material 3 Design Kit у Figma Make
- Внесіть візуальні корективи за допомогою інструмента «Вказувати та редагувати»
За допомогою інструмента «вказати та редагувати» ви також можете виконувати швидкі базові налаштування, такі як зміна кольору або шрифту, навівши вказівник на елемент, клацнувши його та відредагувавши за допомогою панелі інструментів або додаткових підказок. Ця пряма маніпуляція дозволяє безперешкодно вносити негайні зміни до візуальних властивостей, таких як колір, радіус кута, інтервал і типографіка.
На практиці
У наведеному нижче прикладі музичного плеєра функції «вказати та редагувати» використовуються для швидкого налаштування таких деталей, як розмір шрифту та форматування.
- Швидко відкрийте вкладку коду для редагування — навички розробника не потрібні
Під час збірки у Figma Make деякі невеликі, невізуальні зміни найкраще редагувати всередині коду. go to sourceКнопка — це ярлик, який допомагає знайти код за елементом, щоб ви могли зазирнути за лаштунки та налаштувати його значення. Figma Make позначає весь свій код у зрозумілій формі, що дозволяє тим, хто не має досвіду програмування, визначити, яка частина коду контролює яку поведінку всередині збірки. Оновлені значення всередині коду одразу відобразяться у вашому попередньому перегляді, без будь-якого оновлення, і дозволять вам легко та швидко протестувати поведінку кількох продуктів.
Додаткова порада: Якщо налаштування на рівні сторінки недоступне за допомогою go to source, спробуйте дослідити семантичні шари всередині папки коду за допомогою комбінації клавіш cmd+F (Mac) або Ctrl+F (PC).
На практиці
Цей метод чудово підходить для швидкого налаштування таких властивостей, як анімація. Якби ми хотіли перевірити, як обертається вініл у файлі музичного плеєра Холлі, ми могли б просто перейти до вихідного коду елемента, швидко просканувати кодову базу на наявність параметра швидкості та налаштувати швидкість вручну з коду, доки вона не досягне потрібного відчуття в попередньому перегляді.
- Інтегруйте реалістичні дані у свій Make
Щоб втілити динамічний прототип у життя, Figma Make дозволяє створювати інтерфейси з користувацькими даними або даними в режимі реального часу, від цін на акції до прогнозів погоди. Існує кілька різних способів перенесення даних у файли Figma Make без підключення їх до API:
- Запитайте у Figma Make, який тип даних ви очікуєте побачити на екрані.
- Явно запропонуйте Figma Make включити точку входу для імпорту даних у ваш інтерфейс, якщо ви хочете отримати більш детальний контроль над своїм набором даних.
На практиці
Коли дизайнер продукту Раян Рід створив трекер часу в нью-йоркському метро, використовуючи API MTA, Figma Make автоматично збирала дані з ліній та станцій метро та розумно генерувала макетні дані, які імітували прибуття поїздів у режимі реального часу — без будь-якого підключення до API.
Підказка Райана: «Створіть для мене веб-сайт для відстеження розкладу руху метро в Нью-Йорку, використовуючи API NYC MTA. Сайт повинен дозволяти вибрати лінію метро і станцію метро, щоб переглянути всі розклади руху поїздів, упорядковані в хронологічному порядку. Сайт повинен бути односторінковим, де вибір лінії і станції відкриває додаткову інформацію праворуч, щоб зробити навігацію чіткою і простою»
Створений у Figma Make макет веб-сайту, що показує розклад руху метро MTA
Figma Make додає макетні дані, що емулюють час прибуття поїздів MTA в режимі реального часу
Аналогічно, команда адвокації Figma також створила фальшивий набір даних про бігові сесії, використовуючи внутрішній GPT, завантажила його як файл .CSV та запропонувала Figma Make додати механіку завантаження всередину тренажера для марафону. Результатом є дизайн панелі інструментів, який динамічно адаптується до будь-якої бази даних .CSV, завантаженої з використанням правильного форматування.
Зразок запиту:
- Я хочу створити аналітичну панель, яка показує прогрес мого тренування до марафону з плином часу.
- Панель повинна містити підсумок мого останнього тренування, включаючи ключові цифри та лінійний графік мого прогресу з плином часу. Вісь X: дата тренування, вісь Y: дистанція, пробігана в кожну дату тренування.
- До появи будь-якої аналітики сторінка повинна бути порожньою з місцем для завантаження файлу .csv. Потім ви візьмете цей CSV-файл, який буде відформатований з наступною інформацією, щоб перетворити його на панель, описану вище: дата, відстань_км, час_хвилини, середній_темп, частота_серцебиття, спалені_калорії, набір_висоти.
Завантаження даних на аналітичну панель марафону
- Перетворіть Figma Make на помічника з передачі даних
Запропонувавши Make створити інтерфейси, що генерують готові до роботи фрагменти коду, ви можете створити власний інструмент передачі, який генерує варіанти дизайну та створює вивід коду для обміну з розробниками. Такий підхід дає вам більше можливостей для гри, експериментів та ітерацій, перш ніж перейти до наступного етапу.
Додаткова порада: якщо згенерований код Figma Make не відповідає вашим потребам розробки, ви можете натомість запропонувати йому надати вам певні елементи та поведінку як загальний псевдокод у чаті. Зразок запиту може виглядати так «Збережіть код без змін, але опишіть мені, як ця частина реалізована в псевдокоді. Якщо можливо, детально опишіть особливості конкретної платформи для (вставте назву платформи)»
На практиці
Дизайнер Луїс Уріах використовував Figma Make як помічника з передачі даних під час створення власного конструктора палітр OKLCH. Його додаток дозволяє створювати повну колірну систему, починаючи з основного кольору бренду, та включає результуючі змінні CSS та вивід Tailwind CSS, готові до передачі.
Підказка Луїса: «Конструктор кольорової палітри Createn OKLCH, в якому ви додаєте основний колір вашого бренду, а він генерує повністю сформовану гаму з поширених кольорів: зеленого, синього, червоного, жовтого, оранжевого та сірого. Ви можете вирішити, скільки кольорів ви хочете мати в кожній гамі — наприклад, по 3 різних відтінки кожного кольору» .
Фрагмент коду змінюється зі зміною кількості вибраних відтінків
Аналогічно, розробник Джейк Олбау створив власний міні-додаток для вдосконалення анімації, що застосовується до певного елемента інтерфейсу користувача — у цьому випадку, до розкішної банківської картки. Джейк попросив Figma Make включити елементи керування візуальними ефектами та JSON-вивід параметрів анімації, створюючи код багаторазового використання для іншого продукту, який він створював.
Одна з підказок Джейка: «Зробіть так, щоб був вихідний код json, що описує всі параметри (включаючи мінімальний і максимальний нахил по кожній осі), які змінюються при зміні вхідних даних».
Вивід даних праворуч змінюється зі зміною параметрів ліворуч
Будьте терплячими
Як і з будь-яким інструментом штучного інтелекту, підказки – це метод спроб і помилок, поки ви не знайдете підхід, який вам підходить. Оскільки бета-версія Figma Make тепер доступна всім користувачам Figma з повним доступом (замовити підписку можна у компанії Ідеалсофт), у Figma раді бачити, як креативно ви використовуватимете цей інструмент, щоб втілити нові ідеї в життя.
+ Поки нема коментарів
Додати перший