Figma Make в 2026 году: от промпта до своего прототипа

Что такое Figma Make и что нужно знать до старта

Пишешь словами, что нужно получить, и забираешь не картинку, а собранный экран: Figma Make отдаёт кликабельный прототип или веб-приложение с кодом на React, и живёт он внутри той же Figma. Сама Figma формулирует это так: «Figma Make is an AI-driven, prompt-to-app tool that lets you bring ideas and existing Figma designs to life as functional prototypes, web apps, and interactive UI» - справка Explore Figma Make, обращение 18.08.2026. Главный файл проекта называется App.tsx, и на Шаге 6 мы его скачаем

Полностью Figma Make работает на месте Full seat платного тарифа, а на бесплатном Starter - с потолком 150 кредитов в сутки и не больше 500 в месяц: «Figma Make is available for Full seats on paid plans. You can try Figma Make on other seats and plans»

Full seat стоит $16 в месяц при годовой оплате и $20 при помесячной (кадр с переключателем Monthly - на скрине ниже), кредитов в обоих случаях одинаково

Сайт открывается из России: пять адресов Figma (главная, страница Make, тарифы, две статьи справки) открылись с компьютера в Москве 18.08.2026 без единого отказа

Замер доступа к Figma с компьютера в Москве сделан 17.08.2026 в 23:22 по Гринвичу (по Москве это уже 18.08): открыты пять адресов, ответ пришёл на все пять с первого раза за 0,39-1,64 секунды. Скачаны страницы целиком: www.figma.com/make/ отдала 1716992 байта с фразой «Prompt to code anything you can imagine» внутри, www.figma.com/pricing/ - 2312196 байт со строкой «150 AI credits/day, up to»

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

Шаг 0. Что собрать до первого промпта

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

Порядок такой:

1. Завести аккаунт на figma.com или войти в существующий - страница входа предлагает Google и почту
2. Открыть страницу Figma Make - поле с плейсхолдером «What do you want to make?» и есть точка входа
3. Заранее написать в блокноте, что должно получиться: какие экраны, что на них происходит, чем всё заканчивается

Третий пункт выглядит формальностью, а стоит дороже остальных: каждая переделка тратит кредиты, и половина расхода у новичка уходит на уточнение того, что можно было сказать сразу

Пришёл со стороны кода и хочешь параллельно поднять среду для ИИ-разработки на своей машине - вход разобран отдельно: установка и первый запуск

И ещё одно до старта. Figma обещает режим Make locally - работу в своей кодовой базе, но на странице продукта у него стоит пометка «Coming soon». Значит сегодня всё, что ты соберёшь, живёт в файле Figma, а не в твоём репозитории - папке проекта на компьютере, которая помнит все версии кода

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

Шаг 1. Войти в аккаунт и проверить своё место

Без входа ничего не сгенерируется: поле ввода на странице Figma Make работает, но после нажатия кнопки поверх страницы встаёт окно «Welcome to Figma», а адрес страницы не меняется вовсе

Что нажать. Открыть www.figma.com/make/, написать текст в поле «What do you want to make?» и нажать круглую кнопку-стрелку справа от поля Что увидишь без входа. Поверх страницы встаёт окно «Welcome to Figma» с кнопками «Continue with Google», «Continue with email» и полем EMAIL - адрес страницы не меняется, генерация не начинается Что это даёт. Понимание, что поле на витрине - приманка, а не демо-режим: бесплатный вход есть, безаккаунтного нет

Прогон 18.08.2026 в 01:21 на чистом профиле браузера, где не было ни одной куки Figma: я открыл www.figma.com/make/ без входа в аккаунт, ввёл в поле «What do you want to make?» текст «Landing page for a Russian barbershop: hero, price list, booking form» и нажал круглую кнопку-стрелку справа от поля. Адрес страницы не изменился, генерация не началась: вместо результата поверх страницы встало окно «Welcome to Figma» с кнопками «Continue with Google», «Continue with email» и полем EMAIL

После входа посмотри, какое место тебе выдано - от него зависит, откроется Figma Make целиком или в режиме пробы

Что нажать. Аватар в левом верхнем углу → Settings → вкладка Account (админ команды смотрит места всех через Admin → People → колонку Seat type) Что увидишь. Своё место и, если состоишь в организации, её название с кнопкой запроса апгрейда рядом Что это даёт. Понимание потолка: одиночка на Starter без команды видит режим и так - проба с потолком 150 кредитов в сутки, колонки Seat type у него просто не будет

