# 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). 

{% hint style="info" %}
Try out our official [Bravorizer plugin for Figma](/set-up-design/bravo-plugin-for-figma.md) and speed up your app building process!
{% endhint %}

If you are already a Bravo Tag pro, here is the [Bravo Tag Master List](https://www.notion.so/bravostudio/Bravo-Tags-Master-List-145bec845f0b4afaa9e3bb8321b218a8).

![](/files/-MjF-22hOnirrmwmm7Md)

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

{% content-ref url="/pages/ACrqT37S6gANFp3cSgcr" %}
[Structuring the design: the layer hierarchy](/set-up-design/setting-up-your-design-file/structuring-the-design-the-layer-hierarchy.md)
{% endcontent-ref %}

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

{% content-ref url="/pages/RMwQ9MnTJko6ICXwFH0r" %}
[The container](/set-up-design/setting-up-your-design-file/the-container.md)
{% endcontent-ref %}

### How to add a Bravo tag to your design file

1\. In the [Bravo Tags Master List,](https://www.notion.so/bravostudio/Bravo-Tags-Master-List-145bec845f0b4afaa9e3bb8321b218a8) see which layer it's compatible with. Check out the sample design file or tutorial to see how to set up each tag.

![](/files/-MjF37wwPJW9_mofx0wy)

![](/files/-MjF4OW8kukz7J5AXiIA)

2\. Copy the tag.

![](/files/-MjF35oRxm7ym9reqGNb)

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

![](/files/-MjF2quzW1XXvSYWbUil)

4\. Open your app project in [Bravo Vision](/get-started/bravo-vision-previewer.md) to preview the tag functionality.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bravostudio.app/set-up-design/setting-up-your-design-file/what-are-bravo-tags.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.