easing and timing variabels on a design system

Hey, ​@vivi danino! Great questions - exciting to see that you’re using Motion. 

Are you asking if you can group your animated-related variables by enter and exit? You could name your groups “enter” and “exit” so designers know to use that set of timing or easing for in and out animations.  You could also do modes the same way if you want, so you could switch to all in animations and out animations by changing mode. Expressive, Smooth, and Standard were how we chose to organize these for Config, but you’re welcome to do it however you’d like. 

If you’re asking specifically how to configure curves for in and out, I’d take a look at some those we’ve made ourselves for each type and use those as a basis to start from. I also recommend taking a look at our Motion design fundamentals - Easing article to get a good understanding of easing within Motion.

Hi thank you for your replay!

So I made an example of how to use those variables as primitives and tokens


please look at the primitives:
they separate into 2 groups - one for easing the other for timing so if I want to add more variables, I can.

 

motion tokens separate into 3 modes (standard, expressive, smooth)  and into 3 groups of enter, move and exit. It alias it’s properties from the primitives collection.

please note that easing fast as it mentioned in the primitives collection goes hand in hand with timing fast.

 

Is that a correct way of naming and working with the new tokens? how should easing names be? Is it like I did - fast, medium, slow or in a different way? If I want to add more easing - how should I name them (it could be faster, fastest and so on but it looks as if it’s more suitable to timing and not easing)? what do you suggest?

Thank you! 
 

Hi thank you for your replay!

So I made an example of how to use those variables as primitives and tokens


please look at the primitives:
they separate into 2 groups - one for easing the other for timing so if I want to add more variables, I can.

 

motion tokens separate into 3 modes (standard, expressive, smooth)  and into 3 groups of enter, move and exit. It alias it’s properties from the primitives collection.

please note that easing fast as it mentioned in the primitives collection goes hand in hand with timing fast.

 

Is that a correct way of naming and working with the new tokens? how should easing names be? Is it like I did - fast, medium, slow or in a different way? If I want to add more easing - how should I name them (it could be faster, fastest and so on but it looks as if it’s more suitable to timing and not easing)? what do you suggest?

Thank you! 

Thanks for explaining how you’ve set up your variables, ​@vivi danino. I think naming them something that makes sense to you and your team is best - you could even note this in your design system file what each means with descriptions. 

Hmm… Instead of slow/medium/fast, you could use the type with it… something like gentle-slow, gentle-medium, gentle-fast, or something else to provide more of an idea what to expect from that particular easing. I think those make sense with your grouping, though. If you want to add more, you could have -veryslow, -veryfast, or something similar. There’s really no right or wrong way here; it’s what makes sense for you. What you have already seems pretty intuitive to me.