Skip to main content
Solved

What does Smart Animate mean in code?

  • November 1, 2023
  • 3 replies
  • 3656 views
Jaclyn_Hsiung

Smart Animate is a great feature for designer but how is it translated when Dev receives this? I am able to find the following code for an on/off toggle component:

// On click
// Change to: "State=On";
// Animate: Smart animate;
animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1);
animation-duration: 300ms;
// On click
// Change to: "State=Off";
// Animate: Smart animate;
animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1);
animation-duration: 300ms;

When developer see the line “Animate: Smart animate;”, will this make sense for them when they write in code?

Best answer by Celine_D

Hi Jaclyn_Hsiung,
Thanks for reaching out to the community.
After checking internally with the Dev Team, to give you some clarification, the lines that start with // are simply comments that don’t have impact on how the code behaves.
While the other lines are generated code based on the parameters of the animation. It’s likely that for a dev // Animate: Smart animate; won’t be meaningful, as it’s a Figma design term. But the rest defines the animation in CSS terms. Hope this helps!

View original

3 replies

Celine_D
Figmate
  • Celine_D
  • Community Support
  • 3381 replies
  • Answer
  • November 3, 2023

Hi Jaclyn_Hsiung,
Thanks for reaching out to the community.
After checking internally with the Dev Team, to give you some clarification, the lines that start with // are simply comments that don’t have impact on how the code behaves.
While the other lines are generated code based on the parameters of the animation. It’s likely that for a dev // Animate: Smart animate; won’t be meaningful, as it’s a Figma design term. But the rest defines the animation in CSS terms. Hope this helps!

Jaclyn_Hsiung

Thanks Celine!

Celine_D
1 person likes this
  • Celine_D
    Celine_D
Yevgen Gorbunkov

This issue does not appear to be solved.

Provided answer suggests that `animation-timing-function` and `animation-duration` lines define animation, whereas those lines only provide information about duration of animation (300ms) and the way animation progresses through each cycle (`cubic-bezier()`). However, the type of animation (is it fill/scale/opacity/position/rotation changed) and specific parameters (e.g. are we scaling target element by 5% or by 7%; are we making it 53% or 64% transparent; etc ) remain unknown.

Hence the question: is there a way for devs to access all the necessary parameters to implement it identically to prototype?

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings