Начните с результата, который можно редактировать
Figma AI полезнее оценивать по устройству получившегося файла, чем по эффектности первого экрана. Для дизайнера результатом может быть форма заявки: поля остаются отдельными элементами, подписи можно менять, повторяющиеся кнопки выглядят одинаково, а ошибку и успешную отправку можно показать раздельно. Картинка похожей формы не решает эту задачу: в ней нельзя нормально проверить структуру и повторно использовать элементы.
Разберём вымышленный сервис ремонта велосипедов «Спица». Нужен макет заявки на диагностику для компьютера и телефона. Мы не создаём действующий сервис, не отправляем данные и не проводим здесь реальный запуск агента. Это заполненное учебное задание и способ проверить полученный дизайн. Если ваша цель — работающая форма, следующий этап относится к разработке и проверке приложения.
Соберите короткий бриф до генерации
У заявки одна цель: посетитель оставляет имя, контакт и описание неисправности. Для примера контакт вводится в свободном поле, а дополнительная фотография необязательна. На этом этапе не обещаем стоимость ремонта, время ответа или наличие мастера: заказчик таких сведений не предоставил. Допустимая кнопка — «Оставить заявку», допустимое сообщение после условной отправки — «Заявка принята в учебном примере».
Зафиксируйте четыре состояния: пустая форма, заполненные поля, ошибка обязательного поля и экран подтверждения. Для макета выберем ширину 390 и 1440 пикселей, спокойный нейтральный фон и один акцентный цвет из библиотеки проекта. Это условия нашего примера, а не универсальные требования Figma. Если у компании уже есть компоненты, используйте их вместо новой случайной стилистики.
Выберите инструмент и проверьте доступ к файлу
Текущая документация Figma описывает агента, который работает в файлах Figma Design: помогает создавать и изменять дизайн, использует контекст выбранных слоёв и прикреплённых материалов. Возможность менять файл зависит от места пользователя и прав доступа. Figma отдельно различает этого агента и Figma Make, предназначенный для интерактивных приложений и прототипов. Эти продукты не следует считать одним и тем же результатом.
Перед большим заданием создайте учебную копию и проверьте, что можете вручную изменить текст и расположение поля. Откройте документированные средства работы с агентом именно в доступном вам файле. Если функции нет в вашем аккаунте, не ищите похожую кнопку в старом руководстве и не оплачивайте работу наугад: выясните доступ и условия отдельно. Сам практикум можно выполнить вручную по тому же брифу.
В актуальном интерфейсе Figma Design можно выбрать слой и открыть Agents рядом с ним либо использовать Cmd/ Ctrl + Enter. Боковая панель Agents в левой навигации позволяет вести разговор дольше. Доступ к изменению конкретного файла зависит от прав; начинайте в собственном учебном Draft-файле, а не в рабочем макете команды.
Полное задание для агента
Скопируйте задание вместе с исходными данными: «Работаем в учебном файле Figma Design. Создай редактируемый макет заявки на диагностику велосипеда для вымышленного сервиса Спица. Пользователь вводит имя, контакт и описание неисправности; фотография необязательна. Не придумывай цены, сроки, отзывы и преимущества компании. Подготовь версии шириной 390 и 1440 пикселей и четыре состояния: пустое, заполненное, ошибка обязательного поля, подтверждение. Используй существующие стили и компоненты файла; если их нет, сначала предложи небольшой набор текста, цвета, поля и кнопки. Покажи названия обязательных полей и понятные сообщения ошибок. Используй отдельные редактируемые слои и повторно используемые элементы. Не добавляй оплату, аккаунт, чат и реальные отправки. Сначала перечисли структуру экранов и неясные вопросы. Затем создай макет и объясни, какие элементы являются компонентами и что требует ручной проверки».
Неясный вопрос здесь не считается сбоем. Если агент спрашивает, какой контакт принимается, выберите правило до следующей итерации. Например, в учебном макете поле принимает текст, а валидация формата ещё не определена. Модель не должна изображать реализованную проверку телефона, когда её поведения нет в требованиях.
Проверьте структуру, а не только внешний вид
В готовом файле попробуйте изменить подпись кнопки в одном месте и проверьте соответствующие варианты. Переименуйте описание неисправности в более длинную фразу. Вставьте длинное имя и контакт. Если текст пропадает, обрезается без причины или ломает расположение соседей, исправьте устройство макета до выбора декоративных деталей.
Проверьте также различие состояний. Сообщение об ошибке должно указывать на конкретное поле и объяснять действие пользователя. Одного красного контура недостаточно. Экран подтверждения должен показывать, что произошло в сценарии, но не обещать связь с сервером. В дизайн-файле показана задумка поведения: её работоспособность ещё предстоит доказать в приложении.
Таблица приёмки учебного макета
| Проверка | Ожидается | Ошибка |
|---|---|---|
| Пустая форма | Три обязательных поля и одна необязательная фотография | Скрытое дополнительное обязательное поле |
| Ошибка контакта | Текст ошибки связан с полем и понятен без цвета | Красная рамка без пояснения |
| Длинное описание | Поле и соседние элементы остаются читаемыми | Перекрытие кнопки текстом |
| Мобильная версия | Порядок чтения совпадает с порядком действий | Нужен горизонтальный скролл всей формы |
| Повторное изменение | Подпись и стиль меняются в предусмотренных вариантах | Одна кнопка превратилась в несвязанный дубль |
Это таблица проверки вашего файла, а не отчёт о выполненном запуске Figma. Начните с одного состояния на одной ширине. Если оно не проходит, следующие версии лишь умножат одну и ту же ошибку. Успешная проверка структуры даёт основание продолжать дизайн, но не доказывает доступность готового сайта.
Исправляйте по одному наблюдаемому дефекту
Вместо «сделай красивее» напишите: «На версии 390 пикселей длинное описание перекрывает кнопку. Сохрани остальные элементы и порядок полей. Исправь расположение так, чтобы описание могло занимать несколько строк; покажи короткое и длинное значения». После изменения снова проверьте пустое состояние и ошибку. Исправление одного экрана может нарушить другой.
Уточните отдельно текст ошибки: «Контакт обязателен. Покажи сообщение Введите контакт для связи рядом с соответствующим полем; не меняй остальные подписи». Для нашей формы ожидается именно это действие. Если агент добавил проверку номера по неоговорённому шаблону или сменил основной цвет, верните изменение и сузьте запрос. Рабочую предыдущую версию сохраните перед следующей итерацией.
Передайте дизайн с ясными границами
Перед передачей разработчику подпишите состояния, размеры и правила полей. Укажите, что фотография необязательна, а формат контакта пока не определён. Приложите таблицу приёмки и перечислите нерешённые вопросы: поведение при сетевой ошибке, хранение данных, ограничения файла и реальное подтверждение отправки. Так дизайн не создаёт ложного впечатления, что сложные части уже реализованы.
Повторите проверку глазами другого человека: сможет ли он найти, где начинается заявка, какие данные обязательны и как вернуться после ошибки? Предложите ему пройти сценарий на макете без подсказки автора. Запишите затруднения как наблюдения, а не как проценты улучшения. Один просмотр не доказывает высокий UX, но помогает обнаружить конкретную непонятную подпись.
Согласуйте и порядок изменений. Если заказчик добавил выбор времени, это новое поведение, а не косметическая правка. Нужно решить, откуда берётся список времени, что считается занятым и как изменяется подтверждение. Сначала уточните эти ответы, затем расширяйте макет. Простой исходный пример полезен именно тем, что показывает цену каждого дополнительного обещания интерфейса.
В итоге у вас должен остаться редактируемый файл, понятные состояния и список вопросов для реализации. Сайт, калькулятор и приложение требуют иных проверок, описанных в соседних практикумах. Не называйте дизайн готовым продуктом только потому, что в нём можно нажать нарисованную кнопку.
Источники
Частые вопросы
Можно ли пройти практикум без доступа к Figma AI?
Практикум не обещает бесплатный доступ. Проверьте актуальные условия аккаунта и права файла; структуру можно собрать вручную.
Доказывает ли кликабельный макет работу формы?
Нет. Он показывает сценарий; отправку, валидацию, хранение и сетевые ошибки проверяют в реализованном приложении.
От идеи — к своему действию
Помогло разобраться?
Оцените статью и расскажите, чего не хватило. Отзыв увидит редакция Sinqly — он не появится на сайте.
Как создать приложение с помощью ИИ: учебный MVP от сценария до проверки
Соберите спецификацию личного журнала запросов: экран, данные, браузерное хранение, ошибки и проверяемые условия приёмки небольшого MVP.
Как создать сайт с помощью нейросети: локальный прототип в браузере
Один HTML-файл без установки среды: бриф для AI, учебный пример, открытие в браузере и исправление ошибки. Публикация и сложные функции — отдельный этап.
Вайбкодинг: что это и как сделать первый полезный прототип
Разбираем вайбкодинг на калькуляторе стоимости услуги: от задания нейросети до проверок формулы, ошибок и мобильного экрана.