Редактор полотна
Каркасне полотно редагування – це місце, де ви проектуєте та покращуєте свої екрани. На лівій бічній панелі містяться всі інструменти малювання та виділення, у центрі розташоване полотно, на якому ви розміщуєте та впорядковуєте елементи, а на правій бічній панелі відображаються властивості вибраного елемента.
Інструменти
Виберіть
Натисніть, щоб вибрати та перемістити елементи на полотні. Вибрані елементи показують свої властивості на правій бічній панелі.
Квадратний
Намалюйте на полотні прямокутні елементи контейнера.
Коло
Намалюйте круглі елементи на полотні.
текст
Додайте текстові мітки та блоки вмісту.
Зображення
Розмістити елементи заповнювача зображення.
Кнопка
Додайте інтерактивні елементи кнопки.
Введення
Додати поля введення форми.
+ (Додати екран)
Додайте новий екран до каркасного проекту.
Заблоковані елементи
Екрани, створені штучним інтелектом, заблоковані за умовчанням — елементи не можна переміщувати або змінювати розмір, доки вони не розблоковані. Натисніть Ctrl + D, щоб розблокувати всі елементи на поточному екрані, даючи вам повний контроль для їх перевпорядкування та редагування.
Режим розкадровки
Режим розкадровки дає змогу побачити всі ваші кадри та точки їх з’єднання з висоти пташиного польоту. Перемикайтеся між одноекранним полотном і режимом розкадрування за допомогою тієї самої кнопки на лівій бічній панелі. У режимі розкадровки кожен екран відображається як картка з попереднім переглядом його макета.
Особливості розкадровки
Огляд кадру
Миттєво переглядайте всі екрани з кількістю елементів і візуальним попереднім переглядом.
Встановити модальний
Позначте будь-який екран як модальне накладання замість повної сторінки.
Натисніть, щоб редагувати
Клацніть будь-яку картку з рамкою, щоб перейти до її полотна для детального редагування.
Елементи керування масштабуванням
Використовуйте елементи керування масштабуванням ліворуч, щоб збільшити або зменшити масштаб розкадрування.
Поточні з'єднання
Візуалізуйте, як екрани з’єднані між кадрами.
Властивості елемента
Двічі клацніть будь-який елемент на полотні, щоб увійти в нього та відкрити його панель властивостей на правій бічній панелі. Панель має три вкладки: Властивості, Потік і Кольори. Тут ви можете редагувати положення, розмір, стиль і поведінку кожного елемента.
Вкладка «Властивості».
Позиція (X, Y)
Встановіть точне положення пікселя елемента на полотні.
Розмір (ширина, висота)
Встановіть розміри елемента в пікселях.
Z-індекс (порядок шарів)
Контролюйте, які елементи відображаються поверх інших.
Радіус кордону
Установіть заокруглення кутів за допомогою числового значення або скористайтеся попередніми налаштуваннями Sharp, Rounded або Pill.
Текстовий вміст
Відредагуйте текст, що відображається всередині елемента.
Вкладка «Кольори».
Налаштуйте кольори фону, рамки та тексту для вибраного елемента.
Потоки
Потоки визначають дії та навігацію між екранами. Потік — це така дія, як перехід до іншої сторінки, відкриття модального або маршрутизація до іншої області. Маленькі піктограми посилань на полотні вказують, до яких елементів приєднані потоки. Кадри автоматично зв’язуються один з одним під час генерації штучного інтелекту, а також створюються з’єднання потоків.
Налаштування потоків
Виберіть елемент
Клацніть елемент, до якого потрібно додати потік.
Відкрити вкладку потоку
На правій бічній панелі перейдіть на вкладку «Потік», щоб переглянути наявні підключення або додати нові.
Додати підключення
Натисніть «Додати перше підключення» (або кнопку «+»), щоб створити новий потік. Виберіть цільовий екран або фрейм для посилання.
Переглянути на полотні
Підключені елементи мають невеликий значок посилання на полотні, щоб вказати, що вони мають дії потоку.
Блокувати підключення
З’єднання блоків дозволяють приєднувати блоки з бібліотеки блоків безпосередньо до каркасних елементів. Якщо ви двічі клацнете елемент і прокрутите вниз на панелі властивостей, ви знайдете розділ «Блокувати підключення». Натисніть + Додати блок, щоб зв’язати блок (HTML, компонент або шаблон) з елементом. З’єднані блоки посилаються під час генерації коду за допомогою штучного інтелекту, що полегшує приєднання певного HTML-коду або коду компонента до каркасних елементів.
ШІ редагування
Панель підказок штучного інтелекту внизу полотна дозволяє використовувати штучний інтелект для редагування або створення екранів. Виберіть свою модель ШІ зі спадного списку ліворуч, опишіть зміни, які ви хочете, і ШІ змінить каркас для вас. Ви також можете використовувати голосовий ввід або кнопку CLI Edit для розширеного редагування.
Контекстно-залежні підказки
Один екран
Під час редагування одного екрана на панелі підказок відображається «Редагування «Назви екрана»», а зміни AI застосовуються лише до цього екрана.
Розкадровка
У режимі розкадровки AI може редагувати всі кадри одночасно або створювати нові кадри, використовуючи наявні як еталон.
Голосовий ввід
Використовуйте піктограму мікрофона на панелі підказок, щоб продиктувати свої інструкції, а не вводити текст.
Редагувати CLI
Клацніть CLI Edit для розширеного режиму редагування з більшим контролем над змінами за допомогою AI.
Експорт та інтеграція
Каркаси можна експортувати, імпортувати або безпосередньо використовувати під час створення проектів або в самому Project Hub. Це дозволяє легко переходити від каркасного дизайну до робочого проекту без повторного створення макетів вручну.