Как использовать ui kit adobe xd
UI kits can be a terrific way to jumpstart your product knowledge whether it's for a product you've not used before or just a brand new feature and one you're quite familiar with. The UI kits available for Adobe XD definitely strike the balance of both.
To access the latest UI kits you can either come to the file menu and select get UI kits. Alternatively, in the home screen if you click on the add-ons tab here on the left hand side and then click on the UI kits it will open up a web browser. From here you can see UI kits that are OS specific towards the top and then towards the bottom a series of different designs.
I'm going to scroll all the way to the bottom here and select one of my favorites which is attractive by Cody Brown. From here I'll go ahead and download and open up the file. I'm here in Adobe XD and like most UI kits I have both examples of real world designs with design elements in use here towards the bottom and then towards the top the basic so colors and fonts that are in use as well as components that occur in that real world flow towards the bottom.
Another handy way to access some of these elements is to open up the assets panel on the left hand side. Here I can see all of those colors fonts and various components that are in use on the design canvas available to drag into new artboards as I build out my own design. UI kits are often a great way to deep dive on a new feature that you may be less familiar with like component states and auto animate for micro interactions, so you can look for those capabilities within the UI kit as well.
Finally it's really easy to change fonts and colors throughout the kit simply by coming into the assets panel here towards the top and selecting, let's say a color, that's in use on that design canvas. When I right-click and select Edit I can come in and dramatically change that color value. Notice that the change that I made here in the Properties inspector for that individual color propagated to all instances of that color on the design canvas. You can do the same thing for any of the character styles in use within the design and change all of these elements to be more in line with a project you might be working on.
I think you'll agree that UI kits can be a wealth of knowledge as you acclimate to the XD application. I encourage you to give it a try.
Getting started on a new design doesn't have to be hard. With UI Kits in Adobe XD you can get a jump-start on your design with designs from popular platform providers like Apple, Google and Microsoft which provide the foundational UI elements needed to start designing for those operating systems. There is also a large community of UI Kits available to be downloaded and used in your next Adobe XD project. This tutorial will walk you through how to use UI Kits in your next Adobe XD project. XD is committed to keeping XD an open platform that allows developers to integrate and extend the platform in new and exciting ways. Access a growing list of XD plug-ins and UI kits within XD. UI Kits help you customize and extend XD so that it works for you.
Мелани берлинский дизайнер, живущий недалеко от Дессау, Германия, месте где был основан Баухаус. Она говорит, что сочетание UX дизайна и принципов Баухауса, которые можно найти в её бесплатном MY500 UI Kit, способно создавать потрясающие и действенные приложения.
“Перенос принципов Баухауса на дизайн современных продуктов, означает наличие смелости избавляться от лишнего”,—сказала она. “Это могут быть визуальные детали, необычная анимация, не имеющая смысла или малоиспользуемые функции. Принцип Баухауса «функция определяет форму” может быть истолкован, как в нашем случае “потребность определяет решение”.
Вы можете скачать MY500 бесплатно здесь, ниже, вы узнаете о его многочисленных шаблонах навигации, тоннах элементов и вдохновитесь культовым дизайном (с использованием шрифта Reross).
Баухаус – как вдохновитель Мелани на создание UI Kit
MY500 UI Kit предоставляет ту же модульную систему, как и десятки других бесплатных UI Kit для Adobe XD, и поставляется с кучей элементов UI, которые вы можете использовать в своих собственных прототипах. Типографика является “скрытым сокровищем” приложения. В наборе используется шрифт Reross, изначально разработанный специалистом Баухауса, Рейнхольдом Россигом и воссозданный Элией Пройсс. Это типичный элемент Баухауза, и всё вращается вокруг него.
“Баухаус—это высшая форма проектирования сфокусированная одновременно на вдумчивости и бескомпромиссности. Концепции навигации в MY500 имеют плоскую иерархию поэтому они так просты. Контент сам воплощает всё в жизнь и плавно оборачивается крупным шрифтом Reross”,—говорит Мелани.
Reross является истинным наследием Баухауса. Из всех студенческих работ, выполненных в классах мастера Йоста Шмидта, рисунки Рейнхольда были наиболее близки его учению. Шрифт состоит из однолинейных геометрических букв, построенных по сеткам с использованием компаса и линейки.
Дизайнер Элия тщательно сохранила буквы и наработки Рейнхольда, позаимствовав некоторые наиболее характерные буквы, найденные на постерах дизайнера-студента Баухауса Германа Вернера Кубша. Под влиянием Баухауса Герман создал геометрический стиль, идеально подходящий для бросающихся в глаза элементов UI Мелани (и дизайна вашего продукта), полный различного исторического влияния и современных особенностей.
Начало работы с MY500 UI Kit в Adobe XD
Сначала убедитесь, что у вас загружена последняя версия Adobe XD, затем выполните следующие быстрые шаги, чтобы начать работу с MY500 UI Kit:
- Шаг 1: Загрузите MY500 UI Kit.Нажмите здесь, чтобы загрузить MY500. Он включает в себя всё, что вам нужно для создания приложения с потрясающим издательским дизайном, вдохновлённым Баухаусом.
- Шаг 2: Изучите MY500 UI Kit и всё, что он предлагает. MY500 включает в себя несколько шаблонов навигации, более 20 модулей редакторского контента и элементы, созданные с помощью шрифта Reross.
- Шаг 3: Начните проектирование. Используйте MY500 в качестве отправной точки для создания собственного iOS или веб-приложения. Все элементы комплекта соответствуют концепции комбинирования и сопоставления, которая обеспечивает максимальную гибкость при проектировании и позволяет создавать эффектные макеты в течение очень короткого времени. Просто выберите модуль, перетащите его на артборд и добавьте свой контент.
- Шаг 4: Соедините экраны вместе, чтобы создать интерактивный прототип, которым вы можете поделиться.
Уроки полученные из методов проектирования Баухауса
Дизайн MY500 UI Kit создан с целью привнесения элементов физического мира в цифровую среду, до-цифровые корни Баухауса и увлечения Мелани проблёскивают всюду, от типографики до форм. Несмотря на то, что Мелани работает исключительно в области цифровых технологий, наблюдение за стилем и создание этого UI Kit укрепили её собственный подход к дизайну, который помог ей оставаться в физическом мире.
“Многие проекты, над которыми я работаю, являются не физическими. Их можно использовать (например интерфейсы), но так как между нами всегда есть устройство, они не являются чем-то осязаемым. Действительно жить “дизайном посредством ремёсел” является главным замыслом Баухаус Дессау, и это всегда меня вдохновляло”,—сказала она.
Добавленный Мелани, тот коллективный характер школы Баухаус, когда многие мастера и дизайнеры сотрудничают, интерпретируют и выражают свои принципы дизайна по-своему, имеет очень глубокий отклик внутри неё и является тем, что она пыталась культивировать в своей собственной дизайнерской практике.
«Мне нравится идея объединения для создания дизайна, независимо от того, является ли дизайн цифровым или получен путем создания чего-то осязаемого, как это было в Баухаус Дессау. Общение в цифровом формате может быть более актуальным сегодня, но ничто не заменит вдохновляющую личную беседу с другими создателями или просто наблюдение за их работой”,—сказала она.
О Мелани Дейвид
Мелани родом из Австрии, сейчас живет в Берлине, где она является UX-стратегом. Междисциплинарный опыт работы привёл её от фриланса к агентствам и начинающим компаниям занимающимся разработкой продуктов, дизайном бренда, художественным руководством и управлением творческими коллективами. В последнее время она сосредоточилась на управлении продуктами eBay. Если вы встретите её, обязательно дайте пятерку (и спросите о Баухаусе).
Adobe XD является одним из самых используемых бесплатных инструментов для UI / UX дизайна, а также прототипирования в сфере мобильного дизайна. Как часть Adobe Creative Cloud, eXperience Design предлагает интуитивно понятный интерфейс и множество опций. Вы сможете создавать и тестировать свои проекты когда полностью ознакомитесь с интерфейсом приложения.
Эта статья поможет вам понять потенциал Adobe XD и начать собственный дизайн-проект для Android и iOS. Это займет у вас не больше часа ! Adobe XD доступен как для Windows, так и для Mac OS.
Мы будем следовать официальному руководству Adobe XD, добавляя некоторые комментарии, советы и дополнительные шаги, чтобы прояснить применяемость данного инструмента. В конце концов, мы применим почти все аспекты данного программного обеспечения. Конечно, достаточно просто прочесть эту статью, чтобы что-то понять, но будет ещё лучше, если вы будете следовать учебному курсу, одновременно используя программу.
Начиная с Adobe XD
Загрузить бесплатную версию XD можно с официального сайта Adobe. После того как вы откроете программу, вы найдете различные шаблоны дизайна для новых проектов.
В следующей статье я создам новый проект с нуля . В этом случае я буду использовать учебник XD, чтобы показать его характеристики.
- Для панорамирования : используйте ваш трекпад, или нажмите пробел+мышь, или нажмите колесико мыши.
- Для увеличения : коснитесь двумя пальцами трекпада, или Ctrl(Cmd)+колесо мыши, или Ctrl(Cmd)+(+/-). Приблизить выбранный элемент, нажмите Ctrl(Cmd)+3.
- Для выбор : используйте клик левой кнопкой мыши. Выбор группы внутри прямоугольной области: щелкните и перетащите.
Используйте эти простые параметры навигации, чтобы увеличить масштаб экрана проекта, и вы увидите что-то вроде этого:
Данное учебное руководство создано таким образом, чтобы вы могли закончить приложение Campvives от Talin Wadsworth. С этого момента вы можете приступать к обучению. Я всё объясню и добавлю некоторые упражнения, чтобы охватить основные свойства XD.
1. ПРЕДВАРИТЕЛЬНЫЙ ПРОСМОТР ТЕКУЩЕГО ПРОЕКТА
Предварительный просмотр будет нашим основным экраном прототипа в Adobe XD. Здесь мы имеем возможность протестировать приложение, понажимать кнопки, проверить различные экраны и переходы.
Совет: При изменении чего-либо в рабочей области, экран предварительного просмотра будет автоматически обновляться . Попробуйте открыть проект на втором экране, чтобы увидеть изменения в реальном времени!
Конечно, предварительный просмотр не является функциональным приложением . Он отображает только пользовательский интерфейс (UI), который мы задаем в нашей рабочей области, перемещаясь между различными экранами в соответствии со связями прототипа. Тем не менее, это хороший пример того, как будет выглядеть дизайн в конечном варианте , и насколько успешно происходит взаимодействие пользователя с приложением.
Совет. Сделать скриншот или записать экран, чтобы поделиться своим проектом в процессе разработки (Cmd+Shift+5 для Mac или Windows+G для Windows 10). Лучший способ поделиться прототипом приложения, мы узнаем в последней главе .
2. СОЗДАНИЕ ЭКРАНА ЗАСТАВКИ (splash screen)
Обратите внимание, что в верхнем левом углу рабочей области есть две вкладки: Design и Prototype (Дизайн и Прототип) . По умолчанию проект открывается на вкладке Design, которая используется для создания и изменения визуальных свойств пользовательского интерфейса (UI).
Выберите инструмент Artboard (Монтажная область) на панели инструментов слева (или горячей клавишей A) , и вы увидите, что панель параметров справа, изменится, отобразив различные шаблоны оформления, соответствующие наиболее часто используемым устройствам.
В нашем случае, проект создаётся для монтажных областей iPhone 6/7/8. Просто щелкните внутри окна, чтобы добавить новый пустой экран. Для разных проектов вы можете создать любой другой шаблон экрана, с точными размерами вашего целевого устройства .
Смените имя в левом верхнем углу экрана, дважды щелкнув по нему. Переименуйте проект в «Splash».
Теперь выберите инструмент Selection (Выделение) на панели инструментов (слева или горячей клавишей V) , и перетащите логотип на экран заставки. Теперь щелкните по имени («Splash») или дважды щелкните по экрану заставки. Мы можем изменить фон в параметрах Appearance (Внешний вид) в правом меню. Появится общее окно выбора цвета. Здесь можно отметить несколько возможностей:
- Сохранение цветов . Мы можем сохранить любой из цветов для последующего использования, нажав клавишу +. Для того, чтобы удалить цвет из палитры проекта, просто перетащите его за пределы окна.
- Использование градиентов . Кликнув по вкладке «Solid Color» (Сплошной цвет), вы откроете меню градиентов. Они пригодятся для создания фоновых градиентов.
- Пипетка . Используйте пипетку, чтобы захватить любой цвет на вашем экране.
Если вы кликните по логотипу Campvives, то увидите дополнительные опции Appearance. Здесь можно выбирать не только заливку, но и рамки любого изображения. В случае с фигурами, созданными в Adobe XD, доступно редактирование деталей границы. Это поможет вам изменить стиль брендинга вашего приложения, а также протестировать различные закруглённые или резкие формы.
ИЗМЕНЯЕМЫЙ РАЗМЕР И ПОЗИЦИОНИРОВАНИЕ
Возможно, вы могли заметить опцию Responsive Resize (Свободное изменение размера) , над вкладкой Appearance. Эта функция появились с обновления сентября 2018 года. Она позволяет объектам группы сохранять их размещение и масштаб при изменении размера группы .
Для более глубокого понимания того, как использовать Responsive Resize, я рекомендую вам потратить 4 минуты на просмотр официального видео от Adobe CC на Youtube.
В верхней части правого меню вы найдете несколько кнопок, для простого изменения размера и перемещения объектов. Они часто экономят время, когда определяют точные размеры или позиции на вашем макете. Другим вспомогательным инструментом является Grid (Сетка), которую вы найдете в нижней части правого меню при выборе имени артборда. Отобразите макет экрана или квадратную сетку, это поможет вам с пропорциями и позиционированием.
3. РАБОТА С ИЗОБРАЖЕНИЕМ ПРОФИЛЯ
В этом разделе мы покажем, как подгонять изображения под форму и как создавать собственные формы.
Вы можете перетащить в выбранную форму любое изображение, напрямую с вашего компьютера или из рабочего пространства Adobe XD. Изображение автоматически заполняет область соответствующую выбранной форме, просто дважды щелкнете по изображению, чтобы изменить его размер. На макете отобразится только часть изображения, которая расположена внутри формы.
Попробуем заменить наш прямоугольник на новый. Для того, чтобы удалить предыдущий прямоугольник, нажмите Del, либо щелкните правой кнопкой мыши + Del. Для того, чтобы создать новый, выберите инструмент Rectangle (Прямоугольник) в панели инструментов слева (или нажмите R) .
Выберите начальную точку для фигуры и перетащите мышь в противоположный угол. Для нового прямоугольника доступны следующие параметры, такие как: Fill (Заливка), Border (Рамка) или Shadow (Тень). Также, мы можем перетащить любую картинку, как мы это делали используя круглую форму.
Совет. Если вы выберете прямоугольник, вы заметите небольшие круглые точки вблизи его углов. Потяните за одну из круглых точек, расположенных рядом с углами вашего изображения, чтобы создать скругления формы . Делать кнопки, таким образом, очень просто!
Помимо инструмента Rectangle, вы также можете использовать инструменты Ellipse (Овал) (клавиша E), Line (Линия) (клавиша L) и Pen (Перо) (клавиша P) для создания свободных форм.
4. РАСТЯГИВАНИЕ СПИСКА ПОСТОВ БЛОГА
В этом разделе вы научитесь размножать сгруппированные сетки. Эта функция обычно используется для создания копий одной и той же структуры, например, при создании меню, записей в блогах или списков.
Просто выберите всю сетку и нажмите кнопку Repeat Grid (Повторить сетку) в правом меню. Сетка будет выделена пунктирными линиями зеленого цвета. Выберете и перетащить любую из точек границы сетки, чтобы расширить ее, повторяя все содержимое.
Пользуясь профессиональным советом этого урока, вы сможете быстро обновлять все изображения. Если вы пожелаете изменить какой-либо отдельный элемент сетки, Воспользуйтесь кнопкой Ungroup Grid (Разгруппировать сетку) .
5. ПОЗВОЛЬТЕ ПРОКРУТИТЬ ЭТО
Что делать, если мы хотим создать экраны прокрутки? На данный момент мы можем это сделать, но только для вертикальных направлений . Горизонтальная прокрутка пока ещё находится в разработке.
Просто выберите ваш артборд и измените параметр Scrolling (Прокрутка) на Vertical (Вертикальная). Затем растяните нижнюю часть вашего артборда до нужного вам размера. Готово! Чтобы просмотреть прокрутку воспользуйтесь окном предварительного просмотра.
ФИКСИРОВАННЫЕ ОБЪЕКТЫ
У вас может возникнуть желание зафиксировать некоторые объекты во время прокрутки, например верхнюю или нижнюю панель. Просто выберите нужные вам элементы и отметьте опцию «Fix position when scrolling» (Зафиксировать положение во время прокрутки) .
Совет. Убедитесь, что фиксированные элементы находятся в верхних слоях вашего макета, так что они не перекрываются прокручиваемыми объектами. Перейдите в меню Layers (Слои) в нижнем левом углу рабочей области (или нажмите сочетание клавиш Ctrl[Cmd]+Y), чтобы проверить это.
6. СДЕЛАЙТЕ ПРОЕКТ ИНТЕРАКТИВНЫМ
Пришло время узнать о режиме прототипирования . Начните с выбора вкладки Prototype (Прототип) в верхнем левом углу рабочей области.
Прототипирование позволяет связывать экраны между собой, чтобы просмотреть, как пользователи будут взаимодействовать с вашим приложением. Используйте окно предварительного просмотра, чтобы протестировать связи прототипа.
Каждый объект может быть связан с другим экраном. Пользуясь этим, вы сможете установить соединение, перетащив синюю стрелку до нужной точки другого экрана.
После создания соединений, вам будут доступны различные параметры:
- Trigger (Триггер). Он задаёт начало действия. При нажатии на объект это происходит по умолчанию. Вы можете установить задержку, чтобы экран, через некоторое время автоматически переключался в нужную точку на другом экране.
- Action (Действия). По умолчанию, действие, находится в режиме Transition (Переход). Эта функция помогает приложению сменить экран назначения. Другим параметром является Overlay (Наложение), он может использоваться для доступа к меню или неполным экранам на текущем экране. Позже мы рассмотрим Overlay (Наложение) более подробно. Последним действием является Previous Artboard (Предыдущий артборд), которое заставляет экран вернуться к предыдущему, когда происходят условия триггера.
- Destination (Место назначения). Это следующий экран, конец вашей синей стрелки.
- Animation (Анимация). Анимация создаёт эффект перехода между экранами. Вам доступны настройки интенсивности и продолжительности эффекта.
Создание оверлея меню
Чтобы создать всплывающее меню, вы должны создать новый артборд с прозрачным фоном. Вы можете изменить непрозрачность цвета фона во вкладке Appearance (Правое меню).
На этом артборде мы можем создать своё меню. Я рекомендую вам взглянуть на мою предыдущую статью, где вы сможете найти полезную информацию и ссылки, если вы хотите загрузить бесплатные элементы для вашего дизайна, такие как шаблоны меню или иконки.
Поскольку меню, которое мы разработали, не охватывает весь экран, мы можем использовать его по принципу наложения. Для этого нам просто нужно определить соединение в рабочей области Prototype, и выбрать действие Overlay.
7. СПОСОБ ПОДЕЛИТЬСЯ ПРОТОТИПОМ ЧТОБЫ ПОЛУЧИТЬ ОБРАТНУЮ СВЯЗЬ
Это заключительная глава небольшого вводного курса. До сих пор мы проверяли наш прогресс в окне предварительного просмотра на своём компьютере. Однако функция совместного доступа позволяет создать общедоступную или закрытую ссылку, чтобы открыть макет вашего приложения в браузере.
В этом случае может пригодиться официальная документация Adobe, узнайте больше о способах публикации здесь.
Совет. Когда вы публикуете превью своего приложения, отправьте ссылку по электронной почте, чтобы открыть непосредственно со своего смартфона . Вы будете тестировать свое приложение прямо с мобильного устройства!
8. ДОПОЛНИТЕЛЬНАЯ ГЛАВА: ЭКСПОРТ ВАШИХ ИЗОБРАЖЕНИЙ
Это одна из самых простых и важных частей вашей работы. Если вы хотите, чтобы кто-то использовал ваш дизайн интерфейса (UI design) при их разработке, вы должны экспортировать изображения в правильные форматы .
Adobe XD поддерживает экспорт отдельных изображений и всего экрана для устройств с различными характеристиками. Просто выберите выходные ресурсы, а XD сгенерирует файлы изображений в отдельных папках в соответствии с плотностью целевого экрана.
Вам доступен экспорт сразу всех экранов проекта, а так же возможность экспортировать определенные объекты из рабочей области.
Выводы
Вы должны были изучить основы Adobe XD следуя этим шагам. Программное обеспечение постоянно развивается, и каждое обновление приносит новые возможности, поэтому будьте в курсе последних событий.
Adobe XD — это очень простой, интуитивно понятный и вместе с тем мощный инструмент для создания интерфейсов приложений, а также проектирования и создания прототипов UI.
Со второго обновления Adobe Experience Design для Windows у нас появилась возможность, прямо из меню получить доступ к 3 различным наборам пользовательского интерфейса:
- Apple iOS
- Google Material
- Microsoft Windows
Эти UI (пользовательский интерфейс) наборы расположились там, чтобы предоставить вам быстрый доступ к общеупотребляемым макетам и элементам UI для 3 самых популярных мобильных платформ. Этот мощный апгрейд сводит на нет необходимость создания этих UI элементов с нуля и избавляет от сильной «головной боли».
Если вы предпочитаете смотреть видео.
Открытие UI комплектов
Чтобы начать использовать UI комплекты. Просто откройте гамбургер меню в верхнем левом углу Adobe XD и выберите желаемый комплект Apple iOS, Google Material или Windows.
Использование комплектов
Давайте откроем комплект пользовательского интерфейса Google Material:
Как мы видим, нам представлены различные рабочие области (31 если быть точнее). Они содержат всё, от типографики до диалогов, и основных макетов.
В этих комплектах нет ничего особенного это просто обычные .XD файлы, которые были созданы с целью дать другим возможность повторно использовать элементы и рабочие области.
То, какой из них вам использовать, будет зависеть от того, что вы пытаетесь сделать. Допустим, вы разрабатываете приложение для Android, в котором есть галерея с миниатюрами.
Выберите рабочую область под названием «Mobile — Dark». Вы должны нажать на её название, чтобы выбрать всю рабочую область. Затем нажмите CTRL-C, чтобы скопировать её.
Теперь нажмите CTRL-N, чтобы создать новый .XD документ и вставьте скопированную рабочую область с помощью CTRL-V.
Замечательно! Вы только что впервые применили комплект Google Material! Но мы еще не закончили.
Давайте избавьтесь от этих розовых направляющих. Выберите любую из розовых линий и щелкните на иконку замка в верхнем левом углу выделения, а затем нажмите клавишу удаления.
Вернитесь к документу UI набора, с которым мы работаем. На монтажной области «Grid» выберите галерею с миниатюрами и скопируйте её.
Вставьте её в другой .XD документ и расположите так, как показано ниже:
Белый фон галереи в данном случае нам не нужен, поэтому давайте избавимся от него.
Дважды щелкните по нижней части белого контейнера, пока вы не заметите, что индикатор цвета справа на панели Adobe XD, показывает белый цвет заливки. Двойной щелчок выбирает слой, даже если он является частью группы. Нажмите клавишу удаления.
Теперь, выбрав галерею, просто растяните её по высоте за нижнюю часть так, как показано ниже:
Выберите всю рабочую область, щелкнув левой кнопкой мыши по заголовоку, нажмите CTRL-C, а затем CTRL-V, чтобы вставить её:
Выберите галерею на дубликате рабочей области, щелкните по ней правой кнопкой мыши и выберите Ungroup (разгруппировать). Затем нажмите кнопку Ungroup Grid (разгруппировать сетку) в правом верхнем углу Adobe XD.
Удалите все миниатюры изображений, кроме изображения медведя. Выделив изображение медведя, удерживайте Shift, чтобы пропорционально увеличить его на всю ширину.
Изображение оказалось ужасно пиксилизованно, поэтому, если вы хотите, вы можете скачать другую фотографию медведя (вы можете использовать её бесплатно). Перетащите её на две рабочих областей поверх двух экземпляров изображения с медведем.
Теперь выберите медведя на второй рабочей области и уменьшите его вертикальную высоту, примерно до 50% от видимой области экрана приложения.
Затем вернитесь к набору пользовательского интерфейса и скопируйте раздел с типографикой на рабочей области «Typography» (типографика).
Замечательно! Допустим, мы довольны результатом и хотим, создать интерактиность. Нажмите на вкладку Prototype (прототип), а затем выберите галерею на левой рабочей области и разгруппируйте её несколько раз, пока не сможете выбрать отдельно миниатюру с медведем. Затем потяните синюю стрелку и перетащите ее на второю рабочую область, чтобы установить интерактивную связь.
Разгруппируйте верхнюю панель инструментов на правой рабочей области и выберите только стрелку и переместите её влево.
Это то, что нужно! Теперь нажмите значок воспроизведения в правом верхнем углу Adobe XD. Нажмите на миниатюру, а затем нажмите кнопку назад.
Именно так вы можете создавать быстрые прототипы в считанные минуты с помощью наборов пользовательских интерфейсов в Adobe XD. Здорово, да?
For those interested in web designing, UI kits in Adobe XD are a great way to jumpstart a new design project. With these kits, you get access to some handy resources that you can modify and use for your website or app design.
If you’re new to the software and aren’t sure how to use UI kits in Adobe XD, then you’ve come to the right place. In this article, I’ll show you how you can install UI kits in the software and then use the included resources for your project.
How to Download UI Kits in Adobe XD
First, let’s take a look at how you can download UI kits in Adobe XD, right from within the software. Just follow these steps to get started:
Step 1: Click on the hamburger menu button in the top left corner of the software.
Step 2: In the menu, scroll down to the Get UI Kits option and then click on either three of the available options.
For this article, I’ll be choosing the Google Material UI kit. However, depending on your project you can select either the Apple iOS or the Microsoft Windows kits. That will open up an official web page from which you can download the UI kits for free.
Step 3: Locate the Adobe XD UI kit in the following web page, and download it on your system.
Step 4: Now open up the downloaded file in Adobe XD and you’ll be greeted with a bunch of artboards containing UI resources for the respective platform.
You can hold the Ctrl button and move the scroll wheel to zoom in/out to see all the individual artboards.
If you wish to download Wireframes instead, you can click on the Wireframes option in the Get UI Kits menu.
You can also look for additional UI kits on Adobe’s website by clicking on the More UI Kits option in the Get UI Kits menu.
The website has some great options to choose from, including this really cool Movie Magic UI kit that looks like a heads-up display.
Now that you know how to download UI kits, let’s take a look at how you can use them in your projects.
How to Use UI Kits in Adobe XD
To use UI kits in your project, just follow these simple steps:
Step 1: Zoom in on the UI element you want to use in your project and click on its title to select it.
Step 2: Now copy the element using the Ctrl+C shortcut.
Step 3: Then open up a new Adobe XD project from the menu.
Step 4: Here, paste the UI element using the Ctrl+V shortcut.
For this article, I’ll be using the Mobile Dark element from the Google Material UI kit. The element includes guides to help you place more layers, but if you don’t want to use them you can easily remove them by following the next step.
Step 5: To remove guides, click on the lock icon in the top left corner and then hit delete. You can skip this step if you wish to use the guides to place more objects into the element accurately.
Step 6: Now head back to the UI kit to select another element to add to this page. Once again, click on the title of the element and copy it using the Ctrl+C shortcut.
I’ll be creating a basic toast for this article for which I’ll use one of the dialogs.
Step 7: Paste the new element on the previous element and then align it as per the guides.
Step 8: Now to edit each element in the toast, double click on the text box and then enter the text you want to use. First, let’s change the title of the toast.
Next, change the content of the body by double-clicking on the text box and typing in whatever you wish to add.
You can also change the text of the buttons in the same manner. Once you’re done with editing the text, you can change the color and opacity of the text. To change the opacity, just move the slider under the Opacity option in the toolbar to the right.
To change the color of the text, click on the rectangle next to the Fill option and then select a new color from the color picker.
And it’s not just the text that you can edit in this manner. You can also change the color and opacity of almost all items in the dialog box, which is great if you’re going for a unique color scheme.
Once you’re satisfied with the outcome, just go ahead and save your file by clicking on the Save As option in the menu or by using the Shift+Ctrl+S shortcut.
Perfect Your Design Using UI Kits
Now that you know how to download and use UI kits in Adobe XD, I’m sure you’ll start churning out amazing designs in no time. These UI kits are definitely quite handy and help you get straight to your project without worrying about designing each UI elements.
Next up: Completed a project on Adobe XD and don’t know how to export it to HTML? Check out the next article for a simple step-by-step tutorial.
Last updated on 03 February, 2022
The above article may contain affiliate links which help support Guiding Tech. However, it does not affect our editorial integrity. The content remains unbiased and authentic.
Читайте также: