Layout & Design · TOPIC

Spacing

Spacing

Spacing

Every Framer lesson that teaches or touches on Spacing

Lessons that teach this

1 lessons teach this topic

2:37

Framer Update: January 2024 with Layout Menu

Framer Update, Layout & Design

6.9K views

·

January 30, 2024

Where it comes up

137 moments across 38 lessons

Using Layout Templates in Framer (Fundamentals Lesson 22)Joseph

0:15itself like wi padding or background 7:35our padding into separate values here 7:39padding so we're sort of back where we 7:55have this padding value that we could 8:02currently this padding exists just 8:19a variable so I can click on the padding

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

1:24I also don't like to add padding to the 1:55is where I like to add my side padding 2:04to add padding on a section bysection 2:23folks will add padding to their 4:39using padding within the sections. Now,8:07that the issue is just padding. So I'm

Text Properties in Framer (Fundamentals Lesson 17)Joseph

6:05spacing which is the spacing between 6:44the letter spacing is scaling 6:48for line spacing if I select the text 6:52come back down here to line spacing line 6:54spacing is set to M's by default because 6:56you pretty much always want the spacing

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

5:49And the padding is pushing in on the 6:01parent frame that has the padding on it.6:05right padding I'm going to reduce from 6:09padding from 40 down to zero. And that 6:2440 pixels aside padding instead of the 6:31padding. And now we're kind of back

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

1:57gaps padding and alignment 3:08consistent spacing alignment and 6:12property is padding which is an 6:23this is where a little bit of padding 6:24can make a big difference padding is 6:36around the children by default padding

Framer Update: CMS PaginationBenjamin

1:43the padding just a little bit to have it 2:40default the spacing between the last 2:52more spacing either with in the 3:01then add some top padding this does mean 3:04that this spacing is always there even 4:15padding and then let's double click into

Make A Responsive Navigation With Dropdown Menus From ScratchBenjamin

1:42content now we can add some padding to 6:53out we can then also set padding to zero 7:01of additional left padding on this top 8:47padding here as 10:13links and we can add a bit of padding to 10:54well there we go I'll add some padding

Framer Update: January 2024 with Layout MenuBenjamin

0:46padding controls you get on the canvas 1:03control your spacing from the canvas and 1:08padding controls I'll quickly make this 1:14simply start dragging the padding 1:16handles to add some padding and holding

Layout Templates: Mobile Menus, Page Effects, and SidebarsBenjamin

3:41padding allowing us to convert the yes 3:46padding simply put when this sidebar 3:51padding left is set to 200 pixels and 3:57padding values and that should do the

Creating a fixed footer reveal in FramerJoseph

5:13over here to padding and I don't want to 5:16have padding all the way around. I just 5:17want padding at the bottom. So I'm going

Framer Update: Stacks, Breakpoint Switcher, Text StrokeBenjamin

2:01true for padding we now support padding 2:16and the padding of this badge which is 2:24padding to optically Center the contents

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

5:45generous spacing,16:26agents tidy up gaps and padding 28:20spacing, typography, and design patterns

Framer Event — Introducing Design Pages. A better way to design and explore on the Framer canvas.Framer

1:23layout or spacing. We continue to build 4:23spacing, and layout rules can take time.

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

11:12padding all around I'll do 80 pixels 11:24pixels of padding so now I can grab the

Framer Update: Layout TemplatesBenjamin

2:58your website has consistent Gap padding 3:21template I already had padding bottom

Stacks vs Grids in Framer (Fundamentals Lesson 8)Joseph

0:44handle spacing alignment and 5:12then padding allows us to add a cushion

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

1:10one and some padding around the sides 5:01grids then we can use padding to push a

Framer Design: Design on an intuitive CanvasFramer

0:16make your layouts fluid add padding and 0:19spacing align content to grids and

Framer Update: Creative SectionBenjamin

0:53spacing there we go to animate it we'll 2:54swap the labels change the spacing and

Relative Overlays: Collision DetectionBenjamin

1:50Define how much padding you would like 2:15have added some nice padding here making

Framer Update: Code Blocks & Inline CodeHunter

3:05text the padding values for the 3:28setting the radius and the padding

Generation, layout, and styling with Framer AgentsJoseph

1:16generous spacing 11:57Agent tidy up gaps and padding site-wide

Building an Expanding Article Stack in FramerFramer

1:12padding to 10,

Scaling a clipped image on hover in FramerJoseph

1:54little bit different, like padding, gap,

Framer Update: Lightbox EffectBenjamin

0:40opened, the padding around our image,

Introducing Design PagesFramer

2:08grids, spacing, and layout rules can

Framer Update: Text HighlightsBenjamin

0:55radius, and padding. a transition and a

CMS Pages & Dynamic Content in Framer (CMS Lesson 3)Justin

6:07spacing, or layout, will automatically

Intro to Components in Framer (Fundamentals Lesson 21)Joseph

8:39even make the padding editable whatever

Framer Update: Zooming, Layout, and moreBenjamin

1:27and I then give it some padding you can

Framer Update: Themed Favicons and Apple Touch IconBenjamin

1:08values or padding per side you can now

Getting familiar with the Framer interface (Fundamentals Lesson 1)Joseph

3:33font family weight spacing and Alignment

Creating your first form in FramerJoseph

1:09padding or even add fills borders and

Navigations: Mobile Menus 2Benjamin

6:39pixel of left side padding

Navigations: Mobile MenusBenjamin

2:19Gap to 10 and I'll add some padding as

The Input ComponentBenjamin

1:59I'll also tweak the padding just a bit

Navigations: Desktop MenusBenjamin

3:26to left and I'll give this a padding of

Content, Components, and CMS with Framer AgentsJustin

8:02spacing, typography, and design patterns

Create a free website with Framer, the website builder loved by startups, designers and agencies.