Creating mockups that are not only visually appealing but also well-organized and easy to navigate is essential in the world of UX design. Containment plays a crucial role in this process, using visual elements like lines, borders, fills, and shadows to structure and compartmentalize content within your designs. In this guide, we’ll delve into the methods of containment and learn how to create them in Figma, a versatile design tool.
Understanding Containment: Containment is the practice of using visual cues to delineate and separate content sections within your mockups. It ensures that your design remains neat, organized, and visually coherent. Four key containment methods we will explore are dividers, borders, fills, and shadows.
Creating Dividers: Dividers are simple horizontal lines that act as visual separators to distinguish different sections of content. Here’s how to create dividers in Figma:
- Identify the sections in your mockup that need separation.
- In the toolbar at the top left of the screen, select the Rectangle tool, represented by a square icon.
- Choose “Line” from the dropdown menu to draw a straight horizontal line across the Frame.
- Click on the newly created line to select it, and navigate to the Stroke section in the Design panel on the right. Here, you can define the line’s color and thickness.
Adding Borders: Borders are continuous lines forming shapes, such as rectangles, that encase specific content elements or text. They create visual distinctions and help emphasize specific parts of your design. To add borders in Figma:
- Identify the content that requires emphasis or separation.
- Select the Rectangle tool from the toolbar.
- Draw a rectangle around the element you wish to highlight.
- In the Design panel, go to the Fill section and remove the fill from the rectangle.
- In the Stroke section, add a stroke using the plus (+) icon, outlining the rectangle. You can customize the stroke’s weight or thickness as needed.
Using Fills: Fills are used to add color to objects in your design, making them stand out and create visual contrast. Here’s how to select and apply fills in Figma:
- Click to select a Layer in your design to which you want to apply a fill.
- In the Design panel, navigate to the Fill section, and click the plus (+) icon to add a fill.
- Figma provides a default solid fill with a hex value (e.g., C4C4C4). Click on the colored rectangle (fill swatch) to access the color picker, allowing you to select any color for your design element.
Applying Shadows: Shadows introduce dimension to your mockups, enhancing the visual appeal and depth of design elements. In Figma, you can create two types of shadows: drop shadows and inner shadows.
For drop shadows:
- Click to select a Layer in your design that you want to add a shadow to.
- In the Design panel, go to the Effects section. The drop shadow effect is applied by default, allowing you to customize the shadow’s properties.
For inner shadows:
- In the Design panel, go to the Effects section, and open the dropdown menu.
- Select “Inner shadow” from the menu. Adjust the inner shadow effect settings to add subtle shadows within the selected shapes.
Containment is an essential aspect of effective mockup design, allowing for clear content separation and visual organization. By applying dividers, borders, fills, and shadows, you can create structured and visually appealing mockups that facilitate user understanding and interaction. Figma provides a user-friendly platform to implement these containment methods, making your design process more efficient and your mockups more engaging. To deepen your knowledge of these techniques and further enhance your design skills, explore Figma’s Help Center and additional resources for detailed guidance and inspiration.