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 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 colour, an increase in shadow to create a greater elevation or perhaps an emphasised 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 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. Experiment with this yourself in Adobe XD or follow along with Howard Pinsky as he creates button and toggle states.
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 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 the toggle to see it transition between states.
Using Component States to create tickboxes
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 to bring your design to life, is with tickboxes, a common element in forms.
Depending on the size of a form and the number of tickbox 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 tickbox component
Tickboxes 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 tickbox 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 tickbox itself should be clickable and not the text label, that can be achieved by clicking into the component and selecting the tickbox item itself.
Building reusable drop-down menus with Component States
States aren’t just great for smaller elements like buttons and tickboxes, they can help to improve your workflow when working with more complex elements like drop-down menus as well.
Drop-down 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, drop-down 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 drop-down 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 drop-down base
Creating these states is simple using the same methods above. Start with the basic, closed drop-down style, such as a rounded rectangle with a drop-down 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 the + button in the top right corner and call this new state the Open State.
Add in the drop-down content
With the new state selected - clicking into the component will allow for other elements to be added, repositioned and removed, while only affecting that state. In this case, another shape will be added to create the drop-down 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 drop-down 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 drop-down element as the trigger targets for the actions. When opening the menu, the entire menu may be used, but in closing, perhaps just the drop-down header or button will be used, rather than clicking the entire list.
Learn more about combining Component States with Stacks and Scroll Groups to create truly dynamic, reusable drop-down 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 drop-down 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 Matte 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.