Hi everyone!
In Figma, how to rotate an object for a full 360-degree cycle?
For example, let’s say we have a “+” symbol that we want to rotate in a prototype. When we set the rotation from 0° to 360°, Figma interprets it as 0 degrees, resulting in no animation at all.
Thanks in advance.
You can create a component of the symbol and 4 variants of it. Each variant has rotation value as 0, -90, 180, 90.
Set After Delay to 1ms to jump between variants.
Use Smart Animate with value 1000ms or anything as speed you like.
Don’t forget to connect last Variant to first Variant.
If using Text, flatten it to Vector for it to work.
Lemme know if this works!
The lack of 360 degree rotation is a huge pain when building the components like loading spinners in HTML/CSS that doesn’t use in-between keyframes like Figma is now forced to use because the lack of simple 360 functionality.
Developers can’t build what they see and are forced to come up with their own cubic-bezier curves and timings which can’t match designs
Super frustrating. Especially as they clearly did extra work to convert something like 359° to -1°.
Assuming it’s so you don’t end up with wonky values when dragging to rotate…but this does not seem like a reason to make animating it 10x more cumbersome. Just use the number i put in, please.