Bravo Studio FAQ

👏 About Bravo

Does Bravo produce a prototype or a ready-to-publish native app?

Bravo converts your design file into a native app! Once you have imported your design into Bravo, you can directly test and experience your design using Bravo Vision previewer for iOS or Android. What you see on your phone is already a real fully native app.

Can I publish my app on the App Store and Google Play?

Yes! Once you import a design file into Bravo, it already has generated a native app file in Android and iOS, which you can preview with Bravo Vision. Once your project is ready for publishing, you can request the app bundle packages from the app project page.

What is the technology/language behind Bravo?

Bravo is built entirely on native languages. The Bravo Vision previewer is built with Kotlin for Android and Swift for iOS. Backend is built with NestJS on NodeJS and deployed on AWS. Frontend is built using React and TypeScript.

Do I have the copyright and license to the app I create?

You own the copyright to the content and Bravo provides the license to the code to enable it to work.

Can I get the source codes of the apps?

No, Bravo does not export the source code (for cases like integrating closed source framework or adding custom functionalities). Bravo's focus is to generate the app bundles (IPA and APK) directly for publication. If there are functionalities that Bravo doesn't have yet, we would love to hear your suggestions to consider integrating them as part of the platform.

Can Bravo create websites and web apps as well?

Our current focus at Bravo is creating native mobile apps. However, we are open to possibilities in the future!

Will Bravo support different screens and devices (tablet, watch) apart from mobile phones?

Our current focus is perfecting Bravo for mobile screens. However, expanding to other screen sizes is on our roadmap considerations!

Since Bravo uses Figma and Adobe XD for the frontend of my app, does it have the same limitations as their prototype?

Bravo apps do not have the same limitations as the design tools. In some cases, we support features that they don't (like binding data, mobile actions, API requests) and in some cases, they support things we don’t yet (like certain animations). The design tool is simply used as the design tool.

Why do the other no-code platforms use React Native and Bravo Studio don't?

The main aim of Bravo is to build real native apps (i.e. in Kotlin and Swift - native Android and iOS code). Whereas React Native, Flutter, Ionic/Cordova, NativeScript won't have quite the same experience as real native code.

📱 Bravo Vision

Where do I download Bravo Vision?

Bravo Vision is available in Google Play for Android and App Store for iOS. (Note: if you are using TestFlight Bravo Vision version, you should update to the Bravo Vision from App Store)

How does Bravo handle responsiveness with all the difference screen sizes?

Bravo renders components created with the design tool, considering their dimensions in reference to the specific device dimensions. In other words, it uses percentages to adapt to each screen.

I can only see one screen of my app in Bravo Vision.

Check if your screens are linked in the design tool, this is how you control the navigation of your app in Bravo Vision. If your screens are not linked in the design tool, you can either:

  1. Link the screens in the design tool and click "Update" on your Bravo project page (in case you are importing a Figma design) to update the navigation in Bravo Vision. OR
  2. Swipe left/right in Bravo Vision to go between the different screens of your app. (They will show in the order of your layers in the design file, from top to bottom)
How do I exit the current app and open another Bravo app project?

To view a different app in Bravo Vision:

  1. Long press on the screen so a menu screen pops up.
  2. Tap "Exit app project" to return to the home scanning screen.
How do I sync automatic Bravo Studio updates?

If you haven't allowed notifications on the intro tutorial of Bravo Vision, Long press on the screen so a menu screen pops up and press "Enable automatic update"

My font characteristics aren't kept. (i.e. uppercase goes to lowercase, fonts are not the same in preview)

Currently, font decoration (strikethrough, etc.) or letter case (capitalization, etc) from the design tool are not supported - they will show if you manually type them. 

Check if there is a "missing font" notification in your app project page. If that is the case, you can upload the font file in the Font Library (accessible via the notification or your profile page). Then, it will display in Bravo Vision on you phone!

image
What's the preferred size for the app pagge in the design file for my phone? A lot of my elements don't look spaced correctly.

The app page size does not matter in the design tool, as long as they are all the same width-wise. Display issues occur when you use different app pag sizes in one design file.

