< Back

2D motion graphics

Below you’ll find how to embed different formats of motion graphics. If a format is missing, please chat with us.

GIF animations

GIF files are natively supported by Figma. Simply drag-and-drop them into your Figma canvas and place them in your webpage.

GIF files consume storage space in your figma.to.website plan.

Lottie animations

Using LottieFiles Figma plugin

figma.to.website supports the integration of the LottieFiles Figma plugin.

Use the LottieFiles Figma plugin to insert an SVG or GIF version of your Lottie file.

You will see them as GIF or SVG in Figma, but figma.to.website takes care of publishing them to the web as the corresponding Lottie files.

Demo Inspect in Figma and on the web

Using custom code LottieFiles has developed a Web Component called <dotlottie-wc> to embed Lottie animations.

You can use custom HTML in a layer to use this Web Component.
Create a layer and name it using the HTML code for the <dotlottie-wc>:

<dotlottie-wc src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie" autoplay loop>

Demo Inspect in Figma and on the web

When the <dotlottie-wc> Web Component is detected on the page, figma.to.website will automatically add the JavaScript code required to run the lottie animation in the page. You don’t need to manually add any <script> tag to load dotlottie-wc.js code.

Check out LottieFiles Developers Guide for more details on <dotlottie-wc> capabilites.

SVG animations

Figma doesn’t support SVG animations natively.

Use custom HTML to load your SVG animations in a frame by naming the layer as an HTML image.

Demo Inspect in Figma and on the web

This currently requires that you host the SVG files on another server as we currently don’t offer custom file hosting. Coming soon.

Rive animations

Coming soon

Other formats

If your motion design format is not supported natively by figma.to.website, you can still add custom HTML to your page to integrate it.

If you need help, please join our figma.to.website chat.