📒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.
Figma Plugin
Speed up your Bravorizing process with our ready-made UI presets.
Glossary
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
🗂 Menus
📦 Containers, topbar & others
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.
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
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
The top bar container will hide as you scroll up the page, and reappear when you scroll down.
Show on scroll Top Bar
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.
👉 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.
👉 Where to label the tag: 2nd-level container
🎠 Sliders
Slides a collection of containers horizontally. Each tag is a different animation.
👉 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.
The slider will move automatically every 5 seconds.
Place it on the same layer as the [container:slider] tag.
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.
👉 Where to label the tag: 2nd-level container
💡 Modal pages
A screen that slides in from the bottom and covers 100% of the previous screen. Not scrollable. Swipe down the screen down to close.
👉 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.
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.
👉 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.
You will need 2 tags
👉 Where to label the tag: Top-level app page
🎉 Pop-up pages
A screen that pops over your other app pages. To close the popup will require the [action:close] tag
👉 Where to label the tag: Top-level app page
Get a blurred effect on the background behind the popup.
To close the popup will require the [action:close] tag
👉 Where to label the tag: Top-level app page
Change the color behind the popup to get more customization other app pages.
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 & Onboarding
Displays an Intro screen of your choice: 1) every time the app user opens the app or 2) only the first time
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.
To close the popup will require the [action:close] tag
👉 Where to label the tag: Top-level app page
💎 Components (Rectangle level)
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.
👉 Where to label the tag: Inside a container frame in a Rectangle shape (3rd level)
A GIF will replace the content of the rectangle.
👉 Where to label the tag: Inside a container frame in a Rectangle shape (3rd level)
A Lottie will replace the content of the rectangle.
👉 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
Input component form
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.
👉 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.
👉 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.
👉 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.
👉 Where to label the tag: Inside a container frame in a Shape layer (3rd level)
📈 Interactive Components (Rectangle level)
Create an interactive map component with custom markers
To create the interactive map:
To create the map as a fixed image with the markers, not movable or zoomable:
To specify statically the centre of the map and the zoom value:
To require location permissions to the user in a certain app screen (place the tag in the top-level app page):
To create a custom marker:
👉 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:
To create a bar chart:
👉 Where to label the tag: Inside a container frame in a Rectangle shape (3rd level)
📝 Components (Text level)
A GIF will replace the content of the rectangle.
👉 Where to label the tag: Inside a container frame in a Rectangle shape (3rd level)
✨ Transitions
2nd page slides over current page with a parallax effect.
Transition direction
👉 Where to label the tag: Top-level app page
2nd page slides over current page at a consistent speed.
Transition direction
👉 Where to label the tag: Top-level app page
2nd page pushes current page out of the screen.
Transition direction
👉 Where to label the tag: Top-level app page
2nd page fades in while the current page fades out.
👉 Where to label the tag: Top-level app page
There is no transition from page to page
👉 Where to label the tag: Top-level app page
🎧 Audio
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.
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.
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.
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.
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.
Displays the progressive playing time & the total time of the audio track.
📍 Where to add the tag: A text layer.
Displays the total time of the audio track.
📍 Where to add the tag: A text layer.
🚧 This page is under construction, full Master List here: https://bravostudio.notion.site/Bravo-Tags-Master-List-145bec845f0b4afaa9e3bb8321b218a8
Last updated
Was this helpful?