For a Figma file to be Bravo-ready, you must add
[containers]. These are frames placed as a 2nd-level layer: inside ("nested" in) the app page frame and containing the UI elements.
They are an invisible boundary around the UI elements. These frames naturally sit next to each other or stack on top of each other.
🏗 How do I create a container?
- Select the
- Start from the left side of the app page frame and drag to the right side of the page, creating a frame that contains the UI elements.
- Rename the layer to include the Tag
📐 What size should I make the containers?
- Stack on top of one another (like Legos) with their borders touching.
- Touch the left & right sides of the app screen frame.
- Start the first container from the top of the app page frame.
- Include the padding of your design within the container.
- They should not overlap one another*.
- If a container is <50% of the screen width, it will stack horizontally and then vertically down (when connected to remote data).
*Except for the top bar. You can have a top bar container and another container starting from the top edge of the page.
🖌 Tutorial in Figma
You can follow along with this tutorial in Figma.
That's it! 👏