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.
Demo
Inspect in Figma and on the web
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.
<img src=”https://cdn.svgator.com/images/2023/03/stopwatch-svg-animation.svg”>
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 soonOther 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.