Редактор холста
Холст редактирования вайрфреймов — место, где вы проектируете и дорабатываете экраны. Левая боковая панель содержит все инструменты рисования и выбора, центр — это холст, где вы размещаете и упорядочиваете элементы, а правая боковая панель показывает свойства выбранного элемента.
Инструменты
Select
Нажмите, чтобы выбрать и переместить элементы на холсте. Selected элементы показать их properties в правой боковой панели.
Square
Draw rectangular container элементы на холсте.
Circle
Draw circular элементы на холсте.
Text
Add text labels и content блоки.
Image
Place image placeholder элементы.
Button
Add интерактивный button элементы.
Input
Добавьте поля ввода формы.
+ (Add Screen)
Добавьте новый экран в проект вайрфрейма.
Заблокированные элементы
Экраны, сгенерированные ИИ, по умолчанию заблокированы — элементы нельзя перемещать или изменять размер до разблокировки. Нажмите Ctrl + D, чтобы разблокировать все элементы на текущем экране, получив полный контроль для их перестановки и редактирования.
Режим раскадровки
Режим раскадровки позволяет видеть все кадры и их точки соединения с высоты птичьего полёта. Переключайтесь между холстом отдельного экрана и режимом раскадровки с помощью той же кнопки в левой боковой панели. В режиме раскадровки каждый экран показан как карточка с предпросмотром макета.
Возможности раскадровки
Frame Overview
See все экраны с первого взгляда сir элемент counts и visual предпросмотры.
Set Modal
Отметьте любой экран как модальный оверлей вместо полной страницы.
Click to Edit
Нажмите на любой frame card to jump в его canvas view для detailed редактироватьing.
Zoom Controls
Используйте элементы масштабирования слева для увеличения/уменьшения раскадровки.
Flow Connections
Visualize как экраны подключены через flow действия между фреймы.
Свойства элементов
Дважды щёлкните по любому элементу на холсте, чтобы войти в него и открыть панель свойств в правой боковой панели. Панель имеет три вкладки: Свойства, Поток и Цвета. Отсюда вы можете редактировать положение, размер, стиль и поведение каждого элемента.
Вкладка свойств
Position (X, Y)
Установите точную позицию элемента в пикселях на холсте.
Size (Width, Height)
Установите размеры элемента в пикселях.
Z-Index (Layer Order)
Управляйте тем, какие элементы отображаются поверх других.
Border Radius
Установите скругление углов числовым значением или используйте предустановки: Острые, Скруглённые или Капсула.
Text Content
Редактируйте текст, отображаемый внутри элемента.
Colors Tab
Customize background, border, и text colors для выбранного элемент.
Потоки
Потоки определяют действия и навигацию между экранами. Поток — это действие, такое как переход на другую страницу, открытие модального окна или маршрутизация в другую область. Маленькие иконки ссылок на холсте показывают, какие элементы имеют прикреплённые потоки. Кадры автоматически связываются друг с другом во время генерации ИИ, и соединения потоков также создаются.
Настройка потоков
Select an Element
Нажмите на элемент, к которому хотите добавить поток.
Open Flow Tab
В правой боковой панели переключитесь на вкладку «Поток», чтобы увидеть существующие соединения или добавить новые.
Add Connection
Нажмите «Добавить первое соединение» (или кнопку +), чтобы создать новый поток. Выберите целевой экран или кадр для связи.
View on Canvas
Соединённые элементы показывают маленькую иконку ссылки на холсте, указывающую на наличие действий потока.
Соединения блоков
Связи Блоков позволяют прикреплять блоки из Библиотеки Блоков непосредственно к элементам вайрфрейма. При двойном клике на элемент и прокрутке вниз в панели свойств вы найдёте раздел Связей Блоков. Нажмите + Добавить Блок, чтобы связать блок (HTML, компонент или шаблон) с элементом. Связанные блоки используются при генерации кода с ИИ, упрощая привязку определённого HTML или кода компонента к элементам вайрфрейма.
Редактирование с ИИ
Панель ИИ-подсказок в нижней части холста позволяет использовать ИИ для редактирования или создания экранов. Выберите модель ИИ из выпадающего списка слева, опишите желаемые изменения, и ИИ модифицирует вайрфрейм за вас. Вы также можете использовать голосовой ввод или кнопку CLI Редактирование для продвинутого редактирования.
Контекстно-зависимые промпты
Single Screen
При редактировании одного экрана панель промпта показывает «Редактирование 'Имя экрана'», и изменения ИИ применяются только к этому экрану.
Storyboard
В режиме раскадровки ИИ может редактировать все кадры сразу или создавать новые, используя существующие как референс.
Voice Input
Используйте иконку микрофона в панели промпта для диктовки инструкций вместо набора текста.
CLI Edit
Нажмите «CLI-редактирование» для расширенного режима редактирования с большим контролем над изменениями на базе ИИ.
Экспорт и интеграция
Вайрфреймы можно экспортировать, импортировать или использовать напрямую при создании проектов или в Хабе Проектов. Это упрощает переход от дизайна вайрфрейма к рабочему проекту без ручного воссоздания макетов.