Zest makes beautiful and performant CSS animations straight from Figma files.
You can find Zest in the Figma Community
Building an animation in Zest is easy.
Create a starting “frame” in Figma, then duplicate it for each keyframe in the animation.
Connect your frames using Figma’s prototyping tools. Zest will end the animation after it loops or reaches a frame without any further interactions.
Right-click on the first frame of your animation and open the Zest plugin to generate the animation.
Zest will open up, with a preview of the animation, SVG markup and CSS animation ready-to-go.
Supported Animation Features
Zest is in it’s early days, it supports a handful of types of animation features including:
- Opacity (for zero value, use 0.1%!)
- Rectangle Scale & Position
- Circle Scale & Position
- Path Scale, Rotation and Position