Как подготовить Figma-файл для Promto

Promto импортирует локальную копию Figma в формате .fig, разбирает её и передаёт содержимое агенту как контекст. Агент использует этот контекст, чтобы создать новый дизайн-HTML-файл *_design.html.

Если вы ещё не знакомы с этим форматом результата, сначала прочитайте что такое дизайн-HTML и чем он отличается от Figma и полноценного приложения.

Главный принцип: маленький файл со всем необходимым

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

Ограничивать нужно количество целевых объектов верхнего уровня:

• идеально — один экран или один самостоятельный элемент;
• нормально — 2–3 варианта одного и того же экрана;
• слишком много — несколько пользовательских потоков, десятки экранов, все страницы продукта и библиотека компонентов в одном файле.

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

Какие задачи удобно передавать отдельным файлом

Один .fig можно подготовить для:

• одного экрана сайта или приложения;
• одного лендинга;
• одного баннера или промоблока;
• одного слайда либо небольшой связки из 2–3 слайдов;
• одного компонента с несколькими важными состояниями;
• одной формы: вход, регистрация, оплата или заявка;
• одного модального окна;
• одного мобильного экрана и его desktop-варианта;
• одного шага пользовательского сценария;
• одного варианта редизайна для сравнения.

Если задача звучит как «перенести весь сервис», сначала разделите её на экраны или короткие связанные этапы и импортируйте их по очереди.

Что обязательно оставить внутри

Подготовленная копия должна быть небольшой, но самодостаточной. Оставьте:

• один целевой фрейм с понятным названием;
• реальные тексты, которые должны попасть в результат;
• используемые изображения, логотипы, иконки и фоны;
• только те компоненты и варианты, которые видны на целевом экране;
• важные состояния: например, пустой результат, ошибка или открытое меню;
• desktop- или mobile-вариант, если он относится к той же задаче;
• цвета, размеры, отступы и Auto Layout, необходимые для понимания композиции.

Что нужно удалить

Из копии для Promto удалите всё, что не относится к текущей задаче:

• остальные страницы продукта;
• старые версии и отвергнутые варианты;
• скрытые черновики за пределами рабочего фрейма;
• большие наборы компонентов и variant sets;
• moodboard, исследования и референсы, которые уже не нужны;
• дубли изображений и иконок;
• презентации, схемы и экраны из других пользовательских потоков;
• пустые страницы и служебные заготовки.

Не пытайтесь «на всякий случай» сохранить весь исходный файл. Если дополнительный экран действительно понадобится, его проще подготовить отдельной локальной копией.

Как сделать отдельную чистую копию в Figma

Безопаснее готовить импорт не в основном рабочем файле, а в его отдельной копии.

1. Создайте новый временный Figma-файл или дубликат исходника.
2. Оставьте в нём одну страницу, например Для Promto.
3. Скопируйте на страницу один нужный экран или объект целиком.
4. При необходимости добавьте ещё 1–2 тесно связанных состояния.
5. Перенесите только используемые локальные компоненты, изображения и иконки.
6. Удалите все остальные страницы, черновики и библиотеки.
7. Дайте фреймам понятные имена: Checkout — desktop, Checkout — mobile, Checkout — error.
8. Проверьте, что основной экран виден целиком и не перекрыт скрытыми слоями.

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

Как скачать локальную копию из Figma

Шаги одинаковы для веб-версии и настольного приложения Figma:

1. Откройте подготовленный маленький файл.
2. Откройте главное меню по значку Figma в левом верхнем углу.
3. Выберите File → Save local copy…. В русской локализации пункт может называться Файл → Сохранить локальную копию….
4. Дождитесь скачивания файла с расширением .fig.
5. Найдите его в папке загрузок и проверьте понятное имя, например checkout-for-promto.fig.

Нужна именно локальная копия .fig. Экспорт в PNG, JPG, SVG или PDF можно приложить как визуальный референс, но он не заменяет импортируемый Figma-файл. Ссылка на Figma также не является локальной копией.

Если пункта Save local copy… нет, сохранение копии может быть ограничено правами файла или настройками организации. Попросите владельца выдать возможность копирования либо подготовить и скачать отдельный файл самостоятельно.

