.jpg)
As a UX/UI designer I have my hands full just studying my own field, let alone take the time to learn how to code native iOS and Android apps. I have so many ideas though! It can be frustrating knowing you can imagine, research and design a beautiful app, but lack the skills to actually build it. That is why I was eager to get my hands on Bravo Studio. Together with Violet Jim we took one week to get our app ‘App-store ready’. This is the result:
Bravo Studio (check their website here) is a start-up based in Barcelona. They promise to turn your prototypes into fully native apps instantly. No-code. So how does it work? You connect your Figma files to Bravo, then connect Airtable (or any other restAPI). Finally, Bravo converts this into an app package for one or both of the Appstores. Easy as that!
Bravo Studio issued a challenge on their forums. They asked to make an app based on a database provided by ‘ChooseYourPlant’. This online community for houseplant lovers helps users discover plants they love. They also give a lot of advice on how to keep them happy and healthy!
Objective: Create an app on how to take care of your plants at home. Come up with a fully new design where you can show your own idea and creativity.
For us this was the perfect chance to get our first hands-on experience with Bravo Studio!
Using Figma we designed the app through basic UX/UI practices, mobile app prototypes, user testing, etc. The hardest part was figuring out in what ways we could solve the challenge. There was a lot of; ‘How about we do this?’ with a reply of ‘That feature isn’t available yet…’. At one point Violet almost flipped the table (╯°□°)╯︵ ┻━┻, but… In the end we made a good design with basic features that covered the user goals ┬─┬ノ( º _ ºノ).
While still in Figma we made the first step in connecting the design to Bravo. We did this by using ‘tags’. Below we have the splashscreen for example. By adding [asset:splash] to the Frame name Bravo knows what to do with it. In this case, it recognises it as a splashscreen.
There are many different ‘tags’. The other image shows [statusbar:light] indicating I wanted the time and battery to show in white text. [transition:dissolve] indicates my preferred transitions between pages. These examples are on Frame level, but there are also many tags that work on individual elements, such as text boxes, webview elements or images/videos.
By sharing the Figma link Bravo imports the design into Bravo Studio. Here we also have the option to connect a database. We were provided one in Airtable with basic information that we expended upon. Then we go back to the design and start connecting the two.
Below is an image of Bravo Studio. In my design I show a recommended room for this plant (in my Figma file I used a [flexo]-tag for this piece of text) which I connected with the corresponding column in the database.
Bravo offeres a useful app called Bravo Vision. It is comparable to Figma Mirror and allows you to preview the working app on your phone. I used it often to check how the design was looking and if everything was connected properly.
After the finishing touches I went back into Bravo Studio to request an ‘app-package’. Within 48 hours your native application is mailed to you. Ready to upload to the app-stores! Never done that before? Don’t worry. They have guides for that as well, but they can be a little confusing at times.
Even though there might not be that many ‘tags’ yet, using the webview it is easy to connect Typeform to your design. This also allows you to hook up Zapier and set up some creative solutions. I’m curious to see what you can make with this, so feel free to DM me!
Bravo is a brilliant start-up that makes app development available for all of us (without coding knowledge). The product is still developing, so many features are not yet available. However, the team is very involved with the community so I’m excited about every update. The basic tier is free, so no reason to hold back.
.svg){kind=logo}
