Figma basics
for Bravo Studio
Beginner Bravo users
Be Brave, Be Bravo
bravostudio.app
1
CONTENTS
1. Introduction
2. Your app
3. Creating your app screens
4. Adding a Top-bar
5. Creating and adding a sliding Menu
6. Adding a LottieFile animation
7. Creating a list
8. Adding Bravo Tags
9. Prototyping your app
10. Create a custom App Icon
11. Importing your app to Bravo Studio
12. Preview your app on your phone
bravostudio.app 2
“Everything
you can
imagine is
real”
Pablo Picasso
bravostudio.app
Introduction
Introduction
This eBook will guide you through the Figma basics
needed to start creating your very first Bravo App. For
more information and detailed resources on Figma you
can always visit help.figma.com or Bravo Studio Help
Center.
Both Bravo Studio and Figma design tool offer free plans.
Figma, sign up here.
Bravo Studio, sign up here.
bravostudio.app
Your app
In most cases, a mobile app will consist of various screens
with a menu section to allow app users navigate through the
app. In this tutorial we will be creating a simple 3 screens app:
Homepage
A homepage will usually describe and set the expectations
of what the user will be able to find or do with your app. It is
often used to list highlights, announcements, tendring news,
etc...
List page
List pages are usually a second screen where you can list for
example a list of restaurants, products, video courses, tasks,
etc... List elements often include an image and a title.
Detail page
A detail page will further describe or inform about a
previously selected list item.
bravostudio.app
5
Once you complete this step by step tutorial, you will have
completed a 3 screens app with a sliding menu just like the
one below.
Sliding menu Home page
List page Detail page
bravostudio.app
6
Creating your app screens
Before creating your app
Elon M
screens, you need to create a
new project/file which in Figma is
called Drafts.
In Figma, select the “＋” symbol
to create a new draft.
You will be prompted with the pop up below.
Select ＋ Blank canvas.
7
bravostudio.app
Once you have created your first draft/file. You can go ahead
and rename your project name with your app name for
example (We have renamed it to “My first app”).
8
bravostudio.app
Frames
To create your app screens you will use the Frame tool. A
frame is like a container that will “contain” all the design
elements and content of your app screens. First, we create a
frame that is the size of your app screen. This is the top-level
layer of each app screen design.
By selecting the Frame tool button, Figma will automatically
list you a set of preset frame sizes on the right side control
panel. You can select any but we advise that you always use
the same phone size. Here we will choose iPhone 11 Pro Max.
Bravo will automatically adapt your app design to fit all mobile
screens including iPhone and Android devices.
9
bravostudio.app
Setting up your app screens
Once you have selected the preset frame size, you will see
your first app screen in your artboard just like the image
below. Here you will see that the frame name is the same as
the preset chosen frame size.
This will be the homepage screen for your app. Let’s rename
it so that it will be easy to identify it while you design the
rest of your app. To do this, double click on the frame name
on the Layers panel (you can name it however you want).
bravostudio.app
10
Label your screens
Now that you have created your first screen, you can select
the frame layer name (Home-page), press cmd + c (to copy)
followed by cmd + v to paste. You can press cmd + v twice in
order to add two screens until you have a total of three
screens.
Just like in the previous step, you can change the name of
the newly added screens. In this case they are labeled
Home-page, List page and Detail page.
11
bravostudio.app
Adding a top bar
Adding a top bar to your app will help users realize where
about in your app they are if you include a title to each screen
and also it is a great place to add your menu button if you are
going to add a sliding menu like the one we will add in this
tutorial.
To add a top bar, we will be using the Frame tool creating a
container that will host the page title as well as the menu
button. You can choose the height size you want for your top
bar. In the example below the Top-bar size is 414x100.
The top bar container fixes its position to the top of the app
screen and does not scroll with the rest of the page content.
12
bravostudio.app
Designing the top bar
Since our top bar design will be the same for all screens, we
will design it once and then just copy and paste it onto the rest
of the screens. In this example we will add a menu button and
page title. Page titles however will be different for each page.
Figma has a great community where you can find awesome
plugins like Feather Icons. It is a plugin with a huge amount of
pre designed icons that you can use for your designs.
Follow the following steps to install it.
Go to Figma’s menu button and
navigate to Plugins > Manage
Plugins.
13
bravostudio.app
Installing Feather icons Figma plugin
Click on Community and search for “Feather Icons”. You will
find the plugin in the plugins tab.
Elon M
Once inside the Plugin page, click install and go back to your
project page.
14
bravostudio.app
Adding a menu button to the top bar
Right click on the top bar container and select the plugin you
just installed.
This will open the Feather Icons plugin. While you can use any
icon you like, here we have chosen a common menu button.
15
bravostudio.app
Icons inside the top bar
Once you select the icon, it will be placed in your project’s
artboard. Click and drag it to place it inside the top bar of your
home page screen. Figma will show you a red line indicator
when it is aligned so that you can place it perfectly in the
middle.
You will also notice that we have changed the name of the top
bar frame to “Top-bar”. This is not necessary however it will
help you navigate and create a more organized project overall.
Notice how the Home-page container acts as the top layer
frame on the Layers panel and right under it we have our Top-bar
frame. At the same time our menu button is inside the top bar
container.
16
bravostudio.app
Outline Stroke all the icons
One important step here is to Outline Stroke the menu button
you just added. You can do this by selecting the menu icon >
right click > Select Outline Stroke
We will do the same process to add an “arrow” back button but
in this case it will only be added to our “Detail page”. This way, the
user can go back to the list page from a detail page.
17
bravostudio.app
Adding a title to the top bar
In order to add a title inside the top bar, we will use the Text
tool. It works just like the container tool. Select the Text tool
and click&drag where you want the Text box and enter the
title text. You can resize the text box as well as drag the entire
text box to correct the positioning.
You can further customize your title text by adjusting font, size,
etc from the right side panel.
Make sure that you have enough text area around to display the
complete text on your designs.
18
bravostudio.app
Adding the top bar to the other screens
Just like we did when we copied and pasted the screens,
select the top bar container and press cmd + c.
One you have copied the top bar, select the List Page by
selecting the top level frame and press cmd + v. Repeat the
same step for the third screen, Detail Page. The top bar frame
will be pasted automatically in the same position in the new
app screen frame as it was in the original app screen frame.
Edit the top bars title names just by double clicking on each
text box.
19
bravostudio.app
Adding some color to the top bar
Just to differentiate our top bar from the rest of the screen
page, we will change the background color of our top bar
container.
To do this, we will be using the Rectangle tool. Draw a
Rectangle by clicking on the top left corner node and drag the
mouse to cover the entire top bar area. Adjust the size until all
corners snap to all 4 top bar container corners.
As you can see, Figma by default has filled the rectangle in
gray color. You can change and select your preferred color.
bravostudio.app
20
Changing a color
While the top bar
rectangle is selected, you
can change the filling
color from the right side
control panel. Select
“Fill”, click on the white
color box and pick your
preferred color. You can
also manually enter the
color code we used:
66C9C3
Now that we have selected our preferred color, right click the
newly created rectangle and select > send to back. This will
place the color box behind the text. Follow the same steps for
the other two screens.
21
bravostudio.app
Creating and adding a sliding Menu
In Bravo, you can choose from different types of menu
designs. These include Sliding menu, Tab menu and Modal
menu. In this example we will demonstrate how to add a
Sliding menu.
Which ever menu you will choose for your design, the process
is exactly the same.
Although Menus will be able to be shown across all your app
pages, you will not need to add the menu in all your design pages
in Figma. Instead, we will create a new app screen with your
chosen menu design. Later, Bravo will know and understand that
this is your menu style and it will automatically enable the menu
function across all app pages.
Create a new app screen just like we did at the beginning of
this tutorial using the Frame tool and selecting the same
preset device size iPhone Pro Max. You can then place it along
your other screens for easier navigation and organization (It
doesn't really matter whether it is place before or after the
existing screens).
bravostudio.app
22
Designing the Menu screen
In the illustration below you will find the newly added screen
that will be “hosting” our sliding menu. The screen name have
also been changed to “Menu”.
Next, we will add a container using the Frame tool. In this case
we will draw a vertical rectangle “snapping” it to both top and
bottom left corners.
23
bravostudio.app
The rectangle width does not matter, but it should not reach
the right hand side. We do this so that when the user slides
the menu they can see it slide over the app screen and
partially see the app screen in the background.
Once you have drawn the menu frame you can also fill it with
any color. In this case we have chosen the same color used for
our top bar.
24
bravostudio.app
Adding Menu items
Now that we have added our sliding menu frame, we can add
the different menu items. In this case we will be adding two:
Home-page and List-page.
For each menu item, we will have an icon and text. For the icon
we will be using our Feather Icons plugin just like we did in our
Top-bar. In addition, we will use the Text tool to add the text.
Again, select the Home icon and
select “Outline stroke”. Do this
for all vectors that we add using
the Feather Icon plugin.
You can place your menu items where ever you want in the
sliding menu. Also you can add an image or app logo
somewhere in the sliding menu.
25
bravostudio.app
Add the text and align the text box with your menu item icon.
If you prefer to use just icons, thats also ok.
Repeat the same step for the second menu item.
You can adjust the size of your icons using the right side panel.
Just like you can also adjust the text size and font.
26
bravostudio.app
Adding a LottieFile animation
A Lottie is a JSON-based animation file format that enables
designers to ship animations on any platform as easily as
shipping static assets. They are small files that work on any
device and can scale up or down without pixelation. In other
words, a Lottie is an animated image that will give your app
design a more lively experience to its users. Lotties are widely
used as decorative elements but generally are mostly used as
custom loading animations.
In order to add a Lottie animation in our app, we will install the
LottieFiles Figma Plugin. (Follow the same steps as you did
when installing the Feather Icons Plugin).
You can also go directly to the installation page here.
27
bravostudio.app
Firstly, we will need to create and add a frame in our
Home-page. Secondly, we will add our animation inside this
frame.
Right click inside the frame just created.
28
bravostudio.app
Right click on the frame we just created Plugins > LottieFiles.
29
bravostudio.app
Once the LottiFiles plugin pops-up, search whatever type of
animation you wish to add. Here we will add a rocket.
Note that once you have chosen your Lottie, you will be able
to customize the animation’s background color so that it
blends well with your app design.
After changing the
background color go ahead
and “Convert to GIF”.
bravostudio.app
30
Select “add to Figma”. You will now see that the Lottie
animation appears on your Home-page. You can now close
the LottieFiles plugin.
Additionally, you can move the animation around and place it
whereever you prefer as well as resize the image itself.
Remember that it must be inside the frame we created
earlier.
Note that the animation will not be playing just yet but it will
once we import our project to Bravo Studio
31
bravostudio.app
Creating a list
Now we will create a list in our List page. In this case we will
add two list items and these list items will be images. Please
note that you can add more elements to your list items like
text, icons, shapes etc...
Add a new frame to your List page below the top bar frame.
Make sure it stacks directly below the frame above with their
borders touching (but not overlapping).
32
bravostudio.app
Arranging your layers
Once you have added your first list container, make sure you
properly organize your layers. On the Layers panel, make sure
to rename the list container items and drag it onto the List
Page top layer name.
After editing the list container, drag it over to the List page
layer name so that it will be moved outside the Top-bar and it
is placed as a second level frame on its own. It should look just
like the illustration below.
33
bravostudio.app
Adding design elements
to our list container
We will only add an image to each list item. For this we will use
the “Place image” tool. Have your visual asset ready if you will
be adding an image to your list container.
Browse your image and place it inside your list container.
When placing your image, this one might need to be resized so
that it fits inside the list container. You can do that clicking on
any of the image’s corner nodes while pressing the Shift key.
This will ensure that you keep the original image dimensions.
34
bravostudio.app
Again, it is important at this point that you properly arrange
your layers just like the illustration below.
The newly added image layer must be inside the list item
container layer. Repeat the same process with the next image
and list container.
35
bravostudio.app
Creating a detail page
In this example, we will be adding one image, a text title and a
text description to our detail pages. We will create the detail
page for our Nasa list item. If you want to create and add a
detail page for Spacex you just have to copy and paste our
existing detail page screen and add an image and description
text corresponding to Spacex.
First, we will create a container that will be snapped to both
left and right bottom Top-bar corners. You can drag it down all
the way if need depending on image size and text length.
36
bravostudio.app
Whats very important here is that all design elements that we
will add to our detail page are inside the container we just
created.
Once the container is created, lets add an image just like we
did before and place it inside the container. In this case it is
snapped to the top left and right corners of our container.
37
bravostudio.app
When placing images, you can adjust them so they fill or fit
the image holder
After adding and placing our image, we will add a text box
where we will add a description title text. You can customize
this text to highlight it. In this case we have made it bold.
Notice the text box is large enough to fit the text. If the
text box is smaller than the text content, the text will be cut
off in Bravo (even if it's still visible in Figma).
38
bravostudio.app
Now that we have added our title, we will do the same
process but with a larger text box so that we can fit our
description.
Remember you can further adjust and customize how your text
displays by using the editing tools on the right side panel.
39
bravostudio.app
Make sure your layers are in the right hierarchy just like in the
next illustration.
You will notice that all design elements of our detail page are
under (inside) the “Nasa detail page” container.
bravostudio.app
40
Adding Bravo Tags
A Bravo Tag is a text string that you place in the layer names in
your Figma file. After you import the Figma file into Bravo
Studio, the layer with the Tag will turn into a mobile
component or action in Bravo Vision.
Bravo tags will be added next to the layer name. Only specific
layers will require a Bravo Tag. In this example app we will be
using and adding the following Tags:
Menu Sliding Tag: [menu:slide]
41
bravostudio.app
Top-bar Tag: [container:top-bar]
️ IMPORTANT: Add the same Top-bar Bravo tag to the
other Top-bars (List page and Detail page).
Notice that our Lottiefile already has a Bravo Tag added. When
you add a Lottifile directly from the Lottifile Figma Plugin, it
automatically adds the Bravo Tag.
42
bravostudio.app
Connecting our app screens
To connect our screens and create the navigation for our app,
we will use the prototyping tool. This is basically connecting UI
elements with the desired screen destination.
Once you have selected “Prototype”, double click the item
you want to connect with another screen (destination screen).
First we will connect each menu item with the corresponding
screen. “Home” will be connected with the Home-page.
43
bravostudio.app
Continue by connecting the List menu item to the List page.
Next, connect all the menu buttons with the Sliding menu
screen. Next, connect the first list item “Nasa container” with
the Nasa detail page. Finally connect the back arrow button
with the List page screen. Once all items have been connected
you can click outside any screen in order to see the full
navigation of your app.
44
bravostudio.app
Adding a customized app icon
Create a new container and make it a square shape. Add an
image or text. Add the following Bravo Tag to the frame layer
name just like the following illustration.
App Icon Bravo Tag: [asset:icon]
45
bravostudio.app
Import your Figma in Bravo Studio
Copy the URL of your Figma project.
Sign up to Bravo Studio or Log in if you have already signed up.
Once you are in Bravo Studio, click Import Figma File.
EM Elon M
46
bravostudio.app
Paste your Figma project URL and click Import.
Once your project have been imported you will be prompted
with your app project.
47
bravostudio.app
Preview your app in Bravo Vision
Download the Bravo Vision previewer app to view your app
project on your phone!
Download iOS Bravo Vision app
Download Android Bravo Vision app
Open Bravo Vision app on
your device, select your app!
48
bravostudio.app
BE BRAVE
bravostudio.app
