Implementing Responsive UI Logic with Figma Auto Layout

The most common friction point between design and engineering is the 'static' mock. When a designer provides a button with a fixed width, but the developer needs to build a component that expands for localized text (e.g., English to German), the structural logic is lost. Using absolute positioning in mocks creates a gap where the developer must guess the intended behavior of the UI under different conditions.

Figma’s Auto Layout solves this by replacing fixed X and Y coordinates with a flow-based system inspired by CSS Flexbox. By defining how elements grow, shrink, and space themselves, designers can create components that mirror the actual logic of a web browser.

The Resizing Logic: Hug, Fill, and Fixed

To translate design to code, you must manage how parent containers interact with their children. This is handled via three primary resizing constraints:

• Hug Contents: The parent container dimensions are determined by its children. This is the design equivalent of a container with no fixed width/height that expands to fit its internal content.
• Fill Container: The child element expands to occupy all available space within the parent. This maps directly to flex-grow: 1 in CSS.
• Fixed Width/Height: The element maintains a specific pixel value regardless of the parent or child size. Use this for elements with strict dimensional requirements, like a 24px icon.

Worked Example: Building a Dynamic Product Card

To create a card that maintains its structure regardless of text length, avoid drawing boxes and instead nest Auto Layout frames. Assume you are using Figma version 110 or later.

1. Create the Header: Select an image and a title text layer. Press Shift + A to wrap them in an Auto Layout frame. Set the direction to Vertical.
2. Configure the Body: Add a description text layer. Set its horizontal resizing to Fill Container. This ensures the text wraps to a new line as the card width changes, rather than pushing the card boundaries outward.
3. Assemble the Card: Select the Header frame and the Body text. Press Shift + A again. This is your main card container.
4. Set Spacing: In the Layout panel, set the Gap (spacing between items) to 16px and Padding to 20px on all sides.

When inspecting this in Dev Mode, the resulting CSS will reflect these structural decisions rather than absolute coordinates:

.product-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 16px;
}

Breaking the Flow with Absolute Positioning

A strict flow-based system makes overlapping elements difficult. For example, adding a "Sale" badge to the top-right corner of a product image would normally push other elements aside.

To fix this, select the badge element inside the Auto Layout frame and toggle the Absolute position icon in the properties panel. This removes the element from the Flexbox-style flow, allowing it to be placed anywhere within the parent frame without affecting the position of sibling elements. This is functionally identical to position: absolute in CSS.

Limitations and Performance

Auto Layout is one-dimensional; it handles either a row or a column. It does not natively support multi-dimensional CSS Grid layouts. To achieve a grid, you must nest multiple horizontal frames inside a vertical frame. Be cautious: over-nesting creates a deep layer tree that can degrade performance in large files and make navigation cumbersome.

Additionally, avoid "recursive Hugging." If a parent is set to Hug and all its children are also set to Hug, the layout may collapse or behave unpredictably when content is deleted, as there is no fixed boundary to anchor the structure.

Verification

To verify the implementation, open Dev Mode and select the component. Check that the properties list display: flex and specific gap values. If you see a list of absolute top and left coordinates for every element, the Auto Layout is not configured correctly.