LottieFiles has partnered with Bravo Studio 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.

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, and then simply import your Figma project in Bravo. You'll have actual Lottie animations playing natively!

Before you start you will need Figma, LottieFiles for Figma, and a Bravo Studio account and the app: Bravo Vision.

Let us take you through it step-by-step:

Step 1: Design your app in Figma

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.

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.

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.

Step 3: Prototype your App Design

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.

Step 4: Import your Figma Project to Bravo

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 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.

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. Some APIs will need authentication which Bravo says is coming soon.

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.