The killer feature I’m waiting for in our modern design tools

How to prototype mouse/scroll responding animations in Adobe XD ?

Modern design tools are evolving really fast these days, each one has his own power features. However, nor Adobe XD, nor Sketch, nor Figma has a feature which allows us to prototype the interactions we love : mouse related animations and scroll animations.

As a developer, I know that most of the cool animations we see today are just a short math formula. And as a designer, I really dream to be able to prototype this kind of interactions in my favorite tools !

Cursor interaction by Skål agency — France

Why do we have to prototype these interactions ?

Prototypes help us to transmit a concept, an idea, a vision. It acts as a dialog tool with a client, a project manager and often with a developer. That’s enough to justify why we need higher fidelity prototypes : to improve the communication between each parts of the project.

For the moment, we have two choices to share these kinds of interactions :

• The time-consuming solution : Create an animated video with a motion design tool or a prototype with a complex prototyping tool
• The hazardous solution : Try to explain with words but it often ends as “When you will move your mouse, there will be a cool animation”

Now, let’s imagine a new way to easily prototype these interactions in our loved interface design tools as Adobe XD, Figma or Sketch.

What do we need to create these interactions ?

I took my favorite notebook and start to make a list of the properties that can be interesting to animate, 2 main groups did appear :

Interesting properties to play with

Then I asked myself what input values I use when I develop this kind of animations. Surprisingly, we can create next to anything with only 3 kinds of inputs value :

• Cursor position
• Scroll position
• Time since page did appear

The last one may looks useless but thank’s to this kind of input value we will be able to create a lot of different loop animation with math formulas based on the sinus or cosinus functions (yes, yes, trigonometry is useful to animate digital things)!

If we add some static variables about the environment and some math functions, these basic blocks can allow us to create incredible animations.

Building blocks which allow us to create cool interactions

Create an animation with a math formula ? I promise you, it’s not so hard

Let’s take a first exemple, if we want to create an image which follow your mouse on the x axis : you just have to say to your element that his x position has to be equal to the x position of the cursor. Then update its x position of the image each time you move your cursor. We have build our first math formula : “imagePositionX = cursorPositionX”.

It can be scary at first glance but if you take it step by step, you can do it ! Finally, I build three exemples to show how powerful it can be before diving in how to integrate it in our design tools !

Make an element follow your cursor by setting its position the exact same as the cursor position

Update the object opacity according to the y position of the cursor relatively to the screen height

Create an infinite circle movement thank’s to time and trigonometry

Say Hello to your new favorite option panel !

Following Adobe XD guidelines, implementing a new panel in the right sidebar is the most natural way to insert this feature as an option that you can enable for a shape, a text block or even a group of elements.

Do you see this new “Animations” feature at the bottom right of the screen ?

A 3 step process which allow you an infinity of possibilities by customizing each property with a math formula. We add syntax highlighting to help designers differentiate dynamic properties, static properties and constants or math functions.

New “Animations” feature for Adobe XD

Then, AdobeXD previewer will “just” have to recalculate and update these properties at a 60 Hz frequency to make our animations alive.

We can image some subfeatures to make this tool more powerful :

• Autocompletion (like code editors) to help designers find the available properties to play with and the math functions they can use
• A predefined animations library to help designers taking in hands this new feature before diving into custom formulas
• The possibility to use other elements properties values as variables to create more complex animation (for exemple : use the current x position of a card to determine the opacity of its content)
• Built-in easing functions we can use in our math formulas to help us create smooth interactions (yes, easing is also math)
• The ability to work with more complex properties like colors, 3D rotation or 3D translation. All these properties have subcomponents, therefore we can define a formula for each subcomponent as below

Play with complex properties easily by defining a formula for each component of a HSB color

When and where does this feature will appear first ?

I’m really waiting for this kind of feature which can be a new step for the prototyping era : creating complex interactions with easy-to-use tools !

Are-you interested in this feature ? How do you imagine its integration in our design tools ? Let’s talk about it on twitter @romainp_design

You like this feature idea ? Upvote it on AdobeXD uservoice to see it in futur XD updates !

Complex interactions builder - Mouse, Scroll and infinite animations

For the francophones, you can listen to my weekly UI-UX design podcast on your favorites platforms !

Parlons Design - Le Podcast

Roмαιɴ Peɴcнeɴαт