Tip: Include a splash screen - it gives Bravo a reference point for displaying your design proportionally on all devices.

image
How can I visualize my app on other devices if I don't have them?

You can use a 3rd-party service such as Sauce Labs. Upload the APK/IPA file in Live-Mobile App and select the device you want to install it on.

🔐 Login & Account

Error page when logging in "Oops! Something went wrong"

Try closing the page and go to https://projects.bravostudio.app again to log in. If you still see this error page, please click the link under "Technical Details" and send us a screenshot. Thank you!

Do I need to link a Figma account if I'm using Adobe XD for the design?

No, you do not need to link a Figma account to create projects with Adobe XD. You would create projects with the Bravo Studio plugin for Adobe XD.

If I log in with Figma and later with an email, do I have two separate accounts?

A Bravo account requires a linked Figma account in order to create projects with Figma files, so all the logins that share the same linked Figma account are under one Bravo account.

image

I try to link my Figma account to an email login but I get the error "This Figma account is already in use."

If you have already created Bravo projects with the Figma-login Bravo account, you cannot link it to another non-Figma account. To link it, you must first delete the Bravo projects.

How do I delete my account?

If you'd like to delete your account, please send us an email stating your Bravo account email. Then we'll send you a confirmation when it is deleted. Thanks!

⬇️ Importing design file

When I log in to Bravo with my Figma account, which files am I allowing Bravo Studio to read? Only the ones that I am importing into Bravo Studio, or all the files that I have in my Figma account?

When you import a Figma file into Bravo, you will import only the designs in that specific file, not your entire account.

Error while importing "Import file limit reached"

The "Import file limit reached" error occurs when the design file you are trying to import reaches the maximum file limit. Try to reduce the number of layers or app pages, and then add more once you can import successfully.

While there isn't a way to surpass this, you can try creating "base" screens and populate them with the data, rather than manually creating the detail pages or content in the design file.

What does the notification "Containers added" after importing a project mean?

These notifications won't prevent you from seeing your app, so you can still preview it! This specific notification "Container added" shows up when Bravo has added a missing frame (or "container"), which specifies the main structural blocks of an app screen (very similar to a website). Bravo functions on this "container method," check out the documentation here!

Sketch integration?

It is not yet in our upcoming roadmap, but you can import Sketch files into Figma!

Adobe XD integration?

Bravo supports Adobe XD! Check out how to use your XD design to create an app here.

My masked shape is not displaying correctly in Bravo Vision.

Currently, Bravo does not support masking properties in Figma or Adobe XD. However, we do support boolean groups (union, subtract, exclude, intersect selection).

🔌 API & Data Library

Can I pull data from any API?

Yes, you can call any API you like using our Data Library and bind the data to your app design on your Projects page. Some APIs will need authentication which is coming soon.

However, our current architecture requires data to pass through our servers, so be mindful of data that are under regulation compliance (i.e. sensitive data).

Where is the data in my app hosted?

The data is hosted by the source of your API requests. Bravo doesn’t host any external data, we display external data on mobile by using API calls.

How can I get multiple records from Airtable to show? I cannot bind anything beyond the first row of records.

In Data Library, when you are selecting the data retrieved from the Airtable, if you want to populate a list, you need to select All in the dropdown next to .data.records.[] to select the entire array, rather than a specific row.

image

Then, in Binding Setup - first, select the frame that wraps around the design you want to populate. To the right, select Records[], which binds the entire list from the Airtable to the frame. Then, click the + that appears below add the design elements within that frame that you want to connect.

image
Why does the generated data rearrange the Airtable list? How do I display the data based on how I've inputted it?

Airtable displays the data in a random sort through their API. To display the list in a specific way, you need to add a string to the end of the Request URL. For example, if you want to display the list in the order as show in your Airtable view, add ?view=VIEW_NAME to the end.

In the screenshot below, this view is called "Grid view", so my request URL would be https://api.airtable.com/v0/appoLJFg3xOzgIHto/Restaurants?view=Grid%20view.

image
image

