Welcome back

Name

Modules

01.

Framer Basics

1.1

Getting familiar with the Framer interface

5:15

1.2

The anatomy of a Framer project

13:10

1.3

Interacting with layers

12:47

1.4

Thinking in frames

11:24

1.5

Absolute positioning

10:01

1.6

Stacks and relative positioning

9:38

02.

Layout & Sizing

2.1

Sizing to fill and fit content

22:37

2.2

Stacks vs grids

21:14

2.3

Fixed and sticky positioning

20:51

2.4

Fixed, relative, and viewport sizing

19:28

2.5

Min and max sizing

18:05

2.6

Adding images, videos, and text

17:42

03.

Content & Styling

3.1

Using the insert panel

6:29

3.2

Importing from Figma and the web

5:06

3.3

Adding links

22:43

3.4

Styling frames

21:20

3.5

Text properties

20:57

3.6

Link and color styles

19:34

04.

Components & Responsive

4.1

Text styles

16:25

4.2

Light and dark mode themes

15:02

4.3

Intro to components

14:39

4.4

Using layout templates

13:16

4.5

What is responsive design?

12:53

4.6

Practice: designing fluid layouts

11:30

05.

Publish & Grow

5.1

Practice: creating breakpoints

8:21

5.2

SEO and accessibility

7:58

5.3

Site and page settings

6:35

5.4

Choosing the right plan

5:12

5.5

Publishing and connecting a domain

22:49

5.6

Analytics in Framer

21:26

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.

Home

Lessons

Buy course

Bookmarks

Sign in

Sign up

Home

Lessons

Buy course

Bookmarks

Sign in

Sign up

Create a free website with Framer, the website builder loved by startups, designers and agencies.