Welcome back to another Adobe XD tutorial. In today’s tutorial, we will create a simple search bar hover animation.
First things first, let’s draw a rectangle box. Next up, I will take the live corners here and drag them to the center to make a rounded corner button. Select the text tool and type search for the button.
The text may be too small or too big. Take this circle to make it bigger or smaller. I want to add a magnifying tool icon to my design. In a previous video, we discussed how to find and install a plugin called Icons 4 Design. Well, I am going to use this plugin again. Below the layers icon is plugins. It will resemble a Lego toy. In the search field, type search, and a bunch of icons will show. Click on the icon that you want, and it will be added to your artboard as shown here. Position the icon to your button.
Let’s go back to our layers and group the button, text and icon. Command G for a Mac or Control G for a PC. Or in the menu, Object-Group.
For creating our hover animation, 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. Or in the Property Inspector on the right, click on the ‘+’ of the component, and a component will be made too. Double click on the component name to rename this component.
The component stage is the default stage. The default stage is what the first appearance will be. So, let’s make our button smaller. We want to make sure certain elements are selected. Click on the diamond shape
to expand the components elements. Select the rectangle and make it smaller by moving it to the right and changing the appearance of opacity to zero. Next, select the search text in the layers making sure only the text is selected and move this to the right as well. Change the appearance to be zero too.
Now, we need to add another state. This time click on the ‘+’ in the Property Inspector to add a hover state. Our goal is to hover over the magnifying tool and the animation will play. Let’s expand the search field to the left and turn the appearance back to 100%. Do the same thing with the text, change the opacity from zero to 100%, and move this to the left side as well.
Let’s test this out. Start the demo in the default state for the first interaction. When you press the play button in the top right corner of your hover animation, go ahead hover over the magnify tool icon, you can see the button expand back and forth with the search text magically appearing.
There you have it, that should work. A simple hover animation will appear when you hover over the magnifying glass icon, showing the search field opening up step by step.