Resizing an auto layout frame in Figma is controlled by its resizing mode properties and optional minimum/maximum dimensions.
Understanding Auto Layout Resizing
Figma's auto layout frames don't resize quite like regular frames. Instead of just dragging corners, their size is determined by their contents, their parent container, or explicit fixed values, combined with padding and spacing settings.
There are three primary ways an auto layout frame's size can be defined:
Primary Resizing Modes
- Hug Contents: The frame automatically adjusts its size (width or height, depending on the setting) to tightly wrap around its child elements, plus any defined padding. As children are added, removed, or resized, the frame expands or shrinks accordingly.
- Fill Container: The frame expands to fill the available space within its parent auto layout container along the specified direction (width or height). This is useful for creating responsive layouts where elements stretch to fit their parent.
- Fixed Width / Height: The frame maintains a constant, specific dimension (width or height) regardless of its contents or parent container size. You set this dimension manually.
You can set these modes independently for width and height. For example, a frame might Hug Contents for width and Fill Container for height.
Setting Minimum and Maximum Dimensions
Beyond the primary resizing modes, you can add constraints that prevent your auto layout frame from becoming too small or too large. This is particularly powerful when using Hug Contents or Fill Container.
To add these constraints:
- For Width constraints: Open the Width dropdown menu in the auto layout section of the Properties Panel. Here, you will find options like Add min width and Add max width.
- For Height constraints: Open the Height dropdown menu. Here, you will find options like Add min height and Add max height.
Once added, you can input numerical values for the minimum and maximum size allowed.
- A min width or min height prevents the frame from shrinking below that size, even if it's set to Hug Contents or its container is smaller when set to Fill Container.
- A max width or max height prevents the frame from growing beyond that size, even if its contents are larger when set to Hug Contents or its container is larger when set to Fill Container.
How Children and Spacing Affect Size
The final size of an auto layout frame is also influenced by:
- Child Resizing Modes: How the items inside the auto layout frame are set to resize (Hug, Fill, Fixed) directly impacts the space they occupy and thus the parent frame's size if it's set to Hug Contents.
- Spacing Between Items: The gap between child elements adds to the overall dimension of the auto layout frame.
- Padding: The space between the auto layout frame's border and its contents contributes to its total size.
By combining these settings – the frame's resizing mode, min/max constraints, and how its children and spacing are configured – you precisely control how your auto layout frame resizes in different scenarios.
