The layer hierarchy
Every app screen in your design file should be organized into the following 3 levels. This is how Bravo can read and properly display your design. If you don't have this hierarchy, certain elements may look different or not show up in your app project.

The Layer Hierarchy

Each level is inside ("nested" within) the level above.
  1. 1.
    Top-level frame - always the app page frame
  2. 2.
    2nd-level frames - always and only [container] frames
  3. 3.
    3rd level and below - visual elements (text, shape, image, etc.)
The top-level frame cannot be a Figma component. It will not be recognized as an app page in Bravo.
That's it! 👏
Last modified 2mo ago
Copy link