Прокрутка рабочей области и размытие в Adobe XD

К счастью для нас, дизайнеров, Adobe придерживается своего слова, обеспечивая столь необходимыми обновлениями Adobe XD для Windows.

 

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

Если вы предпочитаете смотреть видео...

Прокрутка рабочей области

Само собой разумеется, что наши сайты и приложения иногда прокручиваются! До этого обновления было невозможно имитировать прокрутку в Adobe XD.

К счастью, сделать экран или рабочую область с прокруткой, очень просто.

Adobe XD Scrollable Artboard and Blur

Предположим, у вас есть следующая рабочая область (кстати, мы скопировали ее из UI набора Google Material Design в Adobe XD), и вы хотите имитировать прокрутку списка имен.

Обратите внимание на выделенную красным настройку Viewport Height. Это видимая область по умолчанию.

Если вы хотите, чтобы эта рабочая область прокручивалась выше этой высоты, просто потяните вниз, нижнюю часть рабочей области:

Adobe XD Scrollable Artboard and Blur

Обратите внимание на пунктирную горизонтальную линию, это высота видимой части экрана. Все, что ниже этого, станет прокручиваемым контентом.

Давайте растянем группу Name до конца рабочей области:

Adobe XD Scrollable Artboard and Blur

Теперь нажмите на значок воспроизведения в правом верхнем углу и вуаля! Мы можем прокручивать её вниз!

Adobe XD Scrollable Artboard and Blur

Визуальные наложения и фоновые размытия

Всякий раз, когда вы хотите привлечь внимание к определённой области макета, вы можете размыть область, которая не важна. Теперь, Adobe XD позволяет вам сделать это очень легко.

Используя пример выше, продублируйте рабочую область:

Adobe XD Scrollable Artboard and Blur

Теперь выберите инструмент Rectangle и нарисуйте прямоугольник, который закрывает все, кроме синей навигационной панели с заголовком (также отключите обводку прямоугольника):

Adobe XD Scrollable Artboard and Blur

Затем поставьте галочку Background Blur справа, чтобы размыть фон и измените значение Amount на 6.

Вы также можете изменять яркость и непрозрачность.

Для имитации модального / всплывающего окна, чтобы наполнить некоторым контекстом для эффекта, вставьте модальный шаблон из UI набора Google Material Design:

Adobe XD Scrollable Artboard and Blur

Теперь вы можете переключиться на вкладку Prototype, если хотите создать базовое взаимодействие прототипа. Запустите его и посмотрите, как это работает!

Поделиться проектом

Раньше маленький значок на правой верхней панели инструментов не работал; Теперь он работает!

Adobe XD Sharing

Как вы видите, проекту можно присвоить заголовок, небольшую миниатюру предварительного просмотра (120×120), а затем просто нажать кнопку Create Link, чтобы получить ссылку на проект.

Экспорт в SVG

Раньше вы могли экспортировать только в PNG. Теперь вы также можете экспортировать в SVG. И это круто, потому что теперь вы можете использовать Adobe XD для создания настоящей векторной графики.

Adobe XD Exporting to SVG