🔙 Back to blog
September 9, 2020
#madewithbravo
Publishing an app to the App-store without coding — “Bravo Studio”
Do you have an awesome app idea, but no coding skills? Bravo Studio has you covered!
Jordin van Deyl

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:

App-store assets for WePlant

About Bravo Studio

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!

What we love

  • Because Bravo, Figma and Airtable all have free versions, you can get started without spending anything!
  • There is an active (and growing) community here. The Bravo staff is very involved and give help where they can. So it is easy to post your questions. I also feel like the staff is listening well to what the community needs. This gives me high hopes for the future development.

What could be better

  • Bravo is still very much in development. This means many features you might be accustomed to (like login-in options) are still in the roadmap. This won’t be a problem if you have a simple idea, but for something advanced you’ll have to wait (or get very creative).
  • Removing branding is expensive. Bravo features 2 paid tiers and only the most expensive one (€49,- a month) will remove branding. If you don’t care about this there is little reason to go for a paid plan at all. *(Update: They seem to be changing what’s in the different tiers, so this might be updated later).

The challenge

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!

Step 1: Designing the app (for Bravo)

Using Figma we designed the app through basic UX/UI practices, 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.

Screenshot of Figma and Bravo’s ‘tags’
Screenshot of Figma and Bravo’s ‘tags’

Step 2: Connecting the data

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.

Screenshot of Bravo Studio showing data being connected to design elements
Screenshot of Bravo Studio showing data being connected to design elements

Step 3: Final testing and exporting

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.

Connecting with Typeform and Zapier

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!

Conclusion

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.

Download WePlant from from iOS App Store here.

Download WePlant from Google Play Store here.