On this page
About SVG Animate
SVG Animate is a free Figma plugin with a paid upgrade ($9/mo) published by Tobias Strebitzer in 2021. It works in Figma Design and Dev Mode and has 76,448 users and 571 likes on the Figma Community. It ranks #5 in GIF & Video and #10 in Animation on our lists.
In the developer's words
SVG Animate allows you to create stunning animations with ease. No need for complicated workarounds and going deep into the code. Instead, you can create animations individually on every element of your Figma creation by using a simple but powerful animation editor.
How it create SVG Animations:
- Select the Frame you want to animate and click on Enable SVG Export.
- Select a node within that Frame to set up animations such as X Position, Y Position, Scale, Rotation and Opacity.
- Use the built-in live-preview to tweak your animations until you're happy with the result.
- Download or copy the animated SVG and paste it on your website.
How to use SVG Animations on my Website:
- SVG Animate uses a small web component library under the hood to make your animations work.
- This library uses GreenSock GSAP, a powerful, lightweight and performant animation engine.
- When exporting from SVG Animate, you can download or copy the snippet with the click of a button, and paste it on your website. No complicated setup needed.
What's new
Version 17 · released Sep 17, 2024
- Fix issues with Video Export
Permissions and privacy
Network access
SVG Animate can only connect to the 4 domains declared in its manifest: www.figmania.app, figmania-app.web.app, storage.googleapis.com and api-js.mixpanel.com.
- www.figmania.app
- figmania-app.web.app
- storage.googleapis.com
- api-js.mixpanel.com
Extra permissions
- Reads your Figma name and avatar
- Can offer paid features through Figma's checkout
Read from the plugin's published manifest.
Where SVG Animate ranks
SVG Animate alternatives
- 1
Motion
by Pavel Babkin
367K users5.6KFree + paid featuresAnimate UI in Figma. Export to video, GIF, SVG.
- 2
Export to GIF/Video
by Evan at CreativeFlow
311K users3KFree + paid featuresExport animations to GIF or Video in one-click
- 3
GIF Export
by Appcano
306K users2.7KFreeExport gifs or frames with gifs in them!
- 4
Animated Gif Maker
by Dustin Gamester
99K users969FreeGenerate and export animaged gifs without leaving Figma
- 5
Bannerify Banner Studio
by Hypermatic
76K users1.1KFree + paid featuresAnimate and export production ready banners from Figma to HTML, GIFs and Videos
- 6
SUPA
by SUPA Team
71K users751FreeCreate video from Figma design
SVG Animate FAQ
What does SVG Animate do?
Bring your Figma creations to life with stunning animations and seamless export to web and video. It's a Figma plugin by Tobias Strebitzer that runs in Figma Design and Dev Mode.
Is SVG Animate free?
Partly. SVG Animate is free to install and use, and a paid upgrade on the Figma Community ($9/mo) unlocks the rest.
Is SVG Animate safe to use?
Figma plugins can only reach the internet through domains listed in their manifest. SVG Animate can only connect to the 4 domains declared in its manifest: www.figmania.app, figmania-app.web.app, storage.googleapis.com and api-js.mixpanel.com. As with any plugin, check the developer's privacy policy before using it on client work.
How do I install SVG Animate?
Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.
What are the best alternatives to SVG Animate?
By user count, the closest alternatives are Motion, Export to GIF/Video and GIF Export by Appcano. Compare all of them on the best Figma plugins for gif & video.
Built this plugin?
Use this page as a landing page for SVG Animate: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.
Style
Label
Size
Code
<a href="https://figmaplugins.co/plugins/svg-animate/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="SVG Animate on figmaplugins.co" width="220" height="48"></a>