The anatomy of a Framer project - Basis — A clean starter template

IEP Playbook | Modules

01.

Framer Basics

Getting familiar with the Framer interface

The anatomy of a Framer project

Interacting with layers

Thinking in frames

Absolute positioning

Stacks and relative positioning

02.

Layout & Sizing

Sizing to fill and fit content

Stacks vs grids

Fixed and sticky positioning

Fixed, relative, and viewport sizing

Min and max sizing

Adding images, videos, and text

03.

Content & Styling

Using the insert panel

Importing from Figma and the web

Text properties

Link and color styles

04.

Components & Responsive

Light and dark mode themes

Intro to components

Using layout templates

What is responsive design?

Practice: designing fluid layouts

05.

Publish & Grow

Practice: creating breakpoints

SEO and accessibility

Site and page settings

Choosing the right plan

Publishing and connecting a domain

Analytics in Framer

Previous

Next

The anatomy of a Framer project

Understand pages, breakpoints, and layers, and how a Framer project fits together.

What you’ll learn in this lesson

Understand pages, breakpoints, and layers, and how a Framer project fits together. In this lesson you’ll follow along inside Framer, see it applied on a real project, and finish with a short exercise before moving on.