By Howard Pinsky
Hey everyone. I'm Howard Pinsky, Senior XD Evangelist at Adobe. Components have played a vital role in our design process. But, as our project start to become more complex improved organization and control may be necessary. Let's take a look at how states can not only help you keep your documents tidy, but how they can also help you create micro interactions, hover effects and much more.
Here's the design of a music app I've been working on and starting off simple, I may need to build out a few buttons to use in various situations. Instead of losing track of overridden instances, they can all be contained within a single component. With my first button ready to rock, I can turn it into a component either within the assets panel, the command and control K shortcut, or the + button over to the right. And, as you can see this will be the default state. But additional ones can now be added right alongside it.
Let's start with a simple state that will act as an outline button. So I'll turn off the fill and then set the border to White. Great! I can now toggle back and forth between the two states so depending on the situation I can either use the solid or outline button. Of course, one of the main benefits of using components is their ability to keep your designs up-to-date and now with states you can also keep your instances in sync. Editing a state within a master component will push the changes to all instances where those specific properties were not overridden and if you need to update the styling across all states you can make the change to the default.
Again, as long as that property was not manually overridden all states will receive the update. We also have the option of creating hover states. For this one, I'm simply going to brighten up the button a touch then move the two pieces of the icon slightly apart. This will define what it will look like when a mouse over occurs. Beautiful! Just like before I can toggle back and forth between my various states, but now because hover was chosen when I preview the prototype, voila!
states can also be combined with auto-animate to create micro interactions. Over under the user profile drop-down, which I've created an expanded safe for I may want to include a few toggles for these options. With the off design in place, I'll make sure to convert it into a component and then create a new state which I'll call On. Here, I'll shift the ellipse over to the right and then change the background color to match the rest of my design. With both of the state's created. I can now switch over to Prototype mode to wire it up. Unlike with artboard to artboard interactions, since we can now cycle between states, I want to simply click on the blue handle then make sure tap is the selected trigger and auto-animate is the action. I can now select the state I wish to transition to and tweak the easing options if desired.
I can also select the second state and set up an interaction back to the first. With the two states now wired up, duplicating it or dragging one out from the assets panel will keep them in place so they don't need to be redone each time I want to animate the toggle. Now before I show you this in action, how much of an impact can states really have on your projects? Well previously, if I wanted a user to be able to interact with various elements, I would need to create separate artboards for each one the toggle, for example, we need several artboards. We're literally only that component would change. Here, I have four more artboards just for filled in hearts. And, here are a bunch more for the various other interactions I may have previously wanted to show off.
Now, with states all 21 of these artboards can be consolidated into one, all wired up with in Prototype mode. So when the screen is previewed, everything will be interacted with in no particular order. From simple hover states to fun animated microinteractions. If you really want to dive into states and check out a few examples. I just released an in-depth UI kit which covers basic and animated interactions as well as a few real world examples. You can grab it right now over at letsxd.com/states.
And, that's a look at states and how they can pretty drastically improve your workflows. For more XD tips and tricks had an over to letsxd.com and I'll see you soon.
In this Adobe XD tutorial create micro-interactions in Adobe XD like hover states and click states. Adobe XD component states unlock powerful, reusable elements that can be packed with micro-interactions in Prototype mode, and reused across a design. Use these states in Adobe XD to create rich interactive interface designs and prototypes.
