By Howard Pinsky
With states now available all sorts of fun micro-interactions can be built out without needing separate artboards. Let's take a look at how we can create this flyout effect in just a few minutes using Adobe XD.
Alright, here we are in Adobe XD with a Behance-style design where I've been tinkering with creating card pop-outs using states. I'll get to that in another video, but I want to create a navigation bar at the bottom that contains a flyout menu when the Add button is pressed. To start that process let's add in some icons which I have over in my assets panel -- one for home, gallery, profile, and settings. I'll then make sure that the end icons are lined up with my guides and then pop the other two somewhere around here for now. I'll aline them in just a moment. Next I'll need to create a button in the middle which will eventually fly out. For that I'll start with a simple ellipse that's just slightly larger than the other icons and I'll set the color to blue. I'm also going to create a very slight border with a decreased opacity which will enlarge in the second state. Finally, while I could very easily create a + button myself, I'm feeling a little bit lazy this morning so I'll drag one in. With the add button now in place I'm going to quickly group the elements and then select all the icons that make up the navigation. Then I'm going to align them vertically and distribute them horizontally. Beautiful.
Before we dive into components, we need two more buttons, and to make that process a touch easier I'll duplicate the add button twice -- one for the camera, and one for the photo gallery. Now, since the icons within these groups are components, I can very easily drag in new ones right on top to swap them out. Great.
Now that the additional icons are set up I want to make sure that they're both behind the Add button. Hopping into the Layers panel, I'm going to first name my groups, so that everything is nicely organized, and then throw the add button to the top of the stack. I can now move the camera and gallery groups in place and out of sight. Wonderful, we're now ready to bring this to life.
Since all three of our buttons will be part of the interaction, we'll want to make sure that they're all selected, and then I'll turn them into a single component, either with the CMD- or CTRL-K shortcut, or the + button within the Properties Inspector. I now have a default state and, to set up the end point for our interaction, I'll go ahead and create a second which I'll name "fly out". With the second state now created and active I can start working on the end point. Since these buttons will be the focus, I want to move them up and enlarge them a touch. And to make sure that none of the paths are getting distorted, I'll turn off responsive resize first. I'm also going to dive into the Add button to make a few changes. First I'll increase the size of the border I added a bit earlier, and then select the + icon and rotate it 45 degrees so it turns into an X. Great. Now I can select the camera and gallery buttons and move them up into place. You know what -- in some situations these buttons may be a little bit difficult to see.
Since we're able to add and remove elements from components, let's add in an overlay. With my rectangle tool I'll draw out a shape from the top of the screen down to the navigation bar. I'll set the color to black, and then to get a little bit fancy, turn on background blur the sentence can now be tweaked to get the exact result I'm looking for in this case I'll drop the amount of blur and brightness and then increase the effect opacity so it's not too transparent.
Finally I'll want to make sure that this overlay layer is behind all my buttons. Both states are now complete and I can cycle through them within the Properties Inspector but of course they need to be wired up. Switching over to Prototype mode I'll select the button and then instead of dragging the wire to a whole other artboard which was required previously I'll simply click on it. This will then let me set up the properties over to the right. I'll go with tap for the trigger and make sure that auto- animate is the action. Now I can select an individual state to transition to -- in this case the flyout. And finally for my easing options I'll go with snap with a duration of 0.4 seconds. Before I preview this, I got to quickly switch to the flyout state, select the close button, and set up an interaction back to the default. Perfect.
Let's see this in action the play button at the top will launch the preview where I can click on the Add button to reveal the others, and then click on close to hide them.
And that's how you can create a flight interaction using component states in Adobe XD.
Component states in Adobe XD make creating reusable elements with different states easier than ever. In this tutorial learn how to leverage component states to create fun micro-interactions on button states like fly-out menus either on hover or click interactions with a button. Since states are built into components, all the states created can be reused with the component instances across the design.
