Video summary

Getting familiar with the Framer interface (Fundamentals Lesson 1)

Main summary

Key takeaways

Educational

Main ideas / lessons

  • Before building in Framer, get comfortable with its interface layout.
  • The interface can be understood from a “bird’s-eye view” as four main parts:
    1. Toolbar (top/left)
    2. Left sidebar
    3. Right sidebar (Properties panel)
    4. Center canvas

Interface breakdown (detailed)

1) Toolbar (across the top, with a left cluster of controls)

Framer logo button (main menu)

  • Opens a menu with actions and preferences.
  • Similar to a traditional menu bar on macOS/windows top areas.
  • Many items are accessible via other methods, so the menu isn’t used constantly—but it’s worth knowing what’s there.

Insert elements buttons

  • Insert panel button
    • Opens an insert panel containing:
      • Pages
      • Page sections
      • Design elements
      • Components
    • Key shortcut: press “I” to open directly.
  • Layout menu + Text button
    • Used to add fundamental elements to the canvas.

CMS button

  • Opens a separate view to create and manage Collections and items for Framer’s built-in CMS.
  • The course notes this is covered later.

Quick action bar

  • A time-saving command launcher.
  • Shortcut:
    • Command + K (Mac) or Control + K (PC)
  • Lets you:
    • Pull up quick actions immediately
    • Type to find menu items without hunting through menus
  • Learning benefit:
    • Helps you discover keyboard shortcuts for frequently used actions.

Project info (middle of toolbar)

  • Shows the project name
  • Supports:
    • Renaming
    • Moving the project to a different folder
  • If published:
    • Displays a URL you can click to open the live site in your default browser.

Right-side toolbar cluster

  • Avatars for collaborators
  • Localization settings (languages/regions)
  • Various settings
  • Preview mode (how the site behaves in-browser)
  • Invite collaborators
  • Publish button
    • Publishes the site or applies changes immediately.

2) Left sidebar (toggle among three panels)

  • Pages panel
    • View, create, and edit pages in the site.
  • Layers panel
    • Shows all elements on the current page.
    • Includes a page switcher at the top.
  • Assets panel
    • Contains project assets such as:
      • Components
      • Styles
      • Code files

3) Right sidebar (Properties panel)

  • Displays the properties for the currently selected element.
  • Contextual behavior
    • Properties shown change depending on selection.
    • Examples:
      • Selecting a breakpoint shows breakpoint-relevant options.
      • Selecting a text box shows font-related settings (font family, weight, spacing, alignment, etc.).
  • The panel is described as the one used the vast majority of the time.

4) Center canvas (where design happens)

  • Infinite, free-form canvas
    • Feels like familiar design tools.
  • Page content appears inside top-level frames called Breakpoints.
  • Canvas tools at the bottom/right (helpful utilities):
    • Pan tool
      • Also accessible by holding Spacebar
    • Comment tool
      • Click anywhere on the canvas to add comments.
      • Comments can be viewed and replied to via the right sidebar.
    • Day/Night mode toggle
      • Changes the Framer interface and can also toggle site content (once set up).
    • Zoom controls + shortcuts
      • Emphasized frequent shortcuts:
        • Zoom to fit
        • Zoom to selection
        • Zoom to 100% (to preserve true scale)
  • Notes that shortcuts help navigate more quickly and accurately.

Additional references / calls to action

  • Mentions where to find more lessons:
    • Framer Academy (where the viewer may be watching from)
    • Suggests visiting framer.com to see the library (spelled in subtitles as “framer dcom”).
  • Encourages joining the Framer Community to collaborate and ask for help.

Speakers / sources featured

  • Framer Academy / Framer (course host/teacher; no specific individual named in subtitles)
  • Framer Community (community platform referenced)
  • Framer.com (site referenced for more lessons)
  • Music (background music indicated, no named performer)

Original video