Figma Make — это новый инструмент для дизайна на базе искусственного интеллекта, который позволяет превращать текстовые подсказки в реальные макеты. В этом руководстве мы разберём, как пользоваться этим инструментом, а также его сильные и слабые стороны.
Как это работает
Всё, что нужно — написать текстовый запрос и отправить его в Figma Make AI Assistant. Система анализирует его и создаёт дизайн.
Figma Make работает на основе Claude Sonnet 4 — одной из самых продвинутых моделей для генерации кода на данный момент. Эта модель также отлично справляется и с генерацией дизайна.
Можно выделить 3 способа создания дизайна:
1. Подсказка + визуальная ссылка
Вы можете написать текстовый запрос с описанием того, что хотите получить, и приложить скриншот страницы, которую Figma Make возьмёт за образец, или изображение продукта/сервиса, который нужно интегрировать в дизайн. В примере ниже приведён запрос, в котором AI-ассистенту предлагается использовать референс для создания лендинга.
Такой подход лучше всего подходит для раннего этапа проектирования, когда вы ещё исследуете разные варианты и хотите, чтобы ИИ сгенерировал несколько идей. Ниже приведён пример интерфейса, который Figma Make сгенерировал для этого запроса.
2. Детализированная подсказка
Когда у вас есть чёткое понимание, что именно вы хотите создать, можно использовать детализированную подсказку для Figma Make. Обычно такие подсказки включают пять аспектов: контекст, описание, платформу, визуальный стиль и UI-компоненты.
Вот пример подсказки для лендинга барбершопа.
Ниже можно увидеть предпросмотр дизайна, который Figma Make сгенерировал на основе этой подсказки. Макет чётко соответствует инструкциям, указанным в запросе.
3. Прикрепить дизайн, созданный в Figma
Наконец, вы можете прикрепить дизайн, созданный в Figma. Этот подход отлично подходит, когда вы хотите превратить свой дизайн в код или внести изменения в композицию (например, добавить новые UI-элементы) и затем преобразовать дизайн в код.
Нажмите на эту опцию, и Figma откроет диалоговое окно, где можно выбрать ваш дизайн.
После выбора дизайна вы можете ввести подсказку, как в примере ниже (добавить новый UI-элемент).
Главное преимущество этого метода заключается в том, что Figma использует все визуальные стили и свойства композиции при преобразовании дизайна в код. Таким образом, результат, сгенерированный Figma Make, будет очень близок к вашему исходному дизайну в Figma.
Преимущества Figma Make
Использует атрибуты дизайна
Главное преимущество Figma Make состоит в том, что инструмент может использовать все визуальные атрибуты из Figma-файла при преобразовании дизайна в код. Для создания почти идентичной копии используются не только типографика и цвета, но и отступы (и особенно авто-компоновка).
Умеет создавать сложные интеракции
Сгенерированный Figma Make дизайн всегда содержит интерактивные элементы. В примерах, которые я приводил выше, Figma Make добавляет эффекты наведения. Но с помощью Figma Make можно создавать и более сложные веб-прототипы, например 3D-игры в жанре Fantasy (ссылка приведена ниже).
Ограничения Figma Make
Визуальные дефекты
Figma Make находится в стадии бета-тестирования, поэтому при работе с инструментом возможны небольшие проблемы. Одной из наиболее распространённых является появление визуальных дефектов (например, неверное соотношение контраста). В моём первом примере вы можете заметить, что для вторичной подписи не хватает контраста. Во многих случаях такие дефекты можно исправить, написав последующую подсказку AI-ассистенту.
Проблема с «памятью»
При итерациях дизайна Figma легко может перезаписывать предыдущие изменения. Например, если вы исправили контраст цвета для подписи кнопки в одном запросе, а во втором попросили Figma Make добавить новый раздел в дизайн, то инструмент выполнит запрос, но при этом может отменить предыдущее исправление.
Генерирует только веб-дизайн
Любые попытки сгенерировать мобильный дизайн с помощью Figma Make приводят к созданию гибридного дизайна (что-то среднее между десктопным и мобильным вариантом). Например, ниже приведён результат работы Figma Make при генерации мобильного дизайна для сервиса, связанного с благополучием.
Итого
Figma Make — это мощный AI-инструмент, который открывает новые возможности для дизайнеров. Он умеет превращать текстовые запросы и макеты в готовые дизайны и код, использовать все визуальные атрибуты из файлов Figma и даже создавать сложные интерактивные прототипы. При этом инструмент пока находится в бета-версии и имеет свои ограничения: визуальные дефекты, проблемы с памятью и слабую работу с мобильными интерфейсами.
Тем не менее, Figma Make уже сейчас может значительно ускорить процесс проектирования и упростить работу над первыми концепциями. Для дизайнеров это отличная возможность сосредоточиться не на рутинных задачах, а на поиске идей и улучшении пользовательского опыта.
Хотите глубже освоить UX/UI и научиться уверенно работать с современными инструментами? Загляните в наш интерактивный онлайн-учебник — начните обучение бесплатно и выводите свои проекты на новый уровень.