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!

Reply


Terms & ConditionsCookie settings