Обзор Figma Make: прототипы, бэкенд и передача в разработку

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

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

Что такое Figma Make и что он умеет?

Figma Make превращает промпты и дизайн-референсы в интерфейс с редактируемым кодом. В нём можно проверить работу поиска, заполнить форму или пройти пользовательский сценарий, а не просто посмотреть на статичный макет. Сервис также позволяет публиковать веб-приложения и подключать их к сохранённым данным. Figma Design остаётся холстом для проектирования интерфейсов, а Figma Sites — отдельным инструментом для создания сайтов. В Make вы описываете, как должен вести себя интерфейс, и получаете реализацию этого поведения. Начать можно с Figma Make; путь от промпта до предпросмотра описан в инструкции по созданию файла.

Кому подойдёт Figma Make и когда лучше выбрать альтернативу?

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

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

Различия в работе с бэкендом и кодом описаны в руководстве Figma по бэкендам, документации Lovable Cloud, руководстве v0 по full-stack-приложениям и на странице Claude Design.

Lovable: когда приложение важнее исходного дизайн-макета

Lovable — конструктор приложений с управляемым хостингом, базой данных, аутентификацией и хранилищем. Его стоит рассмотреть основателю, который начинает с задачи: «Клиенты должны отправлять заявки, а сотрудники — обрабатывать их». Интеграция с GitHub позволяет получать обратно изменения из активной ветки репозитория. Это важно, когда к проекту подключается разработчик.

Обратная сторона — ответственность за дальнейшую эксплуатацию. Согласно документации Lovable Cloud, для перехода на собственный Supabase потребуется экспортировать данные и заново создать схему в новом проекте. Выбирайте Lovable, если такая управляемая среда подходит для запуска, и заранее определите, кто займётся возможной миграцией.

v0 by Vercel: когда дальше предстоит работать с кодом

v0 от Vercel создаёт full-stack-приложения и по умолчанию использует Next.js — веб-фреймворк, объединяющий код интерфейса с серверной функциональностью. В документации описаны серверные эндпоинты и подключения к базам данных. v0 также умеет импортировать контекст из Figma, поэтому работа с дизайном из Figma — не исключительное преимущество Make.

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

Claude Design: когда задача выходит за рамки интерфейса продукта

Claude Design создаёт макеты и другие визуальные материалы, умеет использовать контекст дизайн-системы из кода и дизайн-файлов и связан с Claude Code. На текущей странице продукта также описан экспорт в PDF, PowerPoint и HTML. Такой набор возможностей подходит основателю, которому нужны и прототип, и материалы для его презентации.

Выбирайте Claude Design, когда творческая задача формируется в диалоге, а дальнейшая работа продолжится в Claude или с экспортированным результатом. Для команды, которая обсуждает продукт на основе готовых фреймов Figma, Make даёт более прямой путь от исходных материалов. Сам по себе экспорт HTML не решает, кто будет поддерживать аккаунты, данные и развёртывание.

Больше вариантов — в нашей подборке ИИ-инструментов для дизайна.

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

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

Пошаговый пример: превращаем фрейм записи в прототип

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

1. 1

   Подготовьте фрейм

   Выберите в Figma Design фрейм с интерфейсом записи. Добавьте осмысленные подписи кнопок и нужные состояния: выбранный вариант, недоступность и ошибку. Скопируйте сам фрейм. Когда модели нужен точный контекст дизайна, Figma рекомендует использовать структурированные фреймы, а не скриншоты.

2. 2

   Создайте файл Make и приложите референс

   В файловом браузере откройте Drafts и нажмите Make. Вставьте скопированный фрейм в промпт. Другой вариант — нажать Add context и через окно вложений прикрепить дизайн или ссылку на фрейм. Передавайте в контекст сам фрейм, не полагаясь лишь на ссылку в переписке.

3. 3

   Опишите поведение и границы задачи

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

4. 4

   Проверьте нештатные сценарии

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

5. 5

   Исправьте конкретную проблемную область

   В новом файле Make нажмите Edit, выберите элемент, измените его свойства и нажмите Apply либо отметьте конкретный дефект аннотацией. Не совмещайте исправление поведения с масштабной визуальной переработкой: так будет понятно, устранена ли именно нужная проблема.

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

Примеры промптов Figma Make для этого сценария

Первый промпт: «Используй приложенный фрейм записи как визуальный референс. Создай сценарий для посетителя: выбор услуги и свободного времени, ввод обязательных контактных данных и просмотр подтверждения. Используй вымышленные демонстрационные данные. Сохрани иерархию фрейма и оформление компонентов. Пока не подключай бэкенд. Объясни, какие функции имитируются».

Промпт для исправления: «Когда выбранная услуга меняется, сбрасывай ранее выбранное время и требуй выбрать его заново. Сохрани компоновку и визуальное оформление. Покажи пояснение рядом с элементом выбора времени».

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

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

Дизайн-система в Figma Make: как сохранить не только цвета

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

Наборы Make kits в Figma Make

