🪄Bravo Tags: adding functionality to the UI elements

A Bravo Tag is a text string that you place in the component names of your design file. After you import the design file into Bravo Studio, the layer with the Tag will turn into a mobile component or action in your final app (preview how it works with Bravo Vision).

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

If you are already a Bravo Tag pro, here is the Bravo Tag Master List.

How to use Bravo Tags

Learn about the layer hierarchy. This is how you should organise the layers of your design file and determines in which layers you can place which tags.

🗃️Structuring the design: the layer hierarchy

Learn about an essential concept of Bravo: the container. This is a necessary element to have in the structure of every app page.

🧱The container

How to add a Bravo tag to your design file

1. In the Bravo Tags Master List, see which layer it's compatible with. Check out the sample design file or tutorial to see how to set up each tag.

2. Copy the tag.

3. Paste it into the name of the compatible layer.

4. Open your app project in Bravo Vision to preview the tag functionality.