Figma Make: что это такое и как пользоваться этим инструментом

Что такое Figma Make

Figma Make — инструмент внутри Figma, который генерирует интерфейсы и прототипы на основе текстового описания. Это мощное нововведение поможет ускорить рабочий процесс дизайнеров во время сборки проекта и проверки идей.

Figma Make — часть экосистемы Figma AI

Figma Make входит в набор инструментов Figma AI, который компания начала внедрять в 2024 году. Система работает через текстовые запросы: пользователь описывает интерфейс, а инструмент генерирует прототип и может создать базовый код.

На сайте Figma этот подход описывается как принцип prompt-to-code. Это значит, что текстовый промпт превращается в интерфейс и код, который можно использовать для дальнейшей разработки. 

С помощью Figma Make можно:

• генерировать базовые интерфейсы,
• создавать интерактивные прототипы,
• добавлять в проект анимацию,
• экспериментировать с компоновкой экрана,
• быстро проверить идею,
• автоматизировать процесс дизайна.

Протестировать новый ИИ-инструмент можно через приложение или сайт Figma, на готовых проектах и внутри знакомого интерфейса. Для генерации не нужно переходить на другой сайт или переносить файлы.

Какие задачи решает Figma Make

Figma Make помогает создать прототип интерфейса, добавить анимацию, быстро отредактировать композицию. После генерации пользователь может редактировать результат стандартными инструментами Figma — менять размеры элементов, работать со слоями, добавлять компоненты или корректировать структуру экранов. Или можно уточнять результат с помощью дополнительных промптов в Figma Make.

Дизайнеры и верстальщики могут напрямую управлять кодом, который после генерации откроется в Figma Make. Благодаря экосистеме Figma и Figma Sites инструмент с искусственным интеллектом упрощает тестирование прототипов и работу с разными вариациями проекта. 

Как работает Figma Make: базовый принцип

Работа с Figma Make основывается на промптах и описаниях, которые ИИ затем использует для генерации дизайн-системы. Корректировать процесс можно на любом этапе работы с функцией.

Что такое промпт в Figma Make

Промпт — это текстовое описание или подсказка для искусственного интеллекта. Чем точнее сформулирован запрос, тем ближе результат к ожидаемому. 

Обычно в промпте указывают:

• тип интерфейса (например, лендинг или мобильное приложение);
• структуру страницы;
• основные блоки;
• стиль или визуальные ориентиры.

Например, можно попросить систему создать лендинг для онлайн-курса, интерфейс мобильного банка или экран профиля пользователя.

ЧИТАЙТЕ ТАКЖЕ:

Как сделать лендинг в Figma: руководство для начинающих дизайнеров

Работа после генерации

После написания промпта результат генерации можно скопировать и вставить в свой проект или продолжить работу в пространстве Figma Make. Сгенерированные элементы остаются обычными объектами Figma — можно перемещать слои, менять размер фигур, убирать и создавать компоненты.

Как начать пользоваться Figma Make

Чтобы начать работу с Figma Make, не нужно отдельное приложение или плагин. Инструмент встроен в Figma и открывается внутри интерфейса редактора.

Начало работы с Figma Make 

При первом переходе на страницу Figma Make вы увидите варианты проектов. Они помогают понять, как работает генерация, и протестировать инструмент. Или же можно сразу создать собственный промпт. 

Перейти к Figma Make можно с главной страницы Figma по иконке сверху с командой Make.

Инструменты Figma AI работают по системе AI-кредитов. Их количество зависит от тарифа.

В бесплатном базовом тарифе пользователь доступно до 500 кредитов для ИИ в месяц. В максимальной подписке их количество доходит до 4 250. Кредиты расходуются при отправке промптов, после генерации система указывает, сколько кредитов пришлось израсходовать. Сам инструмент доступен и в бесплатной подписке.

Первые шаги и кастомизация

В поле для промпта введите описание задачи. Начать можно с простых вариантов, запросить пример мозгового штурма по продукту или палитру цветов для сайта. 

Старайтесь четко описывать желаемый результат, чтобы нейросеть точно передала нужный визуал. После генерации можно посмотреть и структуру интерфейса, и код, который сгенерировал ИИ.

В настройках генерации указаны базовые параметры, их можно менять. Например, управлять тем, как отображается код или какие элементы интерфейса должны появиться в результате. Во вкладке General можно отредактировать отображение элементов кода или загрузить референсы.

Запросы не должны быть слишком абстрактными и короткими, иначе генерация займет намного больше времени — ИИ придется перебрать гораздо больше вариантов, чтобы найти нужный. 

Перегружать запрос деталями тоже не стоит. Лучше всего описать общую идею с четкими гайдлайнами, а затем добавлять детали к промпту или самостоятельно уже в проекте.

Какие задачи можно решать с помощью Figma Make

Figma Make может помочь быстро собрать основу интерфейса — например, структуру лендинга или прототип приложения. Но не стоит полагаться полностью на искусственный интеллект. Важно понимать, что инструмент не заменяет дизайнера, он помогает ускорить работу, но итоговое решение все равно всегда требует доработки.

Например, дизайн предыдущего промпта можно использовать в новых идеях. Если взять карту для мозгового штурма и попросить Figma Make превратить ее в лендинг, то инструмент составит целую страницу сайта с пояснениями и базовым визуальным стилем.

С Figma Make можно составить адаптивные экраны дизайна, и тогда останется лишь скорректировать детали, кнопки или переходы. Такой «конструктор» экономит время и силы специалиста, и дизайнер может сфокусироваться на других важных задачах.

Кому особенно полезен Figma Make

Новичкам инструмент помогает быстрее разобраться в структуре интерфейсов. На сгенерированных примерах проще понять, как строится композиция экранов, как редактировать элементы в Figma и как выстраивать процесс работы.

Опытным дизайнерам AI-инструменты помогут сэкономить время и силы. С их помощью можно быстро собрать прототип, протестировать несколько вариантов интерфейса или показать команде идею продукта. Например, UX/UI-дизайнер с помощью Figma Make может быстро сгенерировать воплощение своих идей, отредактировать основные переходы или цвета, быстро собрать фидбэк на основе сгенерированных прототипов.

Ограничения и риски использования Figma Make

Важно помнить, что полностью полагаться на ИИ в дизайне не стоит. Во-первых, остается открытым вопрос о том, кому принадлежат авторские права на результаты генерации. Законодательство в этой области все еще развивается, а значит, ваш дизайн, созданный в Figma Make, могут повторить или использовать в других проектах. 

Во-вторых, искусственный интеллект обучается на больших массивах данных, поэтому сгенерированные решения иногда могут выглядеть шаблонно. Вносите креативность и собственный стиль в свой дизайн, чтобы он не отталкивал аудиторию чересчур базовым и неискренним визуалом, который сложно отличить от других.

Проверяйте сгенерированные экраны и адаптивы на логику и факты. Думайте, верно ли расположены кнопки и увидит ли их клиент, сохранена ли главная информация о бренде или сайте, не сломалась ли логика повествования. 

Все, что генерирует ИИ, должен проверить специалист, который четко знает, каким должен быть итоговый результат.

Главное о процессе работы с новым инструментом Figma Make