Will Brett Design
Will Brett Design
  • 46
  • 332 629
New Figma to Lottie Files - Production ready animations in Figma
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/plugin/809860933081065308/LottieFiles
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 youtube.com/@UCqxflVmeVmq4i3ZFVnDET_A
You can also visit my website here: willbrettdesign.co.uk and I look forward to seeing you in the next video!
#LottieFiles #microinteractions #figma
Переглядів: 16 499

Відео

iPhone 14 Pro Dynamic Island - Free Figma File with animated components
Переглядів 1,7 тис.Рік тому
Try Figma today: psxid.figma.com/4z5lcs9ss512 Hey everyone and welcome back to another video. This video is all about the new iPhone 14 Pro with Dynamic Island file I've created and am giving away free in the Figma community. You can download it free here: www.figma.com/community/file/1156553188475213519 This file contains components for the iPhone 14 Pro including the following: Deep Purple, G...
Figma Smart Animate Carousel + Free Design File
Переглядів 15 тис.Рік тому
Try Figma today: psxid.figma.com/4z5lcs9ss512 In this video, you will learn everything you need to know how to make an interactive carousel prototype using Figma, Interactive components, and smart animate. Link to the free design file: www.figma.com/community/file/1151139689336933687 In this video I use a couple of plugins, however, these are not required: • Unsplash • Generate Placeholder Text...
Animated Prototype and Figma Hack Tutorial + Free Figma Design File
Переглядів 4,7 тис.2 роки тому
Try Figma today: psxid.figma.com/4z5lcs9ss512 Free Figma Design File: www.figma.com/community/file/1143501717621706624 In this video we will be taking the designs that we created in part 1: ua-cam.com/video/XKJxO8DHf_k/v-deo.html where we designed a start and login screen and we will learn how to create an animated prototype. We will start by creating a prototype the traditional way and learn w...
Let's design an App Login Screen + Free Figma Design File
Переглядів 3,4 тис.2 роки тому
Try Figma today: psxid.figma.com/4z5lcs9ss512 Free Figma Design File: www.figma.com/community/file/1143501717621706624 In this video, we will be designing and creating an app login screen User Interface (UI) in Figma. This is part 1 of a series. In part 2 we will be animating the transition between the two screens, as well as looking at a secret Figma hack to achieve multiple simultaneous Indep...
6.3: Lottie code example
Переглядів 3882 роки тому
6.3: Lottie code example
6.1: Using the LottieFiles After Effects Extension YouTube
Переглядів 2462 роки тому
6.1: Using the LottieFiles After Effects Extension UA-cam
6.2: Using the LottieFiles online preview tool
Переглядів 1002 роки тому
6.2: Using the LottieFiles online preview tool
2. Intro to After Effects
Переглядів 1312 роки тому
Part of a business tutorial series. If you would like to view the public series you can check that out here: ua-cam.com/play/PLrM44wxguw3ugSCtgQf764kK2hYJPc0GK.html In episode 2 You will get a basic introduction and overview of After Effects. We will be learning how to design a UI component in Figma, plan our animations and then even create an animated interactive component to use throughout ou...
FaceID Animation Tutorial + Free Figma Design Files
Переглядів 7 тис.2 роки тому
www.figma.com/community/file/1127186718141734982 This free tutorial will guide you through the entire process of animating the included FaceID design. Using Figma you will learn to animate, export and create a Lottie animation file of the FaceID biometric. Included are the design files free as well as interactive components for both success and fail states. There is a step-by-step guide to inst...
5: Animating in After Effects
Переглядів 2692 роки тому
5: Animating in After Effects
4.2 Option 2 Recreate design in After Effects
Переглядів 3442 роки тому
4.2 Option 2 Recreate design in After Effects
4.1 Option 1 Use AEUX to export design to After Effects
Переглядів 3,7 тис.2 роки тому
4.1 Option 1 Use AEUX to export design to After Effects
3.3 Create an interactive component in Figma to represent our animation in our Figma files
Переглядів 1,2 тис.2 роки тому
3.3 Create an interactive component in Figma to represent our animation in our Figma files
3.2 Plan our animation in Figma
Переглядів 1322 роки тому
3.2 Plan our animation in Figma
3.1 Let’s design our Toggle in Figma
Переглядів 1322 роки тому
3.1 Let’s design our Toggle in Figma
1.2 What is a Lottie?
Переглядів 4382 роки тому
1.2 What is a Lottie?
1.1 What you will learn
Переглядів 3192 роки тому
1.1 What you will learn
How to animate a Touch ID - Free Design Included!
Переглядів 5 тис.2 роки тому
How to animate a Touch ID - Free Design Included!
I've been nominated for a design award
Переглядів 1,2 тис.2 роки тому
I've been nominated for a design award
The Ultimate UI Kit and Design System for Figma!
Переглядів 16 тис.2 роки тому
The Ultimate UI Kit and Design System for Figma!
How to create a checkbox in Figma
Переглядів 7 тис.2 роки тому
How to create a checkbox in Figma
Episode 5 - Exporting a Lottie - UI Motion Design
Переглядів 1,4 тис.2 роки тому
Episode 5 - Exporting a Lottie - UI Motion Design
Episode 4 - Animating in After Effects - UI Motion Design
Переглядів 1,2 тис.2 роки тому
Episode 4 - Animating in After Effects - UI Motion Design
Episode 3 - Figma to After Effects - UI Motion Design
Переглядів 2,6 тис.2 роки тому
Episode 3 - Figma to After Effects - UI Motion Design
Episode 2 - Design and Animate in Figma - UI Motion Design
Переглядів 6 тис.2 роки тому
Episode 2 - Design and Animate in Figma - UI Motion Design
Episode 1 - Introduction - UI Motion Design
Переглядів 7 тис.2 роки тому
Episode 1 - Introduction - UI Motion Design
How to create a dark mode design in Figma - Fast Method
Переглядів 8 тис.2 роки тому
How to create a dark mode design in Figma - Fast Method
How to create Loaders and Loading Animations in Figma
Переглядів 50 тис.2 роки тому
How to create Loaders and Loading Animations in Figma
How to make a 3D cube in Figma
Переглядів 21 тис.2 роки тому
How to make a 3D cube in Figma