Why It Matters
Constraints are essential for responsive design. They answer the question: "When this frame gets wider/taller, what should happen to this element?" Options include pinning to edges (left, right, top, bottom, center), scaling proportionally, or a combination. Proper constraints make resizing predictable and reduce the need for manual adjustments.
Examples
1
A navigation bar pinned left-right stretches with the viewport while maintaining internal padding.
2
A centered modal constrained to "Center" horizontally stays centered regardless of screen width.
3
A corner badge constrained "Top" and "Right" stays in the corner as the parent card resizes.
Related Terms
Frame
A container element in Figma that can hold other elements, support auto layout, have its own styling, and serve as the building block for components.
Auto Layout
A Figma feature that automatically positions and resizes elements within a frame based on defined rules, similar to CSS Flexbox.
Design Handoff
The process of transferring design specifications, assets, and context from designers to developers for implementation.
Explore More Design Terms
Browse our complete glossary of Figma and design systems terminology.