Framer Project Structure, Pages, Canvas, and Frames Explained
A Framer workspace contains all of your projects. Within a workspace you can optionally create folders to keep projects organized. Each project is equivalent to one website, so “one project equals one website” is the guiding rule.
Page Management
The Pages panel lists every page that belongs to a project. The page labeled “Home” is special; it is the default page that loads at the root domain, meaning its path is the domain itself (for example, framer.com/). All other pages receive a URL slug that forms part of their path, such as framer.com/about. Page titles are metadata that you can edit in the settings; they appear in browser tabs, search results, and bookmarks.
New pages are created with a plus button and start with a default slug that you can customize. Changing a page’s path after it has been published can lead to “anyone with the old link will end up getting the old 404 page not found” unless you set up redirects. A site can have only one homepage, but you can change which page serves that role.
Pages can be grouped into folders, and a folder’s name becomes part of the URL for any pages inside it. Conversely, a page can behave as a folder for other pages, and a folder can be converted into a page, giving flexibility in how URLs are structured.
Design Canvas & Breakpoints
Every page includes a design canvas where you lay out the visual content. On this canvas you place breakpoints, which are frames that define the layout for specific screen sizes. By default, a new page starts with a desktop breakpoint that is 1200 pixels wide. You can customize the width of this breakpoint or add additional ones for tablets, phones, or any other device.
Elements placed inside a breakpoint are part of the published webpage, while elements positioned outside the canvas outskirts are not published. Breakpoints therefore enable responsive design, allowing you to create optimized layouts for different viewport sizes.
Fundamental Design Elements
Frames are the most fundamental building block we use in our page layouts. In Framer, a frame is a rectangle that can contain other layers, and it replaces a separate rectangle tool. Frames can be used for grouping, containing, stacking, or gridding elements, giving you a versatile way to structure content. As one quote puts it, “frames have it covered.”
Takeaways
- In Framer, a workspace holds all projects, optional folders can organize them, and each project corresponds to a single website.
- The Pages panel lists every page, the Home page loads at the root domain, and other pages use customizable URL slugs.
- Page titles are metadata that appear in browser tabs, search results, and bookmarks, and changing a page’s path without redirects can cause 404 errors for existing links.
- Each page includes a design canvas with a default 1200 px desktop breakpoint, and additional breakpoints can be added for tablets and phones to create responsive layouts.
- Frames are the core building blocks in Framer, acting as rectangles that can group, contain, stack, or grid elements, and they replace a separate rectangle tool.
Frequently Asked Questions
Who is Framer on YouTube?
Framer is a YouTube channel that publishes videos on a range of topics. Browse more summaries from this channel below.
Does this page include the full transcript of the video?
Yes, the full transcript for this video is available on this page. Click 'Show transcript' in the sidebar to read it.
Helpful resources related to this video
If you want to practice or explore the concepts discussed in the video, these commonly used tools may help.
Links may be affiliate links. We only include resources that are genuinely relevant to the topic.