К счастью для нас, дизайнеров, Adobe придерживается своего слова, обеспечивая столь необходимыми обновлениями Adobe XD для Windows.
В февральском обновлении они выпустили новые обновления, которые включают в себя, прежде всего, 4 новые функции. Ниже, мы приведем краткий обзор и видео урок, на случай необходимости, этих новых функций.
Если вы предпочитаете смотреть видео...
Прокрутка рабочей области
Само собой разумеется, что наши сайты и приложения иногда прокручиваются! До этого обновления было невозможно имитировать прокрутку в Adobe XD.
К счастью, сделать экран или рабочую область с прокруткой, очень просто.
Предположим, у вас есть следующая рабочая область (кстати, мы скопировали ее из UI набора Google Material Design в Adobe XD), и вы хотите имитировать прокрутку списка имен.
Обратите внимание на выделенную красным настройку Viewport Height. Это видимая область по умолчанию.
Если вы хотите, чтобы эта рабочая область прокручивалась выше этой высоты, просто потяните вниз, нижнюю часть рабочей области:
Обратите внимание на пунктирную горизонтальную линию, это высота видимой части экрана. Все, что ниже этого, станет прокручиваемым контентом.
Давайте растянем группу Name до конца рабочей области:
Теперь нажмите на значок воспроизведения в правом верхнем углу и вуаля! Мы можем прокручивать её вниз!
Визуальные наложения и фоновые размытия
Всякий раз, когда вы хотите привлечь внимание к определённой области макета, вы можете размыть область, которая не важна. Теперь, Adobe XD позволяет вам сделать это очень легко.
Используя пример выше, продублируйте рабочую область:
Теперь выберите инструмент Rectangle и нарисуйте прямоугольник, который закрывает все, кроме синей навигационной панели с заголовком (также отключите обводку прямоугольника):
Затем поставьте галочку Background Blur справа, чтобы размыть фон и измените значение Amount на 6.
Вы также можете изменять яркость и непрозрачность.
Для имитации модального / всплывающего окна, чтобы наполнить некоторым контекстом для эффекта, вставьте модальный шаблон из UI набора Google Material Design:
Теперь вы можете переключиться на вкладку Prototype, если хотите создать базовое взаимодействие прототипа. Запустите его и посмотрите, как это работает!
Поделиться проектом
Раньше маленький значок на правой верхней панели инструментов не работал; Теперь он работает!
Как вы видите, проекту можно присвоить заголовок, небольшую миниатюру предварительного просмотра (120×120), а затем просто нажать кнопку Create Link, чтобы получить ссылку на проект.
Экспорт в SVG
Раньше вы могли экспортировать только в PNG. Теперь вы также можете экспортировать в SVG. И это круто, потому что теперь вы можете использовать Adobe XD для создания настоящей векторной графики.
