During Adobe MAX 2019, Adobe did dropped a bomb on their consumers by introducing the butt-load of new features that accelerates the work-flow in Adobe XD significantly.
Those who don’t know about Adobe XD
Adobe XD is a powerful, collaborative, easy-to-use platform that helps you and your team create designs for websites, mobile apps, voice interfaces, games, and more. — Adobe
New Features — Adobe XD November 2019 Update
1. CoEditing — beta
It allows you and other designers to work together on a same XD document at once in real-time.
2. Document history
Starting now, Adobe XD lets you check the previous version of your XD File so that you can check how your project evolved and you can effectively extract the components from the older version of documents.
CoEditing and Document History
3. Share mode
Adobe revamped the header menu of XD itself, giving us a separate Share Section which is specifically focused on sharing and presenting documents to the clients or other designers.
Adobe simplified and categorized the sharing preference based on how you want to share your work. These 5 main sections are available starting now.
4. Component States — with Hover State
Adobe had a component system, was under the name of Symbols, in place for the past 1 year now.
With November 2019 release, they enhanced the system so that you can design multiple states of a singular component to specify what component will look like when certain actions were performed — all under the same component. So bye-bye, multiple components for each state.
On top of that, they added the functionality to trigger a transition using Hover interaction so that If a user hovers over a component: It triggers a transition. So Hello, Micro-interactions.
And that is the feature we’ll be focusing today’s guide. I’ll show you how to create a small hover interaction using Component State.
Creating Hover Interaction
In this small how-to guide, I’ll create a small toggle button that triggers when I hover over it.
1. Create your button
Use your pre-defined Adobe XD skills and create a small button and give it some personality because even inanimate objects need some personality.
2. Make it into Component (CTRL+K)
By now, you should have something like this, multiple layers.
Because State transitions (Hover) works with Components, as Components contain multiple states now.
It is necessary to convert your group layers into a single component. To achieve this, you have 2 options to explore:
a. Select all your layers , and Use the Shortcut — Ctrl + K
b. Go to the right section of your XD Screen, with all your layers selected and click on this small + sign to make it into Component.
Now you should have something like this. A Component with a default State.
Pro-tip: Use the Shortcuts defined, it will make your life easier, Trust me.
3. Create a new Component State
Now that you have a default state of a component. The next step is to create a new Hover state. To create this,
a. Highlight your Component
b. Go to the right side of the window — Component(Master) section, click on + icon.
c. A small popup will come up, which asks to create a New State or Hover State
d. Click on Hover State and give a name to your hover state or leave it as it is. because naming is hard #DeveloperProblems.
So now you have a Component with 2 states: Default and Hover State.
Things to understand — As shown in the diagram, Each state of a component will have its visual and characteristics, which can transition from 1 state to another based on the interactions defined.
Default State has its visuals and characteristics. Hover State will have it own and so does other states of the same component.
For this next step — Highlight your Hover state of the component. Because, All the changes will be made only in the Hover state.
4. Modify your component for Hover state
Now that you have Hover state highlighted, its time to modify our Toggle button to create a visual of what it will look in hover mode.
Change your colors, text, opacity and any characteristics you want to modify. It’s all about creating visual of how your component will look into Hover mode.
Here’s what my toggle button looks like in Hover mode.
For Comparison, it looks like this in Default state:
Now that you have modified your component in the hover state. Click back to the Default state to see if your visual in default state is still the same or not.
Both states should have different visuals and characteristics, just as I showed in the images above.
If, for some reason, You messed up, just undo back (CTRL +Z) till the point it was fine and follow these steps again.
5. Setting up Animation/Transition Parameters
Switch to Prototype section of the Header Menu and select your component.
Now select the default state of your component. As you can see, there are multiple options available.
By Default, State transitions in the Adobe XD are taken care by Adobe XD’s Auto-animate functionality. It will automatically detect the changed parameters of path and shapes and interpolates between them.
As you can see, The trigger for this interaction is Hover.
You can modify this trigger to add your custom trigger such as Tap, Drag, Time, etc. This way you can create state transitions as per your requirement.
In the destination part of the section, it is saying Hover state. It means, that on encountering our Trigger, Component will travel to the Hover State.
You can modify the Action, currently Auto-animate, as per your requirement. It includes transition methods such as Dissolve, Slide Left, Slide Right, etc. The same goes for Easing, Duration and Scrolling Position.
Now that you are happy with your Animation and Transition settings, Select your Default State before testing your animation.
I think it is the bug in Adobe XD itself that I have to select Default state of the component before starting the Animation.
Because If I don’t, Adobe XD take the current active state as the default state.
6. Test your Animation
Now with your default state selected, you are ready to test your Animation. Press the play button, hover above your Toggle button and see it in action.
Tweak the settings in the Prototype section to fit your needs. Manipulate the shapes and visuals in the component to create variations of animation.
And this is how you can use Adobe XD’s powerful Component states and use them to create awesome effects and Micro-interactions.
Hover animations are a little tricky at first. But with more experiments, you can create different hover interactions. For example
I hope this how-to guide was easy to follow and helpful to some. If not, then I apologize and do let me know in the comments what part was not clear at all or what issues you faced. Also, If there’s anything you want to add, Let me know.
If it is helpful, do send me links/videos of your work, I would love to see what experiments you were able to pull off with this new Adobe XD Update.
I try to share whatever I know with as many people as I can. Please go through more of my publications and see if anything catches your eye. Or any suggestions would be appreciated.
Come interact with me on my Instagram
View more of my work on my website