1Different types of containers

You created an amazing app design and you are ready to turn it into a native app!

BUT WAIT. You cannot just import any Figma file into Bravo.

You must ✨bravorize✨ (adapt) your Figma file so it is Bravo compatible (or else you'll see a bunch of errors).

🤔 Where to add a container

For a Figma file to be Bravo-ready, you must add "containers", which are frames that divide an app screen into separate blocks based on the intended behaviour of the design.

This is the foundation of how Bravo transforms your Figma app design into a native app.

💡

Golden rule: You need to have at least one container frame on every app screen.

image

1. Is this page a menu?

  1. No. Go to the next question.
  2. Yes. Create a container frame around the menu area + add the menu tag.
  3. Blue overlay box denotes container frame.
    Blue overlay box denotes container frame.

2. Does this page have a fixed top bar?

  1. No. Go to the next question.
  2. Yes. Create a container frame around the top-bar area + add the top bar tag.
  3. Blue overlay box denotes container frame.
    Blue overlay box denotes container frame.

3. Does this page have a list design that will be populated with API data later?

  1. No. Go to the next question.
  2. Yes. Create one container frame around the list item design + (if applicable) another container frame(s) around other parts of the screen.
  3. image
    Blue overlay box denotes container frame.
    Blue overlay box denotes container frame.

4. Does this screen have a text box that will be populated with API data and can be different amount of text from your design?

  1. No. Go to the next question.
  2. Yes. Create a container frame so that the text box is the bottom-most element in the container + add the flexo text tag. If there is anything else below, create another container below.
  3. Blue overlay box denotes container frame.
    Blue overlay box denotes container frame.

5. Does this screen have a design that needs to be the same aspect ratio across all device sizes? (Ex: it must be full screen on all devices)

  1. No. Go to the next question.
  2. Yes. Create a container frame around the design that needs to maintain its ratio to designed screen size + add the aspect ratio to screen tag.
  3. Blue overlay box denotes container frame.
    Blue overlay box denotes container frame.

6. If you answered no to all of the above, create one container frame to enclose all the UI elements.

Blue overlay box denotes container frame.
Blue overlay box denotes container frame.

👉 Up next