Understanding the Anatomy of a Framer Project

Now that you're familiar with the Framer interface, let's dive into the anatomy of a Framer project. At the top level, you have your Framer workspace containing all your projects. Within your workspace, you have the option to create folders to keep your projects organized, but this is entirely optional.

Projects and Pages

Each project within a Framer workspace is essentially a website. You decide when and where to publish them, but one project equals one website. Within a project, we have pages. Each page comes with a design canvas where you can design your content.

Opening a project reveals its components. On the left sidebar, you have a Pages panel showing all the pages within the project. By default, there’s a home page, which is the default page that loads when someone navigates to your root domain. The home page is special because it’s the entry point to your site.

Managing Page Titles and Metadata

You might not want your page to just say "home" in the browser tab, on search engines, or when saved as a bookmark. This is where the page title and metadata come in. You can edit these by clicking on the ellipses menu and going to settings, where you'll find all the metadata for the page.

Creating and Organizing Pages

To create a new page, click the plus button and select "new page." The new page will have a different icon and a customizable path. For example, if your root domain is framer.com, your new page might be framer.com/newpage. Be mindful of changing page links, as anyone using the old link will encounter a 404 error. While this can be fixed with a redirect, it’s another topic for another lesson.

While you can only have one homepage, you can change which page it is at any time by clicking the ellipses menu and choosing "set homepage". You can also group pages into folders for better organization. Folders, like pages, have a slash in their name as they become part of the path to access those pages. For instance, you could have a folder named "shop" containing multiple pages.

Design Canvas and Breakpoints

When it’s time to design, the canvas is where everything happens. Each page has its own canvas, and within it, a big frame called a breakpoint where you design the content of the page. Elements placed within the breakpoint become part of the web page when published, while anything outside will not. This gives you the flexibility to use the rest of the canvas however you like.

By default, each new page starts with a desktop breakpoint of 1220 pixels wide, but you can customize this. You can also add additional breakpoints for different devices such as tablets and phones to create optimized layouts. This doesn’t mean you have to design everything three times; Framer makes responsive design easier.

Frames: The Fundamental Building Block

Before diving into various design elements and their properties, it’s essential to understand frames, the fundamental building block in page layouts. If you’re familiar with tools like Figma, frames will feel similar. If not, think of a frame as a rectangle that can contain other layers. You can use frames to group, contain, stack, and grid things, or simply to create a plain rectangle. Unlike other tools, Framer doesn’t need a separate rectangle tool—frames do the job.

Now that we’ve explored the basic anatomy of a Framer project: remember, projects reside within your workspace, each project is a site containing pages, and each page is a design canvas with breakpoints. For more on Framer Tutorials, Framer Templates, and more, explore further resources to hone your skills. Get comfortable with Framer and continue your learning journey.