Figma Make для новичка: как превратить описание экрана в работающий прототип
Figma Make может собрать интерактивный прототип или веб-приложение из текстового описания. Хорошая первая задача для него не «сделай сервис», а один законченный сценарий. Например, список напоминаний: добавить пункт, отметить выполненным и увидеть пустое состояние.
Подготовьте сценарий до первого запроса
Запишите, что должен сделать пользователь:
1. Открыть экран со списком.
2. Ввести текст напоминания.
3. Добавить пункт кнопкой или Enter.
4. Отметить пункт выполненным.
5. Удалить его и увидеть пустое состояние.
Также задайте два ограничения: данные можно хранить только в браузере, а регистрация и сервер пока не нужны. Это защищает прототип от ненужной архитектуры.
Создайте файл Make
В Figma откройте создание нового файла и выберите Make. Доступность функций и количество AI-кредитов зависят от тарифа и роли в команде. Если интерфейс не дает создать файл или использовать планирование, проверьте текущие условия учетной записи, а не старую инструкцию.
Если у вас уже есть макет, его можно приложить как контекст. Для первого опыта достаточно текстового описания:
Создай адаптивный прототип списка напоминаний на русском языке. Вверху заголовок и поле с кнопкой «Добавить». Пустое значение не добавляется, рядом появляется короткая ошибка. У каждого пункта есть чекбокс и удаление. Выполненный текст перечеркнут. Если список пуст, покажи спокойное пустое состояние. Храни данные только в localStorage. Не добавляй вход, сервер и навигацию.
Чем точнее названы состояния и ограничения, тем меньше случайных экранов появится в результате.
Сначала проверьте логику
Откройте предпросмотр и пройдите сценарий руками. Проверьте пустой ввод, длинный текст, перезагрузку страницы и мобильную ширину. Убедитесь, что удаляется выбранный пункт, а не последний в списке.
Не оценивайте прототип только по скриншоту. Кнопка может выглядеть активной, но не менять состояние. Попросите Make исправлять конкретное поведение:
После перезагрузки выполненные пункты становятся активными. Сохрани текущий дизайн и исправь только чтение и запись статуса в localStorage.
Отделите дизайн от функциональности
Когда сценарий работает, переходите к внешнему виду. Задайте один визуальный ориентир: плотность, контраст, радиусы и главный цвет. Не смешивайте в одном запросе новую механику, полную смену стиля и адаптацию. Иначе трудно понять, какая правка сломала прототип.
Если прикладываете чужой сайт или изображение, убедитесь, что имеете право использовать материал. Figma отдельно напоминает об ответственности пользователя за сторонний контент.
Опубликуйте и проверьте ссылку
В Make можно поделиться файлом или опубликовать результат, если функция доступна вашему тарифу. Перед отправкой откройте ссылку в приватном окне. Проверьте, нужен ли зрителю аккаунт, работает ли ввод и не видны ли ему внутренние комментарии.
Не используйте прототип с localStorage как систему для важных данных. Записи хранятся в конкретном браузере, не синхронизируются между устройствами и могут быть удалены пользователем.
Когда прототип пора переносить в проект
Make подходит для проверки сценария и интерфейса. Когда появляются пользователи, учетные записи, общая база и права доступа, одной генерации экрана недостаточно. Нужны репозиторий, схема данных, серверная логика и проверка безопасности.
Переход от прототипа к такой системе разбирается на курсе "Вайбкодинг на максималках"«Вайбкодинг на максималках»: там работа идет от Git и задачи агенту к базе, деплою и защите проекта. Это не курс по Figma Make, поэтому готовый Make-файл стоит воспринимать как исходный прототип, а не как автоматически готовый продукт.
Результат первой работы с Figma Make можно принять, если один сценарий проходит от начала до конца, ошибки ввода видны пользователю, ссылка открывается у другого человека, а ограничения хранения данных зафиксированы прямо в описании прототипа.