How to embed Lottie files in Principle
Animate Prototypes without After Effects — Part 2
Continuing what we started in part 1 of this post series, this time I will explain how you can embed ready animations to create AWESOME proof of concept prototypes in Principle for mac. My prototyping tool of choice.
How to embed Lottie animations in Principle
I know; You can’t embed JSON files in Principle. But you can embed videos. And lucky for us, we can download most Lottie files as GIFs which we can later convert into MP4 videos.
1. Download a GIF of the lottie animation you choose
See how there is a “Convert to GIF” button above the preview? click that, it will take you to a screen where you can choose GIF size and background color then download.
🚨Don’t forget to download the JSON file for your developer!!!
2. Covert GIF to MP4
Once you have your downloaded GIF, we need to convert it to MP4 to be able to insert it into principle. You can either do that using FFMPEG (my personal choice) using the following command:
ffmpeg -i inputgif.gif -movflags faststart -pix_fmt yuv420p -vf “scale=trunc(iw/2)*2:trunc(ih/2)*2” outputvideo.mp4If you don’t have ffmpeg, you can get it here. It is truly the best thing that ever happened to audio & video conversion.
Or you can use ezgif for a quick solution under some size limitations.
3. Insert video into principle
- launch principle & open the prototype into which you need to insert the video.
- drag and drop the mp4 file you just created into the screen state where it should exist, you can test the motion in the preview window.
- I chose a heart animation and changed the color to match the branding of the app.
That’s it!! can’t be easier if it tried.
Bonus — But what if we wanted the prototype to navigate to another screen automatically after a component finishes its state transition?
Ok let’s assume that we want the (x) button above to shrink and disappear on tap, this should send a message to the prototype to close the onboarding overlay and show the homescreen.
To do that:
- select the x and the oval behind it, group them and create a component.
- In the component screen, create the two component states, and connect the first state to the second on tap.
- select second state and choose “Auto” as trigger and get it to send a message to the homescreen artboard.
Check the GIF below to see it in action ⬇️
Why Principle of all prototyping tools
having tried several prototyping tools, I found that each had it’s use case. And when you need to wow a potential client with a prototype that looks very professional without wasting so much time on a proof of concept: Principle is your guy.
It does have a few issues though, like being strictly available for macOS, and the inability to share a prototype with someone unless they have Principle Mirror app on iOS. But that does not mean that it is not a seriously great prototyping tool.
I hope this helps you a little in your prototyping workflow 🥰. Lots of love. Keep designing!
To learn how to embed lottie files in Sketch, Xd and Figma check part 1 of this series:
To learn how to embed Lottie files in Webflow, Adalo & Bubble.i check part 3 of this series:
