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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 2: Теперь скопируйте элемент, используя th e Сочетание клавиш Ctrl + C.

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

Шаг 4: Здесь вставьте элемент пользовательского интерфейса с помощью сочетания клавиш Ctrl + V.

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

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

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

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

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

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

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

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

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

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

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

Также в Guiding Tech

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

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

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

Вышеупомянутая статья может содержать партнерские ссылки, которые помогают поддерживать Guiding Tech. Однако это не влияет на нашу редакционную честность. Содержание остается непредвзятым и аутентичным.

Оцените статью
ubisable.ru
Добавить комментарий