Why It Matters
Frames are the most versatile element in Figma. Unlike groups (which simply cluster elements), frames can have their own fill, stroke, corner radius, constraints, and auto layout. Think of frames as the div equivalent in HTML—they're the structural containers that define your layout. Components must start as frames.
Examples
1
A card component is built from nested frames: CardFrame > HeaderFrame + BodyFrame + FooterFrame.
2
A frame with clip content enabled crops any child elements that extend beyond its bounds.
3
Frames can have responsive constraints that define how they resize relative to their parent.
Related Terms
Group
A simple container that clusters multiple elements together for easier selection and movement, without the advanced features of frames.
Auto Layout
A Figma feature that automatically positions and resizes elements within a frame based on defined rules, similar to CSS Flexbox.
Constraints
Rules that define how an element resizes and repositions relative to its parent frame when the parent changes size.
Main Component
The original, source component that defines the structure, styles, and behavior that all its instances inherit.
Explore More Design Terms
Browse our complete glossary of Figma and design systems terminology.