Framer Tutorial: Layout and Sizing

A Framer Tutorial about Layout, in which we’ll cover the differences between Frames, Stacks and Grids, and when to use which. Next, we’ll cover sizing options: Fixed, Relative, Fill and Fit Content. We’ll not only show you how to apply these concepts to layouts, but to entire pages as well. Watch the Layout Tool introduction video here: https://youtu.be/Yt0Ikf5b4vA Timestamps: 00:00 Introduction 00:27 Designing a Header with Frames 01:28 Layout Constraints / Pinning 02:44 Converting the Header to a Stack 04:23 Auto-Sizing Stacks 05:24 Frames vs. Stacks Recap 05:56 A Quick Look at Grids 07:55 All Sizing Options 10:11 Frames vs. Stacks on Pages (Breakpoints) 🌞 Try Framer for free: https://framer.com 🎉 Follow on Twitter: https://twitter.com/framer 💎 Join Community: https://www.framer.community #website #webdesign #framer