In our last post, how to make a heart in Adobe XD using less than three elements to give us a perfect heart shape was shown. In this post, I’m going to show you how to create a hover effect. This can be used to create a simple heart button that can be toggled on and off with a hover.
Default, Hover and Toggle States
Default state means setting the button to how you want the first interaction to look. The heart design will be have a red outline. Make the heart a component. If you need a keyboard shortcut, just type Command K for a Mac or Control K for a PC. You can double-click on the layer to change the name to heart hover on the left side of the page.
The component (main) is located on the right side of the property inspector. It will appear that ‘Default State’ is highlighted in blue. If it’s not, please select it again. In its default state, the red outline should be applied to the first option.
Add a state by clicking on the + sign. Select Hover State. Our aim is to hover over the heart and ensure it is a solid heart. The heart’s appearance when hover over can be changed. I’m changing from a solid outline of red to a solid fill of red in this example. Set the checkmark on ‘fill’, and click once on the swatch to add a red fill.
A toggle state will be used for turning this component on and off. Add a state by clicking on the + sign again. Here, select Toggle State. I will transition from a solid red fill to toggle the heart button on.
Test Your Prototype
Watch your prototype in action by pressing the play button in the top right-hand corner. Here’s how easy it is to create a simple hover interaction in Adobe XD.
I hope you found this tutorial helpful. Please Like it and subscribe for more in the future.