Building Responsive UI Components with Figma Auto Layout

The Problem: Static Designs vs. Dynamic Content

Static frames in Figma require manual repositioning every time a text string changes or a screen size shifts. This creates a maintenance bottleneck where designers must manually resize dozens of components to accommodate different languages or device widths.

The solution is Auto Layout, a property that transforms a standard frame into a dynamic container. It functions similarly to CSS Flexbox, allowing elements to grow, shrink, and shift based on predefined rules rather than fixed X/Y coordinates.

Prerequisites

• A Figma account with Editor access to a project.
• Basic components (e.g., a text layer and a shape) already created on the canvas.
• Figma Desktop App or Browser version (current stable release).

Implementing a Scalable Component

To demonstrate a practical application, we will build a responsive Notification Toast that expands based on the message length and fills the width of its parent container.

Step 1: Create the Base Container

1. Select your text layer and icon.
2. Press Shift + A to wrap these elements in an Auto Layout frame.
3. In the Right Sidebar, set the Direction to Horizontal.
4. Set the Gap between items to 12px to ensure consistent spacing between the icon and the text.
5. Apply Horizontal padding of 16px and Vertical padding of 12px.

Step 2: Configure Resizing Behaviors

The behavior of the component depends on how the child elements interact with the parent frame. Configure the following settings in the Frame section of the sidebar:

Step 3: Handling Overlays with Absolute Positioning

Sometimes a component needs an element that ignores the Auto Layout flow, such as a "Close" (X) button in the top-right corner.

1. Place the Close button inside the Auto Layout frame.
2. In the Right Sidebar, click the Absolute position icon (a plus sign inside a square).
3. Manually move the button to the top-right corner.
4. Set the Constraints to Right and Top. This ensures the button stays anchored to the corner even as the toast expands.

Verification and Diagnostics

To confirm the component is truly responsive, perform these three checks:

• Content Stress Test: Double-click the text layer and paste a long paragraph. The parent frame should expand vertically (if set to Hug) or the text should wrap (if set to Fill).
• Parent Resize Test: Place the toast inside a larger frame. Change the toast's width setting to Fill Container and resize the parent frame. The toast should expand and contract in sync with the parent.
• Alignment Check: Use the Auto Layout alignment grid in the sidebar to toggle between Top-Left, Center, and Bottom-Right to ensure elements anchor correctly during resizing.

Limitations and Risks

Over-Nesting: Avoid nesting Auto Layout frames more than 4-5 levels deep. Deep hierarchies make it difficult to track which "Fill" setting is controlling a specific element and can slow down performance in complex files.

Constraint Conflicts: If you set multiple elements to Fill Container but also apply a Minimum Width that exceeds the parent's size, the layout will overflow. Always check that the sum of fixed elements and minimum widths does not exceed the available screen real estate.

Rollback Procedure

If the Auto Layout settings cause elements to jump to unexpected positions:

1. Select the frame.
2. Press Option + Shift + A (Mac) or Alt + Shift + A (Windows) to remove Auto Layout.
3. The frame will return to a standard frame, and elements will return to their last absolute coordinates.