Как использовать наборы пользовательского интерфейса в Adobe XD

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

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

Также на

Как пакетно конвертировать фотографии с Adobe Bridge

Как скачать наборы пользовательского интерфейса в Adobe XD

Во-первых, давайте посмотрим, как вы можете загрузить наборы пользовательского интерфейса в Adobe XD прямо из программного обеспечения. Просто выполните следующие шаги, чтобы начать:

Шаг 1: Нажмите на кнопку меню гамбургера в верхнем левом углу программного обеспечения.

Шаг 2. В меню прокрутите вниз до параметра «Получить наборы пользовательского интерфейса» и затем выберите один из трех доступных вариантов.

В этой статье я выберу комплект пользовательского интерфейса Google Material. Однако, в зависимости от вашего проекта, вы можете выбрать наборы Apple iOS или Microsoft Windows. Это откроет официальную веб-страницу, с которой вы можете скачать комплекты пользовательского интерфейса бесплатно.

Шаг 3. Найдите комплект пользовательского интерфейса Adobe XD на следующей веб-странице и загрузите его в свою систему.

Шаг 4: Теперь откройте загруженный файл в Adobe XD, и вас встретит куча артбордов, содержащих ресурсы пользовательского интерфейса для соответствующей платформы.

Вы можете удерживать кнопку Ctrl и перемещать колесико прокрутки, чтобы увеличивать или уменьшать масштаб, чтобы увидеть все отдельные монтажные области.

Если вы хотите вместо этого загрузить Wireframes, вы можете нажать на опцию Wireframes в меню Get UI Kits.

Вы также можете посмотреть дополнительные комплекты пользовательского интерфейса на веб-сайте Adobe, щелкнув параметр «Дополнительные комплекты пользовательского интерфейса» в меню «Получить наборы пользовательского интерфейса».

На веб-сайте есть несколько отличных вариантов, в том числе этот действительно крутой набор Movie Magic UI, который выглядит как настольный дисплей.

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

Как использовать наборы пользовательского интерфейса в Adobe XD

Чтобы использовать наборы пользовательского интерфейса в вашем проекте, просто выполните следующие простые шаги:

Шаг 1: увеличьте масштаб элемента интерфейса, который вы хотите использовать в своем проекте, и щелкните его заголовок, чтобы выбрать его.

Шаг 2: Теперь скопируйте элемент с помощью комбинации клавиш Ctrl + C.

Шаг 3: Затем откройте новый проект Adobe XD из меню.

Шаг 4. Вставьте элемент пользовательского интерфейса с помощью комбинации клавиш Ctrl + V.

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

Шаг 5: Чтобы удалить направляющие, нажмите на значок замка в верхнем левом углу, а затем нажмите «Удалить». Вы можете пропустить этот шаг, если хотите использовать направляющие для точного размещения большего количества объектов в элементе.

Шаг 6: Теперь вернитесь к комплекту пользовательского интерфейса, чтобы выбрать другой элемент для добавления на эту страницу. Еще раз нажмите на название элемента и скопируйте его с помощью комбинации клавиш Ctrl + C.

Я буду создавать основной тост для этой статьи, для которого я буду использовать один из диалогов.

Шаг 7: Вставьте новый элемент в предыдущий элемент и затем выровняйте его согласно направляющим.

Шаг 8: Теперь, чтобы отредактировать каждый элемент в тосте, дважды щелкните текстовое поле, а затем введите текст, который вы хотите использовать. Во-первых, давайте изменим название тоста.

Затем измените содержимое тела, дважды щелкнув текстовое поле и введя все, что вы хотите добавить.

Вы также можете изменить текст кнопок таким же образом. Как только вы закончите редактирование текста, вы можете изменить цвет и непрозрачность текста. Чтобы изменить непрозрачность, просто переместите ползунок под параметром «Непрозрачность» на панели инструментов справа.

Чтобы изменить цвет текста, щелкните прямоугольник рядом с параметром «Заливка», а затем выберите новый цвет в палитре цветов.

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

Как только вы будете удовлетворены результатом, просто сохраните файл, нажав на опцию «Сохранить как» в меню или воспользовавшись сочетанием клавиш Shift + Ctrl + S.

Также на

#графический дизайн

Нажмите здесь, чтобы увидеть нашу страницу статей о графическом дизайне

Совершенствуйте свой дизайн, используя наборы пользовательского интерфейса

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

Далее: Завершен проект в Adobe XD и не знаете, как экспортировать его в HTML? Проверьте следующую статью для простого пошагового руководства.