Joseph
5:03
Learn the Framer interface
Learn the Framer interface by mapping the five main views, the toolbar, sidebars, and canvas to the work you will do in your site. This beginner lesson shows where to design pages, manage CMS content, localize, review analytics, use the Agent, preview changes, and prepare a site for publishing.
Lesson details
Start by mapping the editor’s five views: Canvas, CMS, localization, Analytics, and Settings. Canvas is where you create pages, arrange layers, work with Components, and build the visual experience. CMS holds structured content such as articles, careers, and events. Localization handles languages and regions, Analytics shows how visitors use the published site, and Settings covers domains, redirects, versions, and plans.
Return to the Canvas to learn the working layout. The toolbar inserts layers and assets, names the project, shows the active branch, and provides preview and publish controls. The left sidebar switches between Pages, Layers, and Assets. The right sidebar changes with your selection, while the Agent lets you create pages, make targeted edits, clean up styles, and adapt a site for different devices. Use a branch to review changes before they reach the main project.
Use the freeform canvas to inspect the page at the right scale. The pan tool helps you move around, comments keep feedback attached to the design, and the theme toggle previews light and dark content. Zoom to fit, zoom to selection, and zoom to 100% help you check both the whole page and the detail. Finish in preview before publishing so you can review the result as a visitor.
Frequently asked questions
How do I learn the Framer interface?
The editor has Canvas, CMS, localization, analytics, and settings views. Canvas is where you build pages, CMS manages structured content, localization handles languages and regions, analytics shows visitor behavior, and settings covers site-wide details such as domains, redirects, versions, and plans.
What is the difference between Pages, Layers, and Assets?
Pages shows the pages in your project, Layers shows the elements on the current page, and Assets contains reusable project resources such as layout templates, Components, styles, and code files. Use the page switcher in the Layers panel to move between page structures without losing the current canvas context.
What can the Agent do in the Framer editor?
The Agent can generate pages, make targeted edits, clean up colors and typography across a site, and adapt layouts for different devices. Review the result on the canvas, then edit, refine, or undo the changes before you preview or publish.
How does Branching help when working in Framer?
A branch gives you a separate place to experiment with design changes, CMS updates, or Agent-generated work. You can review the differences with your team, keep the main project unchanged while you iterate, and apply approved changes to the main branch when the work is ready.
What should I check before publishing a Framer site?
Use preview to view the site as a visitor would. Check the page layout, layer structure, comments, light and dark themes, and zoomed-in details, then confirm the final result at the scale you intend to ship. Keep publishing as a separate step so you can resolve issues before visitors see the change.
Continue watching
Load more