Make kits позволяют объединить npm-пакеты, стили и переменные опубликованных библиотек, а также письменные инструкции. Через npm-пакет распространяется переиспользуемый код, поэтому набор может передавать контекст реализации вместе с визуальными референсами. В документации указан путь Settings → Create a kit → Assemble your kit. Затем нужно добавить материалы, написать инструкции, проверить набор и опубликовать его для коллег. Для работы с наборами требуется лицензия Full на платном тарифе. Руководство Figma по Make kits

В области ввода промпта нажмите Select a Make kit и выберите опубликованный набор до генерации сценария. Для примера с записью добавьте согласованные компоненты кнопки, поля ввода и выбора времени, если они есть. Затем объясните правила их использования: основная кнопка отправляет корректно заполненную заявку; недоступное время остаётся различимым, но выбрать его нельзя; сообщение проверки находится рядом с полем, которое нужно исправить.

Эти правила важнее просьбы «сделай в стиле бренда». Сгенерированный фиолетовый прямоугольник может выглядеть как ваша основная кнопка, но не иметь отключённого состояния, оформления фокуса или доступной метки. Проверяйте, как используются компоненты и что означают действия, а не только узнаваемость акцентного цвета.

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

Извлечение данных из библиотеки не сохраняет токены в полном объёме. В руководстве Make kits сказано, что часть переменных преобразуется в упрощённый CSS с конкретными значениями; исходный синтаксис переменных не сохраняется. Зафиксируйте правила состояний в инструкциях и проверьте сгенерированные стили, прежде чем считать, что прототип полностью перенёс вашу систему.

Шаблоны Figma Make

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

Используйте инструкции проекта для постоянных правил проекта, а пользовательские навыки — для повторяемых проверок, которые вы запускаете явной командой. Команды с готовой дизайн-системой могут взять за основу наш набор пользовательских навыков Figma Make для дизайн-системы. Адаптируйте инструкции к своим токенам и компонентам; окончательное решение по результатам проверки всё равно принимает человек.

Как создать веб-приложение, которое сохраняет данные

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

При работе с Payload вы описываете приложение, подтверждаете создание бэкенда и управляете записями на вкладке CMS — экране управления контентом. Figma размещает и приложение, и данные. Supabase подключается отдельно по пути Make settings → Integrations → Supabase. В Make эта интеграция использует хранилища «ключ — значение», то есть простые сохранённые записи, а не создаёт полноценную схему базы данных со связанными таблицами. Документация Figma по бэкендам

Продолжите то же задание таким промптом: «Добавь бэкенд Payload для услуг и заявок на запись. Посетители могут отправлять заявки, сотрудники — управлять ими. Отдели общедоступную информацию об услугах от закрытых контактных данных. Прежде чем реализовать правила доступа, объясни их».

Затем откройте сохранённую заявку в административном интерфейсе. Обновите пользовательскую страницу и убедитесь, что она читает нужные сохранённые данные. Проверьте, может ли посетитель без авторизации получить доступ к записям, предназначенным только для сотрудников. Это приёмочные проверки вашей реализации, а не заверение, что генерация уже обеспечила нужный результат.

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

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

Публикация приложения: кто будет отвечать за него дальше

Figma Make позволяет публиковать приложение напрямую, без перехода в Figma Sites. Нажмите в Make Publish, задайте название и опубликуйте приложение. Вы получите отдельный URL и сможете подключить собственный домен. Чтобы последующие изменения стали доступны посетителям, опубликованную версию нужно обновить. Руководство по публикации в Make

Для прототипа записи определите аудиторию: это участники проверки или потенциальные клиенты? Проверяющим нужно честно объяснить, какие функции имитируются. Клиентам нужен полноценный сервис: понятное подтверждение, возможность исправить ошибку и человек, который отвечает на заявки. Финальную проверку проводите по опубликованному URL, чтобы увидеть именно то, что получат посетители.

Когда для публикации лучше выбрать Figma Sites

Figma Sites подходит для маркетингового сайта, которым управляют через визуальный редактор. В документации описан такой путь: скопировать фрейм из Figma Design в брейкпоинт Sites, настроить адаптивные варианты и опубликовать. Брейкпоинт здесь — компоновка для определённого диапазона ширины окна. Такой подход удобен, когда основная работа состоит в сборке и обновлении страниц. Перенос дизайна в Figma Sites

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

Что передать команде разработки вместе с кодом

Редактор кода Figma Make позволяет скачать ZIP-архив. В актуальной документации по работе с Git также описаны клонирование репозитория GitHub, к которому предоставлен доступ, работа в ветках и создание pull request. Pull request позволяет разработчикам проверить изменения до их включения в общее приложение. Это разные способы начать дальнейшую работу, и требования у них различаются.

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

Кредиты ИИ в Figma Make: лимиты и расход

Для совместной работы с дизайн-системой выбирайте лицензию Full на тарифе Professional: она включает 3,000 кредитов ИИ в месяц, тогда как Starter даёт 500 в месяц с лимитом 150 в день. Make расходует общий лимит ИИ, причём расход зависит от модели, задачи и контекста. Лимит по каждой лицензии обновляется ежемесячно, остаток не переносится. Перед выбором изучите правила работы кредитов Figma AI и тарифы Figma: лимит кредитов не гарантирует определённое число готовых прототипов.

