Для тех, кто хочет تصميم Веб-сайты и UI-киты в Adobe XD — отличный способ начать проект. تصميم Новинка. С этими наборами вы получите доступ к полезным ресурсам, которые сможете модифицировать и использовать для дизайна своего веб-сайта или приложения.
Если вы новичок в программе и не знаете, как использовать наборы пользовательского интерфейса в саман XD, вы попали по адресу. В этой статье я покажу вам, как установить UI-киты в программу, а затем использовать имеющиеся ресурсы в вашем проекте.
Как загрузить UI-киты в Adobe XD
Сначала давайте рассмотрим, как загружать UI-киты в Adobe XD , прямо из программы. Чтобы начать, выполните следующие действия:
Шаг 1: Нажмите кнопку меню-гамбургера в левом верхнем углу программы.
Шаг 2: В меню прокрутите вниз до пункта «Получить UI Kits», а затем нажмите на один из трех доступных вариантов.
Для этой статьи я выберу набор инструментов Material UI от Google.
Однако, в зависимости от вашего проекта, вы можете выбрать наборы для Apple iOS или Microsoft Windows. Откроется официальная веб-страница, где вы сможете бесплатно скачать наборы пользовательского интерфейса.
Шаг 3: Найдите саман Комплект XD UI доступен на следующей веб-странице и может быть загружен в вашу систему.
Шаг 4: Теперь откройте загруженный файл в Adobe XD, и вы увидите набор монтажных областей, содержащих ресурсы пользовательского интерфейса для соответствующей платформы.
Удерживая клавишу Ctrl и вращая колесо прокрутки, можно увеличивать/уменьшать масштаб, чтобы увидеть все отдельные монтажные области.
Если вы хотите загрузить Wireframes, выберите опцию Wireframes в меню Get UI Kits.
Вы также можете поискать дополнительные UI-киты на веб-сайте Adobe, выбрав опцию «Дополнительные UI-киты» в меню «Получить UI-киты».
На сайте представлено несколько отличных вариантов на выбор, включая действительно классный набор пользовательского интерфейса Movie Magic, который выглядит как проекционный дисплей.
Теперь, когда вы знаете, как загружать UI-киты, давайте рассмотрим, как использовать их в своих проектах.
Как использовать UI-киты в Adobe XD
Чтобы использовать UI-киты в своем проекте, просто выполните следующие простые шаги:
Шаг 1: Увеличьте масштаб элемента пользовательского интерфейса, который вы хотите использовать в своем проекте, и щелкните его название, чтобы выбрать его.
Шаг 2: Теперь скопируйте элемент с помощью сочетания клавиш Ctrl+C.
Шаг 3: Затем откройте новый проект Adobe XD из меню.
Шаг 4: Вставьте сюда элемент пользовательского интерфейса, используя сочетание клавиш Ctrl+V.
В этой статье я буду использовать элемент Mobile Dark из набора инструментов Material UI от Google. Этот элемент включает в себя руководства по созданию дополнительных слоёв, но если вы не хотите его использовать, вы можете легко удалить его, выполнив следующие шаги.
Шаг 5: Чтобы удалить направляющие, нажмите на значок замка в левом верхнем углу и нажмите Delete. Вы можете пропустить этот шаг, если хотите использовать направляющие для более точного размещения большего количества объектов на элементе.
Шаг 6: Теперь вернитесь в группу «Пользовательский интерфейс», чтобы выбрать другой элемент для добавления на эту страницу. Снова нажмите на заголовок элемента и скопируйте его, нажав Ctrl+C.
Я собираюсь создать базового персонажа для этой статьи, с которым буду использовать одно из диалоговых окон.
Шаг 7: Вставьте новый элемент в предыдущий элемент и выровняйте его согласно направляющим.
Шаг 8: Теперь, чтобы отредактировать каждый элемент тоста, дважды щёлкните по текстовому полю и введите нужный текст. Сначала давайте изменим заголовок тоста.
Затем измените текстовое содержимое, дважды щелкнув по текстовому полю и введя то, что вы хотите добавить.
Таким же образом можно изменить текст кнопок.
После завершения редактирования текста вы можете изменить его цвет и прозрачность. Чтобы изменить его непрозрачность, просто переместите ползунок под параметром «Непрозрачность» на панели инструментов справа.
Чтобы изменить цвет текста, щелкните прямоугольник рядом с параметром «Заливка», а затем выберите новый цвет в палитре цветов.
Причём таким образом можно изменять не только текст. Вы также можете изменить цвет и прозрачность практически всех элементов диалогового окна, что очень удобно, если вы используете уникальную цветовую схему.
Если вы удовлетворены результатом, просто сохраните файл, нажав на пункт «Сохранить как» в меню или используя сочетание клавиш Shift + Ctrl + S.
Сделайте свой дизайн успешным с помощью UI-китов.
Теперь, когда вы знаете, как загружать и использовать UI-киты в Adobe XD, я уверен, вы быстро начнёте создавать потрясающие дизайны. Эти UI-киты, безусловно, полезны и помогут вам сразу приступить к проекту, не беспокоясь о разработке каждого отдельного элемента интерфейса.
