Mastering Figma Auto Layout: A Structural Guide to Responsive Mobile UI

Figma’s Auto Layout is the backbone of modern, scalable design systems. In this guide, we break down a complex mobile interface—the "My Balance" dashboard—to understand how nested frames create seamless responsiveness.

​

The Architecture of a Mobile Dashboard

Building a professional UI isn't just about placing elements; it's about defining relationships. We categorize our layout into four distinct structural zones:

1. Header: Dynamic navigation and page titles.
2. Hero Section: Balance summaries with interactive icon states.
3. Transaction List: Repeated data structures using nested horizontal and vertical layouts.
4. Footer/Action Bar: Fixed-position navigation and primary CTA buttons.

​

Technical Breakdown: Nesting Strategies

​

1. The Atomic Level: Buttons and Icons

To ensure buttons behave predictably, start with a text layer and apply Shift + A to create an Auto Layout frame.

• Padding Logic: Use consistent horizontal and vertical padding (e.g., 14px horizontal) to maintain click targets.
• The "Fill" Rule: When wrapping buttons in a parent container (like an "Actions" frame), set the child buttons to Fill Container. This ensures they expand to occupy the available width regardless of screen size.

​

2. The Transaction Row (Complex Nesting)

A single transaction item is actually a symphony of four nested Auto Layouts:

• Left Container: Vertically stacks the "Transaction Name" and "Date."
• Right Container: Vertically stacks the "Amount" and "Currency Status."
• Row Wrapper: A horizontal layout containing the Icon, the Left Container, and the Right Container.
• Alignment Tip: Set the Left Container to Fill so it pushes the Right Container to the edge of the screen.

​

3. Solving the Alignment Issue

A common hurdle is centering titles between two asymmetrical icons.

• The Solution: Wrap the title and icons in a parent Auto Layout. Set the title to Fill Container and use Center Alignment. This forces the title to remain perfectly centered even if the icons on either side have different widths.

​

Pro-Tip: The "Hug" vs. "Fill" Workflow

• Hug Contents: Use this for parent containers that should only be as large as the elements inside them (e.g., a tag or a simple button).
• Fill Container: Essential for responsive lists. If your component isn't resizing when you stretch the frame, check if a nested layer is accidentally set to Fixed Width.

​

Watch the Full Technical Walkthrough

For a step-by-step visual on recreating this dashboard from a screenshot using Figma AI and manual Auto Layout nesting, watch the video below.

​

Enjoyed this deep dive? Subscribe to the channel for more technical Figma tutorials and leave a comment with the next component you want us to deconstruct.