Layout & Design · TOPIC

Frames

Every Framer lesson that teaches or touches on Frames

Lessons that teach this

5 lessons teach this topic

5:41

Scaling a clipped image on hover in Framer

Animations, Layout & Design

7.1K views

January 13, 2026

10:48

Styling Frames in Framer (Fundamentals Lesson 16)

Layout & Design

28K views

January 29, 2025

6:08

Adding Images, Videos, and Text in Framer (Fundamentals Lesson 12)

Layout & Design

87K views

December 30, 2024

3:54

Thinking in Frames (Fundamentals Lesson 4)

Layout & Design

68K views

August 30, 2024

6:02

Interacting with Layers in Framer (Fundamentals Lesson 3)

Layout & Design

85K views

August 23, 2024

Where it comes up

471 moments across 106 lessons

Practice: Designing Fluid Layouts in Framer (Fundamentals Lesson 24)Joseph

0:05when parent frames or even the browser 0:19Frame. In this lesson, we're going to be 1:35breakpoint frame, we'll create frames 2:14nested frame that I like to call a 2:24container frames rather than their 2:26section frames, and that's fine, too.

Thinking in Frames (Fundamentals Lesson 4)Joseph

0:14rectangles called frames in this lesson 0:19in frames and understand what they can 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:42inside of a frame we say that it's

Styling Frames in Framer (Fundamentals Lesson 16)Joseph

0:00frames whether visible or invisible are 0:05apply some style properties frames also 0:12style properties of frames and how 0:24frame but there are some visual 0:28content inside of a frame so we're 0:33that is a frame an invisible frame has

Practice: Creating Breakpoints in Framer (Fundamentals Lesson 25)Joseph

0:26Frame. For this one, we'll pick up where 5:18going to select that same frame, and I'm 6:01parent frame that has the padding on it.6:19parent is this text lockup frame. And 6:22that text lockup frame could have that 8:30of the parent frame. So if I press

Adding Images, Videos, and Text in Framer (Fundamentals Lesson 12)Joseph

0:00with the fundamentals of frames stacks 0:39really just a frame with an image fill 0:43drawing a frame adding a fill set to 1:06us draw a frame with a placeholder image 2:34the frame which should be familiar to 2:36you from figman sketch when the frame

Creating your first form in FramerJoseph

0:48at the top level we get a frame for the 0:55makes a lot of sense this Frame also has 1:15bit later on within the parent frame for 1:17the form we have a set of frames each 1:25regular frames but you can probably tell 1:34panel this frame has a tag called label

Sizing to Fill and Fit Content in Framer (Fundamentals Lesson 7)Joseph

2:13essentially each one of these frames is 2:311/3 sure enough each frame set to 1fr 2:38so what happens if we increase a frame 2:45frame set to 1fr and you'd be right to 2:59means each of these two frames get one 3:04and this Frame gets two fours being set

Absolute Positioning in Framer (Fundamentals Lesson 5)Joseph

0:38to their parent frame relative where the 0:59its parent frame 1:20relation to its parent frame just like 1:54have this long black frame with an 2:11Frame you could say it's horizontally 2:46parent frame how far the left is from

Interacting with Layers in Framer (Fundamentals Lesson 3)Joseph

1:12parent frame which is exactly what will 2:15directly from there when a frame has any 3:43the importance and flexibility of frames 3:47need a rectangle use a frame need to 3:49group up a set of elements use a frame 3:54going to be full of frames and Frames

Importing from Figma and the Web to Framer (Fundamentals Lesson 14)Joseph

2:37frame it already has a white background 4:25text layers that are wrapped in a frame 4:42frame so now it's time to run the plugin 5:17pasting into the correct frame so right 9:03including the parent frame that has that 9:36right parent frame and boom there we go

Min and Max Sizing in Framer (Fundamentals Lesson 11)Joseph

0:41inside of our frame making sure it won't 0:56boxes in the outside of our frame 3:56stack this wraps a new frame around our 4:12of this Frame to be the width I'm 4:35content frame stops growing when it hits 5:01any wider than its parent frame and when

