The Anatomy of a Framer Project (Fundamentals Lesson 2)
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.
00:00 Intro
00:08 Workspace, folders, and projects
00:21 Pages, canvases, and breakpoints overview
00:52 Creating and managing pages
01:28 Page paths, titles, and URLs
02:16 Changing home pages and using folders
03:24 Designing on the canvas
03:38 Breakpoints and responsive design
04:26 Introduction to frames
05:13 Wrap up
Topics covered: responsive design, website structure, page organization
🌞 Start for free: https://framer.link/yt
📚 Learn more at: https://framer.link/yt-academy
💎 Join the Community: https://framer.link/yt-community
🎉 Follow on X: https://framer.link/yt-x