Make Responsive Components
By: Fayas Fs
Tags: Component Libraries, User Interface Design, Figma, Responsive Design, Design Systems

Complexities of nested auto-layouts while resizing

As auto-layouts are widely used in design systems, many designers started making more complex components with nested auto-layouts which limits the usability of these components while resizing. Figma introduced a new alignment option called “Stretch” that enabled layouts to stretch only in the counter axis and not in the primary axis. Thus stretch didn’t help designers to create nested auto-layouts. Let’s see an example to demonstrate the edge case of a stretch in a nested auto layout.

Example of how nested auto-layouts doesn’t resize when stretched

In the above example, I tried to create a component by nesting two auto-layouts.

1. Title + Input placeholder (vertically aligned)

2. Icon + Helper text (horizontally aligned)

Both auto-layouts are made as a single nested component. While resizing, the whole component horizontally (in the primary axis) one of the auto-layout (Icon+Helper text) doesn’t resize. This restricted the use of nested auto-layouts in the design system.

The need for “Real” stretch

Components with nested auto-layouts are not responsive in all directions. Stretch as one of the alignment properties doesn’t eliminate the resizing property of nested components. It acted with respect to the auto-layout alignment of the component thus working in one direction. This limits the use of nested components in the design systems. Thus designers have to choose between auto-layouts or flexible layouts.

The new auto-layout feature for resizing

Figma released the new auto-layout feature that allows nested components to stretch in both ways. This time stretch is not made as alignment property rather it’s made by constraints property of the component. The constraints like the fill-container, fixed width/height, and hug container works better for resizing the nested auto-layout components and fulfills the dream of designers.

Example of responsive nested auto-layouts using fill and hug container features

Breaking down the new features

Image showing new options added in the constraints tab (Figma)

Fixed width or height: As the name suggests, they make components to stay fixed when resized. To make changes, you must change the width and height of the frame manually.

Hug contents: This constraint keeps the frame bounded to its respective components. The frame can grow individually but doesn't resize in nested components.

Fill container: This makes “Stretchable Nested Auto-layout Components”. Yes, now you can resize the nested components within the horizontal and vertical directions.

Example of how to “fill container” works with nested components

Quick tutorial

Step by step tutorial to make stretchable nested components

Step 1: Let’s make individual components.

— A text layer for the title of placeholder.

— Input text box with placeholder text. (You don’t have to worry about “hug contents” in constraints when you don't use auto-layout).

— Make a frame combining icon and text layer. Now, add auto-layout to the frame. Select the text layer and choose fill Container for width under resizing so that the text can wrap when stretched.

Step 2: Now combine placeholder title and input text box make it as a frame and convert it as auto-layout. Since auto-layout is added to a frame, select both layers(text layer and input box) and choose fill container for width under resizing. We make this frame as auto-layout since there may be a scenario where you need only an input box. The frame stays fixed in size even when you delete the title of the placeholder if auto-layout is not given.

Step 3: Now let’s combine (title+input box) and (helper-text frame) make it as a frame and convert as auto-layout. Now choose fill container for width under resizing. Note: Select both nested components (title+input box) and (helper-text frame) and choose fill container for width under resizing.

This feature enables designers to create responsive nested components.