Platform & CMS / Feature Guide
Framer Canvas 101
The essential concepts new Framer users need to know to start building pages confidently on the canvas.
Audience
Topics
Framer Canvas 101
If you are brand new to Framer, the canvas can feel like a blank universe. There is a lot of space, a lot of panels and no obvious first move. This 101 guide covers the core concepts you need to start building pages confidently, plus the habits that save new users hours.
It is written for people who will build or edit pages themselves: marketers taking over a site after launch, designers coming from Figma, founders who want to ship a landing page without waiting. If you want the deeper mental model behind layout and responsiveness, read our companion piece, Understanding the Framer Canvas. This one is about getting going.
By the end you should know what each building block is for, and have a simple workflow for building your first page from top to bottom.
Get oriented: the three areas of the screen
The Framer editor has three main areas:
The left panel lists your pages, layers, assets and CMS collections. This is your map of the project.
The canvas in the middle is where you design. Each page appears here, often at several screen sizes side by side.
The right panel shows the properties of whatever you have selected: layout, size, position, styles, effects and links.
A useful habit from day one: select something on the canvas and watch the right panel. Most of learning Framer is learning what that panel is telling you.
Pages and frames
At the top level you work with pages. Each page in the left panel becomes a URL on your published site: home, pricing, about, blog.
Each page contains frames: the sections, layouts and components that make up the design. A frame is simply a container. A page frame holds section frames, a section frame holds content frames, and so on.
Start every page by blocking out sections as frames before adding any detail. Hero, logos, features, proof, CTA, footer. You will see the shape of the page within minutes.
Stacks and layout
Stacks are the most important tool for a new user. A stack arranges what is inside it automatically. Stacks help you:
Align content horizontally or vertically.
Set consistent spacing between elements with one gap value.
Add padding inside a section without measuring.
Create layouts that adapt when the screen size changes.
The rule of thumb: if you are dragging things to line them up by eye, you probably want a stack. For card galleries and logo walls that need rows and columns, use a grid instead.
Text, images and components
Framer gives you a small set of simple building blocks:
Text for headlines, body copy and labels. Set up text styles (H1, H2, body, small) early and apply them everywhere, so changing the font later takes one edit.
Image and video layers for media. Upload properly sized images and add alt text as you go.
Components for reusable buttons, cards, sections and navigation. Change the main component and every copy updates.
Also set up color styles for your brand palette. Text styles, color styles and a handful of components are the starter kit of a maintainable site.
Breakpoints in one paragraph
Your page is designed at a primary width, usually desktop, with tablet and phone breakpoints next to it. Smaller breakpoints inherit from the primary one. When you change something on the phone breakpoint, that change only applies there. Keep those changes few: let stacks and fill sizing do most of the adapting, and only override what truly needs to differ.
Preview and publish
At any time you can preview your page as a live prototype, click through links, test interactions and resize the window to check responsiveness. Preview early and often. The canvas shows the design, but the preview shows the website.
When you are ready, publishing pushes the site live, first to a Framer subdomain and then to your custom domain once it is connected. On team projects, agree on who is allowed to publish and when. Publishing is instant, so a quick review step before it saves a lot of embarrassment.
Your first page: a simple workflow
Duplicate, don't start blank. If the project has existing sections or components, start from those.
Block out the sections as frames in a vertical stack: hero, proof, features, CTA.
Add real content early. Real headlines and real images reveal layout problems that placeholder text hides.
Apply text and color styles instead of formatting by hand.
Use components for anything that appears more than once, like buttons and cards.
Check the tablet and phone breakpoints and fix only what breaks.
Set the page's SEO title and description in the page settings.
Preview, ask for a review, then publish.
Workflow tips that save hours
Name your layers. "Hero", "Pricing cards", "Footer CTA". Future you, and your teammates, will find things in seconds.
Learn five shortcuts: zoom to fit, zoom to selection, preview, add stack, and create component. The rest can wait.
Avoid absolute positioning for layout. It is the most common cause of pages that look fine on desktop and fall apart on mobile.
Don't detach components to make one-off changes. Use variants or properties instead, or ask whoever owns the design system.
Use the CMS for anything repeated, like blog posts, case studies, jobs or team members. Edit the content, not the layout.
Keep an eye on media size. Huge images and videos slow down both the editor and the published site.
Common beginner mistakes
Building every section from scratch instead of reusing existing ones.
Formatting text by hand, so headings slowly drift in size and color.
Designing only on desktop and discovering mobile on launch day.
Publishing without previewing links and forms.
The short version
Framer Canvas 101 is about comfort with the basics: pages and frames, stacks, text and media, components, breakpoints and preview. Build pages top to bottom in stacks, use styles and components from the start, check smaller screens as you go, and preview before you publish. Once those feel natural, you can layer in CMS, interactions, code components and more advanced patterns at your own pace.
Allsite builds brands and Framer websites for venture-backed tech companies — designed to perform, and built for the teams that have to run them.
