The [container]
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?

1. Select the Frame tool
2. 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.
3. Rename the layer to include the Tag [container].

📐 What size should I make the containers?

Container guidelines

Containers must:
1. Stack on top of one another (like Legos) with their borders touching. 2. Touch the left & right sides of the app screen frame. 3. Start the first container from the top of the app page frame. 4. Include the padding of your design within the container. 5. They should not overlap one another *.
* Except for the top bar. You can have a top bar container and another container starting from the top edge of the page.
6. If a container is <50% of the screen width, it will stack horizontally and then vertically down (when connected to dynamic data).

🖌 Tutorial in Figma

Follow this tutorial to understand how to add a container to your design.
That's it! 👏
Last modified 2mo ago