Bravo Tags
Our simple way of making amazing mobile experiences
It’s all in the layer names
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.
Tabs menu
Places a fixed bottom navigation bar on every screen of the app.
Learn more
Slide menu
Opens a menu that slides in from the left side of the screen. Any element linked to this screen will trigger the menu to open.
Learn more
Modal menu
Triggers a menu that slides in from the bottom and covers the entire screen.
Learn more
Web view
A web page will replace the content of a rectangle shape.
Learn more
Lottie
A Lottie will replace the content of a rectangle shape.
Learn more
Gif
A GIF will replace the content of a rectangle shape.
Learn more
Autoplay video
Autoplays an audio-less video when the user is on that app screen. The video will replace the content of a rectangle shape.
Learn more
Flexible text
The text box will expand down to fit the content connected via API. Note: the text box must be the bottom-most element of the container.
Learn more
Play Audio
Plays an MP3 track in your app.
Learn more
Play Video
The element will open a fullscreen video player with the video specified in the URL. Supports Youtube links and URL ending in .mp4.
Learn more
Search/filter
The text box will turn into a search field where users can filter items from a list on the same page by text content.
Learn more
Open URL
The element will open the web browser on your phone with the URL specified.
Learn more
Open share dialog
The element will open the native share dialog to share the URL specified.
Learn more
Call phone
The element will open the native phone dialog with the phone number specified.
Learn more
Write e-mail
The element will open the native "compose an email" dialog with the email address specified as the "To:" address.
Learn more
Slide
2nd page slides over current page with a parallax effect
Learn more
Move
2nd page slides over current page at a consistent speed
Learn more
Push
2nd page pushes current page out of the screen.
Learn more
Form
Form inputs and submit button that sends data to external database. Used for the submit button of a page with input fields connected to an API request.
Learn more
Top bar
The container frame and its children elements will adjust to fit any device by using the ratio from Figma to calculate the container height to the device screen.
Learn more
Fullscreen ratio
The container frame and its children elements will adjust to fit any device by using the ratio from Figma to calculate the container height to the device screen. (ex: container height is 50% of the screen in the design, it will appear 50% on any device screen)
Learn more
Custom Loading
Replaces the default Bravo loading screen with a custom design app screen.
Learn more
Intro
Displays a custom intro screen either 1) every time the app user opens the app or 2) only the first time.
Learn more
Refresh page
Refreshes the screen with a pull-down gesture. Used for screens connected to external data.
Learn more
App store assets
The thumbnail image for your Bravo project and the home screen icon for your final app.
The launch screen that displays while your app loads at first open. This will replace the default Bravo splash screen in your app bundles. (Note: this screen does not show in Bravo Vision)
Learn more
Status bar light/dark
The status bar on that app page will show as dark or light color. If you don't put any tag, the default is no status bar.
Learn more