You can also find more ways to sort & display the data in the Airtable API Documentation of your table, such as ascending/descending, sort by a column, etc.

How do I sort the order of the Airtable data?

To modify the order in which your Airtable data appears in your Bravo app, you need to add a sort or view parameter at the end of the API request URL (see this Airtable doc).

image

For example, if you want to display the data in the same order as you have in Airtable, add the view parameter like this:

https://api.airtable.com/v0/appid123456/Table1?view=Grid%20view

If you want to sort alphabetically by the Name column:

https://api.airtable.com/v0/appid123456/Table1?sort%5B0%5D%5Bfield%5D=Name

How do I connect a detail page to a list page, so that it populates content based on what I click on the list page?

Here is the tutorial (opens in Figma) on how to connect the detail page to the list item selected: https://www.figma.com/file/fQa8tk6sFpEXftcTLPhOK4/Bravo-Tutorial-Connecting-a-list-and-detail-page-to-Airtable-data

Is there a limit to the amount of response per request?

Currently the limit per request is 100 items. Pagination is in our roadmap, which will allow you to display more items without overloading your app.

How do I add conditionals to my app (i.e. if total is above 10, display happy emoji)?

It depends on how you set up the backend. Bravo does not have an integrated feature where you set up conditionals in Bravo Studio, it simply displays the data it receives from the API. So you can set up a database (Airtable or Google Sheet) that contains conditional formulas, your app sends input content to the database, the database calculates them, then creates or chooses output content to be displayed back in your app.

Is there a timeout limit for API calls?

We have a timeout for GET requests at 3 seconds and for non-GET requests of 10 seconds. This is to avoid having a bad experience, and the API should be faster. Currently, you could edit the design if you add the timeout code as an Error page state: here.

🏷 Bravo Tags

Is it possible to play a GIF that is from an Airtable data?

Yes, you can connect GIF to your Bravo app project.

1. In Airtable: you can either 1) input the .gif URL OR 2) add the GIF file as an attachment ​

image

2. In the design tool: add the GIF Bravo Tag [component:gif:https://google.com/test.gif] to a rectangle shape layer. (The URL can be any URL because it's only a placeholder)

image

3. In Bravo: using the Data Library & Data Binding, bind the shape layer with the GIF data record from Airtable and it will display the GIFs in your app.

If I'm connecting a text box to a long content, can it push down the content below it?

To make a text box expand to fit the content, add the Bravo Tag [flexo] to the layer name of the text box. The text box must also be the bottom-most element of a container. To push content down, place any content that is below the "flexo" text box in another container.

In the screenshot below, the Description [flexo] text box in the Section 1 container will push down the content in the Section 2 container. You can add as many [flexo] text boxes as you want as long as they are in separate containers.

image
How can I determine how the side menu will be shown? In the example apps, the menu icon is at the top left, where can I place my menu icon?

You can design the menu icon and position it wherever you want in the design. If you use the Bravo Tag to animate the menu, currently we have the menu open from the left side. It’s on our roadmap to add more options for the menu opening direction.

To allow an icon to open the menu, simply link the icon to the menu page in your design file.

image

🔥 Other Features

Does Bravo support smart animate or additional gestures from Figma prototyping?

Unfortunately, the Figma API doesn't provide all the prototyping properties, when they do we will be able to add it to Bravo. Having said that, you can implement some of these features using Bravo Tags (ex: slide menu). If you have a specific animation or gesture in mind, send us a feature request here!

Can I add Google Admob or monetization feature in my app?

Currently, Bravo doesn't support Google Admob or in-app paid features. You can add a web view Bravo Tag or an image + open URL Bravo Tag to create your own "ad space" in your app, as a manual process rather than through Google.

Can I add e-commerce in my app?

Bravo does not support native payment at the moment. However, you can incorporate shopping basket & payment with a Typeform in your app. Here's a bakery order app made with Bravo that uses Typeform for payment.

Can I charge for my app in the marketplaces?

Yes, you can offer the apps created with Bravo both as free or paid apps.

Didn't answer your question? 🧐

Let us know in the Bravo Community so we can further help you!