The Anatomy of a Framer Project (Fundamentals Lesson 2)
Duration:
5:37
Description
Understanding how Framer projects work is essential before you start designing. This lesson breaks down the hierarchy from workspaces to breakpoints, showing you exactly how to organize your projects, manage pages, and create responsive layouts.
At the top level, your Framer workspace contains all your projects. You can create optional folders to keep everything organized. Each project equals one website that you publish when ready. Within projects, you'll find pages with design canvases where you create layouts using breakpoints for different screen sizes.
The home page loads at your root domain (like framer.com) while other pages need paths (like framer.com/about). You can customize page titles for browser tabs and search results through page settings. Pages can be grouped in folders or even nested under other pages, creating flexible URL structures. Change your homepage anytime or convert folders to pages as your site evolves.
The canvas is where design happens. Each page has its own canvas with a breakpoint frame (default 1200px for desktop). Add tablet and phone breakpoints to create optimized layouts for different devices. Elements inside breakpoints become part of your published page, while anything outside stays in your workspace.
Frames are your fundamental building blocks. Think of them as smart rectangles that can contain, group, stack, or grid other elements. If you know Figma, you'll feel right at home. If not, you'll quickly see why frames handle everything from simple shapes to complex layouts.
