Bravo Studio
Bravo Studio allows you to connect your existing Figma or Adobe XD file to the backend of your choice. Most of the work you have to do is in Figma itself. You have to 'bravorize' your Figma or Adobe XD file to make it all work. Bravorizing is basically placing your design in frames and giving the frames a name like [container] or [layer].
Everything starts with your design file. The cleaner you work when designing, the easier it will be to 'bravorize' your design. Let's take the start screen as an example. First, I need to tell Brave that the start screen is my first screen. I do this by adding the [intro] text. Inside the start screen frame, I have another frame with the tag [container]. This frame covers the full size of my screen
To make the input field work. You simply add [component:input-TYPE] to that text field and the job is done. This is a pretty simple example of what Bravorizing really is. There are loads of different tags for all kinds of scenarios. The full list can be found here
The next step is to connect your Figma file to your app. This is done by copy pasting your Figma link on the website. After a couple of seconds. Your frames get loaded into the builder and are ready to be used. On the top right, you have multiple controls which you use multiple times throughout a project. When you have made an update to your Figma file and want to upload the new frames to Bravo. Simply click on the refresh icon and your changes will get imported. The notifications tab is also really useful. It alarms you when a font is missing or when you make a mistake in your Figma file.
Making the flow of your app is also done in Figma with the prototyping tool. Simply connect everything to where it should go and Bravo will take care of the rest.
You can preview your application with the Bravo Vision app. You can test out all the functionalities you've built. Testing the app isn't possible in the builder itself so it's necessary to test it out on your phone. The app itself works really well. You can turn on auto refresh so the latest changes get imported.
Now that we've covered how to make the app look good. We will talk about how we can add data from You can enter data binding mode by clicking on a screen where you wish to modify data. In this view, you can see all the groups and layers like in Figma. So the better you name everything, the easier it will be to find what you wish to change. Let's say I want to change the welcome text. I search for the text itself and click on it. You can then select a collection you want to retrieve data from. I wasn't able to experiment with adding data because you need to have a paid plan to do that. This later turned out to be a glitch as I was able to bind data a couple hours later.
When binding dates, you often get a popup that says you have to upgrade your plan to use that feature. But when you refresh your browser, you will be able to continue working. You can basically bind data to every single layer in your Figma file. The options are endless. Without much problem, I was able to add the API collection in Xano which held all the events information. I bound the data to the correct texts and the job was finished.
Bravo Studio works with API collections. You can create a new collection from scratch or with popular tools like Airtable and Xano. For each collection, you have the choice of which API requests you want to allow in that collection. If done right, you can create a very secure app.
During the time I tested Bravo Studio. I didn't run into any major problems that I wasn't able to fix with a quick search on the World Wide Web. The only negative thing I can say is the popup window to upgrade my plan whenever I bind data. I thought I wasn't going to be able to test that function for a couple of hours.
I would like to be able to view my app on the website itself. Right now the only option is to try out your app through Bravo Vision. The app works really smoothly, but you can only test it on the screen size of your phone. It would be interesting to have a web-view where you can test all your functionalities and check multiple screen sizes to find possible issues.
Bravo Studio has really blown me away. As far as I could test everything out, there are no limitations to making any app. Their backend is complicated for users that have no experience with the backend if you compare it to Glide apps. But this gives developers the freedom to make complex apps with Bravo Studio. I would like to see a free student plan to try out more premium features.