How to Turn Figma Prototypes into Native Mobile Apps with Bravo

hey friend welcome back to another video today I want to show you an awesome new design tool that lets you turn your

figma prototypes into native mobile apps I know it sounds too good to be true but it is true it's called Bravo let's take

a look Bravo is a no code design tool that lets you connect your figma designs to real

data without any code and through the use of things like containers and Bravo tags you can create a fully functioning

native mobile app and with this you can test on your phone directly using your API s and integrations and then you can

even push your app to the App Store so what do I mean this all sounds nuts let's take a look I'm gonna walk you

through how I created a really simple prototype app so we begin in figma here's a design that I've set up in

advance for a kombucha collective this is a random idea I head for a way to kind of browse new types of kombucha

maybe save your favourite kombucha and get inspiration of new cool featured kombucha if you cannot tell I love

kombucha so I essentially have two key screens in my app I have this home screen which has the featured kombucha

and then a list of other types of kombucha that I can browse and then I also have a favorite screen where let's

say this is kombucha is that I have favorited and wanted to save for later so I've already set up all of the links

to this prototype so all the connections and points have been already done in Figment using figmas built in

prototyping features and now we're kind of ready to start using Bravo to bring this to life let's dive into the

favorites screen so I want the screen to be an automated populated scrolling list so as you can see I have just designed

this one list item here and then using Bravo I'm going to populate this list with data that I've inputted into a

Google sheet you can kind of think of Bravo as having three layers you have your top level layer which

essentially your app screen so this entire frame then I have my second-level frame which is this list item which

we're going to call a container Bravo uses this concept of containers to define a block of content that you want

to populate with data so this second level frame is my container and then with inside this container is my third

level elements and that's all of these individual design elements like the image I've got some text elements here

and then also the background so I created my individual list element and what I've done is I've actually wrapped

this inside a frame now when you apply the frame to this container you want to consider the boundary or the margins

around the actual container so in this case you can say that I've added some margin around my container and that

basically means that when this list item is going to repeat it's going to honor these margins so when this element gets

repeated it's going to be placed right below and aligning with the imagine that I had set now if I didn't have any Majin

here then it would basically place this element right underneath with no spacing between and we don't want that right we

want to give out elements a little bit of room to breathe another pro tip here is to make sure that you set your frame

boundaries to be the width of the screen that way you'll avoid potentially any overlapping elements later on so the

next key thing we need to do now that we've got our container it's inside a frame is to actually label this frame as

a container using a Bravo tag this tag will allow Bravo to actually identify this frame element as a repeating list

and as a container of content so to do that all you want to do is add asterisks list to define this element as a list

item and then in parentheses you want to give this the Bravo tag of container now Bravo will know to treat this as a

container because we've also identified it as a list element it will know to start auto populating and repeating this

element down the screen what I've also done is labeled each of these individual

design elements with something that's kind of descriptive because later on what we're going to do is we're going to

connect each of these design elements to a cell in a Google sheet and I want to be able to quickly identify which one is

where the brand name is supposed to go which one is going to have the rating so by labeling these nicely in my layers

panel I'm gonna be able to identify really quickly which text element is supposed to be populated with which

information all right let's look at the data set that I've stood up so I decided to use a Google sheet but Bravo also

supports air table if that's a tool that you prefer so here I've set up some columns and

then inputted data down the rows for image you do have to use a URL so I just copied the image address of images that

I wanted to use and put them in here now to use this data in Bravo we have to turn this sheet into an API and you can

do that really easily using a tool called XI T so to set this up you want to go to your Google sheet and you want

to copy the share link of your sheet then over in XI T you can paste the Google sheet URL and to here give your

project a name save these changes and essentially it will sync the data and turn it into a API endpoint so here is

the endpoint URL that I'm gonna actually use in Bravo we've got our figma design we've got our Google sheet data as an

API so now let's bring both of them into Bravo and actually see the magic in action so here I am over in Bravo and

I'm going to input my figma file using the shell link of my figma file that's gonna import nicely now let's add our

data source so I'm going to go over here to data library and click on new collection I'm going to call this

kombucha project and data source I'm just gonna say it was a Google sheet so I've set up my data point my request is

set to get and I'm going to copy and paste my endpoint URL into the request URL and click send you can see that it's

brought in all of the data in my sheet now you want to make sure that you select this one the data sheet one and

have this drop-down selector to all then you want to select all the other data that you want to bring in and

connect into your prototype so for me that's all of these ones now Bravo saves automatically so I don't

need to click Save or do anything here my data is ready to use so let's connect these data points to my prototype hit on

back over to projects open up my figma file that I imported now let's start with this favourites page so I'm gonna

open this up and in here I'm gonna select my kombucha project collection and then I'm also going to make sure my

request is set to get now I need to select my list container that I made so I'm gonna add app element find it in

this list here and then I want to bind this container to the overall sheet now I want to add all my third label

individual design elements that I want to connect to data so I'm gonna select all of these ones and then over here I'm

just going to connect them to the right set of data so we've imported the data we've connected the design elements on

our screen to the data in our sheet now it's time to preview this and see if it's working so I've downloaded the

Bravo Studio app on my phone so I can open up my project here in preview yes check this out so you can see that not

only has my list element been populated with data from our Google sheet but it's also repeating all the rows that we have

in the Google sheet so now I can see a whole list here off my favorite kombucha x' it's pretty sweet so that's how you

create a list I've done exactly the same thing for the Browse section on the featured page by turning this into a

list container connecting it to the datasheet and then it gets pre-populated but not only can Bravo create lists they

have a whole set of different Bravo tags that you can use to do different actions they have this whole must a list of

different Bravo tags that you can use here's the container one that we've used I've also used the menu slide

Bravo tag which you can see here if I show you menu I've labeled this frame the great

Bravo tag so that the menu will slide in and out when I interact with it you can also do things like embed a video or a

gif or use Lahti animations you can even open up the email dialog on your phone it's pretty cool stuff let me show you

one other thing that's really cool so here in my design I have a share button and I've actually used a Bravo

tag here so that when you interact with this share button it actually brings up the share sheet on the device now this

is super exciting for me because it is the first time as a designer that I've actually been able to do something with

a figma prototype I've actually been able to kind of bring it to life and make it a real thing now if I wanted to

I could actually push this to the app store or test flight by requesting the APA from Bravo which takes about 10 to

15 minutes which is pretty cool so what I really like about Bravo is it as design at first and it is no code so as

a designer I can actually bring my designs to life and take it a step further than just having it as a

interactive prototype in figma the possibilities of being able to use the Google sheet air tables they care to

kind of bring everything together is exactly what someone like me needs as a person who is more into the no coding

tools that basically gives me a lot of power without having to code a single line I also think it's pretty cool that

Bravo honors the prototype that you've set up in thickness so whether it's micro interactions like

carefully refined transitions that I want that's all gonna be pulled across into it the actual app now I did hear a

sneak peek from the Bravo folks that audio support is coming soon and they're also working on a full communication API

so you might have seen that right now you can only get requests but soon you'll be able to actually push request

as well which is gonna open up a whole new world I think still Bravo is completely free to use

you can have up to three projects at one time and I will leave a link below where you can go and get started straight away

all right thanks friends for watching make sure to check out Bravo in the link below if you're interested in giving it

a go and I'll see you in a future video [Music]