The Anatomy of a Framer Project (Fundamentals Lesson 2)

Now that you’re familiar with the Framer interface, it’s time to get familiar with the anatomy of the things we build — and unpack the content of a Framer Project. Let’s take a super high-level look at the anatomy of a Framer project:

At the very top level, you have your Framer workspace that contains all of your projects.

Within your Workspace, you have the option of creating folders to keep your projects organized — but these are completely optional.

Then you have projects project itself — each of which is essentially a website. You decide when and where to publish them but one project equals one website.

Within a project we have pages, within each page we have a design canvas, and on the canvas, we design our pages within “Breakpoints”.

Lets open up a project and take a good look at the guts.

00:00 Inro
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

🌞 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