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.
Places a fixed bottom navigation bar on every screen of the app.
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.
Triggers a menu that slides in from the bottom and covers the entire screen.
A web page will replace the content of a rectangle shape.
A Lottie will replace the content of a rectangle shape.
A GIF will replace the content of a rectangle shape.
Autoplays an audio-less video when the user is on that app screen. The video will replace the content of a rectangle shape.
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.
Plays an MP3 track in your app.
The element will open a fullscreen video player with the video specified in the URL. Supports Youtube links and URL ending in .mp4.
The text box will turn into a search field where users can filter items from a list on the same page by text content.
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.
The element will open the native phone dialog with the phone number specified.
The element will open the native "compose an email" dialog with the email address specified as the "To:" address.
2nd page slides over current page with a parallax effect
2nd page slides over current page at a consistent speed
2nd page pushes current page out of the screen.
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.
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)
Replaces the default Bravo loading screen with a custom design app screen.
Displays a custom intro screen either 1) every time the app user opens the app or 2) only the first time.
Refreshes the screen with a pull-down gesture. Used for screens connected to external data.
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.