The last video in this series showed you how to create a hover effect using an isolated heart shape in Adobe XD. As you will see in this video, I will show you how you can create a hover effect with a button. When creating a form or call to action, a button may be needed. You can make the button fancy by making it a slidable button, but I’ll keep it simple.
Default States
As a reminder, the default state is what you want the first interaction to look like. In the Design mode, let’s create a few things. A rectangle will be created, and the corners will be rounded with the live corners. Use the text tool to create a line of text. This text will be grey, as well as the box’s border. Double-click the folder name on the left-hand side to change it to a button.
Making a Component
It is necessary to make a component. The keyboard shortcut is Command K on a Mac or Control K on a PC. Since this is now a component, the folder icon is now a diamond.
Creating a State
On the right side of the property inspector is the component (main). There will be a blue highlight on ‘Default State’. If it isn’t, please select it again. The default state has grey text and an outline of the box.
Click the + sign to add a state. To hover, select Hover State. Our goal is to make the box turn a different colour upon hovering over the button. When you hover over a button, its appearance changes. In this example, change the gray text to a solid orange fill. Click once on the swatch to choose a colour. In this example, change the grey outline to a solid grey fill. You can either click on the swatch to pick a colour from the picker or on the eyedropper to sample a colour. Changing orange to white will make it easier to read, as two-colour text is difficult to read.
By pressing the play button in the top right corner, you can see your prototype in action. XD makes it relatively simple to create hover interactions.
It is now possible to add a connection to your prototype if you wish. Hover is the trigger for this interaction, as you can see. Custom triggers such as Tap, Drag, Voice, etc. can be added to this trigger. Using this method, you can define state transitions based on your requirements.
In the destination section, it says Hover state. This means that the component will hover when it encounters the trigger.
Type Action can be modified, currently set to Auto-animate, to meet your needs. These method include overlay, previous artwork, and transition. Easing, duration, and scroll position can be adjusted in the same manner.
As you hover over the icon, its color changes. By clicking on the + sign on the prototype, you can move the connection to the artboard needed when you click the button.
This needs to be tested again. When you press the play button in the top right corner of your prototype, you can see it in action.
I hope you found this tutorial helpful.