Master Stacks, Position & Sizing (Framer For Beginners)
Learn how to use Framer stacks, position and sizing—in 10 minutes.
🔴 Working File: https://timgabe.com/resources/framer-layouts
Timecodes
0:00 - Tutorial introduction
0:16 - Positioning elements with frames
0:43 - Fixed positioning in frames
1:01 - Centering and fixing elements
1:13 - Understanding relative positioning with Stacks
1:46 - Stack's menu options explanation
2:34 - Absolute positioning in Stacks
2:59 - Sticky positioning in Stacks
3:45 - Exploring sizing options, fixed width
4:16 - Relative sizing discussion
4:53 - Fill width option in Stacks
5:30 - Fit content sizing, button example
6:11 - Viewport height sizing explanation
6:34 - Frames vs Stacks usage
7:01 - Creating a card layout using Stacks
10:23 - Tutorial conclusion
#framer #framertutorial
➡️ QUESTION — Have a question about UI, UX or Product Design? Designing in Framer? Or Anything Else? Post in the comments section of this video—I’m happy to answer!
🔴 Working File: https://timgabe.com/resources/framer-layouts
Timecodes
0:00 - Tutorial introduction
0:16 - Positioning elements with frames
0:43 - Fixed positioning in frames
1:01 - Centering and fixing elements
1:13 - Understanding relative positioning with Stacks
1:46 - Stack's menu options explanation
2:34 - Absolute positioning in Stacks
2:59 - Sticky positioning in Stacks
3:45 - Exploring sizing options, fixed width
4:16 - Relative sizing discussion
4:53 - Fill width option in Stacks
5:30 - Fit content sizing, button example
6:11 - Viewport height sizing explanation
6:34 - Frames vs Stacks usage
7:01 - Creating a card layout using Stacks
10:23 - Tutorial conclusion
#framer #framertutorial
➡️ QUESTION — Have a question about UI, UX or Product Design? Designing in Framer? Or Anything Else? Post in the comments section of this video—I’m happy to answer!