> For the complete documentation index, see [llms.txt](https://docs.bravostudio.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bravostudio.app/set-up-design/bravo-best-practices.md).

# Best Practices

### **Screens, frames & layers**

* Make sure all your screen frames are the same width-wise.
* Include a [splash screen](/bravo-tags/app-icon-and-splash-screen.md#how-to-add-the-tag-1) - it gives Bravo a reference point for displaying your design proportionally on all devices.
* Try to design just the necessary screens and then connect them to real data through an API.
* Make sure your visual elements are within their parent frame. Whatever is outside a frame may be cut off even if it is visible in Figma.
* Delete any hidden layers not being used.
* If there are specific layers you don't want Bravo to import, use the tag `[skip]`.
* Avoid too many nested groups. Ungroup layers when is not necessary. Keep in mind that each group is a new element to be imported, and too many elements might result in hitting an [import limitation error](/good-to-know/troubleshoot/errors-when-importing.md).
* Use the **\[component:svg]** tag to convert multiple elements into just one, when you don't need to bind any data to them.

### **Vectors, SVGs, custom shapes**

* Put a group around vector shapes to improve performance of the Figma-Bravo sync. 
* "Outline stroke" any design made up of strokes (like line icons) to turn them into vector shapes.
* If you have custom vector shapes in your design, make sure they are completely closed.
* Flatten your vector shapes into one vector.
* SVGs/vectors are "fit" to frame by default, as they are normally used for icons.
  * If you want the SVG to "fill" a frame (i.e. for backgrounds), add the tag `[shape:fill]` to the vector layer

### **Images**

* If connecting images from a database, set the image fill in your Figma file based on how you want the image to display (fit or fill)
* *Crop* and *tile* are not supported
* For having a circular image, use a rectangle shape with at least 30 corner radius. We don't support ellipsis yet.

### **Effects (shadow, blur)**

* If you have 2+ effects (i.e. shadow, blur) on one layer. Add the tag `[component:svg]` to the layer.

### **Text**

* Make sure your text box is bigger than the text content inside, or your text will be cut once imported to Bravo. On Adobe XD, use **Fixed Size** rather than Auto Height or Auto Width.
* When using a [`[flexo]`](/bravo-tags/components/component-flexible-text.md) text box, make sure there is only one of them per container and it's the bottom-most element.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.bravostudio.app/set-up-design/bravo-best-practices.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.