Video summary

The Anatomy of a Framer Project (Fundamentals Lesson 2)

Main summary

Key takeaways

Educational

Main ideas / concepts

  • Framer project “anatomy” (high-level walkthrough)

    • A Framer workspace contains one or more projects.
    • A project is essentially a website.
    • Each project contains pages.
    • Each page includes:
      • a design canvas
      • one or more breakpoints for responsive layouts
      • a collection of elements placed inside/outside the breakpoint area

  • Organization features

    • Folders can be created inside a workspace to organize projects (optional).
    • Within a project, you can create page folders to group pages.
    • A page can behave like a folder (and a folder can be converted into a page if needed).

  • Pages, routing, and metadata

    • The homepage is special:
      • It’s the default page loaded when someone visits the root domain (the path is just the domain itself).
      • The browser tab / saved bookmark title corresponds to the page title (editable in Page Settings via the ellipses menu).
    • You can create additional pages:
      • New pages get a path (route) based on a leading slash and the page name.
      • Changing links can affect users; old links may lead to a 404 unless handled (via redirects, mentioned as another lesson).
    • You can change which page is the homepage at any time using Set homepage.

  • Canvas + breakpoints (responsive layout system)

    • Each page has its own Framer canvas.
    • A breakpoint defines the area where you design content that will be part of the published web page.
    • Content placed inside the breakpoint becomes part of the web page when published.
    • Content placed outside the canvas/breakpoint area is not included in the final page content (described as: “the rest of the canvas is yours to do with as you please”).
    • By default:
      • Each new page starts with a desktop breakpoint (stated as 1220 pixels wide in the transcript).
    • You can:
      • Resize the desktop breakpoint (double-click the bar).
      • Add additional breakpoints for other devices/viewports (tablet/phone/etc.) to create optimized layouts.
    • The instructor notes you don’t have to design everything multiple times, and Framer helps with this (details deferred).

  • Core layout building block: Frames

    • Frames are the most fundamental building block for page layouts.
    • A frame is:
      • essentially a rectangle
      • but can contain other layers inside it
    • Frames can be used to group, contain, stack, grid, or create plain rectangles.
    • This replaces the need for a separate rectangle tool in the Framer workflow.

Methodology / instruction-style steps (detailed bullets)

  • Explore project structure

    • Open a project inside the workspace.
    • In the left sidebar, use the Pages panel to view the project’s pages.
    • Identify the homepage (default loads at the root domain).

  • Edit page metadata

    • Open the page’s ellipsis (⋯) menu → Settings.
    • Edit page title (metadata reflected in the browser tab/bookmark/search behavior).

  • Create and route a new page

    • Click + → New page.
    • Confirm the page has a route path (shown with a slash prefix).
    • Understand that changing/departing old links may cause 404 errors for old URLs.
    • Note: fixing old links uses redirects (not covered here).

  • Change the homepage

    • Click the homepage candidate’s ellipsis menu → Set homepage.

  • Organize pages with folders

    • Click + → New folder.
    • Name the folder and then drag pages into it.
    • Understand folder subpaths become part of the URL path.
    • Optionally, convert a folder ↔ page using the ellipsis menu if requirements change.

  • Design within breakpoints

    • Use the page’s canvas.
    • Put content inside breakpoints so it appears when published.
    • Use the area outside breakpoints freely for non-published work (as described).
    • Customize breakpoints:
      • Start from the default desktop breakpoint.
      • Resize it by double-clicking the breakpoint bar.
      • Add breakpoints for other viewport sizes using the + icon.

  • Use frames for layout

    • Add frames as rectangles that can contain layers.
    • Use frames to group/contain/stack/grid content, or to create basic rectangles without a separate rectangle tool.

Speakers / sources featured

  • No specific individual speaker name is provided in the subtitles.
  • Source featured: Framer (product/workflow mentioned throughout).

Original video