Layout & Design

The Anatomy of a Framer Project (Fundamentals Lesson 2)

Joseph

5:38

99K views

Aug 8, 2024

About this lesson

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.

https://www.youtube.com/watch?v=-kNqT8JDCFQ&t=0s Inro

https://www.youtube.com/watch?v=-kNqT8JDCFQ&t=8s Workspace, folders, and projects

https://www.youtube.com/watch?v=-kNqT8JDCFQ&t=21s Pages, canvases, and breakpoints overview

https://www.youtube.com/watch?v=-kNqT8JDCFQ&t=52s Creating and managing pages

https://www.youtube.com/watch?v=-kNqT8JDCFQ&t=88s Page paths, titles, and URLs

https://www.youtube.com/watch?v=-kNqT8JDCFQ&t=136s Changing home pages and using folders

https://www.youtube.com/watch?v=-kNqT8JDCFQ&t=204s Designing on the canvas

https://www.youtube.com/watch?v=-kNqT8JDCFQ&t=218s Breakpoints and responsive design

https://www.youtube.com/watch?v=-kNqT8JDCFQ&t=266s Introduction to frames

https://www.youtube.com/watch?v=-kNqT8JDCFQ&t=313s 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

0:00now that you're familiar with the framer 0:01interface it's time to get familiar with 0:03the anatomy of the things we build and 0:06unpack the content of a framer 0:09[Music]0:10project let's take a super highlevel 0:13look at the anatomy of a framer project 0:16at the top level you have your framer 0:18workspace that contains all of your 0:20projects within your workspace you have 0:22the option of creating folders to keep 0:24your projects organized but these are 0:26completely optional then you have the 0:29projects themselves 0:30Each of which is essentially a website 0:33you decide when and where to publish 0:34them but one project equals one website 0:38within a project we have Pages within 0:40each page we have a design canvas and on 0:43the canvas we design our Pages within 0:46breakpoints more on these in a moment 0:48let's open up a project and take a good 0:50look at the guts here we have a fresh 0:53new project which again means a fresh 0:55new website and a website is nothing 0:57without pages on the left side bar we 1:00have our Pages panel where we see our 1:02one and only page at the moment which is 1:04called home the home page is actually a 1:07bit special it's the default page that 1:09loads when someone navigates to your 1:11root domain like framer 1:23docomomo determine the path to get to 1:26the page in the URL but the path to the 1:29homepage is the root domain by itself 1:32you might be thinking wait I don't want 1:34my page to just say home in a browser 1:36tab or on search engines or when it's 1:39saved as a bookmark but that's actually 1:41called the page title and it's metadata 1:44that we can edit by clicking on the 1:45ellipses menu and clicking settings here 1:49you'll find all that metadata for the 1:51page let's head back and create a second 1:53page by clicking on the plus button and 1:56choosing new page you'll notice that 1:59this page has a different icon and a 2:01slash in front of the name which we can 2:04customize to determine what the path to 2:06this page will be for example framer 2:24docomomo link and anyone with the old 2:27link will end up getting the old 404 2:30page not found don't get me wrong it's 2:32fixable with something called a redirect 2:34but that's for another lesson you can 2:36only have one homepage for your site but 2:39you can change which page that is at any 2:41time by clicking the Ellipsis menu and 2:44choosing set 2:46homepage you can also group pages 2:48together by clicking the plus button 2:50choosing new folder giving the folder 2:54and name and then dragging pages into 2:56the 2:57folder you'll notice folders have a 3:00slash in the name just like Pages that's 3:02because these subfolders are now part of 3:04the path to get to these 3:06pages in this case shop could be a 3:09folder but it could also be a shop page 3:12if you think about it what's cool is 3:14that a page can also behave as a folder 3:16for other pages and a folder can be 3:18converted to a page from the Ellipsis 3:20menu in case plans change along the way 3:24when it's time to design the canvas is 3:26where it all goes down each page of your 3:28project has its own reform canvas that 3:30you can use however you'd like along 3:32with a big frame called a breakpoint 3:35where we design the content of the page 3:37itself any elements placed within the 3:39breakpoint will be part of the web page 3:41when you publish it and anything placed 3:43on the outskirts of the canvas will not 3:46so the rest of the canvas is yours to do 3:48with as you please just like figma and 3:50sketch by default each new page starts 3:52us off with a desktop breakpoint that's 3:5512200 pixels wide but we can double 3:57click this bar to customize that what's 4:00even more important here is that we can 4:01click the plus icon to add additional 4:04breakpoints for tablets phones or 4:06anything in between which allows us to 4:08create different layouts of a page that 4:10are optimized for different viewport 4:12sizes don't worry this doesn't mean you 4:14have to design everything three times 4:17framer makes it much easier than that 4:19but we'll dive much more deeply into 4:21breakpoints and designing responsibly 4:23later in this course all right last 4:26thing we'll have plenty of time to look 4:28at different types of design elements 4:30and their properties in the coming 4:31lessons but before we do I just want to 4:34mention the most fundamental building 4:36block we use in our page layouts frames 4:40if you're coming over from figma these 4:42will be very familiar to you if this is 4:44all new to you a frame is essentially a 4:46rectangle but a rectangle that can have 4:48other layers inside of it you can use a 4:52frame to group things contain things 4:54stack things grid things or just to make 4:57a plain old rectangle in fact we don't 5:00have or need a rectangle tool frames 5:03have it covered I could ramble on all 5:05day about the millions of use cases for 5:07frames but let's wrap this one up now 5:09that we've covered the basic anatomy of 5:11a framer project now you know that 5:14projects live within your workspace each 5:16project is a site that contains pages 5:19and each page is a design canvas with 5:21break points where the magic happens now 5:24head to framer get comfortable and I'll 5:26see you in the next lesson

TeachesSite & Page Settings

Also coversBreakpoints Custom Domains Frames Grids Links Meta Titles & Descriptions Redirects Stacks

Watch on YouTube ↗

‹ Form Input Variants and Validation in Framer

4 Ways to Update Form Status in Framer ›