Published on December 10, 2023
Figma is a messiah for designers, content writers, and project managers alike when it comes to product design. It works on any platform and collaboration is made simple and familiar. To put the cherry on top, embedded Figma files provide real-time updating. To put it all, it’s amazing when it comes to enhancing design teamwork.
And Figma’s parter-in-crime is Bravo, a tool that renders Figma components based on their respective dimensions in reference to the particular device dimensions. Bravo preaches accuracy to help adjust Figma in an assortment of devices. It ensures that each screen has its own specific frame.
Step 1: Make Lottie Animations Meet Figma
We start by making Figma meet Lottie. By using the LottieFiles for Figma plugin, you can export and implement Lottie animations into your custom designs in the format of GIFs. When it comes to adding your preferred free Lottie animation, you can either drag and drop your custom Lottie animation or you may flick through the 1000s free public Lottie animation made available on the LottieFiles website.
However, the GIF must not be renamed since the default naming standard includes the JSON URL, and renaming it might either cause it to be altered or worse, be non-existent. The URL enables Bravo to read the Lottie as soon as it’s imported to the Figma file. So, it’s essential the file is not renamed.
Furthermore, you shouldn’t be fretting in case your GIF has an absence of a transparent background. It wouldn’t create a discrepancy with the background of the app or the site. When it appears as a Lottie in the app or website, the background can be made transparent.
Step 2: Prototype your App Design
Despite the limitations of the current Figma API, Bravo Tags enable the implementation of certain prototyping features
Step 3: 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 that would read ‘Import Figma File’. Click it, paste your link in, and hit ‘Import’.
When you’re done designing on Figma, you would need to copy the link of your project and move to Bravo. You’ll come across a button under the ‘Projects’ section of your account that would read ‘Import Figma File’.
Step 4: Preview your App on Mobile
Now, in order to preview your project, you need to use the Bravo Vision app on your mobile device. These Lottie animations will carry a much better resolution and even run at a smoother pace in comparison to the GIFs in your Figma project.
So, what’s so BRAVO about Bravo Vision app?
To begin with, it is developed with Kotlin for Android and Swift for iOS. While its frontend is built with ClojureScript that uses Reagant and Re-Frame, its backend has the support of NestJS on NodeJS and deployed on AWS. By using Bravo’s Data Library, you can call any API of your preference and even attach the data to your app design. Though a few APIS will require verification and to that, Bravo will respond that it’s coming soon.
Step 5: Download your App and upload it to the App Stores
For the final touch, you need to download your app bundle package and then upload your app to the iOS App Store or Google Play Store.
In these simple 5 steps, you can easily build Native Apps using Lottie Animations in Figma with Bravo Studio. Life couldn’t have been simpler for all the animators out there. Though, there’s always the possibility that it’ll get better. And the world of design is only going to get cooler and cooler.
