Creating an app with Figma

There are two ways to import your Figma file to Bravo: importing it through our platform and by using our Figma Bravo Plugin.

Creating an app with Figma from our website

Let's explain how to import the following sample design file:

https://www.figma.com/community/file/1134788542858691041/tutorial-your-first-bravo-appwww.figma.com

1. Go to the Apps page, click create a new app.

2. In your Figma file, click Share, then Copy link. Make sure the permission for "Anyone with the link" is can view.

3. Back in Bravo Studio, paste the share link of your Figma file. Click Connect Bravorized Figma file

4. Wait for Bravo to do its magic. It's transforming your Figma design into native app screens.

5. Once the project is successfully created from your file, you will see a preview of the app screens created from your Figma file.

Ran into an error? Check out the troubleshooting page.

6. Check out your app with the Bravo Vision previewer app. 🚀

📱Bravo Vision previewer

Creating an app with Figma by using Bravo Plugin

The Figma Plugin allows you to import your current Figma design into Bravo.

🔓Sign in from the Bravo Plugin

1. Open your Bravo Plugin and select the Import tab.

2. Click on Sign In to connect to your Bravo Studio account.

1. Click on Open browser and Confirm the given code from the Figma plugin and the opened browser.

4. Once confirmed, this confirmation message will appear. Close the window and return to the plugin.

🆕 Create your New Project

1. Click on Create New Project to import a new Figma design to Bravo.

Make sure that your design has at least a frame or a UI element for it to be imported.

1. Wait for Bravo to do its magic. It's transforming your Figma design into native app screens.

7. Once the project is successfully created from your file, in Bravo you will see a preview of the app screens created from your Figma file.

Ran into an error? Check out the troubleshooting page.

🔁 Update your project

8. Select Update Project to sync your Figma file with Bravo whenever you make any modifications.

1. In addition, you have the option to create a new project using the same Figma file. Simply click on the Create another new project link.

10. Check out your app with the Bravo Vision previewer app. 🚀

📱Bravo Vision previewer