Figma tries to alternate the auto-layout components to be more responsive, based on CSS-Flex Properties, and introduced two new alignment properties, packed and space-between. Achieving CSS flex properties can really make a difference in making responsive layouts as well as reducing the knowledge gap between design and dev teams. In this blog, I have tried to match both flex properties and Figma layouts.
Flex Container:
Flex container can be treated as a bounding box/frame, which holds all elements/components and makes them align while resizing. The frame can be resized and when resizing, the nested frames also have to resize to make a responsive layout.
Flex Items:
Flex items are individual frames that are inside the container. These are aligned to the container they are wrapped with. They behave based on the alignment property.
These items or frames inside the container can be resized or stay at a fixed size when the container is stretched or resized.
Flex Direction:
This indicates the direction at which the flex container/frame has to grow when new items/nested frames are added. The flex-direction is along with the primary axis of the container/frame. When the container/frame is horizontally aligned then by default the container grows from left to right. Similarly, when the container/frame is vertically aligned then by default the container grows from top to bottom as in CSS-flex property.
To reverse this in both horizontal and vertical directions, CSS-flex uses row-reverse and column-reverse property which makes the container to grow from right to left and bottom to top. In Figma, we can use also reverse the direction by setting the constraints of the container.
Note: The constraints panel only shows up when the container/frame is inside the artboard.
Flex Wrap:
This CSS flex property makes items/nested frames wrap inside the container/frame when it's resized.
This property can’t be completely achieved in Figma. Even though this is a shortcut, we can able to wrap the items to some extent which can help to make responsive components.
When you change the alignment direction of auto-layout, it alters its property. When you change from horizontal to vertical, the item/nested frame is altered as a fixed height. Similarly, when you change from vertical to horizontal, item/nested frame width is fixed. This constraint doesn’t make the items wrap to the container.
To overcome this, after changing the auto-layout alignment direction, select the container and items and change the fixed height →hug container or fixed-width →hug container respective to the primary alignment direction.
Justify Content:
This defines the alignment along the main axis of the container/frame. The items can be at the beginning or end or at the middle of the container. The items/nested frames have to be fixed in width. Know more about Packed auto-layout alignment.
Flex Start: Items/nested frames are aligned to the left or start of the container.
Flex End: Items/nested frames are aligned to the right or end of the container.
Center: Items/nested frames are aligned to the center of the container.
Space Between: Items/nested frames are spaced between each other when the container is resized. Know more about Space-between property.
Space around and space evenly can be achieved by specifying auto-layout padding and space between values.
Align Items:
This defines the alignment along the cross axis of the container/frame. The items can be at the beginning or end or at the middle of the container. The items/nested frames have to be fixed in height. Know more about Packed auto-layout alignment.
Flex Start: Items/nested frames are aligned to the top or start of the container.
Flex End: Items/nested frames are aligned to the bottom or end of the container.
Center: Items/nested frames are aligned to the center of the container.
Stretch: Items/nested frames are stretched or filled to the container.
Flex Grow, Shrink, and Basis:
Flex Grow and Shrink can be achieved when the item/nested frames inside the container/frame is given as fill container. This makes the item to fill the container and shrink or grow when we resize the container. Flex Basis can be achieved by changing the item's width/height as fixed or fill. Know more about stretching your component.
I have tried to match the CSS property with the Figma. When this is achieved to build layouts in the design system, designers can able to achieve both responsive layouts as well as reduces the knowledge gap between design and dev teams.
Know more about components and design systems.
Know more about Flexbox.
