Adding Motion to Your Designs with LottieFiles

We'll walk through how to access a library of Lottie animations, build your own loader in After Effects, export your animation to Figma, and collaborate with your team. We'll also cover how to edit your Lottie animation with the Lottie Editor, organize your files, and download and optimize your files in the dotLottie format. Finally, we'll touch on how Lottie can be integrated with multiple platforms such as Framer, Webflow, Bubble, Adobe XD, ProtoPie, and FlutterFlow. If you want to learn how to add motion to your designs and take your UI designs to the next level, this video is for you! #lottiefiles #uidesigntutorial #motiondesign

🖥️ ////////// Start using LottieFiles Today
------------------------------------------------------------------------------------
🤝 //////////// Get my new Intro to UI/UX design course:

🏆 //////////// Join my members community to get access to perks:

📫 ////////// Sign up for my Monthly Newsletter
------------------------------------------------------------------------------------
🎨 ////////// I design in Figma

🖥️ ////////// I build websites with Webflow

📅 ////////// I run my life with Notion

00:00 Introduction
01:31 SVG to Lottie Files
02:46 Free Animations
04:32 Custom Animations
05:29 After Effects
08:01 Lottie Files
10:27 Sharing
12:13 Figma

[rob-zg]

As an animator of 62yo I am catching up with all this latest tech. Great tutorial. And you pronounce GIF correctly ;)

[SouEuMesmoAqui]

Should I use Figma or After Effects to learn how to animate?

[mr.bubble]

You name has both jesse and walter in it...
Do you have some connection with breaking bad series ?

[mustafa_karlos]

I have created a set of component with animation and put that in to one frame as you showed here. guide me in exporting it as a MOV, mp4

[iDoRecall]

Thanks for making the clear case for using Lottiefiles. Can you programmatically and dynamically alter a lottiefile JSON in an app? As a simple example, could you change its bounding box?

[codex]

Thank you very much for the tutorial. I was wondering if you could provide some information on button icon animations that are triggered only when hovering over or clicking them.

[SarahBeckC]

Is this the Professional or Organization paid plan?

[world_changers]

Me too Jesse. I'm currently learning Spanish and it's been fun so far.

Well, at least I now know how to say hello 😊

[countchivas]

@jesseshowalter You say animated svg are heavy, how so? How much more efficient is this?

[abdullahalsiam]

Dose anyone know how to add lottie animation to behance or other portfolio projects without recording video? i'm seeing few people using lottie files like its animating on the picture, how they do that?

[olumideaanu]

Hi. Thanks for this. Sometimes when I download gif and use it in my figma, the animation speed reduced and it animates slow. What can I do ?

[MarkDiSciullo]

the SVG-to-Lottie link no longer works

[patrikmedia]

shoutout to LottieLab, currently in Beta but I have high hope for it.

[octaviohimself]

A ver traduce esto: A ver traduce esto.

[cody]

Thought this tool was cool but then I tried to render a really simple 3D spiral of text and it couldn't handle it - garbage.