Figma Animate

Conceptual feature for Figma.

We love Figma. But…

According to many product designers, it’s animation feature has room for improvement.

As a former animator, I wanted to bring essential animating capabilities into Figma, without losing simplicity or efficiency.

u/Deadwelsh on r/FigmaDesign

“Not sure if Figma is the best tool for animating.”

u/estadoux on r/FigmaDesign

“I was pleased I could make basic animations with Figma which did the job. The moment I tried to do anything advanced I got disappointed... If you know a decent animation software already, I'd probably stick with that.”

Create a canvas

Import file or create a new animation canvas.

For microanimations, users can add and rename in-betweens and edit objects for a simple animation workflow.

This is a simpler approach to keyframing found in more advanced animation softwares.

Add a trigger for the start frame.

For in-betweens, users can change the delay, duration, and transition. For transitions, users can edit a Bezier graph.

Turning on overlay preview mimics traditional onion skin settings.

Users can see the shadow of the layer behind the current frame, allowing for more accurate animating.

Advanced animating

For more advanced animating settings, Figma users can toggle animation timeline.