Как использовать UI комплекты в Adobe XD

Со второго обновления Adobe Experience Design для Windows у нас появилась возможность, прямо из меню получить доступ к 3 различным наборам пользовательского интерфейса:

 
  • Apple iOS
  • Google Material
  • Microsoft Windows

Эти UI (пользовательский интерфейс) наборы расположились там, чтобы предоставить вам быстрый доступ к общеупотребляемым макетам и элементам UI для 3 самых популярных мобильных платформ. Этот мощный апгрейд сводит на нет необходимость создания этих UI элементов с нуля и избавляет от сильной «головной боли».

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

Открытие UI комплектов

Чтобы начать использовать UI комплекты. Просто откройте гамбургер меню в верхнем левом углу Adobe XD и выберите желаемый комплект Apple iOS, Google Material или Windows.

How to Use Adobe XD UI Kits

Использование комплектов

Давайте откроем комплект пользовательского интерфейса Google Material:

How to Use Adobe XD UI Kits

Как мы видим, нам представлены различные рабочие области (31 если быть точнее). Они содержат всё, от типографики до диалогов, и основных макетов.

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

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

Выберите рабочую область под названием «Mobile — Dark». Вы должны нажать на её название, чтобы выбрать всю рабочую область. Затем нажмите CTRL-C, чтобы скопировать её.

How to Use Adobe XD UI Kits

Теперь нажмите CTRL-N, чтобы создать новый .XD документ и вставьте скопированную рабочую область с помощью CTRL-V.

How to Use Adobe XD UI Kits

Замечательно! Вы только что впервые применили комплект Google Material! Но мы еще не закончили.

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

How to Use Adobe XD UI Kits

Вернитесь к документу UI набора, с которым мы работаем. На монтажной области «Grid» выберите галерею с миниатюрами и скопируйте её.

How to Use Adobe XD UI Kits

Вставьте её в другой .XD документ и расположите так, как показано ниже:

How to Use Adobe XD UI Kits

Белый фон галереи в данном случае нам не нужен, поэтому давайте избавимся от него.

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

How to Use Adobe XD UI Kits

Теперь, выбрав галерею, просто растяните её по высоте за нижнюю часть так, как показано ниже:

How to Use Adobe XD UI Kits

Выберите всю рабочую область, щелкнув левой кнопкой мыши по заголовоку, нажмите CTRL-C, а затем CTRL-V, чтобы вставить её:

How to Use Adobe XD UI Kits

Выберите галерею на дубликате рабочей области, щелкните по ней правой кнопкой мыши и выберите Ungroup (разгруппировать). Затем нажмите кнопку Ungroup Grid (разгруппировать сетку) в правом верхнем углу Adobe XD.

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

How to Use Adobe XD UI Kits

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

How to Use Adobe XD UI Kits

Теперь выберите медведя на второй рабочей области и уменьшите его вертикальную высоту, примерно до 50% от видимой области экрана приложения.

Затем вернитесь к набору пользовательского интерфейса и скопируйте раздел с типографикой на рабочей области «Typography» (типографика).

How to Use Adobe XD UI Kits

Вставьте его во вторую рабочую область нашего документа. Щелкните по нему правой кнопкой мыши и разгруппируйте. Затем удалите все текстовые слои за исключением слоев с названием «Title» и «Body 2 / Menu». Выберите оба и сделайте их цвета белыми (#FFFFFF).

How to Use Adobe XD UI Kits

Если вы выберете текст «Body 2 / Menu», то заметите, что это Roboto с размером 14pt. Если вы снова вернетесь к той же рабочей области UI набора, то увидите, что вторичный цвет текста для темного фона, будет белый (#FFFFFF) с непрозрачностью 70%.

Однако, этот шрифтовой слой создан для справки. Мы собираемся созданить собственный стиль слоя используя инструмент для работы с текстом. Щелчкните левой кнопкой мыши и растяните текстовый фрейм на рабочей области, как показано ниже. Для текстового заполнителя, можете использовать генератор ru.lipsum.com и уменьшите непрозрачность цвета текста до 70%.

How to Use Adobe XD UI Kits

Замечательно! Допустим, мы довольны результатом и хотим, создать интерактиность. Нажмите на вкладку Prototype (прототип), а затем выберите галерею на левой рабочей области и разгруппируйте её несколько раз, пока не сможете выбрать отдельно миниатюру с медведем. Затем потяните синюю стрелку и перетащите ее на второю рабочую область, чтобы установить интерактивную связь.

How to Use Adobe XD UI Kits

Разгруппируйте верхнюю панель инструментов на правой рабочей области и выберите только стрелку и переместите её влево.

How to Use Adobe XD UI Kits
Это то, что нужно! Теперь нажмите значок воспроизведения в правом верхнем углу Adobe XD. Нажмите на миниатюру, а затем нажмите кнопку назад.
 
Именно так вы можете создавать быстрые прототипы в считанные минуты с помощью наборов пользовательских интерфейсов в Adobe XD. Здорово, да?