By Matt Rae
I
n the world of prototyping, creating dynamic elements can mean the difference between a prototype that feels real and genuine, and one that feels like clicking through a slideshow of static imagery. Component States in Adobe XD equip designers with the tools to create these dynamic elements and micro-interactions in prototypes, by allowing the creation of multiple states on a single component. Here, we’ll explore some of the common ways component states are used to create real-to-life prototypes for presentation, and user-testing.
What are Component States?
Component States are a method of defining various different visual formats for a single component, and can be linked together in Adobe XD’s Prototyping mode to Auto-Animate between states. Since States are built on top of XD’s robust Component structure, states are reusable across all instances of a component.
Explore component states in Adobe XD with the States UI Kit from Howard Pinsky.
Creating hover effects with Component States
One of the most common use cases for Component States is creating hover effects on buttons, input fields, cards and more. Hovers are a commonly used effect in web design and web based applications, used to provide feedback to a user that an item or element is clickable.
Traditionally, creating a hover effect required multiple artboards, and meant that there was often one specified flow a user could follow in a user test or demonstration. Thankfully, with States in Adobe XD, creating hover effects requires no additional artboards.
Create a component
To create a hover state on a button, or other element. First, make sure it is a component. Creating a component is as simple as right clicking on the element and selecting Make Component or using the associated hotkey on your keyboard.
Create the state
With the component created, clicking + in the top right corner next to Default State will allow a new state to be added. There are three options: New State, Hover State, and Target State. Notice that Hover State and Toggle State have lightning bolts next to them, which means that these states are automatically linked to an interaction. Select the Hover State.
Edit the state properties
With the new state selected, the properties of the button or element can be modified to the desired hover effect. Typically this may mean a darkened background color, an increase in shadow to create a greater elevation, or perhaps an emphasized border. The effect you choose should align to your design system, and product aesthetics.
Preview the hover state
Switching the state back to Default State and clicking on the preview button will reveal the design in a new window. Moving the mouse over top of the component will reveal the newly created hover state, and a smooth animation between default and hover.
Just like that, with a few clicks you can add a hover interaction onto elements such as buttons, input fields, images and cards to indicate that an element is clickable.
Making toggle switches more efficiently
In the same way that the hover state is created using a pre-prototyped state effect, toggle buttons can be created as well in just a couple of clicks.
To do this, start by drawing out the default state of the toggle, in this case a toggle switch used to enable different features or functions on a settings screen. Once converted into a component, navigate to the component menu in the top right and click +. This time however, rather than selecting Hover State, click on the Toggle State option.
In the same way as before, with the new state selected, the properties of the component can be edited. Now you should have your on and off states of the toggle configured. The best part is that no prototyping is required to make this state work, simply go to preview and click on the toggle to see it transition between states.
Using Component States to create checkboxes
Hover states aren’t the only thing that can be created using Component States, in fact it is just scratching the surface. Another common scenario where states can help bring your design to life, is with checkboxes, a common element in forms.
Depending on the size of a form, and the number of checkbox options included, prototyping out the interactions of these elements previously required exponential numbers of artboards. This becomes especially painful when iterating through a design, as changes made must then be managed across the series of artboards used for the interaction. Once again, Component States in Adobe XD alleviate this frustration by allowing for these interactions to be created within a single, reusable element.
Creating a checkbox component
Checkboxes often have several states, including a deselected, hover, selected, and a focused or active state for keyboard controlled navigation. All of these states can be built into a checkbox component with Component States.
Start by creating the default unselected state, typically a simple rectangle with a background fill and border, and a slight border radius.
Adding new states
Add new states by clicking the + button next to Default State in the top right corner. The first hover state created is automatically connected for you, but additional states will require prototyping. With each state selected, make the necessary visual changes for each one.
Once completed, navigate to prototype mode to connect them together. When creating a connection to the selected state, it is best to add a tap action to both the hover, and the default state to achieve a cleaner interaction.
To add more fidelity, triggers can be placed on individual elements within a component to provide very specific target areas. If for instance, only the checkbox itself should be clickable, and not the text label, that can be achieved by clicking into the component and selecting the checkbox item itself.
Building reusable dropdown menus with Component States
States aren’t just great for smaller elements like buttons and checkboxes, they can help improve your workflow when working with more complex elements like dropdown menus as well.
Dropdown menus are a very common design element, both on web and mobile applications as a method of selecting one, or many options from a list. Typically, dropdown menus across an application will follow a similar style, with subtle variations, making them a great use case for reusable components.
Component States are a great feature for creating dropdown menus as they often have an open and a closed state, and on the web may include a hover state as well to indicate interactivity.
Create the dropdown base
Creating these states is simple using the same methods above. Start with the basic, closed dropdown style, such as a rounded rectangle with a dropdown label, and an arrow, or caret to indicate the functionality.
Open and closed states
With the default shape formed, create a component using keyboard shortcut or the right-click menu. Add a new state by clicking on the + button in the top right corner, and call this new state the Open State.
Add in the dropdown content
With the new state selected - clicking into the component will allow for other elements to be added, repositioned and removed, while only impacting that state. In this case, another shape will be added to create the dropdown list, with text boxes as list items. If this element exists elsewhere in the design, it can simply be pasted in from the clipboard. Ensure that you have double clicked into the dropdown element, as this new content needs to be pasted within the group in order for it to show up inside the component. It is best to use the layers panel to select your layer in this case.
Prototype the interactions
Once again, navigating to prototype mode will allow the connection to be made between states. Specific elements can once again be selected within the dropdown element as the trigger targets for the actions. When opening the menu, the entire menu may be used, but in closing, perhaps just the dropdown header or button will be used, rather than clicking on the entire list.
Learn more about combining Component States with Stacks, and Scroll Groups to create truly dynamic, reusable dropdown menus for use across your design system.
Floating action buttons and flyout menus
On mobile devices, floating action buttons and flyout menus are often used to call attention to primary actions, and to save valuable real-estate on smaller device screens. Common examples of this are compose, or create-new buttons found in email applications like Gmail. Other examples are live chat or support buttons that expand open when clicked.
Creating these interactions is easy to do with Component States in Adobe XD. Fly out menus have default and expanded states that work similarly to dropdown menus. In the expanded state, these icons and buttons can include their own interactions that can link to other artboards, and even include their own states like hover and selected.
To learn more about creating flyouts and action buttons using Component States, follow along with Howard Pinksy in this step by step tutorial.
Image carousels and sliders
In Adobe XD, creating image galleries, carousels and sliders is possible using several different approaches. One method is using scroll groups to create horizontally scrolling galleries of images, helpful for prototyping apps for social media. Another approach is to use Component States to create reusable carousels creating a clickable image gallery that auto-animates between images.
Since states work across component instances, each instance’s states style can be overridden, meaning that a single carousel or gallery element can be created, and in each instance the images used can be replaced creating unique galleries with shared functionality and interaction.
To learn how to create a carousel or gallery using component states, follow along with this tutorial from Designer Advocate Matt Rae.
From buttons to image galleries, and far beyond, this list simply scratches the surface of what is possible with component states in Adobe XD. Get creative, and see what you can create with component states, and the many other powerful tools in Adobe XD.
