Layout & Design · TOPIC

Sizing

Every Framer lesson that teaches or touches on Sizing

Lessons that teach this

11 lessons teach this topic

2:35

Framer Update: Fit Image

Framer Update, Layout & Design

9.2K views

September 17, 2025

2:24

Framer Update: Text Truncation

Framer Update, Layout & Design

6K views

September 2, 2025

22:31

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

Layout & Design

33K views

March 28, 2025

3:24

Framer Update: Scale Tool (K)

Layout & Design

7.8K views

February 25, 2025

8:26

Min and Max Sizing in Framer (Fundamentals Lesson 11)

Layout & Design

34K views

December 19, 2024

7:06

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

Layout & Design

68K views

December 11, 2024

7:37

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

Layout & Design

65K views

November 4, 2024

8:05

Stacks and Relative Positioning in Framer (Fundamentals Lesson 6)

Layout & Design

88K views

October 22, 2024

3:29

Framer Update: Fit Text

Layout & Design

33K views

May 30, 2023

7:13

Navigations: Desktop Menus

Layout & Design, Navigation

42K views

April 11, 2023

3:29

Framer Sites: Min Max and Aspect Update

Framer Update, Layout & Design

15K views

December 8, 2021

Where it comes up

222 moments across 58 lessons

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

0:04down to choosing the right sizing modes 0:19and fit content sizing but there's also 0:21a time and place to use fixed relative 0:24and viewport sizing whether we want our 0:38three sizing modes work and when to use 0:43one first let's take a look at fixed

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

0:06two of the most powerful sizing modes in 0:08framer fill and fit content since 0:15another we can use fill sizing to 0:35into how these two sizing modes work 1:20for us this is where fill sizing comes 3:35sibling layers is set to a fixed size

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

0:03sizing modes change how layers behave 1:19going to be a fixed width, but the 7:50bottom edge is because we have a fixed 9:07that max sizing is no longer getting 9:09enforced and that fill sizing is getting 14:06fixed. So that 40 pixels of side padding

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

0:00when we use flexible sizing modes like 1:15these fields to either fix sizing using 1:18exact pixels or relative sizing using 1:27then the Min or Max would be fixed 1:30and if the dimension is fixed the Min or 1:50the width of each card is a fixed 280

Stacks vs Grids in Framer (Fundamentals Lesson 8)Joseph

2:58default grids have a fixed number of 3:06between having a fixed number of columns 3:20trying to build with one of these fixed 4:10a fixed height or choose to fit the 4:23it's possible to create a sizing 4:33previous lesson that fit content can

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

14:43template, we're working with a fixed 15:29switch this to fixed, I could also just 15:36might be thinking, okay, fixed, that's 16:13sizing properties of the layers inside 16:52now become a fixed height. On the other 17:16anymore. So, we've got to go with fixed.

Creating a fixed footer reveal in FramerJoseph

1:30to fixed positioning. And fixed 1:51don't want this footer to be fixed to 1:57fixed to the bottom of the browser. So,2:44fixed to the bottom of the viewport, the 3:05fixed positioning. But a z-index of one 4:34set to an absolute position or a fixed

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

4:04be too small to fit content so now that 4:08I have it set to fit content it's kind 5:48section is set to a fixed width we don't 5:53from fixed to fill so that that always 11:08height with fit content and then adding 11:34fixed so I'm just going to change that

Text Properties in Framer (Fundamentals Lesson 17)Joseph

1:31create a text box with a fixed width and 1:33a fixed height which is perfect for 1:55which is going to be a fixed width but 5:16fixed pixel size or the second option is 5:39a fixed width or relative width just to 6:03to a fixed size then we have letter

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

0:00fixed and sticky positioning are two 0:21needed let's start with fixed 0:23positioning a fixed position element 1:01the position type from absolute to fixed 1:42bar is fixed to the top and the rest of 1:55positioning now we know that fixed

Navigations: Desktop MenusBenjamin

