Constraints and Resizing in Figma

Key Concepts

1. Stretch
2. Scale
3. Pin to Corner
4. Fixed Size

1. Stretch

The Stretch constraint in Figma allows an element to expand or contract horizontally or vertically based on the size of its parent container. When you apply the Stretch constraint, the element will resize to fill the available space within its parent frame.

Imagine Stretch as a rubber band that expands or contracts to fit the size of a container. Just as a rubber band can stretch to fit different shapes, an element with the Stretch constraint will resize to fit different frame sizes.

2. Scale

The Scale constraint in Figma allows an element to resize proportionally based on the size of its parent container. When you apply the Scale constraint, the element will maintain its aspect ratio while resizing to fit the available space within its parent frame.

Think of Scale as a photo that resizes while maintaining its original proportions. Just as a photo can be enlarged or reduced without distorting its shape, an element with the Scale constraint will resize proportionally to fit different frame sizes.

3. Pin to Corner

The Pin to Corner constraint in Figma allows an element to maintain its position relative to one of the corners of its parent container. When you apply the Pin to Corner constraint, the element will stay anchored to the specified corner, regardless of the parent frame's size.

Imagine Pin to Corner as a picture frame that is always hung in the same corner of a room. Just as the frame stays in the corner regardless of the room's size, an element with the Pin to Corner constraint will stay anchored to the specified corner of its parent frame.

4. Fixed Size

The Fixed Size constraint in Figma allows an element to maintain its original dimensions regardless of the size of its parent container. When you apply the Fixed Size constraint, the element will not resize or move, even if the parent frame changes size.

Think of Fixed Size as a statue that remains the same size and position regardless of the surrounding environment. Just as a statue stays fixed in place, an element with the Fixed Size constraint will maintain its original dimensions and position, unaffected by changes in the parent frame.