Stacks and Relative Positioning in Framer (Fundamentals Lesson 6)Joseph

0:24fill their parent or make a parent frame 0:53started to get you thinking in frames 1:00a stack is a frame but a frame with a 1:06select any frame like this minimalist 1:15a layout now this Frame is considered a 2:33even a frame with a single child layer

8 Framer shortcuts you're probably sleeping onJoseph

0:20Shortcut number one. Normally, when you resize a frame, Framer respects the 2:19the frame you're hovering over. But if you hold the space bar while draggin 2:24disable that behavior. No more accidentally dropping a layer out of or into 2:41and height to fit. As a bonus, if the frame isn't already a stack, it'll au 2:48Since auto with and height, don't work on regular frames. With multiple lay 3:15regular frame, then press Shift A to convert it to fit. And last but not le

Making elements revolve in FramerJoseph

0:53any one of them and choose add frame,0:56which is going to wrap a frame around my 1:01that frame and I can come over here to 1:50are rotating this whole frame, our icons 2:05that I just created on this frame, and 2:18going to click on my frame on the canvas

Using Events for nested interactions in Framer (Animation Lesson 13)Joseph

0:59frame here called interactive alignment.1:03frames. I've got an icon, and I've got 1:09to take this whole parent frame and just 1:36frame selected, I'm going to change our 1:40select our heading frame and our body 1:42frame, which have separate text boxes

Triggering animations on scroll in Framer (Animation Lesson 7)Joseph

1:56select this whole frame. And with this 1:58frame selected, I'm going to come down 3:18center. So when the center of this frame 5:09this frame reached the bottom of the 7:04So when the top of the frame hits the 7:22set, I would need to get this frame

Framer Community Show & Tell July 24, 2023—Alex Socoloff, and Joris RoodFramer

3:06free in the frame and Community you can 3:41in frame Community you can find it as a 6:09in in the frame itself if you're using 7:28frame is just like big shout out to the 9:51you can find easily on the framing 10:11framing Community there's no custom

Setting Up custom cursors in Framer (Animation Lesson 16)Joseph

8:11frame selected, I'm going to come back 8:52over this particular frame. So again,9:01the cursor over this particular frame.10:09hover over this frame, there we go. We 11:12this frame. So we're super close. Let's 11:16tips for these other frames. I'm going

Using the Appear Effect in Framer (Animation Lesson 6)Joseph

0:35frame.com/academy 0:52icon here that's in a little frame, and 1:04frames. But I do want to tell you when 1:17select the parent frame that has the 4:07that's on its parent frame because it's 4:09inside of its parent frame. It goes with

Using the Drag Effect in Framer (Animation Lesson 5)Joseph

1:43the bounds of this frame that it's 2:48do is select the frame that I want to 2:52boundaries, which is this frame here.3:13there's that drag frame section that I 4:05radius of this frame is larger than the 4:24right. And that's because the frame

Framer Community Show & Tell July 6, 2023—Cédric Moore, Madhuri Maram and Arjun PhloxFramer

8:21perfect this is all um made in frame so 14:25seen in frame or money 14:58yeah if we go back uh to frame of money 18:20your other frame or projects or direct 18:46frame without money of course 34:35um something uh called meeting frame a

Animating between variants on scroll in Framer (Animation Lesson 10)Joseph

1:18long stack of these text frames and then 1:41this iPhone frame selected, I'm going to 2:01of its parent frame, which is this big 2:03frame here, which is just a horizontal 2:08has that stack of text frames next to 2:15the top of its parent frame reaches the

SEO and Accessibility in Framer (Fundamentals Lesson 26)Joseph

1:39add semantic tags for frames as well.1:46footer frame, and click the plus sign or 2:11images. If we select a frame with an 3:08kind of like a hybrid between frame tags 3:28this frame selected, which is the actual 3:31clickable frame with the link applied to

Fixed, Relative, and Viewport Sizing in Framer (Fundamentals Lesson 10)Joseph

