Framer Interface: Free Tutorial by Adam Sebesta

Learn the basics of the Framer interface — how the canvas, panels, and tools work together so you can easily customize any Framer template and start building your own website.

When you remix a template, Framer opens a new project — and this is what you’ll see.

The Canvas

The canvas is the main area of the project. It’s where you visually design your website and instantly see how it looks as you make changes.

Your site is built from layers and elements that are nested inside each other. Most elements are essentially rectangles within rectangles — you control how they align, how much space they take up, and how they position their content. In the final frames, you then add the actual pieces like text, images, or buttons.

To customize your website, simply click on an element and edit — rewrite text, adjust colors, replace images, or update links. It’s that easy to make any Framer template your own.

Left Panel

Let’s take a look at the left panel, which has three main tabs.

Pages

This is where you manage all your pages. You’ll see your main domain (the homepage), and when you add a new page, such as /contact, the link will automatically become yourdomain/contact.

Layers

Here you can see the full structure of your current page. It usually contains section layers with elements and frames inside them. This panel is especially useful when you can’t easily click an element on the canvas — you can select it here, or drag elements into different sections.

Assets

This tab helps you edit your whole website more efficiently. Many elements like buttons, colors, or fonts are reused throughout your site. Components in the Assets panel act as parents — when you update a parent, all its instances update automatically (unless overridden). You’ll also find text styles and color styles here. Applying these styles lets you make global changes — for example, changing a white color to red will update it across the entire site.

Right Panel

Next is the right panel, where you can edit the properties of selected elements — their size, content, and design.This is where you change text, replace images, or adjust spacing.It’s straightforward and intuitive, making website customization quick and simple.

Top Panel

On the left, you’ll find project tools and tabs for inserting new elements. You can also use shortcuts — T for text, F for frame. But if you’re just customizing an existing template, you probably won’t need these right away.
In the center, you’ll see the project name.
And on the right, you can publish your website. At first, it’ll use a temporary Framer domain, but later you can connect your own custom domain here. You’ll also find analytics and a preview option to see your site in action before publishing.

So, this was a quick overview of the Framer interface. In the next tutorials, I’ll walk you through all the key steps you need to know to customize a Framer template and turn it into your own website.