Изучаем Adobe XD. Часть 2

В прошлый раз мы с вами определили как создавать проект в программе Adobe XD и создавать обрасти для изображений и контекста. Сегодня будет еще интересней. Сегодня попробуем создать прототип.
— Готовы?
— Да, капитан!
Если вы попали сразу на вторую статью, или уже забыли о чем я рассказывал в первой, рекомендую перечитать еще раз.
Сегодня мы попробуем создать прототип. Я немного изменил файл-пример для более понятного и доступного объяснения.

Начинаем с файла примера

При запуске программы открываем файл «Изучение основ» для работы с прототипами.

Затем нажимаем ctrl+tab, чтобы переключиться из режима дизайна, в режим прототипирования.

Adobe XD

Придумайте название страницы с проектами

Для начала задаем домашнюю страницу с рабочей областью. В данном случае, я использую Login страницу и нажимать на иконку Home, в верхнем левом углу рабочей области.

Adobe XD

Соедините ссылками рабочие области

Выберите элемент, который вы хотите соединить и появится синяя стрелочка. Нажимая на нее, укажите страницу, на которую хотите совершить переход. Затем выберите переход и длительность анимации.

Adobe XD

Соедините все области, чтобы получить полностью рабочий прототип.

Просмотр прототипа на Мас

Нажмите на кнопку проигрывания в верхнем углу справа в программе. Появится новое окно, в котором вы даже сможете записать видео правок и изменений, нажав на красную кнопку в верхнем правом углу окна просмотра. Также, вы можете отправить готовый .mov файл кому угодно.

Обратите внимание, что внося изменения в рабочую область, превью автоматически внесет изменения.

Adobe XD

Просмотр на смартфоне

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

Смартфон

Поделитесь прототипом онлайн Adobe Creative Cloud

Последняя опция в правом верхнем углу — поделиться. Здесь вы можете создать новую ссылку или обновить существующую (если вы уже делились своим прототипом). После этого, вы увидите короткую ссылку, которую можно передать разработчикам, руководителям и даже вашей собачке.

Adobe XD

Обсуждение закрыто.