Hey, everyone – I’m Howard Pinsky – Senior XD Evangelist at Adobe.
On a basic level, components allow you to save commonly used elements, like buttons
and icons, within your assets panel so you can quickly grab one when needed.
But their functionality extends far beyond that – offering resizability, overrides,
and states.
Let’s take a look.
In this first example, I have a simple button which I’ll likely use on various screens.
With the elements selected, I can create a component by pressing the plus button within
the properties inspector, or with the Command/CTRL + K shortcut.
This will pop it straight into the assets panel where I can rearrange and rename it,
if necessary.
The diamond at the top left lets us know that this is the base component.
Any changes made to your base components will push to any instance or state where the targeted
change wasn’t overridden.
You’ll see this in action in a moment.
Since this particular button contains an icon in addition to the text, we can enable a Stack
within the Properties Inspector – and based on the content within the component, XD has
automatically determined that it’s laid out horizontally.
This will also enable padding to allow the button to expand as the text is changed.
I’ll make sure to set the padding on the sides to a nice 32 pixels.
Now if I needed to change the label, or even swap the position of the layers, it can be
done with ease.
At this point, if this is the only design I’ll be needing, I can start adding additional
buttons throughout my project, but I may also want a few variations to use depending on
the situation.
For that, we turn to states.
Back in the properties inspector, you’ll find a plus button beside your default state.
Pressing this will allow you to create another – including hover.
Let’s start with that.
I don’t want anything drastic for my hover effect, so I’ll simply brighten up the background
a touch then separate the two pieces that make up this icon.
Great.
I can now toggle back and fourth between the two states, and since hover was chosen, it’s
automatically wired up, so when I preview this artboard, voila!
Let’s create one more state, this time to act as an outlined version of the button.
I’ll turn off the fill, and set the border to white.
With the additional state in place, let me pull out another button to the right, switch
over to the one I want to display, then dive in and change the label to reflect the new
call to action.
Of course, one of the main benefits of using components is their ability to keep your designs
up to date, and with states, you can also keep your instances in sync.
Editing a specific state within a base component – again, that’s the one with the solid
diamond – 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 changes to the default.
Again, as long as that property was not manually overridden, all states will receive the update.
States can also be combined with auto-animate to create micro-interactions.
Over under the user profile dropdown, which I’ve created an expanded state 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 then create
a new state, which I’ll call on.
Here I’ll shift the ellipse over to the right, then change the background color to
match the rest of the design.
With both of the states created, I can now switch over to prototype mode to wire it up.
Unlike with artboard-to-artboard interactions, since we can cycle between states, I’ll
want to simply click on the blue handle, then make sure that 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 out a new one from the assets
panel will keep them in place so I don’t need to redo them each time I want an animated
toggle.
Lastly, and one of my favorite benefits of components, is their use within repeat grids.
As you may know, aside from text and images, making changes to an entry within a repeat
grid pushes the changes to them all – and that’s by design.
But what if we utilized components?
Here’s an album view I’ve been working on, and to ensure I can override certain elements,
I’m going to first convert them into components.
Now, with everything selected, I’ll create the repeat grid, pull out a few additional
cards (both horizontally and vertically), then quickly hop over to Finder to grab some
images then the album names using a text file.
Now, since components were used in this grid, and components can be overridden…Overriddable
repeat grids.
And that’s your look at components and states within Adobe XD, giving you much more flexibility
over your designs.