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
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
- 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.
- 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
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:
- Create a new base
- Upload your media file (for ex: MP4 video) to any of the blank cells (select
Attachmentsas field type)
- Click on 'Help' in the upper-right corner, select
- 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.
Add a download functionality (i.e. picture download, resource download)
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.