Создайте рабочее приложение по дизайну из Figma

КраткоВ Figma выберите File → Save local copy…, чтобы получить файл .fig. На странице «Проекты» нажмите «Figma» и перетащите файл. MonstarX прочитает его прямо в браузере и покажет все экраны; отметьте нужные (до 30), опишите то, чего не видно в дизайне, и нажмите «Создать это приложение» — или «Сначала план», чтобы до сборки ответить на несколько вопросов.

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

Что для этого нужно?

Файл дизайна .fig. Откройте дизайн в Figma и выберите File → Save local copy… — так сохраняется файл, который читает MonstarX. Это должен быть файл Figma Design: доски FigJam и презентации Figma Slides не поддерживаются, и MonstarX предупредит, если вы перетащите такой файл.

Как создать приложение из файла Figma?

На странице Проекты нажмите кнопку Figma рядом с кнопкой Импорт (этот пункт есть и в меню Импорт). Файл .fig можно также перетащить или вставить в поле запроса.
Перетащите файл .fig или выберите его. MonstarX прочитает его в браузере — «Чтение файла…», «Открытие всех страниц…», «Отрисовка экранов…» — и пока ничего не загружает.
Отметьте экраны, которые нужно создать. В списке есть все страницы файла с уменьшенными фреймами. Фреймы, похожие на экраны, уже отмечены; страницы, похожие на служебные (обложка, дизайн-система, архив), свёрнуты и не отмечены. Для каждой страницы есть кнопки Выбрать всё и Снять все отметки.
В поле Что должно делать приложение? (необязательно) опишите то, чего не видно в дизайне: кто им пользуется, откуда берутся данные, что происходит, когда кто-то регистрируется или платит.
Проверьте модель в левом нижнем углу (это та же модель, что в поле запроса; при желании смените её здесь).
Нажмите Создать это приложение · 4 экрана — или Сначала план, чтобы MonstarX изучил экраны и до сборки спросил о том, чего не видно в дизайне.

Экраны загружаются («Загрузка дизайна…»), проект создаётся с названием по имени файла, и начинается первая сборка.

Что MonstarX берёт из дизайна?

Каждый экран как изображение — чтобы конструктор видел в точности то, что вы нарисовали, и по ходу работы сравнивал с ним свои страницы.
Точное описание каждого экрана — компоновка, отступы, каждый текст со шрифтом и размером, цвета, рамки, углы, тени.
Ваши изображения и значки — каждое изображение и каждый значок из дизайна становятся файлом в приложении, так что ничего не подменяется стоковыми фото.
Вашу дизайн-систему — цветовые переменные (для светлой и тёмной темы), шрифты, радиусы скругления и тени.
Компоненты — кнопка, которая встречается на десяти экранах, становится в приложении одним компонентом.
Связи прототипа — то, куда ведёт нажатие, становится настоящей навигацией.

Экраны с одинаковыми названиями (например, цепочка фреймов «Desktop») различаются по первым словам на них, чтобы вы видели, где какой.

Что показывает чат?

Первый запрос будет выглядеть, например, так: «Создай приложение на основе моего дизайна Figma „bloom.fig“ (4 экрана: Welcome, Home, Plant detail, Add plant). Точно воспроизведи дизайн и сделай приложение работоспособным», а под ним — лента экранов. Нажмите на экран, чтобы увидеть его в полном размере, с размером, страницей и файлом. Во время сборки в чате появляются шаги вроде «Изучение дизайна экрана „Home“» и «Страница / сравнена с дизайном экрана „Home“».

Можно ли добавить экраны позже?

Да. Перетащите, вставьте или прикрепите файл .fig в чате проекта — откроется окно Добавить экраны из Figma. Отметьте новые экраны, опишите, что они должны делать, и нажмите Создать эти экраны. Они войдут в дизайн проекта и будут созданы в едином стиле с остальным приложением. В проекте может быть до 60 экранов дизайна.

Какие есть ограничения?

Ограничение	Значение
Экранов за одну сборку	до 30
Экранов в проекте	до 60
Изображений и значков в дизайне	до 400 файлов и 150 МБ (до 8 МБ каждый)

Файл .fig может весить до 250 МБ, но очень большой файл (например, целый набор дизайн-системы) браузер всё равно может не осилить. Перенесите экраны приложения в отдельный файл без страниц дизайн-системы и сохраните локальную копию этого файла.

Вопросы и ответы

Можно ли вставить ссылку на Figma вместо файла?

В этом окне — нет: оно читает сам файл .fig. Выберите в Figma File → Save local copy…. (Некоторые инструменты дизайна умеют отправлять свою работу и через вашего агента для программирования.)

Загружается ли дизайн, когда я перетаскиваю файл?

Нет. Файл читается в браузере; загружаются только отмеченные экраны — когда вы нажимаете кнопку создания.

Будет ли приложение выглядеть в точности как дизайн?

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

В моём дизайне только экраны для телефона. Что будет на компьютере?

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

MonstarX пишет, что мой файл — не файл Figma. Почему?

Возможно, это доска FigJam, презентация Figma Slides или файл .fig другой программы. Откройте дизайн в Figma и выберите File → Save local copy…, чтобы сохранить файл Figma Design.