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:
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 previewerCreating 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
Open your Bravo Plugin and select the
Import
tab.Click on
Sign In
to connect to your Bravo Studio account.
Click on
Open browser
andConfirm
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
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.
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.
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 previewerLast updated
Was this helpful?