New Figma to Lottie Files - Production ready animations in Figma

  Рет қаралды 15,723

Will Brett Design

Will Brett Design

Күн бұрын

Exciting news! LottieFiles have released an update to their Figma plugin enabling designers to easily create production-ready animation assets (LottieFiles) directly within Figma!
Try Figma Free: psxid.figma.com/4z5lcs9ss512
Visit LottieFiles: lottiefiles.com/
What is it?
LottieFiles for Figma plugin
The updated LottieFiles for Figma plugin now enables you to create animations in Figma and export them as Lottie animations. New features include the ability to auto-animate a single frame using animation presets and convert multiple frames or prototype flows into a Lottie using smart animate.
What is Lottie?
A Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets. On average, a Lottie is 600% smaller than a GIF. Learn more: [lottiefiles.com/what-is-lottie](lottiefiles.com/what-is-lottie)
What does the feature matter?
1. It will allow designers (product & visual) to design and animate using the tools they’re already familiar with (Figma & Figma Prototypes), letting them create micro animations without having to learn any other tool.
2. Motion is becoming widely popular to be used in products. And more product designers are adding it as a skill to increase the engagement of the experiences they design and build. Check out our [Why Motion](lottiefiles.com/why-motion) page to see more reasons why motion is important.
3. Lottie is a production-ready file format, so these animations which are used in design, can be implemented in the end product with just a few clicks. Lottie is already popular with developers.
How it works!
1. Install the LottieFiles for Figma plugin: www.figma.com/community/plugi...
2. Log in/register for your account using the plugin.
3. If you are whitelisted to use the plugin, you can see the ‘Export to Lottie ✨’ menu.
4. Navigate to the Export to Lottie tab on the LottieFiles plugin
1. Select a frame (or multiple frames) and click the ‘Export to Lottie’ button
2. Select an existing prototype flow from the drop-down list
5. Your selection or prototype will be animated as a Lottie animation. Enjoy!
Check out more of my videos on this channel / @willbrettdesign
You can also visit my website here: willbrettdesign.co.uk and I look forward to seeing you in the next video!
#LottieFiles #microinteractions #figma

Пікірлер: 9
@jo69123
@jo69123 8 ай бұрын
thanks for being the only video that explains the best practices
@ramenmayonnaise318
@ramenmayonnaise318 Жыл бұрын
Thank you for sharing this! This is so useful.
@BlairShen-yx6iz
@BlairShen-yx6iz Жыл бұрын
thanks for sharing!
@immanueljaeggi6684
@immanueljaeggi6684 5 ай бұрын
great video txs...one question I had is why doesn't Lottie offer editing options for looping? GIFs are cool but look tacky when not used correctly in UI. Have tried some free GIF makers but they don't produce the quality Lottie does....
@minhth9299
@minhth9299 Жыл бұрын
Can I make the animation run only 1 time, not looping? Thank you!
@Kevin-jl1rx
@Kevin-jl1rx 11 ай бұрын
how doyou get the big green screen with all the lottie animations at 1:30?
@SF_Native
@SF_Native Жыл бұрын
Does the LottieFiles window have to stay open? It’s super distracting while you work in Figma.
@WillBrettDesign
@WillBrettDesign Жыл бұрын
No you can just open the plug-in when you’re ready to use it
@SF_Native
@SF_Native Жыл бұрын
@@WillBrettDesign Thanks. Where can i find that file that has the toggle switch in it?
Figma Smart Animate Carousel + Free Design File
29:14
Will Brett Design
Рет қаралды 14 М.
Intro To Interactive Animation In Rive | UI Animation Tool
38:44
School of Motion
Рет қаралды 93 М.
Did you believe it was real? #tiktok
00:25
Анастасия Тарасова
Рет қаралды 27 МЛН
ОДИН ДЕНЬ ИЗ ДЕТСТВА❤️ #shorts
00:59
BATEK_OFFICIAL
Рет қаралды 8 МЛН
Must-have gadget for every toilet! 🤩 #gadget
00:27
GiGaZoom
Рет қаралды 12 МЛН
MEU IRMÃO FICOU FAMOSO
00:52
Matheus Kriwat
Рет қаралды 43 МЛН
What is Lottie?
1:49
LottieFiles
Рет қаралды 22 М.
Create Lottie Animations in Figma! (Bye AE 👋)
0:30
Rachel How
Рет қаралды 87 М.
New Drawing features in Adobe Express
1:58
Andy Lambert
Рет қаралды 140
Create custom Lottie Animations
9:27
Caler Edwards
Рет қаралды 82 М.
Animating liquid fab buttons in figma
0:35
Creative Web Elements
Рет қаралды 145 М.
Adding Motion to Your Designs with LottieFiles
13:46
Jesse Showalter
Рет қаралды 26 М.
Creating Lottie animations in Figma
6:45
Ridd
Рет қаралды 30 М.
Website Animations Using ONLY Figma
15:21
Flux Academy
Рет қаралды 270 М.
Телега - hahalivars
0:55
HAHALIVARS
Рет қаралды 1,9 МЛН
Эмоции💫 | Тгк: D1ashenka✨
0:22
D1ashenka
Рет қаралды 3,1 МЛН
ШУНДАЙ ЯХШИ ВИДЕОГА ХЕЧ КИМ ЛАЙК БОСМАЙДИ
0:15
Муниса Азизжонова
Рет қаралды 6 МЛН
Парень со странностями помог мальчику 🥺 #фильмы #сериалы
1:00
DixyFilms - Фильмы и сериалы
Рет қаралды 2,1 МЛН