Локальная копия фиксирует текущее состояние макета. Последующие изменения в облачном Figma-файле не обновят уже скачанный .fig: перед новым импортом скачайте свежую копию.

Как загрузить .fig в Promto

1. Откройте полноценное рабочее пространство Promto на настольном интерфейсе.
2. Перейдите в Промто Дизайн → Главная.
3. Нажмите Импортировать файлы из Figma.
4. Выберите скачанный .fig или перетащите его в область импорта.
5. Не закрывайте окно, пока Promto подготавливает файл.
6. Дождитесь статуса Figma готова.
7. Проверьте, что Figma-контекст появился рядом с сообщением в чате.
8. Добавьте точное задание: какой фрейм использовать, что сохранить и какой результат создать.
9. Отправьте сообщение агенту.

После импорта Promto создаёт подготовленную папку с отдельными страницами, краткими сводками, деревом элементов и найденными изображениями. Агент сначала изучает нужную страницу, а затем создаёт новый *_design.html.

Что написать агенту после загрузки

Укажите:

• точное имя нужного фрейма;
• какой размер считать основным;
• нужен ли mobile-вариант;
• какие тексты и изображения нельзя менять;
• какие взаимодействия нужно только продемонстрировать;
• какие части макета не относятся к задаче;
• имя итогового *_design.html.

Пример:

Используй только фрейм Checkout — desktop и связанный Checkout — error из приложенного Figma-файла. Сохрани тексты, изображения, цвета и композицию. Остальные объекты не используй. Создай самодостаточный checkout_design.html и добавь адаптацию для телефона.

Если нужно перенести несколько экранов

Не объединяйте все экраны в один большой .fig.

Лучше выбрать один из подходов:

1. Один файл на каждый самостоятельный экран.
2. Один файл на 2–3 состояния одного экрана.
3. Один файл на один короткий шаг сценария.
4. Последовательный импорт: сначала ключевой экран, затем следующий после проверки результата.

Так проще согласовывать результат, повторно импортировать изменившийся экран и не затрагивать уже готовые части.

Проверка перед загрузкой

• В файле одна страница.
• Есть один главный экран или максимум 2–3 связанных фрейма.
• Все нужные изображения и иконки находятся внутри копии.
• Нет посторонних страниц, черновиков и больших библиотек.
• У фреймов понятные уникальные названия.
• Тексты являются актуальными.
• Известно, какой фрейм агент должен использовать.
• Файл скачан через Save local copy… и имеет настоящее расширение .fig.
• Для следующего отдельного экрана будет подготовлен отдельный файл.

Инструкции и CLI для агента

Отдельной focused-инструкции с topic figma_import и пользовательского CLI promto-figma нет. Локальный .fig выбирает пользователь через интерфейс Промто Дизайн.

Promto разбирает загруженный файл внутренним сервисом. Название fig2json относится к внутреннему парсеру и не является CLI, который нужно просить агента запускать в рабочем пространстве.

После успешного импорта главный агент использует:

• Promto Design Instructions — get_instruction({ topic: "design" });
• Promto UI Markers And User-Facing Paths — get_instruction({ topic: "ui_markers" });
• promto_asset — только если отдельный локальный медиафайл нужно загрузить по постоянному URL;
• promto_design_validate — для проверки созданного *_design.html перед OpenDesign:.

Дизайн-файл никогда не запускается через Preview-сервер, Vite или отдельный порт.

Готовый промпт для агента

Сначала вызови get_instruction({ topic: "design" }) и get_instruction({ topic: "ui_markers" }). Используй приложенный импорт Figma только как источник для фрейма "<точное имя>". Сначала прочитай сводку нужной страницы, затем изучай только относящееся к этому фрейму дерево и изображения. Остальные страницы и черновики игнорируй. Создай самодостаточный /home/user/project/result_design.html, сохрани композицию, реальные тексты и нужные состояния. Не запускай Preview-сервер, Vite или отдельный порт. После последней записи вызови promto_design_validate и верни OpenDesign: только при valid=true и grapesjs_round_trip: pass.

Связанные материалы

• Промто Дизайн: что такое дизайн-HTML и как с ним работать
• Файлы: загрузка, поиск и передача материалов агенту