0:37right sides and it has a fixed width and 4:05fixed height set of 800 pixels with this 4:36so we're now animating from a fixed 4:45height also fixed our links collapsing 4:51and just like you can do with fixed 5:26to fixed and finally we know we're

Framer Update: Fit ImageFramer

0:03sizing option for your images in Framer.0:13fixed or a relative height. The catch 0:37is why we're adding a new sizing option 1:07and the sizing will adapt automatically 2:03now a single click. This new sizing

Using Layout Templates in Framer (Fundamentals Lesson 22)Joseph

0:25switching your Navar to fixed 2:04have our width set to 1,200 fixed and we 7:03the nav bar to remain fixed in place you 7:04could do fixed instead but I'm just 7:44we've got a fixed pixel width here I'm

Framer Update: Layout TemplatesBenjamin

0:45homepage I'll set the position to fixed 0:57navigation is indeed properly fixed to 1:16change the positioning or sizing of my 5:27plus things like fixed elements 7:29with fixed elements and Page effects you

Absolute Positioning in Framer (Fundamentals Lesson 5)Joseph

0:43content in a stack or grid fixed where 0:47the position of a layer is fixed 0:52switches from relative to fixed when it 3:17maintain a fixed amount of space where 3:55rectangle has a fixed pixel width it'll

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

0:23sizing options that can make elements 3:12powerful sizing options for Designing 7:23point to fit content so it'll 7:47when we use the new sizing options that

Framer Sites: Min Max and Aspect UpdateFramer

0:08content and minimum and maximum sizing 0:37fixed width 1:38sizing 3:18ratio and minimum and maximum sizing

Make A Responsive Navigation With Dropdown Menus From ScratchBenjamin

1:00height to fit content and distribute to 5:06and let's also set height to fit content 6:20stack and then I'll hit fit content

Framer Update: Ticker EffectBenjamin

2:12sizing. So here you see it also works on 2:46of the items a fixed width, giving us

Framer Update: Zooming, Layout, and moreBenjamin

0:11sizing stack second I can now use enter 1:24this Frame and set height to fit content

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

4:56drag to create a fixed width text box 5:30fixed width or fixed height and width

Form Input Variants and Validation in FramerJoseph

0:53revalidate the text once it's fixed 1:17height of this Frame to fixed to

4 Ways to Update Form Status in FramerJoseph

1:56tip or a fixed overlay like a model that 2:06fixed

Framer Update: Code Blocks & Inline CodeHunter

3:08background sizing are also relative to 5:29it even supports fixed and auto sizing

Navigations: Mobile MenusBenjamin

1:43height to fit content 3:40reset the height to fixed and resize it

Framer Update: Fit TextBenjamin

1:46the correct sizing properties so I'll 2:31minimum and maximum sizing simply by

Framer Update: Scroll AnimationsBenjamin

0:30we have a top bar that is fixed to the 1:33that's fixed to the top of the screen

Framer Sites: CSS StylesFramer

1:10our overlap issues are fixed 1:23fixed to the viewport

Generation, layout, and styling with Framer AgentsJoseph

6:26all fixed.11:07paragraph definitely just got fixed.

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

10:55all fixed.15:37paragraph definitely just got fixed

Scaling a clipped image on hover in FramerJoseph

1:39set to fixed, the height is set to fit,

Triggering video playback on scroll in FramerJustin

1:17and [music] the height to fit content,

Framer Update: Flow EffectBenjamin

0:56fixed. This in turn lets us animate out

Framer Update: Masonry GridsBenjamin

0:48our unique fit image sizing option even

Animating vector paths in Framer (Animation Lesson 18)Joseph

6:32set, it's in a frame that has a fixed

Framer Update: Custom Fonts 2.0Benjamin

0:04custom fonts in Framer fixed. This means

Framer Update: Lightbox EffectBenjamin

1:56recently released sizing option and it

Animating transitions between pages in Framer (Animation Lesson 14)Joseph

7:44we already fixed that one. From home to

CMS Update: Index VariableEdo

1:00fixed. If that's the case, when you

Intro to Components in Framer (Fundamentals Lesson 21)Joseph

2:34width here from fit content to fill and