LottieFiles

+

Figma

Figma to Lottie:
Bring motion to Figma

Easily convert your designs or prototypes into production-ready Lottie animations with the Figma to Lottie feature. Use LottieFiles for Figma Dev Mode to get embed codes and asset links right within the tool and hand off files without hassle.

Export your Figma designs as Lottie animations, and use them across your websites or apps. Get instant access to the world's largest Lottie animation library within Figma.

Production-ready animations on Figma

Create production-ready Lottie animations

The Figma to Lottie feature lets you create captivating animations within Figma effortlessly and export them as Lottie. Choose between using animated presets or connecting multiple frames to create your animations.

AI Prompt to Vector
AI Prompt to Vector

AI Prompt to Vector

Turn text prompts into custom SVG illustrations, bypassing the hunt for perfect assets. Enjoy AI-powered layer grouping and naming to keep your designs clean and organized.

🎉 New

Raster to Vector
Raster to Vector

Raster to Vector

Convert raster images like PNGs and JPGs to fully editable vectors, saying goodbye to manual tracing. Use them in your designs right away, or after animating them with Figma to Lottie.

🎉 New

Download animations directly to your device
Download animations directly to your device

Download animations directly to your device

Download animations as Optimized dotLottie/Lottie JSON, dotLottie or Lottie JSON directly to your device. You can also export them as GIF, MP4, WebM or MOV in multiple sizes.

🎉 New

Premium animations
Premium animations

Premium animations

Access 400,000+ exclusive and fully customizable premium animations within Figma to create stunning products that your users will love.

Search Lottie animations
Search Lottie animations

Animations for every industry and use case imaginable

Search over 100,000 free ready-to-use Lottie animations from within our Figma plugin. All animations can be used for personal and commercial use.

Design prototypes just like final products

Add Lottie animations to your Figma prototypes and present the most realistic and engaging version of your designs to your stakeholders. Communicate effectively with motion and eliminate the guesswork.

Lottie Stickers for FigJam
Lottie Stickers for FigJam

Lottie Stickers for FigJam

Make your FigJam brainstorming, ideation and collaboration sessions more fun and exciting with direct access to 100,000+ free and 400,000+ premium Lottie Stickers.

Private animations
Private animations

Access your private files and your team's animation library

You can now insert your private files, and bring your team's shared library to your Figma designs for a more efficient and collaborative workflow.

Export animation
Export animation

Customize animations for your brand

Apply popular color palettes or bring your colors to match your brand style and aesthetics.

LottieFiles for Figma Dev Mode

NEW

Ship animations quickly and conveniently

Easily access your animations’ asset links and auto-generated embed codes directly within Figma and ship them in a heartbeat.

Ship animations quickly and conveniently
Ship animations quickly and conveniently
VS Code Support
VS Code Support

VS Code Support

Developers can now access animations’ links and codes right within VS Code. No more switching between Figma and VS Code!

Player Controls
Player Controls

Player Controls

Customize animation settings like play mode, direction, speed and more and generate its embed code with just a few clicks.

Automatic enabling of asset links
Automatic enabling of asset links

Automatic enabling of asset links

Forget the hassle of toggling between your workspace and Figma designs. Workspace animations’ asset links are automatically enabled when they’re inserted via LottieFiles for Figma.

Full preview of animations
Full preview of animations

Full preview of animations

You’ll be able to preview your selected animations in full motion, giving you a pretty good idea of how they’ll look and behave once they’re shipped.

Ship animations as Optimized dotLottie or Lottie JSON
Ship animations as Optimized dotLottie or Lottie JSON

Ship animations as Optimized dotLottie or Lottie JSON

You can choose to ship your animations in the Optimized dotLottie or Lottie JSON formats, ensuring your files are super tiny and will load in a jiffy.

Get started in 3 simple steps

Step 1

Install and run the plugin

Step 2

Search or create your own

Search for animations via the ‘Discover’ ‘Workspaces’ tab. Or create your own animation using the "Figma to Lottie" tab.


For Dev Mode plugin, select an animation inserted from any of your workspaces to begin.

Step 3

Insert or inspect your animation

Open, personalize and insert your animation as a GIF on the Figma canvas.


For Dev Mode plugin, choose your desired file format and copy the animation’s asset link or auto-generated embed code to ship it.

Learn all about creating animations in Figma, and get certified too!

Design teams love LottieFiles

Airbnb

