Figma to Lottie: The Long-Awaited Export Feature is Here | Export As JSON

hello designers here's some exciting news for those of you who love using lotta animations and design with figma guess what now you can convert your figma designs into lot animations with just a button click using the official Lorry files plugin Yes you heard me right this means less time spent convincing your developers to use your animations all you need to do is hand them your lottery file and they can make your animations come to life so let's not waste any more time let's dive straight into figma and learn how to use this amazing feature we'll start with creating a basic animation and then take a look at some impressive examples from latte to understand what's possible so here I have a brand new figma file so the first thing I'm gonna do is take a frame so let's take a square frame oh let's keep it at 300 by 300 in this I'm going to create something like a switch a switch animation should be good a switch toggle I'm talking about so let's take a rectangle here so one more thing to keep in mind is there are certain limitations in creating lotion missions through figma so one of it is you can't use nested frames that means you can't use a frame inside a frame right now and also components I believe so make a note of that so right now I'm just taking a rectangle probably these limitations would be fixed with coming updates and I'm gonna make it completely rounded Corners right here and let's fill it with a blue color here so something like a sky blue because I'm gonna create something like a day and night switch so that should look good and that is done and I'm going to duplicate this one and create the Inner Circle for this so you just have to keep the height and width equal and now what we're going to do is just duplicate this Frame so I'm going to duplicate it in the second frame you just have to create the next animation step so it's gonna go to the right and let's change its color to a bit of a gray that's quite simple right and now you have your frame set and this one I'm just going to duplicate it once more so this is the first state this is the second state and this would be your third state and once you're done creating your States just go to plugins and search for Lotte just click on the first one the official Lodi fly files plugin if you are using this for the very first time it will ask you to sign up just sign up and create an account it's totally free and here you find an option which says export to Lotte this is a new Option so just click on that and here you have two options right so one is export Lotte this is by selecting the frames or you can also select your flow right what are flows these are nothing but the flows that you create as a prototype so if you want to create a flow you just go to the Prototype Tab and start a new flow and Link these screens so once you link the screens you can directly get the option to select the flow from here but right now just keeping it simple I'm just going to select all the frames here and click on export to Lotte and there you go guys your animation is ready well this is quite a simple animation you can do a lot of things I just wanted to keep it quick so that you get understanding of how this is done so you just have to create your States and then click on export Lotte and it's done and you can actually import this as a gif file if you want to use it on your prototypes or you can also save it to your workspace and once you save it to your workspace so let me just show you how to do it so I click on Save and there you go now it's saved as a loaded file in your workspace and if you want to send this to your developers all you got to do is just click on this link here which says open in browser you'll be ending up on this screen right here where you can actually download and Export this as an audio file so here you have different options which is optimized the normal one so just click on the Lotte Json file and it'll basically download your new animation and all you got to do is just send this file to your developers and they can just drop it onto the app and implement the animation right so that being said let's move on to the next part of the video where I'll be showcasing you some of the amazing animations created by the Lotte community so so let me just go back to figma here and in the commentary tab you can search for figma to Lotte animation inspiration so this is a file by the official laude files community so you can see there there are a lot of things here so just click on open in figma and once you do that file gets duplicated and you'll end up on this file right here so here you can see there are different animations they have shown just for inspiration so you can Implement all these these are just some of the possibilities that they're showcasing you so to see this in action just click on your plugins select a lot of files that we just opened before and here you can see that you can just select export to Lotte so like I told you before here they have actually implemented flows so if you see the Prototype tab right here there are actually all these different flows that they created so if you do this you can directly select the flow from here and it will show you the animation so for example let's click on the Twitter heart here and there you go this is actually this animation or the frames that you see here this is an amazing micro interaction that they created and you can directly export this as a Lotte file and send it to your developers so if you want to select it by frames you can do is just select the frames right here and you can select the frames right here so you have all these frames select all your frames and click on this option export Lotte and there you go that is another method how you can view the animation and once you're good with the animation all you got to do is just save to your workspace and download it as a lotto file and give it your developers right and that's it for this video guys thanks for tuning in and I can't wait to see what amazing Lorry animations you create in figma do not forget to tag me on LinkedIn or Twitter anywhere so I would love to see them remember to like share and subscribe for More Design tips and tricks until next time happy designing foreign foreign

Channel: Design Xstream

Views: 12,834

Keywords: figma to lottie, export figma as json animations, how to export figma animation to lottie, microintraction json in figma, figma to lottie support, exporting figma as lottie animations, easy figma to lottie, convert figma prototype to lottie, figma to lottie convertor, figma lottie support, Figma to Lottie, LottieFiles Plugin, Figma Design Export, Lottie Animation Creation, Lottie JSON Export, Interactive Design with Figma, Dynamic Lottie Animations, Figma-Lottie Integration

Id: 9UbNxKVy3eE

Length: 5min 26sec (326 seconds)

Published: Fri May 19 2023