Stacks and Relative Positioning in Framer (Fundamentals Lesson 6)
Stacks in Framer let you create rows or columns that automatically align, distribute, and space themselves, just like auto-layout in Figma or flexbox in CSS. This tutorial shows you how stacks unlock relative positioning and responsive sizing options that make layouts bulletproof and flexible.
You'll learn when to use stacks (pretty much anytime you see evenly spaced elements), how to convert frames into stacks, and how relative positioning makes child layers flow naturally. The lesson covers all the essential stack properties: direction, distribution along the main axis, alignment on the cross axis, gaps, padding, and wrapping. You'll also discover tricks like using Shift+A to instantly fit content and how to apply stack layouts to entire breakpoint frames for easier section management.
00:00 Intro
00:09 What stacks do and why they matter
00:20 Stacks and relative positioning
00:37 Turning frames into stacks
01:12 Relative positioning behavior in stacks
01:55 Common use cases for stacks
02:25 Fitting stacks to content
03:02 Creating stacks from scratch or wrapping layers
03:55 Default stretching behavior for new stacks
04:16 Stack properties: direction and distribution
05:26 Adjusting gaps between elements
05:55 Aligning elements on the cross axis
06:11 Using padding effectively
06:44 Wrapping elements in stacks
07:02 Applying stack layouts to breakpoint frames
07:45 Wrap up
Topics covered: responsive design, layout principles, flexbox concepts
🌞 Start for free: https://framer.link/yt
📚 Learn more at: https://framer.link/yt-academy
💎 Join the Community: https://framer.link/yt-community
🎉 Follow on X: https://framer.link/yt-x