Запрос к Designer
Запрос превращает замысел в экраны: вы описываете приложение в строке запроса, при желании прикладываете картинку-образец, и Designer собирает готовую раскадровку, которую можно править.
Как собрать макет
- Выберите Explore Styles, если хотите сперва посмотреть варианты оформления, или Instant Generation — чтобы сразу получить макет по запросу.
- Опишите приложение в строке запроса, не жалея подробностей: тип приложения, для кого оно, ключевые экраны, основные действия, обязательные возможности. Например: «Design a travel planning app with a modern card-based layout, destination image grids, a bottom navigation bar with Explore, Trips, Bookings, and Account tabs, saved itineraries, map integration, and a trip detail screen with timeline and booking information».
- При необходимости приложите картинку — набросок, каркас или снимок экрана — кнопкой под полем запроса. Designer возьмёт её за образец и превратит в редактируемый макет.
- Переключателем мобильного и десктопного вида задайте целевую платформу: от этого зависят раскладка и размеры экранов.
- Нажмите кнопку отправки (стрелка вверх).
- Просмотрите результат. Проверьте, что нужные экраны на месте и ничего важного не пропало, что переходы складываются в осмысленный сценарий, а оформление соответствует замыслу.
- Выберите экран и правьте его через строку запроса.
- Точечные правки удобнее делать в панели свойств: выберите элемент и меняйте текст, типографику, отступы, оформление.
- Чтобы добавить экран, щёлкните по пустому месту на холсте и опишите его в нижней строке запроса — для чего он, что на нём и как связан с остальными.
- На вкладке Theme правится оформление всего макета сразу: цвета, типографика, отступы, скругления.
- Для сбора замечаний можно сделать ссылку на макет.
- Выгрузка — в меню приложения слева вверху (FF Designer), пункт экспорта.
Перебор стилей
Explore Styles показывает несколько вариантов оформления до того, как собирать макет целиком. Пригодится, когда понятно, что приложение должно делать, но не понятно, как оно должно выглядеть.
Каждый вариант — свой взгляд на один и тот же замысел: другая раскладка, отступы, типографика, настроение. При наведении на вариант доступны:
- Regenerate — пересобрать вариант.
- More Like This — сделать похожие.
- Remix Colors — оставить оформление, поменять палитру.
- Prompt for Changes — описать словами, что поправить.
- Use This Style — взять этот вариант и собрать полный макет.
Картинка в запросе
К запросу можно приложить образец: набросок, черновой каркас, снимок чужого приложения или просто понравившийся макет. Нажмите кнопку вложения под полем запроса и загрузите изображение — ИИ разберёт раскладку, иерархию и структуру и соберёт по ним чистый редактируемый макет из нескольких экранов.
Например, загрузите черновой каркас приложения доставки еды с поиском, карточками ресторанов и нижней навигацией и добавьте к нему запрос: «Using the attached screenshot as a reference, convert this wireframe into a modern food delivery app design».
Частые вопросы
Превращаются ли диаграммы из Designer в виджеты диаграмм FlutterFlow?
Да. Столбчатые, линейные и круговые диаграммы переносятся как работающие виджеты FlutterFlow.
