It sounds cool and simple trust me I spent hours getting to the solution. I am here to present a comprehensive research on how to create or for some make Micro Interactions on Adobe XD (Experience Design)
So here are some simple steps to follow in How to Create Micro Interactions | Adobe XD
Step 1 | Micro Interactions Made Easy
So before you jump into your Design Software Adobe Xd, remember its very simple to create micro interactions. First create a shape, well in my case I created a button with micro interactions text in it. As you can see in the image below.
now you have successfully created an image as shown above, we can certainly jump into the next step in understanding the math for creating some great looking interactions for our Web projects, App projects or what so ever purpose you have to create such interactions for any of your clients.
Step 2 | Make Component (Ctrl + K)
Well now in step two, all you got to do is select the Button Group the Orange button as you see in the below image, when you select the button, Right click on your mouse and a pop up navigation will appear as below, all you gotta do is select the Make Component Option ( Make Component Ctrl+K ).
So when you click on this option in the navigation something with green outlines will appear, as you see in the image below.
So far so good, I believe you have successfully reached to this point without a hassle. Now you have successfully created a component for your interaction to perform. Lets dive straight into Step No 3.
Step 3 | Add State to the Component Created for Micro Interaction
After successfully completing step 2, now all you have to do is Select your created component, and on the left side of your Adobe XD software you see Some text Default State next to this there is a + Plus sign Hover over it, there it will appear where all the magic will happen.
Now simply click on the Add State hover you see on your screen and now you have officially add a State to your Component. Exactly like the Image Below.
Now you have successfully created a state, you can Rename your state, well in my case I renamed it, for you to know you can rename The Hover State to what ever you like the most, You can rename it to your Boyfriend or Girlfriends name or what ever you feel like.
Before we further jump into the next step, Let me clarify things for you for a better understanding of how Interactions work in Adobe Xd. There are always two States in any interaction 1- Normal State 2- Hover State. Now what is normal state and what is Hover state, well normal state is something in which your not interacting with any function on a web or app, well the Hover is the opposite of that, Its the interacting of your cursor creating an interaction which is completely different from the Normal State. Most of the Pros out there would be thinking Why is he being so lame on it, Well Dear PRO people out there, There are millions or billions of people out there in the world who want to learn cool software’s from Adobe, so they need to understand it in SIMPLE steps.
Step 4 | Made it Easy | Watch the Video Clip for the final ingredient of creating mind blowing micro interactions
I could have created a whole buzz for you, I suppose it be much easier if you watch this above clip. Now you have successfully mastered the art of creating Micro Interactions for your up coming projects or if your one of those people who are not very much enjoying the Isolation period it be a great chance for you to learn something amazing.
The key point to remember, you can create any type of interaction you design using any shape, form or text anything that’s in your head, I mean you can even create a cool looking website presentation using these simple steps to impress your boss or colleagues.