# Build Native Apps using Lottie Animations in Figma with Bravo Studio *By LottieFiles · May 1, 2020* Turn Figma designs with Lottie animations into native apps instantly with Bravo Studio. --- LottieFiles has partnered with [Bravo Studio](https://www.bravostudio.app/) to help users add Lottie animations while converting their Figma prototypes into native iOS and Android apps instantly, with absolutely no code. What you see on your phone is already a fully native app with its Lottie animations implemented. ![](https://assets-blog.lottiefiles.dev/2021/04/ezgif.com-gif-maker--29-.gif) While Lottie has already made animation implementation exponentially easier for apps, Bravo helps take things one step further. All you need to do is add Lottie animations as GIFs to your Figma designs using the [LottieFiles for Figma plugin](https://lottiefiles.com/figma), and then simply import your Figma project in Bravo. You'll have actual Lottie animations playing natively! Before you start you will need [Figma](https://www.figma.com/), [LottieFiles for Figma](https://lottiefiles.com/figma), and a [Bravo Studio](https://www.bravostudio.app/) account and the app: [Bravo Vision](https://www.bravostudio.app/download-bravo-vision). Get LottieFiles for Figma Let us take you through it step-by-step: ## Step 1: Design your app in Figma ![](https://static.lottiefiles.com/blog_media/tnLnrehLWs8z3q4V6moWECiSR1skgVGUFIbsg46I.png) Figma is a brilliant tool for designing in general and it has proven itself time and time again especially when it comes to product design. Bravo renders Figma components considering their dimensions in reference to the specific device dimensions, which means it uses percentages to adapt to each screen. Just ensure that each screen has its own frame. ## Step 2: Insert Lottie Animations Using the LottieFiles for Figma plugin you can export Lottie animations into your designs as GIFs. Either drag and drop your own custom animation Lottie file to the plugin or simply choose from the 1000s of free publicly available community-made Lottie animations. ![](https://static.lottiefiles.com/blog_media/EryFKlSAbG5lWYcnHmiqbg9Zvz84bjIpuDWTZko2.png) It is important to note, that you must not rename the GIF as the default naming standard includes the JSON url to that particular Lottie animation and it is how Bravo is able to read the Lottie once you import your Figma file. Renaming this will result in your Lottie animation either not looking like it should, or not being there at all. ![](https://static.lottiefiles.com/blog_media/j9uzkESsWuVhdn9a9Q8vyeuvYfo1hp98M13v1JFv.png) _Here is what the Lottie GIF naming standard will look like on Figma._ Also don’t worry that your GIF doesn’t have a transparent background, your animation’s background will be transparent when it appears as a Lottie in the app. ![](https://static.lottiefiles.com/blog_media/TvlGLswtHA2N9CEJsX7qcv6FyYHS9VFInhcirmVW.png) ## **Step 3: Prototype your App Design** ![](https://static.lottiefiles.com/blog_media/iUv60VTqeVSZeYLSySRmjHrLAzcHtzAZ01d9Iuri.png) _In this mockup you can see the interactions have been set up using the Figma prototype feature._ At current, the Figma API doesn't provide all the prototyping properties. However, you can implement some of these features using [Bravo Tags](https://www.notion.so/Bravo-Tags-Master-List-145bec845f0b4afaa9e3bb8321b218a8). ## **Step 4: Import your Figma Project to Bravo** ![](https://static.lottiefiles.com/blog_media/weOVc147R5NPOfRuFIBPLsI0TQxRJxiGWDFo68AJ.png) Once you’re all done with your app design on Figma, copy the link of your Figma project and head on over to Bravo. Under the ‘Projects’ section of your account you’ll see a button ‘Import Figma File’. Click it, paste your link in, and hit ‘Import’. ## **Step 5: Preview your App on Mobile** Using the [Bravo Vision app](https://www.bravostudio.app/download-bravo-vision) on your mobile device, open your project and preview it on the app. Unlike the GIFs in your Figma design, these Lottie animations will be much higher quality and will run smoothly. ![](https://assets-blog.lottiefiles.dev/2021/04/ezgif.com-gif-maker--30-.gif) And in case you were wondering, the Bravo Vision app is built with Kotlin for Android and Swift for iOS. Its backend is built with NestJS on NodeJS and deployed on AWS, and the frontend is built using ClojureScript using Reagent and Re-Frame. You can call any API you like using Bravo's Data Library and bind the data to your app design. For developers building more complex apps with external data sources, integrating [data pipeline tools](https://hevodata.com/blog/data-pipeline-tools-list/) can help automate data flow between your app and various services. ## **Step 6: Download your App and Upload it to the App Stores** Download your app bundle package and upload your app to the iOS App Store or Google Play Store. ## For more information on Lottie and Bravo Studio learn more [here](https://www.bravostudio.app/friends/lottiefiles). ![](https://static.lottiefiles.com/blog_media/imX67M2jwDa5HYTjw3A7AikI2XX2k8brdkpzNcUD.png) --- ## Related Articles - [Lottie/dotLottie vs. GIF: Choosing the Right Animation for You](/blog/working-with-lottie-animations/lottie-vs-gif) - [Introducing Motion Copilot 2.0 in Lottie Creator](/blog/working-with-lottie-animations/introducing-motion-copilot-on-lottie-creator) - [Lottie Creator 2.0: A Powerful Web-Based Lottie Animation Tool](/blog/working-with-lottie-animations/lottie-creator-a-powerful-web-based-lottie-animation-tool) - [Introducing Motion System: One Workflow for Animation That Actually Ships](/blog/working-with-lottie-animations/introducing-motion-system-one-workflow-for-animation-that-actually-ships)