Getting started with micro-interactions in Adobe XD
Simple tutorial to get started with interactive animations.
As designers, we often need a lot of tools to design the many various stages of the user experience workflow right from user research to mockups to prototyping to handing off the design specs to the dev teams. In a design world, where the Sketch app is the primary tool, Adobe has entered the prototyping game late but they do have one of the best and quickest wireframing and prototyping tools now — Adobe XD.
✅ Before getting started to learn about creating Micro-Interactions, it is important to know why and how they are used.
Read the article below:
With some of the best features out there such as Voice triggers and speech, Responsive Resize, Private Sharing, Asset Extraction, etc., XD has recently announced a new feature for design choreography. This helps designers to craft rich prototype experiences as onboarding flows, animations for mobile carousels, progress indicators, etc., The best part about this feature is that its simplicity to learn and execute.
Auto Animate works on a simple principle of state transition which means that when there are two artboards which are connected — for each of the layers in the artboards, the tool checks its properties which change in the artboards and animates it accordingly. For Adobe XD to auto animate between these layers, they will have to have a shared name and have the same group architecture. For example —on Artboard A, if you have a layer L1 in group G1 and in another artboard if you place the layer L1 in group G2, the tool will not be able to auto animate because of the name discrepancy. So, it's important to maintain a proper structure.
In this article, I will be explaining how to create simple micro animations using this great auto animate feature of XD.
Swipe Gestures to Add to Fav or Delete.
Swipe interactions are one of the most commonly used micro-interaction on mobile apps. These are an essential part of a mobile ecosystem because gestures help you to free up screen space by hiding these actions and allow the user to learn about the UI. Few commonly used swipe actions are deleting and adding them to a queue.
For this example let’s look at a music playlist. For the first artboard, let us create a playlist screen with 5 songs in it. Each song is an individual card and essentially each card when swiped left should remove the song from the playlist and when swiped right should add the song to the queue. So, for this article's purpose, let us create the first card. You can add basic details such as the name of the song, name of the artist, length of the song and the rating. Now group all these elements into a single layer. Duplicate it until 5 of the similar cards are made. You can edit them based on your taste. Now for the first card C1, we are going to add a left swipe for Delete action. So let's create a small square with a red background and add Delete Text and an icon as shown in the figure.
Group all these items into a layer called A1. Now combine C1 and A1 into a layer L1 — such that A1 is on the right side of C1 as shown in the figure. Now for the second card C2, we are going to add a right swipe action Add to queue in a similar fashion. Create a group A2 with icon, text and green background. Add it to the left of the group C2 and create a combined layer named L2. Now, the first artboard S1 is complete. Let’s duplicate the entire artboard twice, into two states S2 and S3. We will be using S2 for delete swipe and S3 for add to queue swipe. In order to do that we need to make some changes, for each of these artboards.
Here are the settings for both Swipes:
- S1 — Change the Opacity of A1 and A2 to 0% and arrange L1, L2 such that they are center-aligned.
- S2 — Arrange the L1 card such that the right edge of the L1 is aligned with the other cards as shown. Change the Opacity of A2 to 0%.
- S3— Arrange the L2 card such that the left edge of the L2 is aligned with the other cards as shown. Change the Opacity of A1 to 0%.
Now that the artboards are completely set up, the next step is to animate them. You can do this by going into the prototype mode, on the top left side of the tool. Now on the Artboard S1, Click on the Layer L1 and add an interaction on the right side of the tool by setting Trigger to Drag, Action to Auto Animate, and Destination to Artboard S2. You can also add easing based on your preferences. Test this interaction by clicking on the play button on the top right side of the tool. Similarly, On the Artboard S1, Click on the Layer L2 and add a similar interaction using the same settings but in this case, we add the destination as S3. This interaction would create the Left Swipe.
Expanding Cards
The second interaction which we will be looking at is commonly seen on most apps and websites where you are going through a list or a catalog of products and when you click on one of those, you are taken into a new page with more details about the product. Auto Animate makes it super simple with animating this kind of interaction. For this interaction example let us start by creating a product catalog page. You can choose any product like mobile phone, apparel, etc., For the First Artboard S1, Create a header bar with a hamburger menu and a profile icon. Now, create a header text element with the number of catalog items as shown in the figure. Now for each of the product cards, we are going to have one image, the name of the phone, price, and ratings. We can call these cards C1 to C6. You can pick these images from the internet. Also, the best way to do this is you create the first card C1 and then use this amazing feature of XD called Repeat Grid, which is found on the top right corner of the tool panel. What this does is you can duplicate items with ease, keeping the alignment and spacing intact. Now the setup of this artboard is complete. Here we are going to animate the 2nd card (Mobile 7T), so it is important to ungroup the elements of that card so XD can perform auto animate.
Now for the second artboard, duplicate the first artboard and delete cards C1, C3-C6 and we are going to use the existing card C2 to build this page so the names of the layers are the same. First, expand the background of the card such that it covers the entire page below the header bar. We can now arrange the other items in any way we want — the basic idea being it should be different from how the card was in the artboard S1, that’s when you can see the transition. For that reason, let’s bump up the name of the mobile 25px and make it bold. Similarly, increase the size of the price and place it below the mobile name. Next, the important piece which is the image of the mobile phone. You have to increase its size significantly as shown in the figure and align it in the center.
Now arrange the ratings and the stars below this to the left. Since this artboard represents the detailed version of the product, you can now include additional information about the phone such as memory, the available colors of the phone, accessories given with the phone, etc., based on your preferences. Everything else will follow as you scroll the artboard. You can also change the header icon of hamburger, to allow the user to go back to the previous artboard S1. Remember to change the name of the icon to match the icon name in the first artboard.
Let’s go to the prototype mode now to create the actual micro-interaction. to do this select the card C2 in the Artboard S1, and drag the blue arrow to the artboard S2. In the right side interaction panel, select the trigger as Tap, Action as Auto Animate, and destination as S2. For smoother interactions, it is always good to go with Ease Out easing and a time of 0.4 or 0.6 seconds. Similarly, click on the back arrow icon on artboard S2 and drag the arrow to S1. You can use the same settings as above for this and make it consistent. Now click on the S1 and play the prototype to see the tool to make the magic. You will observe a smooth animation when the card C2 is tapped. Adjust the easing settings accordingly for making the animation smoother.
I hope the above two examples gave you a basic idea of how to create simple interactions. Adobe XD has modes in which you can create and design voice prototypes for Alexa, Siri, etc., where you can assign sentences and speak them to get specific responses.
Auto Animate Resources
Lets XD
https://letsxd.com/prototyping
This is a wonderful resource that will introduce you to basic prototyping in Adobe XD. Also, there is a series that is going to add more transitions into your designs. You’ll learn how to create basic transitions, add motion using auto-animate, use the drag trigger, and save space with overlays, etc., There are also custom kits created such as Dashboard, animated logos which you can download and break it down to see the setup.
Animations Course
https://www.skillshare.com/classes/Adobe-XD-Animations/1850234034
This is a great course you can enroll in where you will be going over the auto-animate feature in abode xd to create animations for an example email product. These videos will cover a wide variety of animation tips and tricks that can be applied to other user interfaces too. They have examples such as mask animations, button states, sliders, scrolling, text effects, overlay states, etc.,
Please clap 👏👏👏👏👏 if you like this article & check similar articles on the UX design below.
For any work-related queries check www.vamsibatchu.com or email me @vamsibatchuk@gmail.com
