Skip to main content

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?

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!

Thanks Celine!

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