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)
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 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.
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.
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.
⚠️ 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.
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
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)
📈 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:
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.
