Comment on page
📒
Bravo Tags Master List
Copy and paste these tags into the layer names in your design file and see your app come to life with Bravo Vision.
Speed up your Bravorizing process with our ready-made UI presets.
- Element = the app element created from the tag
- Bravo Tag = the tag itself
- Layer Type = the type of layer you can place this tag on
- Tag Type = Bravo categorization of the tag
Tabs Menu
No menu tabs
Slide Menu
Modal Menu
To create a menu with tabs you will need this tag:
[menu:tabs]
The menu that stays fixed on every screen is a bottom navigation bar.
👉 Where to label the tag: Top-level app page
To hide the menu with tabs on a specific page you need this tag:
[nomenu]
Define which pages to hide the tab menu
👉 Where to label the tag: Top-level app page
To hide the menu with tabs on a specific page you need this tag:
[menu:slide]
The menu opens by sliding in from the left side of the screen.
👉 Where to label the tag: Top-level app page
To create a menu that will be opening like a modal you will need this tag:
[menu:modal]
The menu slides in from the bottom and covers the entire screen.
👉 Where to label the tag: Top-level app page
To close the Modal menu you also will need to set up this tag in the element that will trigger the close action:
[action:close]
👉 Where to label the tag: Any layer (except top-level)
Container
Top Bar
Aspect Ratio
Layer (sticky element)
In order to properly display your content, you must enclose it within a container tag. Additionally, if you wish to repeat this container tag multiple times, you can use it to create a list of items.
[container]
The container defines blocks of an app page by their distinct behaviors.
👉 Where to label the tag: 2nd-level container
The Top bar is a container that could be fixed or not at the top of each page.
Fixed Top bar
[container:top-bar]
In this case, the Top bar container fixes its position to the top of the screen and does not scroll with the rest of the screen.
Hide on scroll Top Bar
[container:top-bar:hidescroll]
The top bar container will hide as you scroll up the page, and reappear when you scroll down.
Show on scroll Top Bar
[container:top-bar:showscroll]
The top bar container will show as you scroll down the page, and will remain until you scroll up to the top again.
👉 Where to label the tag: 2nd-level container
The height of the container is calculated with the screen height, so they won't maintain the designed aspect ratio but is useful when you want a container to be relative to the screen.
[aspectratio:screen]
👉 Where to label the tag: 2nd-level container
A container that fixes its position on-screen and does not scroll with the rest of the screen.
[layer]
👉 Where to label the tag: 2nd-level container
Sliders horizontal scroll
Slider indicators
Automatic sliders
Infinite sliders
Slides a collection of containers horizontally. Each tag is a different animation.
[container:slider:horizontal]
[container:slider:default]
[container:slider:crossfade]
[container:slider:cube]
[container:slider:pager]
[container:slider:parallax]
[container:slider:rotate]
[container:slider:zoom]
👉 Where to label the tag: 2nd-level container
See full docs
Adds a dots indicator at the bottom of the slide element, with the specified color (use HEX code). Place it on the same layer as the
[container:slider] tag.Indicator + color setup
[slider-indicator:#FFFFFF]
👉 Where to label the tag: 2nd-level container
The slider will move automatically every 5 seconds.
Place it on the same layer as the
[container:slider] tag.
[slider-automatic:5]
Slider will move automatically every x seconds.
For example 8 seconds
[slider-automatic:8]📍 Where to add the tag: on the same layer as the [container:slider] tag.
👉 Where to label the tag: 2nd-level container
After the last slide, the first slide will be shown, so the user can swipe in one direction infinitely. Place it on the same layer as the
[container:slider] tag.[slider-infinite]
👉 Where to label the tag: 2nd-level container
Modal page default (100%)
Partial modal page
Fixed Modal page
Modal iOS card
A screen that slides in from the bottom and covers 100% of the previous screen. Not scrollable. Swipe down the screen down to close.
[page:modal]
👉 Where to label the tag: Top-level app page
A screen that slides in from the bottom and covers a percentage of the previous screen.
It is scrollable and you can make it as long as you want.
[page:modal:<NUMBER%>]
i.e. [page:modal:30%]
👉 Where to label the tag: Top-level app page
A partial screen that slides in from the bottom and covers a part of the previous screen. Not scrollable. Swipe down the screen down to close.
[page:modal:fixed]
👉 Where to label the tag: Top-level app page
⚠️ iOS-only feature ⚠️
A screen that covers a majority of the screen. It is scrollable and you can make it as long as you want. Swipe down the screen to close. If you are using this feature on Android, will display the default modal page.
[page:modal][ios:cards]
You will need 2 tags
👉 Where to label the tag: Top-level app page
Default
Blur background
Color Background
A screen that pops over your other app pages. To close the popup will require the
[action:close] tag[page:popup]
👉 Where to label the tag: Top-level app page
Get a blurred effect on the background behind the popup.
[page:popup:blur]
To close the popup will require the
[action:close] tag
👉 Where to label the tag: Top-level app pageChange the color behind the popup to get more customization other app pages.
[page:popup:<color-code>]
e.i. [page:popup:#FFFFFF]
To close the popup will require the
[action:close] tag
👉 Where to label the tag: Top-level app page
Intro
Post-login
Displays an Intro screen of your choice:
1) every time the app user opens the app or 2) only the first time
[intro:always]
[intro:once]
To close the intro will require the
[action:closeintro] tag⚠️ DO NOT link the element that triggers the close action to any page.
For example to HOME page
👉 Where to label the tag: Top-level app page
Displays a post-login screen after a login or register action. It can be displayed only once (the first time a user logs in or registers), or always.
It will be displayed after the login or register action, and before the home screen.
[post-login:always]
[post-login:once]
To close the popup will require the
[action:close] tag
👉 Where to label the tag: Top-level app page
Video
GIF
Lottie
Lottie animated
Webview
SVG
Zoomable image
Shape fill
An audio-less video that autoplays when a user is on the app screen. The video will replace the content of the rectangle. Supports URL ending in .mp4.
[component:video:https://google.com/test.mp4]
👉 Where to label the tag: Inside a container frame in a Rectangle shape (3rd level)
A GIF will replace the content of the rectangle.
[component:gif:https://google.com/test.gif]
👉 Where to label the tag: Inside a container frame in a Rectangle shape (3rd level)
A Lottie will replace the content of the rectangle.
[component:lottie:LOTTIE_JSON_URL]
👉 Where to label the tag: Inside a container frame in a Rectangle shape (3rd level)
These are the tags you can use in the design file to implement the toggle component.
Animated component
[component:stateful-lottie:<url.json>]
Input component form
[component:input-stateful-lottie:<url.json>]
The Lottie animation frame goes from 0 to 180. We will set a
<custom-frame> of 90 as it's where we want the animation to stop.[component:input-stateful-lottie:<url>:90]The animation plays as follows:
To enable, on tap, the animation plays from 0 to 90,
To disable, on tap, the animation plays from 90 to end.
👉 Where to label the tag: Inside a container frame in a Rectangle shape (3rd level)
A web page will replace the content of the rectangle.
[component:web-view:https://bravostudio.app]
👉 Where to label the tag: Inside a container frame in a Rectangle shape (3rd level)
If your vector shape layer looks funky in Bravo Vision or if a layer has 2+ effects, add this tag to any element, group or frame to allow Bravo to render it as it looks in Figma.
[component:svg]
👉 Where to label the tag: Inside a container frame in any Shape layer (3rd level)
A group with this tag cannot be bounded, please ensure it consists of a single element.
⚠
Creates a zoomable image. The zoom is trigged by pinch gesture.
[component:imagezoom]
👉 Where to label the tag: Inside a container frame in a Image layer (3rd level)
SVGs/vectors are "fit" to container by default, as they are normally used for icons. With this tag, the SVG will be "fill" to container, which is useful for backgrounds.
[shape:fill]
👉 Where to label the tag: Inside a container frame in a Shape layer (3rd level)
Maps with markers
Charts
Create an interactive map component with custom markers
To create the interactive map:
[component:map:interactive]
To create the map as a fixed image with the markers, not movable or zoomable:
[component:map]
To specify statically the centre of the map and the zoom value:
[component:map:<latitude>:<longitude>:<zoom>]
[component:map:interactive:<latitude>:<longitude>:<zoom>]
To require location permissions to the user in a certain app screen (place the tag in the top-level app page):
[require:location]
To create a custom marker:
[asset:marker:default]
👉 Where to label the tag: Inside a container frame in a Rectangle shape (3rd level)
Bravo supports 2 chart types at the moment: pie and bar. Depending on the data you want to visualize, you may find the most suitable format.
To create a pie chart:
[component:chart:pie]
To create a bar chart:
[component:chart:bar]
👉 Where to label the tag: Inside a container frame in a Rectangle shape (3rd level)
Flexo
Rich Text
A GIF will replace the content of the rectangle.
[component:gif:https://google.com/test.gif]
👉 Where to label the tag: Inside a container frame in a Rectangle shape (3rd level)
Display text with Markdown or HTML styling. Useful for APIs that send text styling.
Text with Markdown styling
[component:text:md]
Text with HTML styling.
[component:text:html]
Supported HTML elements:
<a>
<b>
<big>
<blockquote>
<br>
<cite>
<div>
<em>
<font>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<i>
<li>
<p>
<small>
<span>
<strike>
<strong>
<sub>
<sup>
<u>
<ul>
and attributes: size, color
👉 Where to label the tag: Inside a container frame in a Text layer (3rd level)
Slide
Move
Push
Dissolve
Instant
2nd page slides over current page with a parallax effect.
Transition direction
[transition:slide:left]
[transition:slide:right]
[transition:slide:up]
[transition:slide:down]
👉 Where to label the tag: Top-level app page
2nd page slides over current page at a consistent speed.
Transition direction
[transition:move:left]
[transition:move:right]
[transition:move:up]
[transition:move:down]
👉 Where to label the tag: Top-level app page
2nd page pushes current page out of the screen.
Transition direction
[transition:push:left]
[transition:push:right]
[transition:push:up]
[transition:pushdissolve:down]
👉 Where to label the tag: Top-level app page
2nd page fades in while the current page fades out.
[transition:dissolve]
👉 Where to label the tag: Top-level app page
There is no transition from page to page
[transition:instant]
👉 Where to label the tag: Top-level app page
Play audio
Pause audio
Progress Bar
Play audio in background
Loading indicator
Current played time
Total time
[action:play:URL] or [action:play]
Use [action:play] if you are getting the URL by API.
Plays the MP3 audio track. When this element is visible, the pause element will be invisible, and vice versa.
Replace
URL with an actual URL ending in .mp3📍 Where to add the tag: Any layer, except top-level and container.
[action:pause]
Pauses the MP3 audio track. This element will be invisible until user clicks the play element.
📍 Where to add the tag: Any layer, except top-level and container.
[audio:progress:#FFFFFF]
You can change the color by setting the HEX color in the tag.
Displays a progress bar to move forward or rewind the audio track. The appearance will be the native component for each device.
📍 Where to add the tag: A Rectangle layer.
[audio:background]
Optional tag. If this tag is included, audio files will continue playing when the app is open in the background. In order to stop the audio, users will have to return to the page where the audio was started and tap pause.
If this tag is not included, audio files will only play when its page is visible and will pause otherwise.
📍 Where to add the tag: Any layer, except top-level and container.
[audio:loading]
Optional tag. The element that will be displayed from the moment the play element is clicked until the audio file is ready to be played, along with the pause element.
📍 Where to add the tag: Any layer, except top-level and container.
[audio:currenttime]
Displays the progressive playing time & the total time of the audio track.
📍 Where to add the tag: A text layer.
[audio:totaltime]
Displays the total time of the audio track.
📍 Where to add the tag: A text layer.
Make sure your phone it's not on mute.
🚧 This page is under construction, full Master List here:
https://bravostudio.notion.site/Bravo-Tags-Master-List-145bec845f0b4afaa9e3bb8321b218a8
Last modified 1mo ago