For an Adobe XD file to be Bravo-ready, you must add
[containers] groups. These are groups of elements within an artboard.
They are an invisible boundary around the UI elements. These containers naturally sit next to each other or stack on top of each other.
🏗 How do I create a container?
- Select the Rectangle tool.
- Start from the left side of the app page frame and drag to the right side of the page, creating a rectangle that covers the area of the UI elements for the container.
command/ctrl + Gthe elements and the rectangle "area" together.
- Add the Tag
[container]to the name of the group layer.
Rename it to "area" (if you'd like) to identify the purpose of the rectangle. The rectangle is used to create padding around the elements. Otherwise, the first element of the group will jump to the top left corner of the page.
In addition to containers, you need to create the same "area" for any elements that require an interaction area bigger than the element itself. (i.e. a back arrow icon on its own might be too small for the user to tap)
Happy bravorizing! 👏