🤓Best Practices

Screens, frames & layers

  • Make sure all your screen frames are the same width-wise.

  • Include a splash screen - 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.

  • 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] text box, make sure there is only one of them per container and it's the bottom-most element.

PreviousSample design filesNextBravo Tags Master List

Last updated