"Instead of spending dozens of hours learning Xcode or Android studio, I use LottieFiles to test and share. Now I use those hours to make my animations as dope as I can."

Salih Abdul-Karim
Lead Motion Designer at Airbnb

Salih Abdul-Karim, Lead Motion Designer at Airbnb
Webflow

"Our customers can add Lottie animations to their site in seconds, without even thinking about code. The creative control this unlocks is huge."

Barrett Johnson
Product Marketing at Webflow

Barrett Johnson, Product Marketing at Webflow
Swiggy

"LottieFiles is a one-stop destination for all your Lottie needs ever."

Saptarshi Prakash
Product Design Manager at Swiggy

Saptarshi Prakash, Product Design Manager at Swiggy

Design teams love LottieFiles

Airbnb

"Instead of spending dozens of hours learning Xcode or Android studio, I use LottieFiles to test and share. Now I use those hours to make my animations as dope as I can."

Salih Abdul-Karim
Lead Motion Designer at Airbnb

Salih Abdul-Karim, Lead Motion Designer at Airbnb
Webflow

"Our customers can add Lottie animations to their site in seconds, without even thinking about code. The creative control this unlocks is huge."

Barrett Johnson
Product Marketing at Webflow

Barrett Johnson, Product Marketing at Webflow
Swiggy

"LottieFiles is a one-stop destination for all your Lottie needs ever."

Saptarshi Prakash
Product Design Manager at Swiggy

Saptarshi Prakash, Product Design Manager at Swiggy

FAQs

What is a Lottie?

A Lottie is a JSON-based animation file format that uses a textual, descriptive representation of the animation elements and movement towards a smaller file size, platform independence, resolution independence, and variable frame rate during animation playback. Open-source and free Lottie players exist on the Web, iOS, Android, Windows, and other platforms.

What is a Lottie?

A Lottie is a JSON-based animation file format that uses a textual, descriptive representation of the animation elements and movement towards a smaller file size, platform independence, resolution independence, and variable frame rate during animation playback. Open-source and free Lottie players exist on the Web, iOS, Android, Windows, and other platforms.

Where can I download the LottieFiles for Figma plugin from?

Where can I download the LottieFiles for Figma plugin from?

What formats does the plugin support importing as?

What formats does the plugin support importing as?

What formats does the plugin support exporting as?

What formats does the plugin support exporting as?

Do I need to log in to use the plugin?

Do I need to log in to use the plugin?

Do I need an internet connection to use the plugin?

Do I need an internet connection to use the plugin?

Does the LottieFiles for Figma plugin support dotLottie format?

Does the LottieFiles for Figma plugin support dotLottie format?

Does the LottieFiles for Figma plugin support GIF format?

Does the LottieFiles for Figma plugin support GIF format?

Does LottieFiles for Figma support SVG format?

Does LottieFiles for Figma support SVG format?

Can I access my Private Animations from the plugin?

Can I access my Private Animations from the plugin?

What is LottieFiles for Figma Dev Mode?

What is LottieFiles for Figma Dev Mode?

How can I access LottieFiles for Figma Dev Mode?

How can I access LottieFiles for Figma Dev Mode?

How do I use LottieFiles for Figma Dev Mode?

How do I use LottieFiles for Figma Dev Mode?

Can I preview animations before adding them from my Figma designs to a code environment?

Can I preview animations before adding them from my Figma designs to a code environment?

What animation formats can I use when shipping animations through LottieFiles for Figma Dev Mode?

What animation formats can I use when shipping animations through LottieFiles for Figma Dev Mode?

Why can’t the public animations I’ve inserted work in LottieFiles for Figma Dev Mode?

Why can’t the public animations I’ve inserted work in LottieFiles for Figma Dev Mode?

Will I be charged anything for using LottieFiles for Figma Dev Mode?

Will I be charged anything for using LottieFiles for Figma Dev Mode?

Can I collaborate with others using LottieFiles for Figma Dev Mode?

Can I collaborate with others using LottieFiles for Figma Dev Mode?

Is there support available if I encounter any issues or have questions about LottieFiles for Figma Dev Mode?

Is there support available if I encounter any issues or have questions about LottieFiles for Figma Dev Mode?

How can I stay updated with any new features or changes to LottieFiles for Figma Dev Mode?

How can I stay updated with any new features or changes to LottieFiles for Figma Dev Mode?

Install LottieFiles for Figma

Get started with the plugin and all its features for free