Layout & Design

Creating layouts that look and behave the way we want them to largely comes down to choosing the right sizing mode for each element. As you know, we have several to choose from — and each has a unique purpose, depending on how static or flexible we want things to be. Earlier in this chapter, we unpacked “Fill” and “Fit Content” sizing — but there’s also a time and place to use “Fixed”, “Relative”, and “Viewport” sizing. Whether we want our elements to remain at a specific size, scale with our layout, or even respond to a viewer’s screen size, we’ve got options to get the job done. So let’s dive a bit deeper into how these next three sizing methods work and when to use each one.

Fixed and Sticky positioning are two essential modes for controlling how elements move (or don’t move) as a visitor scrolls through your pages — but each has it’s own unique behavior. In this lesson, we’ll explore how and why to use each — to keep important elements in view exactly when and where they’re needed.

Stacks and Grids are two powerful layout tools that help you arrange elements in your designs. They’re both used to create flexible and responsive layouts, but they differ a bit in functionality and are suited to slightly different use cases. In the previous lesson, we talked about Stacks — but let’s talk about how Grids compare — and get comfortable with the basics of how they work.

Stacks not only allow us to create rows or columns of perfectly aligned and distributed elements — they also unlock two of the most powerful sizing modes in Framer… “Fill” and “Fit Content”.

Stacks allow us to create rows or columns of elements that automatically align, distribute, and space themselves within the available space. Which not only means less tedious scaling and repositioning for us on the canvas — but also lets us build bulletproof layouts that can flex and adapt when things change size in browser.

The beautiful thing about Absolute positioning for us visual designers is that we get to drag things around and position them in a super freeform way — just like working in the design tools we know and love. But when it comes to building well-structured, responsive websites, there’s a bit more to it — so let’s take a deeper look at the ins and outs of Absolute positioning, what it can do for us, and when it makes the most sense to use.

In this lesson, we’ll start training our brains to think in frames — and understand what they can do for us in Framer. Frames in Framer are a lot like frames in Figma — but if this is all new to you, a Frame is essentially a rectangle — but a rectangle that can contain other layers within it.

Whether you’re a Framer newbie or a seasoned pro, mastering the mechanics and tricks of interacting with layers and navigating the canvas will speed up your work tremendously.

Now that you’re familiar with the Framer interface, it’s time to get familiar with the anatomy of the things we build — and unpack the content of a Framer Project.

Fetch enables you to leverage the power of APIs to add dynamic data to your Framer Site—without any code.

Place any layer in 3D space by editing properties like Rotation, Skew, Origin, Depth, and Perspective. For the first time on a freeform Canvas, all 3D layers remain selectable and editable, resulting in an amazing experience.

Turn properties like Gap, Padding, Direction, Distribute, and Align into customizable controls, allowing you to design much more flexible Components.

Design expressive pages with sections that adapt to the height of the browser.

Define color styles with both a light and dark value, then use within your layouts, text styles, components and effects.

Easily create shadows with depth effects.

Design text that scales to fit. Design bold headers that resize along with your browser.

Add dropdowns to any layer with Appear Effects, a Dynamic Safe Area, custom positioning, and more.

Learn how to create a responsive navigation with dropdowns in Framer—completely from scratch.

A beginner tutorial showing you how to make a website from scratch. Starting from a blank Canvas. By the end of the video you’ll have a very solid understanding of Framer and should be ready to design your next website.

We’ll cover the differences between Frames, Stacks and Grids, and when to use which.

Learn best practices for structuring your layouts for optimal responsiveness.

With the Figma plugin installed, you can copy over layers from Figma to Framer.

A Framer Tutorial about Components, covering Variants, Variables and Interactions.

Effortlessly copy and paste web elements from any of your own sites and paste them directly onto the Framer canvas.

The Creative Section to the Insert Panel, with fun components and presets that you can use to bring your sites to life. You might recognize a few of these from framer.supply—we have redesigned and reimplemented these.

Build a beautiful desktop navigation bar.

Creating a mobile menu that animates to the viewport height when opened is easy with the right properties.

Learn how to create video overlays in the following tutorial.

Make your mobile menu animations more interesting by adding custom transitions.