“Stretch” your components with new Figma features
The auto-layout component comes with its own cons and makes designers bound within limits while resizing. Thanks to Figma for bringing the new feature update (on Nov 19, 2020) which helps designers to achieve more complex nested auto-layouts with Hug and Fill resizing constraints. Let’s see how this new feature makes a difference in the making of nested auto-layouts.
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.
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.
Breaking down the new features
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.
Quick tutorial
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.
I hope you have succeeded in making resizable nested auto-layout components. This is the very first attempt of mine to use this feature in Figma and I try to make much more complex components with these awesome features and share them with you. Cheers!!
Reference article from the Figma team.
