Outline
Introduction
In this lesson, we will harness our Adobe XD knowledge by using Xd productivity tools, UI Kits, and plugins. We will learn the common mobile user interface elements with ease and get an introduction to the industry design standards and guidelines: Human Interface Guidelines (AppleOS) and Material Design (Android).
Xd Productivity Tools
Let’s follow this video to practice using some popular Xd features: Object Flip, Search Layers, and Linked Symbols (now components).
Components
Xd Componenets are previousely called Symbols. This tutorial gives us an introduction of Master Components, and Component Overrides features.
Using Components
This set of short video tutorals teaches us to create/nest/swap componenets, update master componenets and use different componenet states. We will follow along to practice. Download tutorial file
Component hover states & Micro-Interactions
Check out this video to learn how component states allows you to save elements for future use and create additional versions of your buttons, toggles, fields, and more.
Xd Interactions
Let’s watch this set of short videos to practice popular prototype interaction design in Adobe XD. We will build prototype with screen animation, transitions, drag gesture, componenet overlay, and voice control. Download tutorial file
Multiple Interactions
Xd 2020 release allows desingers to apply multiple interactions to the same UI object. Follow this video to make our prototype interaction more natural.
Content-Aware Layout
We will learn content-aware layout to quickly create and edit common design elements without a lot of tedious steps. We can also add group padding coupled with responsive resize.
For more great tutorials like this, check out Prototype on the Let’s Xd website.
Xd Ui Kits
UI Kits content contains common buttons, form elements, headers, icons, and other UI elements. Follow this XD tutorial to learn how to get UI kits and use the Kit content in your own designs.
Note: We will explorer UI Kits for Apple iOS and Material Design in class to understand the platform standards together. Download Apple iOS fonts & symbols and Roboto fonts for Android devices
Let’s start our design with UI kits. We will follow this video to get the Wireframes UI Kits and use the content in our own XD file.
Leveraging UI Kits tutorial shows multiple ways to access UI Kits in Xd and how to download UI Kits from Adobe Resources website.
UI Kit Resources
- Material Design Resources
- Apple Design Resources
- Design toolkits and samples for Windows apps
- Auto Animated UI Kit by Howard Pinsky & Jonathan Pimento
- Component States UI Kit
Xd Plugin Manager
This tutorial provides a quick overview of XD Plugin Manager and multiple ways to access it.
Some Great Plugins
Let’s follow this tutorial to install some useful plugins. We will only use a few these plugins for our class exercises, however feel free to try as many as you like.
Skip to 0:55 for the start of the tutorial. Sorry the classic awkward YouTube tropes, but the content is ultimately good.
Another super cool plugin is Google Spreadsheet which is very useful when designing UI with data.
More Plugin Resources
Here are two plugins you may try for usability testing in Xd. They both provide free/education access.
- Useberry - You can watch Useberry video demo
- Usertesting
Xd Resources
Adobe XD resources, now under Features tab provides resources we can use to optimize our workflow and speed up the design process. They include UI kits, icon sets, plugins, app integrations, and more.