Шаг 2. Написать первый промпт рамкой

Одним сообщением задать рамку: какие экраны нужны, какие ограничения обязательны и как выглядит готовое - Figma называет эти три вещи scope, constraints и end state. Формулировка с её же страницы про экономию кредитов: «The more clearly it defines the scope, constraints, and end state you're after, the less you'll need to cover in follow-ups»

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

Рабочий каркас первого сообщения - скопируй его целиком, вставь в поле «What do you want to make?» на странице Figma Make, замени всё в угловых скобках своими словами и нажми Enter:

Собери <что именно: лендинг / дашборд / экран онбординга> для <кто пользователь>.
Экраны: <перечислить по одному, без «и всё остальное»>.
На каждом экране: <главное действие пользователя>.
Ограничения: <язык интерфейса, тёмная или светлая тема, мобильная или десктопная сетка>.
Готово, когда: <что должно нажиматься и куда вести>.

Что нажать. Вставить заполненный шаблон в поле «What do you want to make?» и нажать Enter Что увидишь. Figma тут же начинает собирать первый экран по этой рамке - в чате появляется прогресс генерации, а слева растёт список файлов Что это даёт. Меньше уточняющих заходов: каждый из них - отдельный вызов модели и отдельный расход кредитов, три догоняющих промпта стоят дороже одного точного

Дальше приёмы самой Figma с её же страницы про экономию, в порядке отдачи:

Про режим плана Figma пишет с оговоркой: «While plan mode uses additional credits up front, the cost is often far less than the cost of a build that needs to be corrected mid-way or started over». То есть план стоит денег, но пересборка стоит дороже

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

Шаг 3. Прикрепить свой макет к промпту

Через кнопку «плюс» рядом с полем чата: + → Attach a design → вставить ссылку на фрейм, и дальше модель собирает приложение по твоей сетке. Справка описывает путь одной фразой: «To use your existing designs to generate an app, click +, then Attach a design, and then paste the URL to the design you want to use»

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

Для дизайнера этот вход важнее первого: с чистого листа модель придумывает интерфейс сама, а с макетом берёт твою сетку, отступы и типографику

Порядок действий:

1. Открыть свой файл в Figma Design и выделить фрейм, который нужно оживить
2. Скопировать ссылку на этот фрейм - обычный Copy link to selection
3. Открыть файл Figma Make и нажать + слева от поля ввода
4. Выбрать Attach a design и вставить скопированный адрес
5. В том же сообщении написать, что должно работать: какая кнопка куда ведёт, что происходит при отправке формы

Что нажать. + рядом с полем чата → Attach a design → вставить ссылку на фрейм → в том же сообщении дописать, что должно работать Что увидишь. Модель собирает приложение по твоей сетке, отступам и типографике вместо того, чтобы придумывать интерфейс с нуля Что это даёт. Готовый визуальный каркас без лишних кредитов на угадывание вида - но пятый пункт (описание поведения) пропускать нельзя: макет показывает вид, а не поведение, и без слов о нём модель додумает его сама

И здесь всплывает граница бесплатного плана: библиотеку стилей команды на Starter в Make не подтянуть, цвета и шрифты приедут из самого фрейма. Для одного экрана незаметно, для продукта из двадцати экранов уже разница

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

Шаг 4. Выбрать модель под задачу

Нажать на имя модели в поле чата и выбрать другую из выпадающего списка: кроме модели по умолчанию, имя которой Figma не называет, доступны пять штук от Gemini 3.6 Flash до GPT-5.6

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

И вот предупреждение, ради которого этот шаг вообще стоит отдельно:

«Credit consumption for non-default models is still in development and may vary significantly. Some models may use substantially more credits per task than other available options»

Figma, справка Select an AI model to use in Figma Make, обращение 18.08.2026

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

Что при этом не меняется - привычки. Справка обещает: «Using different models doesn't change how you work in Figma Make», меню, панель чата и просмотр кода остаются теми же

Последнее про модель по умолчанию: её имя Figma не публикует и оставляет право менять, «The default model may change over time». Одинаковый промпт через месяц может дать другой результат не потому, что ты сделал что-то иначе

Шаг 5. Положить правила в guidelines.md

Открыть Code вверху файла, найти в проводнике слева папку guidelines и положить туда markdown - обычный текстовый файл с простой разметкой, без специальной программы - с постоянными правилами: как верстать, какие сетки использовать, каким тоном писать интерфейсные надписи

Figma называет этот файл самым сильным рычагом: «A guidelines file (guidelines.md) is one of the most impactful changes you can make to your Make workflow». Записанное один раз не приходится повторять в каждом промпте, а каждое неповторённое уточнение - это несписанные кредиты

Примеры строк из шаблона Figma, дословно:

• «Only use absolute positioning when necessary. Opt for responsive and well structured layouts that use flexbox and grid by default»
• «Keep file sizes small and put helper functions and components in their own files»
• «Use a base font-size of 14px»
• «Date formats should always be in the format 'Jun 10'»

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

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

Что нажать. Code вверху файла → в проводнике слева папка guidelines → создать в ней markdown-файл с правилами Что увидишь. Обычный текстовый файл, который редактируется прямо там же, без специальной программы Что это даёт. Правило, записанное один раз, не нужно повторять в каждом промпте - а каждое неповторённое уточнение это несписанные кредиты

Шаг 6. Забрать код прототипа

Кнопкой Code вверху файла Figma Make: она открывает редактор, где по умолчанию выбран App.tsx - главный файл прототипа, а справа вверху лежит кнопка Download code, которая отдаёт ZIP со всеми файлами

Что нажать. Code вверху файла → Download code в правом верхнем углу редактора Что увидишь. ZIP со всеми файлами проекта из проводника, включая App.tsx и guidelines.md с прошлого шага Что это даёт. Рабочий фронтенд на React и TypeScript, который можно поднять у себя и продолжать руками - доступно только местам Full и Dev, на Collab и View кнопки не будет

На практике это значит: Figma Make отдаёт не экспорт в картинку, а рабочий фронтенд - программный код той части сайта, которую видит и трогает пользователь - на React и TypeScript. Такой проект можно поднять у себя и продолжать руками

Ограничения, которые стоит знать заранее:

• смотреть и скачивать код могут только места Full и Dev, на Collab и View кнопки не будет
• создавать файлы самому в проводнике нельзя, но можно попросить об этом модель: «You can't create your own files in the file explorer, but you can instruct Figma Make to create files for you»
• каждая правка кода складывается в контрольную точку, к которой можно вернуться

Скачанный ZIP - обычный проект, а не сувенир: в нём все файлы из проводника, включая guidelines.md с прошлого шага. Дальше дорога расходится - продолжать в Figma или переносить проект к себе

Шаг 7. Опубликовать прототип по ссылке

Одной кнопкой Publish в правом верхнем углу файла: Figma просит заголовок, при желании пускает в Make settings и после второго нажатия выдаёт адрес вида three-random-words.figma.site

Шаги целиком:

1. Открыть готовый файл Figma Make
2. Нажать Publish в правом верхнем углу
3. В открывшемся окне задать заголовок страницы
4. При необходимости зайти в Make settings и поправить параметры
5. Нажать Publish ещё раз и забрать адрес

Что нажать. Publish в правом верхнем углу → задать заголовок → при желании поправить Make settings → Publish ещё раз Что увидишь. Готовый адрес вида three-random-words.figma.site - «Publish your functional prototype or web app as a website with a dedicated URL» Что это даёт. Настоящий адрес в интернете, а не превью для команды: его можно отправить заказчику, показать одному человеку через настройку прав доступа или выложить в веб (на Starter - только в связке с Figma Community)

Про доступ: превью раздаётся с точной настройкой прав, «using the granular permissions to control access and keep your concepts safe». Показать одному человеку и не выкладывать миру - штатный сценарий, но не на Starter: там публикация в веб идёт в связке с Figma Community

Свой домен подключается, но не бесконечно: число зависит от тарифа, лимит общий с Figma Sites. Уйдёшь с платного плана - опубликованные страницы остаются жить на адресе figma.site

Сравнить этот путь с другими способами получить живую страницу можно по разбору четырёх маршрутов: как собрать сайт с ИИ

Сколько кредитов съедает Figma Make и где смотреть остаток?

Точной цифры нет ни у кого, включая саму Figma: в таблице расхода напротив строки Figma Make стоит «Varies». Ориентиры справка всё же даёт - от 30 кредитов за смену шрифта, от 75 за оживление приложенного макета и от 100 за приложение с нуля