Какие ограничения нужно учесть при выборе

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

Приложения на Payload пока не позволяют продолжить работу через Git

В документации Figma Make по бэкенду Payload сказано, что интеграция с GitHub и работа с локальной кодовой базой для таких приложений пока недоступны. Там же указано, что сейчас хостинг Payload расположен на востоке США. Учитывайте это при выборе, а не после создания приложения. Ограничения Payload

Если разработчики должны сразу продолжить тот же проект через свой репозиторий, проверьте совместимый путь до выбора Payload. Обещание будущей функции не решает задачу передачи, которая нужна сейчас.

Перенос из Figma Make в Figma Design не создаёт автоматическую синхронизацию

Стандартная команда Copy design в Figma Make создаёт редактируемые слои из текущего предпросмотра. Эти слои статичны, не связаны с файлом Make и не подключаются к дизайн-системе автоматически, хотя доступные переменные можно сопоставить. Документация Copy design

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

Возможности работы с Git не взаимозаменяемы

Отдельная функция Push to GitHub в Figma Make создаёт собственный репозиторий и отправляет изменения только в одну сторону. Повторная отправка может перезаписать правки, сделанные вне Make. Это ограничение нельзя переносить на более новый сценарий с клонированием репозитория, описанный выше.

Работа с локальной кодовой базой — ещё один отдельный вариант. В документации он представлен как ограниченная закрытая бета: нужны настольное приложение Figma Beta для Mac и аккаунт с предоставленным доступом. Репозиторий требуется настроить. Прежде чем обещать, что дизайнеры смогут напрямую редактировать действующее приложение, уточните, какой путь доступен вашей команде.

Пароль опубликованного приложения защищает не все ссылки

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

Для сгенерированного поведения всё равно нужны критерии приёмки

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

Рабочее определение готовности к запуску такое: «целевой пользователь может выполнить задачу, а ответственный за продукт — обеспечить дальнейшую работу с результатом». Один реалистичный макет не подтверждает ни того, ни другого.

Вердикт: проверяйте дизайн в Make и заранее выбирайте путь дальнейшей работы

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

Выбор придётся пересмотреть, если тот, кто примет проект, не сможет продолжить работу выбранным способом. Размещённое приложение на Payload может подойти для работы с контентом или заявками, но текущее ограничение Git существенно, если сразу требуется передача разработчикам. Для старта с задачи приложения, управляемой инфраструктуры и синхронизации Git выбирайте Lovable; для проекта на Next.js под ответственностью разработчика — v0; для более широкого поиска визуальных решений и продолжения в Claude — Claude Design.

На следующей неделе возьмите типичный фрейм, соберите минимальный законченный сценарий и попросите будущего ответственного за продукт проверить, как он сможет продолжить работу. Согласуйте прототип вместе с планом передачи. Это полезнее, чем просто сгенерировать ещё несколько экранов.

Частые вопросы

Что можно создать в Figma?

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

Как создать новый файл в Figma?

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

Figma — это инструмент для UI или UX?

Для обоих направлений. UI — это интерфейс, который человек видит и которым управляет; UX — его опыт выполнения задачи. Make помогает проверить работающий сценарий, но исследование и решение о том, ту ли проблему он решает, остаются за вами.

Чем Figma Design отличается от Figma Make?

Figma Design — холст для проектирования, а Make генерирует работающий интерфейс с кодом. Стандартная команда Copy design переносит статичное представление интерфейса в редактируемые слои, но не синхронизирует последующие изменения автоматически.

Какие инструменты лучше Figma Make?

Это зависит от задачи. Lovable — сильная альтернатива для приложения с управляемым бэкендом, v0 — для разработки на Next.js, Claude Design — для поиска визуальных решений в разных форматах. Главное преимущество Make проявляется, когда вы начинаете с уже существующих макетов и дизайн-системы Figma.

Пользователи уходят из Figma?

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

Почему Figma падает?

Речь может идти о цене акций, распространённости продукта или чьём-то мнении о нём. Ни один из этих вопросов сам по себе не показывает, подходит ли Make для вашей работы. Обзор не содержит выводов о рыночных показателях: мы оцениваем описанные в документации возможности дизайна, бэкенда и передачи в разработку.

Кто главный конкурент Figma?

Единого конкурента для всех сценариев Make нет. При выборе для этих задач рассмотрите Lovable, если начинаете с приложения, v0 — если планируете продолжать работу с кодом, и Claude Design — для визуальной работы через диалог. Сравнивайте инструменты по задаче, которую действительно нужно завершить.

Что лучше: Canva или Figma?

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

Можно ли пользоваться Figma Make бесплатно?

Попробовать Make можно на тарифе Starter. Среди описанных ограничений — отсутствие контекста стилей командных библиотек и привязка публикации в открытом интернете к публикации в Figma Community. Для совместной работы над конфиденциальным продуктом рассмотрите платный вариант с лицензией Full. См. условия доступа к Figma Make и лимиты кредитов выше.

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