Layout & Design

Thinking in Frames (Fundamentals Lesson 4)

Joseph

3:54

68K views

Aug 30, 2024

About this lesson

The layout of every website, no matter what was used to build it, is made of rectangles. It doesn’t always look like it, but structurally it’s true. Which is why every layout we create in Framer boils down to one fundamental element: rectangles called Frames.

In this lesson, we’ll start training our brains to think in frames — and understand what they can do for us in Framer.

https://www.youtube.com/watch?v=fQSWqKPNXb0&t=0s Intro

https://www.youtube.com/watch?v=fQSWqKPNXb0&t=5s Thinking in frames

https://www.youtube.com/watch?v=fQSWqKPNXb0&t=23s Frame vocabulary: parent, child, siblings

https://www.youtube.com/watch?v=fQSWqKPNXb0&t=61s Versatility of frames

https://www.youtube.com/watch?v=fQSWqKPNXb0&t=76s Frames in common layout patterns

https://www.youtube.com/watch?v=fQSWqKPNXb0&t=106s Styling frames

https://www.youtube.com/watch?v=fQSWqKPNXb0&t=117s Creating frames on the canvas

https://www.youtube.com/watch?v=fQSWqKPNXb0&t=133s Modifier keys when drawing frames

https://www.youtube.com/watch?v=fQSWqKPNXb0&t=159s Nesting layers in frames

https://www.youtube.com/watch?v=fQSWqKPNXb0&t=175s Building order and wrapping elements in a frame

https://www.youtube.com/watch?v=fQSWqKPNXb0&t=199s Removing a parent frame without deleting children

https://www.youtube.com/watch?v=fQSWqKPNXb0&t=210s Wrap up

🌞 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

0:00the layout of every website no matter 0:02what was used to build it is made of 0:04rectangles it doesn't always look like 0:06it but structurally it's true which is 0:09why every layout we create in framer 0:11boils down to one fundamental element 0:14rectangles called frames in this lesson 0:17we'll start training our brains to think 0:19in frames and understand what they can 0:21do for us in 0:24[Music]0:25framer frames and framer are a lot like 0:28frames in figma but if all of this is 0:30new to you a frame is essentially a 0:32rectangle but a rectangle that can have 0:35other layers within it on that note I've 0:38got a few vocabulary terms you'll want 0:39to be familiar with when a layer is 0:42inside of a frame we say that it's 0:44nested we might also refer to that layer 0:46as a child of the frame it's nested 0:48within and the frame directly containing 0:51a layer is its parent makes sense if two 0:55layers sit at the same level of the 0:56nesting hierarchy we call them siblings 0:59you'll hear me say these words a lot as 1:02far as the versatility of frames we use 1:04them to group or contain things 1:06automatically stack or grid things make 1:08things flexible or just draw a plain old 1:11rectangle you'll find a lot of great 1:13examples of common layout patterns on 1:15the insert panel that you can drop onto 1:17the canvas to dissect and learn from 1:20like this features section the whole 1:22thing is wrapped in a frame each feature 1:25a frame the images frames each block of 1:29content frame and the buttons again 1:33frames even text boxes themselves are 1:36essentially just special frames you can 1:38see from this example that some frames 1:41will be visible rectangles but many will 1:43be structural and completely invisible 1:46depending on what you're trying to 1:47accomplish you can style frames on the 1:49properties panel with borders fills 1:51shadows and all sorts of transforms and 1:54effects now let's talk about actually 1:57creating these things on the canvas the 1:59there are a few different ways to create 2:01a frame to draw one you can head to the 2:03layout menu on the toolbar and choose 2:06the frame tool or press the F key on the 2:09keyboard then you can click and drag to 2:12draw a frame wherever You' like more 2:14often than not you'll probably just 2:15ballpark the size and position when you 2:17drag then get the size and position 2:19dialed in on the properties panel when 2:21you're dragging a frame you can also use 2:23some modifier keys that might be 2:24familiar to you like holding shift to 2:26draw a perfect square holding alt or 2:29option to draw outward from the center 2:32or holding space bar to move the frame 2:34around before you drop it in the 2:37previous lesson we also talked about how 2:38dragging a layer into a frame will 2:40automatically Nest it as a child of that 2:43frame you'll see a blue outline around 2:45the frame it'll get nested within and 2:47you can prevent the nesting from 2:49happening by holding the space bar 2:51sometimes you'll create parent frames 2:53first then add children and work your 2:55way down into the details but sometimes 2:57you'll do the opposite there's no right 2:59or wrong order to build things in but I 3:02do have a trick for those situations 3:04where you realize you'd like to wrap 3:05some existing child elements in a parent 3:08frame with multiple layers selected you 3:11can rightclick and choose add frame or 3:14press command return on a ma or control 3:17enter on a PC you can accomplish exactly 3:20the opposite and delete a parent frame 3:22while leaving the children alone just 3:23press command delete on a Mac or control 3:26delete on a PC so now you know what 3:28frames are all about and how to create 3:31them is this lesson enough to be 3:33successful building complex layouts 3:35absolutely not we still need to talk 3:37about the many ways of sizing and 3:39positioning things so stay tuned and 3:41I'll see you in the next lesson

TeachesFrames

Also coversGrids Keyboard Shortcuts Sizing Stacks

Watch on YouTube ↗

‹ Framer Update: Menus with Search and Scroll

Interacting with Layers in Framer (Fundamentals Lesson 3) ›