0:48frame on the canvas and manually played 1:25frames with image fills and I want the 1:33the frame the same at all times starting 1:53the parent frame resizes the fixed value 5:49parent frame relative where the position 6:09its parent frame and for sizing we have

Stacks vs Grids in Framer (Fundamentals Lesson 8)Joseph

1:34with any old frame add a layout on the 1:43we can draw a frame with a grid layout 2:04the hierarchy the parent frame with the 2:17between what makes this Frame a grid in 2:45with 12 frames inside as grid items for 4:07height of the grid frame we can also set

Framer Community Show & Tell August 3, 2023—Jia Yu Hong from LottieFiles and Paul LapkinFramer

12:36footer is from a frame or page so it's 13:38the frame or content so see this isn't 13:55integrating frame reviews with your own 15:50be the two variations of the frame or 33:52frame here called gallery and there's a 41:27or the frame that the the letters are

Fixed and Sticky Positioning in Framer (Fundamentals Lesson 9)Joseph

0:49frame on the page to use fix positioning 0:58frame now will have no problem switching 1:09rather than pinning to a frame it's 2:11the bottom of its parent frame Scoops it 2:41stack or grid and every parent frame all 3:20frame hits the bottom of the card it

The Anatomy of a Framer Project (Fundamentals Lesson 2)Joseph

3:32with a big frame called a breakpoint 4:36block we use in our page layouts frames 4:44all new to you a frame is essentially a 4:52frame to group things contain things 5:00have or need a rectangle tool frames 5:07frames but let's wrap this one up now

Structuring Content with Semantic Tags in Framer (SEO Lesson 2)Justin

0:17heading levels, text tags, and frame 3:00long run. Now, let's talk about frames.3:12using semantic frame tags. These include 3:52social media icons. To tag a frame,4:22where we decide what role that frame

Framer Event — Introducing Agents, Branching, and a new CommunityFramer

5:13frame on the canvas, so I'll grab the 9:32the top border on this frame since we've 10:41could be one of several parent frames at 10:48parent frames don't clip anything."30:31are regular frames and components with

Framer Creators: Nandi, the 23yo dropout behind Framer University.Framer

0:34that way. I [music] came across frame in 0:58in this like big frame university with a 2:54both. That's why Frame is special 3:16I don't see that, come across frame a 3:20already started frame university. For

Transforming elements on scroll in Framer (Animation Lesson 8)Joseph

0:19happen in frame.7:59frame here. And if we head down to the 8:09a scroll section set for the frame, just 8:11get the frame selected, click to add a

Utilizing Collection Lists in Framer (CMS Lesson 4)Justin

1:32new frame with a CMS icon next to it.1:37up this frame and click on an element 7:37into an error because the parent frame 7:44the parent frame first. Now, we're free

Framer Update: Zooming, Layout, and moreBenjamin

0:22canvas either in a stack or a frame we 0:32my selection in a frame fourth a new 1:24this Frame and set height to fit content 1:38create rounded frames that is frames

Adding Links in Framer (Fundamentals Lesson 15)Joseph

5:29find the frame that represents the 5:36frame for my entire feature section and 8:33really like is that whole button frame 9:47of this Frame that already has a link we

Inside Framer: Build your Documentation Website in FramerFramer

0:05you've joined us in the frame at 0:35look at the frame of CMS it's a game 0:48the nicest thing about frame and CMS is 1:47and I don't know much about frame uh

Generation, layout, and styling with Framer AgentsJoseph

0:44frame on the canvas, so I'll grab the 5:03the top border on this frame since we've 6:12could be one of several parent frames at 6:19parent frames don't clip anything."

Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)Justin

4:22vector sets don't support frames. So, if 4:25a frame is included in your selection 4:40layers while frames are meant for page

Building an Expanding Article Stack in FramerFramer

3:08the layer that. Select the frame tool 3:11and draw a frame inside the icon 7:28state, wrap it in a frame. This is a

Fading the edges of a Ticker in FramerFramer

0:03ticker uh inside of Frame. Just thought 2:38hit F to open the frame tool and draw a 2:41frame. And I'm just going to drag it