Компоненты
Используйте экземпляры общих кнопок, полей и карточек на разных экранах. Изменения основного компонента помогают поддерживать единое оформление.
Соберите экраны будущего продукта
Начните с простого макета
Создайте фреймы для основных экранов. Добавьте заголовки, кнопки и поля — этого достаточно, чтобы показать структуру и обсудить первый сценарий.
Соедините экраны переходами
Выберите кнопку или другой элемент и свяжите его с нужным фреймом. Например, покажите путь от карточки товара до оформления заказа.
Уточняйте дизайн в том же файле
Добавляйте изображения, цвета и типографику по мере проработки идеи. Макеты и связи между экранами остаются в одном редакторе.
Настройте поведение интерфейса
Реакция на действия
Запускайте взаимодействия по щелчку, наведению или перетаскиванию. Укажите, что должно произойти: перейти к экрану, открыть ссылку или показать всплывающее окно.
Анимация переходов
Выберите мгновенный переход, растворение, сдвиг или умную анимацию. Для анимированных переходов настройте длительность и плавность движения, затем посмотрите результат в предпросмотре.
Прокрутка и всплывающие окна
Задайте прокрутку, если содержимое выходит за границы фрейма. Для меню или диалога откройте отдельный фрейм поверх текущего экрана.
Покажите прототип и обсудите детали
Пройдите сценарий в предпросмотре
Нажмите кнопки, откройте меню и перейдите между экранами. Так проще заметить пропущенную связь или переход, который ведёт не туда.
Поделитесь прототипом по ссылке
Отправьте ссылку коллегам или заказчику, чтобы они могли пройти сценарий самостоятельно. Выберите подходящие права доступа к файлу.
Соберите замечания в макете
Обсуждайте изменения в комментариях рядом с нужным элементом. Уточняйте тексты, состояния и переходы, пока команда видит один и тот же макет.
Передайте разработчикам макет и логику
Покажите состояния и переходы
Дополните основной путь нужными экранами: ошибкой ввода, пустым списком или подтверждением действия. Прототип поможет объяснить, что должно происходить в интерфейсе.
Откройте доступ к параметрам
Разработчики могут посмотреть размеры, отступы и свойства элементов, а также доступные фрагменты кода стилей.
Обновляйте общий файл
Правьте макеты вместе и обсуждайте изменения в контексте экранов. Команда сможет обращаться к актуальному файлу по той же ссылке.
Меньше повторной работы с макетами
Автоматическая компоновка (Auto Layout)
Настройте отступы, интервалы и размеры блока по содержимому. При изменении текста макет будет подстраиваться по заданным правилам — без ручного выравнивания каждого элемента.
История версий
Сохраняйте важные этапы работы и возвращайтесь к доступным версиям файла, если потребуется восстановить предыдущий вариант.