Create animated mockups in seconds and share them with the world

What’s fantastic about Figma is that we can design, prototype, and collaborate within a single tool. However, when it comes to animations, Figma or not, it’s a mess for both designer and developers…

From a designer perspective, prototyping with Lottie animations was long and ineffective. Now with Figma ❤️ Lottie, you can create animated mockups using your Figma canvas and your Lottie animations.

The magic happens here:

👉 chicken.tacos.wtf

Here’s why it’s exciting:

You can finally see how your animation looks in the UI without having to code anything

Change your Figma or Lottie file, the UI and animation specs automatically update. Say hello to crazy fast iterations!

Share your work with other designers to get feedback, and with developers for a better handoff process

It’s free, and soon to be open source

How it works

1. Setup your animation in Figma.

In Figma, create a frame named @lottie. That’s where your animation will be rendered. It gets its size and position from that rectangle.

2. Go on our website: chicken.tacos.wtf

There, you’ll be able to connect yo your Figma account and paste your Frame link. Then, upload your Lottie files and enjoy your animated mockup 🎉 Edit your animations files or Figma canvas and update the render until you’re happy with the result.

3. Preview and share.

Once you’re happy with the result, you can hit the share button to create a nice full-screen preview of your animated mockup and send it to your friends.