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.

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.

Watch video

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.

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.

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.

Search Lottie animations
Search Lottie animations
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.

Private animations
Private animations
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
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

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
Ship animations quickly and conveniently
Ship animations quickly and conveniently
Automatic enabling of asset links
Automatic enabling of asset links
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
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
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.

#30DaysOfFigmaLottie

#30DaysOfFigmaLottie

#30DaysOfFigmaLottie

Get started in 3 simple steps

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.

How to create Lottie animations in Figma with Figma to Lottie

How to create Lottie animations in Figma with Figma to Lottie

Design teams love LottieFiles

Design teams love LottieFiles

Design teams love LottieFiles

Design teams love LottieFiles

  • "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

  • "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

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

    Saptarshi Prakash, Product Design Manager at Swiggy

    Swiggy
  • "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

  • "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

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

    Saptarshi Prakash, Product Design Manager at Swiggy

    Swiggy