๐Ÿ“’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.

Try out our official Bravorizer plugin for Figma and speed up your app-building process!

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

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

See full docs

๐Ÿ“ฆ 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.

[container]

The container defines blocks of an app page by their distinct behaviors. ๐Ÿ‘‰ Where to label the tag: 2nd-level container

See full docs

๐ŸŽ  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.

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

Sample Figma setup

๐ŸŽ‰ Pop-up pages

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

Sample Figma setup

๐Ÿ‘‹ Intro & Onboarding

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

See docs

๐Ÿ’Ž 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.

[component:video:https://google.com/test.mp4]

๐Ÿ‘‰ Where to label the tag: Inside a container frame in a Rectangle shape (3rd level)

See docs

๐Ÿ“ˆ Interactive Components (Rectangle level)

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)

See docs

๐Ÿ“ Components (Text 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)

See docs

โœจ Transitions

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

Sample Figma file

๐ŸŽง Audio

[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.

See Sample Figma file

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 updated