Почему вместо числа стоит слово, Figma объясняет прямо:

«Because the model determines what actions it needs to perform to complete a task, we can't predict exactly how many credits a request will use in advance»

Figma, справка How AI credits work, обращение 18.08.2026

Расход тянут три вещи, и все три ты контролируешь сам: выбранная модель, сложность задачи и объём приложенных материалов

Два потолка упираются в разное. Дневной ограничивает темп: 150 кредитов это примерно один полный прогон приложения в сутки. Месячный ограничивает объём: 500 кредитов это пять прогонов, а если жечь по 150 в день, стена приходит на 4-й день месяца

Кредиты обнуляются раз в месяц и не переносятся. Кончились - справка формулирует без смягчений: «If you have no credits, you will be unable to complete any additional AI actions»

Дальше два экрана, которые легко перепутать. Наведение курсора на значок кредитов под завершённым промптом показывает расход этой задачи, а не остаток. Остаток лежит в другом месте: открыть файл с правом редактирования, зайти в главное меню файла и выбрать пункт AI balance - там видно, сколько потрачено, сколько осталось и когда счётчик обнулится

Докупить кредиты читателю на Starter не выйдет. Докупка живёт на странице Manage AI credits с пометкой «Available on paid plans»: её включает админ на платном тарифе, способов два. Пакетом - тогда «the price per credit decreases as more credits are purchased», единой цены за кредит нет. По факту - тогда работает ставка pay-as-you-go, на 18.08.2026 это «$0.03 per credit». У человека на бесплатном плане нет ни админки, ни плана, к которому докупают: остаётся ждать сброса счётчика или переходить на платный тариф

Не хочется платить вовсе - есть подборка бесплатных инструментов того же назначения: бесплатные инструменты Google

Чем Figma Make отличается от вайбкодинга?

Границей владения: в вайбкодинге проект лежит у тебя - свой репозиторий (папка проекта на компьютере с историей всех версий), свой редактор, свой счёт за модель, а в Figma Make файл, код, история правок и счётчик кредитов живут внутри чужого окна

Сила Figma Make в том, что всё в одном окне: макет, генерация, код и публикация не разъезжаются по пяти сервисам. Обратная сторона та же - окно чужое, и правила в нём меняет не тот, кто работает. Модель по умолчанию Figma вправе поменять без предупреждения, ставки расхода датированы 2 июля 2026 года и оговорены как изменяемые

Без оценок картина такая: Figma Make закрывает участок от чертежа до кликабельного экрана. Дальше, где нужна своя база данных (место, где хранятся все данные пользователей и их действия), свои интеграции и своя логика, начинается другая работа, и она уже не про Figma

Что такое вайбкодинг как класс, если это слово встречается впервые, разобрано отдельно: вайбкодинг простыми словами

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

Источники

• Figma Make, страница продукта - обещание продукта, поле ввода и чипы, обращение 18.08.2026
• Справка: Explore Figma Make - определение, кому доступен, импорт макета, публикация
• Справка: Figma Make FAQs - что даёт Starter и чего на нём нельзя
• Тарифы Figma - места и цены, кредиты по каждому месту, «150 AI credits/day, up to 500 AI credits/mo», переключатель Monthly
• Справка: How AI credits work - кредиты по тарифам, дневной потолок, расход Figma Make, пункт AI balance и что происходит при нуле
• Справка: Manage AI credits - что такое кредит, кто и как докупает, ставка pay-as-you-go $0,03 за кредит
• Справка: Select an AI model to use in Figma Make - пять моделей и предупреждение о расходе
• Справка: Edit the code - кнопка Code, App.tsx, Download code
• Справка: Add guidelines to Figma Make - что такое guidelines.md и примеры строк шаблона
• Справка: Publish a Figma Make file - шаги публикации и адрес figma.site
• Справка: Best practices for optimizing AI credits - приёмы экономии кредитов
• Справка: View and manage account settings - где человек видит свой тип места и как запросить апгрейд

Памятка: семь шагов от промпта до ссылки

Сохрани, чтобы не собирать заново

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

Читайте также

Дизайн без дизайнера

Пять инструментов, которые собирают UI из текстового описания

Вайбкодинг простыми словами

Что это за способ работы и с чего начать без опыта

Как собрать сайт с ИИ

Четыре пути и живая страница за один вечер