# Best Practices

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

* Make sure all your screen frames are the same width-wise.
* Include a [splash screen](https://docs.bravostudio.app/bravo-tags/app-icon-and-splash-screen#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](https://docs.bravostudio.app/good-to-know/troubleshoot/errors-when-importing).
* 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]`](https://docs.bravostudio.app/bravo-tags/components/component-flexible-text) text box, make sure there is only one of them per container and it's the bottom-most element.