Joseph
3:27
Build flexible layouts with Frames and Stacks
Frames vs Stacks in Framer comes down to positioning and flow. A plain Frame contains layers that can be positioned freely, which suits overlaps and fixed decorations. A Stack is a Frame with Stack layout applied, so its children follow a responsive row or column. Choosing the right structure keeps layouts stable as content and screen sizes change.
Lesson details
A Frame is the basic container in Framer. It can hold text, images, icons, and other Frames. In a plain Frame without Stack layout, child layers use absolute positioning by default. You can place them freely, which works well for a badge over an image or another element that needs to stay in a precise spot. It is less suitable when neighboring content should move as text grows.
A Stack is still a Frame, but Stack layout changes its children to relative positioning and puts them in a shared row or column. The Stack controls gap, padding, alignment, and distribution. Longer text pushes the next item forward, newly added items receive their own space, children can use Fill sizing, and the parent can Fit its content. This makes buttons, cards, and sections respond more reliably.
For a fragile section, select the hierarchy and give the Agent a specific repair instruction. Ask it to use Stacks and flexible sizing instead of manual positioning, while preserving intentional overlaps and decorations as absolute layers. Describing both what should change and what must stay the same helps the Agent improve the structure without changing the intended design.
Frequently asked questions
What is the difference between a Frame and a Stack in Framer?
A Frame is a container whose children can be positioned freely. A Stack is a Frame with Stack layout applied, which places its children in a responsive row or column with shared spacing and alignment rules.
When should I use a plain Frame in Framer?
Use a plain Frame when layers need precise placement or intentional overlap, such as a badge over an image or a decorative element that should stay in one position.
When should I use a Stack in Framer?
Use a Stack when content should flow and respond to neighboring content. Stacks work well for buttons, cards, navigation, lists, and sections that need consistent gaps, padding, and alignment.
Why does content overlap or break inside a Frame?
Children in a plain Frame use absolute positioning by default, so they do not automatically move when nearby text grows or new content is added. A Stack gives those layers a shared flow.
Can the Agent convert a fragile layout to Stacks?
Yes. Select the problem section and describe the structural change clearly. Ask the Agent to use Stacks and flexible sizing while keeping intentional overlaps and decorative layers absolute.
Continue watching
Load more