Component States (Hover & Toggle)

Topics covered in this Adobe XD tutorial:

Adding a Hover State to a Button, Creating a Toggle State

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to prototype a hover effect (when something looks different as your cursor hovers over it). You’ll also learn how to create alternative component states, which can be used for a variety of different effects, such as having something new appear when you tap an object.

Adding a Hover State to a Button

1. In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).

2. Navigate into Desktop > Class Files > Adobe XD Class and double–click on Hover and Component States.xd to open it.

   NOTE: Before we get started, keep in mind that components and groups are similar, in that you double–click to go into them, and you hit Esc to go out of them. Nested groups/components require double–clicking multiple times (once per group) and hitting Esc multiple times (again once per group).

3. Click once on Kauai.

   This is a group so it will also selects the circle icon to its right.

4. In the Property Inspector on the right, under Responsive Resize notice that Stack is checked on and the spacing amount is 11.

   That is the amount of space between the text and icon.

5. In the Property Inspector on the right, to the right of Component click the + button.

6. Under Component (where you just clicked), notice a Default State has been added.

   To the right of Default State click the + button and choose Hover State.

7. The Hover State name will be editable, but hit Return (Mac) or Enter (Windows) to accept it.

8. On the artboard, double–click on the circle (i) icon to select it.

9. In the Property Inspector on the right:

   • In the Layout section, change Adjacent Spacings from 11 to 5 to move the icon closer to the text.
   • Set Opacity to 100%
10. Click on the circle (i) icon again in the artboard (so the cursor is no longer in the Property Inspector).
11. Hit the Esc key reselect the component (we were working inside it).

12. In the Property Inspector you should see Component (Main) section with the Hover State currently selected.

    Click on Default State to switch to it.

    NOTE: Always return to the default state when you’re done, otherwise your design will remain on the other state.

13. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or Ctrl–Enter (Windows).
14. Hover over Kauai and the circle (i) icon should move closer to the text and become a brighter white. Cool!
15. Close the preview window.

16. Let’s make another instance of our new button for the next island (Oahu).

    Hold Option (Mac) or Alt (Windows) and drag the Kauai down to the right, and place it beside the next island below.

17. On the new copy, double–click on the Kauai.

18. Now that the text object is outlined, double–click on it again to highlight the text.

    • Change the text to Oahu.
    • As you edit the text the circle (i) icon should remain the correct distance away because of the stack. Nice!
19. Hit the Esc key once to finish editing the text.
20. Hit the Esc key again to reselect the component so you can see the states in the Property Inspector again.
21. In the Property Inspector on the right, under Component (Instance), click on Hover State.

22. Notice the text has not changed on this state. Double–click on the Kauai, then double–click on it again so it becomes selected.

    • Change the text to Oahu.
23. Hit the Esc key once to finish editing the text.
24. Hit the Esc key again to reselect the component so you can see the states in the Property Inspector again.
25. In the Property Inspector on the right, under Component (Instance), click on Default State.
26. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or Ctrl–Enter (Windows).
27. Hover over both buttons to see they should both have the same style hover. The only difference should be their text.

28. Close the preview window.

Creating a Toggle State

We want the Kauai info card to appear when we click the Kauai button, so let’s prototype that.

1. Click once on the Kauai button to select it.
2. Hold Shift and click on the Kauai info card so both are selected.
3. In the Property Inspector on the right, to the right of Component click the + button.
4. Before we create the other state, we must hide the info card in the current default state. Double–click on the info card (to go into the component).
5. If the Layers panel is not open, at the bottom left of the window click the  icon.

6. In the Layers panel, you should see that the info card folder (group) is what’s currently selected.

   Hover over the info card folder and click the that appears.

7. Hit the Esc key to reselect the component.
8. In the Property Inspector on the right, under Component (Main), to the right of Default State click the + button and choose Toggle State.
9. The Toggle State name will be editable, but hit Return (Mac) or Enter (Windows) to accept it.
10. On the artboard, double–click on the Kauai to go into the component.
11. In the Layers panel, show the info card folder by clicking its icon.
12. Hit the Esc key to reselect the component.
13. In the Property Inspector on the right, under Component (Main), click on Default State.
14. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or Ctrl–Enter (Windows).
15. Click on Kauai to open the info card.

16. To close the info you can either click Kauai again or click anywhere on the info card.

    NOTE: Even though you normally wouldn’t be able to close the info card by clicking anywhere on it, we think that’s close enough behavior for a prototype. But if you only want people to be able to click the close button to close it, you wouldn’t use the Toggle State. You’d have to use the custom New State. Then you’d have add a prototype action to the close button that switches back to the default state. It’s more work to do that, but it can be done if you really want to.

17. Close the preview window.

18. Save the file and close it.

NOTE: Objects in states can have their own prototype interactions. For example you could add a Scroll To link to the Learn More button in the info card. States can also contain scrollable areas, etc. So states can be used to prototype lots of interesting functionality.