💡

Bravo Best Practices

We know that working with multiple tools and devices (Design tool + Bravo Studio + Bravo Vision + Airtable or any external database) will feel overwhelming sometimes. We're still getting the hang of it too!

Here are tips from the team and Bravo users to help make your app creating process as smooth sailing as possible. ⛵️

Structuring your Figma file for Bravo

Figma file housekeeping checklist

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].
Vectors, SVGs, custom shapes
  • "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.
  • Always try to 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
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.
  • When using a [flexo] text box, make sure there is only one of them per container and it's the bottom-most element.

Structuring your Adobe XD file for Bravo

Coming soon

Database setup

My API populates my placeholder design several times in my app

If you see that the design you created as your placeholder (e.g. a card item in a list) is populated one or more times without it getting any real data from your API, it's probably because you have empty records in your database (empty rows): delete any empty record and it should be fixed!

Where to store files (videos, audio tracks, etc.) to get a URL for the Bravo Tags?

With Airtable (probably works with other similar API services), you can:

  1. Create a new base
  2. Upload your media file (for ex: MP4 video) to any of the blank cells (select Attachments as field type)
  3. Click on 'Help' in the upper-right corner, select API documentation.
  4. In the menu panel on your left: select the table you just created (named as 'TABLE 1' by default) and look for the 'Attachments' (under 'Field name'), then look for your .mp4-ending URL in the dark panel on your right.

Adding functionalities

Add a download functionality (i.e. picture download, resource download)

Use the [action:openurl:URL] tag to open a webpage where you either offer the download or trigger an automatic download with Javascript. This way the browser would open for that picture.

Check out this guide to see how you can add actions to your design.

Add an action to an UI element with state component/variants

Make sure you add the action Bravo Tag to the default instance layer name, instead of the group.

image