Motion
Our Motion system improves the narrative of our products. The movement, in addition to attracting attention, guides users with a more dynamic, fluid and intuitive experience, helping them to progress and interact with our platforms to be more productive.
We differentiate between two types of Motion:
Transitions: They are CSS properties that help to more smoothly render any movement or change of state associated with our components or between UI elements that have a spatial or navigational relationship.
Custom animations: When it is not possible to generate your animation with a combination of transitions/animations by CSS, we will use animated .json with the export to Lottie.
You can see the differences with visual examples here
Transitions
Our components/screens can have associated transitions, generating interactions/microinteractions. You can use several types, customize the duration, its acceleration, its direction, delay or loop.
Together, they choreograph our products. By correctly combining its properties, you can generate an experience that represents your brand and make users identify with it.
Transitions Presets: The basics
We contemplate the most common transitions for SUi, we can expand the catalog in the future if necessary.
Transitions Presets: Combos examples
You can combine the above presets according to your needs.
How it works?
Transitions are Presets defined with customizable properties according to your vertical. Below you will see the customization properties that you can modify.
You can also set various properties for your transitions/animations depending on your needs.
Properties
Duration
We tokenize the durations so you have more freedom when applying them. We generate 9 standard durations but Figma by default associates 300ms to any transition (except for the new Spring Animations Timing functions).
You can associate a different speed token in your vertical to adapt them to your brand, both in the components and between the elements of your vertical that have a spatial or navigation relationship. By default, SUi contemplates pre-established times. Even so, keep in mind the Do's & Don'ts that you will find below for your customization.
{% embed url="{% embed url="https://www.figma.com/proto/B2rY1jzzrP0uDdRE6GPdWQ/Motion?page-id=335%3A571&node-id=335%3A1496&viewport=-5438%2C-81%2C0.77&scaling=scale-down&starting-point-node-id=335%3A1496&hotspot-hints=0&hide-ui=1" %}" %}
Timing function
We advise applying Ease timings whenever possible to make your animations shine. You can also adjust its properties according to your brand, although by default there are the beziers that Figma will provide when you apply these properties, so it will make your job easier to keep them the same but... up to you!
Timing function Easing Back (from Figma)
Figma provides these Timing options and UX can make use of them.. Easing back, creates a bounce in the animation that serves as anticipatory action. The animation exceeds the initial keyframe value and then speeds up when it reaches the end.
Timing function: Figma Spring Animations
Figma allows you to create these other Timing properties (linked to Transitions Presets like the rest of Time functions) where their configuration is different: Stiffness, Damping & Mass that are generated through Keyframes from FE.
Application examples of Figma Spring Animations as transitions
Examples of use that Figma recommends on Spring Animations such as transitions or animations.
Direction
Up/Down/Left/Right direction props.
Delay
If you need to delay the playback of the transition/animation, you can apply a delay as long as you think necessary without limitations.
Loop
You can create loops on your animations. For example, a Spinner we don't know how long it will be on the screen, so it must have the Loop prop active.