Figma Motion to SVGator project

Move your Figma Motion animations into SVGator in a few clicks.

Drag & drop

Upload the SVG exported from Figma Motion and we'll prepare it for SVGator.

or

SVG only · Max 7 MB

Trusted by teams at

Toptal logoToptal logoGlobant logoEnvato logoWiX logoSpotify logoCanva logoWebflow logo

How to import Figma Motion into SVGator

Keep the motion you designed in Figma and take it further.

Exporting a Figma Motion animation as an animated SVG

1. Export from Figma

Export your Figma Motion animation as an animated SVG file.

Adding the animated SVG file to the upload box

2. Add it here

Drop the .svg file into the upload box or upload one from your computer.

Opening the animation in SVGator as a new project

3. Open in SVGator

Your animation opens in SVGator as a new project, where you can edit it.

Make your Figma animation interactive

Add hover, click, and scroll triggers in SVGator that work right inside the exported SVG.

Start for free

Why choose SVGator

  1. Your keyframes come along

    Supported keyframes land on SVGator’s timeline, so you don’t animate them again by hand.

  2. Nothing to install

    The conversion runs in your browser, with no plugin or extra software.

  3. Room to refine

    Adjust timing and easing, or add effects like shape morphing to any element.

  4. Formats Figma doesn’t export

    Export to Lottie, React Native, or Flutter, along with SVG, GIF, and MP4.

SVGator is for

Product, front-end, and growth teams

Three roles that move motion from Figma to production.

Icon representing product designers

Product designers

Ship the exact motion you designed in Figma.

Icon representing front-end developers

Front-end developers

Get an animated SVG file to drop into the build.

Icon representing growth marketers

Growth marketers

Turn Figma campaign animations into files for landing pages and ads.

Keep going with SVGator

Features that help you make and ship your next animation.

Converting a PNG image into an SVG file

PNG to SVG converter

Turn a PNG or JPG into SVG shapes that keep the original colors.Use tool →Converting an Adobe Illustrator file into an SVG

AI to SVG converter

Convert an Adobe Illustrator .ai file to SVG without opening Illustrator.Use tool →Sending designs from Figma to SVGator with the Figma plugin

Figma plugin

Developers in your team can download or copy the code of the production-ready files.Learn more →Optimizing an SVG to a smaller file size

SVG optimizer

Optimize static and animated SVG files before they go live, so your pages load faster.Use tool →

Frequently asked questions

1. Where do I get the CSS-animated SVG?

You create it in Figma. Animate your design with Figma Motion, export it as an animated SVG, and upload that file here to turn it into a new SVGator project. You can also create the animation directly in SVGator.

2. Will every animation convert?

Position, rotation, scale, skew, opacity, fill and stroke color, their opacities, and stroke width all carry over. Linear, cubic-bezier, and step easing come with them, along with delays and any number of keyframes per layer. A gradient that changes into another gradient doesn’t convert yet. Neither do layers whose loops differ in length or repeat count, since an SVGator project runs on a single timeline. In both cases, the tool stops and shows an error message. An SVG without CSS animation opens as a static project you can animate in SVGator.

3. Does this replace the SVGator Figma plugin?

No, the two do different jobs. The SVGator Figma plugin brings static designs from Figma into SVGator, while this tool converts an animation you already exported.

4. Do I need an SVGator account?

Yes, SVGator saves the converted animation as a new project in your account, so you’ll be asked to sign in.

Ready to build your next animation?

Create motion from scratch in SVGator, with or without a Figma file.

Start animating