Setting up a container on Adobe XD

🏗 How do I create a container?

1. Select the Rectangle tool.

2. 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.

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.

3. Group command/ctrl + G the elements and the rectangle "area" together.

4. Add the Tag [container]to the name of the group layer.

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).