Adding Motion to Your Designs with LottieFiles
Let's explore how to add motion to your designs using LottieFiles. We'll discuss the importance of motion in design, and how LottieFiles can help you incorporate high-quality animations into your designs to enhance the user experience... Remember to Subscribe goo.gl/6vCw64
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
app.lottiefiles.com/?via=jesse
------------------------------------------------------------------------------------
🤝 //////////// Get my new Intro to UI/UX design course:
www.jesseshowalter.com/c/intro-to-ui-ux-design/?
🏆 //////////// Join my members community to get access to perks:
designchamps.io/
📫 ////////// Sign up for my Monthly Newsletter
www.jesseshowalter.com/newsletter
------------------------------------------------------------------------------------
🎨 ////////// I design in Figma
psxid.figma.com/ixbomhqzoiy0
🖥️ ////////// I build websites with Webflow
webflow.grsm.io/4495884
📅 ////////// I run my life with Notion
affiliate.notion.so/tokendsfahjf
🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: fm.pxf.io/c/1372011/1347628/16252
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
Пікірлер: 19
Amazing, thank you!
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.
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?
You name has both jesse and walter in it... Do you have some connection with breaking bad series ?
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
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 😊
@luishenao9192
Жыл бұрын
Holaa
Should I use Figma or After Effects to learn how to animate?
Is this the Professional or Organization paid plan?
@jesseshowalter You say animated svg are heavy, how so? How much more efficient is this?
shoutout to LottieLab, currently in Beta but I have high hope for it.
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?
@JesseShowalter
3 ай бұрын
Export video
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 ?
@arnaudakotonou6254
Жыл бұрын
Same here. And I can't disable the gif loop
the SVG-to-Lottie link no longer works
A ver traduce esto: A ver traduce esto.
@JesseShowalter
3 ай бұрын
Sorry
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.