Understanding the Framer Canvas

Understanding the Framer Canvas

To get the most out of Framer, you need to understand the canvas: how frames, stacks, components, breakpoints and interactions fit together. Once the mental model clicks, Framer stops feeling like a design tool that happens to publish websites and starts feeling like what it is: a visual front-end environment.

This guide explains that model for people new to the editor. It is not a click-by-click tutorial (our Framer Canvas 101 covers the first steps). Instead, it explains why the canvas behaves the way it does, so you can predict what will happen when the screen gets narrower, the content gets longer or a component gets reused on 40 pages.

If you have used Figma, much will feel familiar. The key difference: in Framer, every layout decision is also a decision about how a real website responds.

The canvas as a structured space

Everything in Framer lives inside frames on a canvas. Each page of your site is a top-level frame, and inside it you nest more frames: sections, containers, cards, buttons.

Think of it as a tree. The layer panel shows the hierarchy, and that hierarchy is the structure of the published page. A section contains a container, the container contains a heading, a paragraph and a button row. Clean nesting on the canvas means clean, predictable behavior in the browser.

Two rules follow from this:

• Every element has a parent, and the parent decides how its children are laid out.

• Names matter. A layer tree with "Hero", "Feature grid" and "CTA" is far easier to work with than one full of "Frame 247".

Frames, stacks and grids

Frames define boundaries: sections, cards, entire pages. On their own, they hold children in place. Add a layout to a frame and it starts arranging those children for you.

• Stacks arrange children in one direction, horizontal or vertical, with consistent spacing, alignment and padding. Use a stack when items follow one main direction and should respond to their content size: a nav bar, a list of features, a button group, a section's vertical flow.

• Grids arrange children in rows and columns that share tracks. Use a grid when you need two-dimensional alignment, such as logo walls, card galleries or bento layouts. Gaps and minimum column widths are set on the parent, so grids reflow as the screen changes.

Framer's own guidance is a good rule of thumb: use the simplest structure that expresses the layout. Most pages are stacks inside stacks, with a grid where the content is genuinely two-dimensional.

Sizing and positioning

Inside a layout, each layer has a size behavior and a position mode. These replace most of what constraints did in older tools.

Sizing decides how a layer reacts to space:

• Fixed keeps an exact width or height.

• Fill takes the available space in the parent.

• Fit content grows and shrinks with what is inside, like a button that adapts to its label.

• Relative sizes are set as a percentage of the parent.

Positioning decides whether a layer takes part in the flow:

• Relative: the default. The layer flows with its siblings according to the parent stack or grid.

• Absolute: removed from the flow and positioned against the parent frame, using pins to its edges. Good for badges and decorative shapes.

• Fixed: stays in the same browser position while the page scrolls, like a floating navigation bar.

• Sticky: scrolls with the page until it reaches a set edge, stays there within its parent section, then moves away with it.

Most responsive problems for beginners come from absolute positioning used where a stack would do. If something breaks on mobile, check its position mode first.

Breakpoints

Framer pages are designed across breakpoints, typically desktop, tablet and phone. One breakpoint is primary. The others inherit from it, and any change you make on a smaller breakpoint is an override.

This inheritance is the heart of responsive design in Framer:

• Change content on the primary breakpoint and it updates everywhere.

• Change layout on the phone breakpoint, for example a horizontal stack becoming vertical, and only that breakpoint changes.

• Keep overrides minimal. The more you override, the more places you have to edit later.

Good stacks and fill sizing do most of the responsive work. Breakpoints are for the deliberate exceptions. Always preview the page while resizing between breakpoints, not only at the three fixed widths.

Components on the canvas

Components are reusable building blocks. You design a component once, then place instances of it across the site. Change the master and every instance updates.

On the canvas you can:

• Place and configure component instances on any page.

• Swap variants, such as a primary and secondary button, or a card with and without an image.

• Expose properties so text, images, links and toggles can be changed per instance without detaching it.

• Maintain consistent behavior across dozens of pages.

Components also connect to the CMS. A card component inside a collection list can be bound to CMS fields, so every blog post or case study renders through the same design. This is what turns a set of pages into a system your team can scale.

Interactions and motion

Interactions are attached to layers on the canvas. The main patterns:

• Hover, press and click states, often built as component variants with a transition between them.

• Scroll and appear effects that animate layers as they enter the viewport, or tie movement to scroll position.

• Navigation to other pages, sections or external links.

• Overlays for modals, menus and popovers.

Because motion is native to the canvas, it is tempting to add a lot of it. Use it to guide attention and confirm actions, and test it on a mid-range phone. Code overrides and code components extend behavior further when built-in interactions are not enough.

How it all fits together

A typical section shows the full model at work. A section frame uses a vertical stack. Inside it, a heading and paragraph sit above a grid of feature cards. Each card is a component instance with variants for hover. The grid reflows from three columns to one at the phone breakpoint. A floating CTA bar uses fixed positioning. Every piece has one job, and the parent decides the layout.

The short version

The Framer canvas is a tree of frames. Stacks and grids decide layout, sizing and position modes decide how each layer responds, breakpoints handle deliberate exceptions, components make it all reusable, and interactions bring it to life. Once you see it that way, Framer becomes much less intimidating. It feels less like magic and more like a structured, visual front-end environment.

Allsite builds brands and Framer websites for venture-backed tech companies — designed to perform, and built for the teams that have to run them.