Interacting with Layers in Framer

Whether you’re a Framer newbie or a seasoned pro, mastering the mechanics and tricks of interacting with layers and navigating the canvas will speed up your work tremendously.

Lesson details

1:10

Part of Framer Fundamentals

Lesson details

1:10

Part of Framer Fundamentals

Lesson details

1:10

Part of Framer Fundamentals

Continue course

The Framer interface

5:16

The Framer interface

5:16

The Framer interface

5:16

Thinking in Frames

3:53

Thinking in Frames

3:53

Thinking in Frames

3:53

Absolute Positioning

7:39

Absolute Positioning

7:39

Absolute Positioning

7:39

Stacks and Relative Positioning

8:05

Stacks and Relative Positioning

8:05

Stacks and Relative Positioning

8:05

Sizing to Fill and Fit Content

7:37

Sizing to Fill and Fit Content

7:37

Sizing to Fill and Fit Content

7:37

Stacks vs Grids

7:45

Stacks vs Grids

7:45

Stacks vs Grids

7:45

Fixed and Sticky Positioning

4:09

Fixed and Sticky Positioning

4:09

Fixed and Sticky Positioning

4:09

Relative, Fixed, and Viewport Sizing

7:05

Relative, Fixed, and Viewport Sizing

7:05

Relative, Fixed, and Viewport Sizing

7:05

Min and Max Sizing

8:26

Min and Max Sizing

8:26

Min and Max Sizing

8:26

Adding Images, Video, and Text

6:08

Adding Images, Video, and Text

6:08

Adding Images, Video, and Text

6:08

The Insert Panel

5:13

The Insert Panel

5:13

The Insert Panel

5:13

Importing from Figma and the Web

12:55

Importing from Figma and the Web

12:55

Importing from Figma and the Web

12:55

The Anatomy of a Project

5:38

The Anatomy of a Project

5:38

The Anatomy of a Project

5:38

Adding Links

10:30

Adding Links

10:30

Adding Links

10:30

Interacting with Layers

1:10

Interacting with Layers

1:10

Interacting with Layers

1:10

Styling Frames

10:47

Styling Frames

10:47

Styling Frames

10:47

Text properties

12:36

Text properties

12:36

Text properties

12:36

Link and Color Styles

9:36

Link and Color Styles

9:36

Link and Color Styles

9:36

Text Styles

7:06

Text Styles

7:06

Text Styles

7:06

Themes

6:30

Themes

6:30

Themes

6:30

Components

16:57

Components

16:57

Components

16:57

Layout Templates

12:22

Layout Templates

12:22

Layout Templates

12:22

What is responsive design?

1:26

What is responsive design?

1:26

What is responsive design?

1:26

Designing fluid layouts

22:30

Designing fluid layouts

22:30

Designing fluid layouts

22:30

Creating Breakpoints

19:02

Creating Breakpoints

19:02

Creating Breakpoints

19:02

SEO and Accessibility

10:22

SEO and Accessibility

10:22

SEO and Accessibility

10:22

Site and Page settings

6:57

Site and Page settings

6:57

Site and Page settings

6:57

Choosing a plan

5:04

Choosing a plan

5:04

Choosing a plan

5:04

Analytics

2:45

Analytics

2:45

Analytics

2:45

More videos

Version History

3:00

Version History

3:00

Copy from HTML

3:10

Copy from HTML

3:10

Components

16:10

Components

16:10

Import from Figma

9:40

Import from Figma

9:40

Breakpoints

16:15

Breakpoints

16:15

Layout & Sizing

14:17

Layout & Sizing

14:17

Build Your First Site

52:00

Build Your First Site

52:00

Scroll Variant

8:18

Scroll Variant

8:18

Scroll Transforms

17:06

Scroll Transforms

17:06

Scroll Animations

12:47

Scroll Animations

12:47

Sticky Scrolling

4:33

Sticky Scrolling

4:33

Scroll Targets

7:10

Scroll Targets

7:10

Overlays

6:20

Overlays

6:20

Responsive Dropdown Menu

19:48

Responsive Dropdown Menu

19:48

Relative Overlays

10:20

Relative Overlays

10:20

Scroll Direction

3:10

Scroll Direction

3:10

Horizontal Side Scroller

3:01

Horizontal Side Scroller

3:01

Mobile Menu: Fade-In

10:44

Mobile Menu: Fade-In

10:44

Mobile Menu

6:27

Mobile Menu

6:27

Desktop Menu

7:12

Desktop Menu

7:12

Fit Text

3:28

Fit Text

3:28

Realistic Shadows

2:28

Realistic Shadows

2:28

Light & Dark Mode

5:44

Light & Dark Mode

5:44

Viewport Height

Code Blocks

Bold & Italic

Scroll Sections

Conditionals & Transforms

Date Filtering

Filtering

CSV import

CMS Overview

Ticker

Slideshow

Input

Cookie Banner

Carousel

Staging & Versions

Redirects

Custom Domains

Custom Code

Password Protection

Metadata

Sell on Lemon Squeezy

Canvas-like website

Apple Zoom Scroll Effect

Wave Animation

Creative Effects

Component Effects

Page Effects

How to Link Pages

AI Translations Style

Prepare your Template

Stack Variables

How to use Templates

Creative Elements

3:23

Creative Elements

3:23

Custom Cursors

16:54

Custom Cursors

16:54

Advanced Localization

6:31

Advanced Localization

6:31

3D Transforms

12:45

3D Transforms

12:45

Localize your site

8:07

Localize your site

8:07

Text Effects

3:52

Text Effects

3:52

Fetch

10:27

Fetch

10:27

Update Form Status

6:04

Update Form Status

6:04

Custom Form Submit Button

2:10

Custom Form Submit Button

2:10

Optional Form Input Props

5:18

Optional Form Input Props

5:18

Creating your first form

10:58

Creating your first form

10:58

The Anatomy of a Project

5:38

The Anatomy of a Project

5:38

Interacting with Layers

1:10

Interacting with Layers

1:10

Thinking in Frames

3:53

Thinking in Frames

3:53

Absolute Positioning

7:39

Absolute Positioning

7:39

Analytics

2:45

Analytics

2:45

Variants & Validation

7:51

Variants & Validation

7:51

Stacks and Relative Positioning

8:05

Stacks and Relative Positioning

8:05

Sizing to Fill and Fit Content

7:37

Sizing to Fill and Fit Content

7:37

Stacks vs Grids

7:45

Stacks vs Grids

7:45

Fixed and Sticky Positioning

4:09

Fixed and Sticky Positioning

4:09

Relative, Fixed, and Viewport Sizing

7:05

Relative, Fixed, and Viewport Sizing

7:05

Adding Images, Video, and Text

6:08

Adding Images, Video, and Text

6:08

The Insert Panel

5:13

The Insert Panel

5:13

Adding Links

10:30

Adding Links

10:30

Styling Frames

10:47

Styling Frames

10:47

Link and Color Styles

9:36

Link and Color Styles

9:36

Text Styles

7:06

Text Styles

7:06

Themes

6:30

Themes

6:30

Components

16:57

Components

16:57

What is responsive design?

1:26

What is responsive design?

1:26

Designing fluid layouts

22:30

Designing fluid layouts

22:30

Creating Breakpoints

19:02

Creating Breakpoints

19:02

SEO and Accessibility

10:22

SEO and Accessibility

10:22

Site and Page settings

6:57

Site and Page settings

6:57

Choosing a plan

5:04

Choosing a plan

5:04

CMS References

3:47

CMS References

3:47

Min and Max Sizing

8:26

Min and Max Sizing

8:26

5 Hidden Design Features

2:22

5 Hidden Design Features

2:22

CMS Canvas Sorting

4:04

CMS Canvas Sorting

4:04

Drafts

1:44

Drafts

1:44

10 Framer Shortcuts to Supercharge your Productivity

1:54

10 Framer Shortcuts to Supercharge your Productivity

1:54

Layout Templates

12:22

Layout Templates

12:22

Selection Colors

0:57

Selection Colors

0:57

Scale Tool (K)

3:32

Scale Tool (K)

3:32

What is the Framer CMS?

2:45

What is the Framer CMS?

2:45

Understanding CMS Collections, Items & Fields

5:51

Understanding CMS Collections, Items & Fields

5:51

CMS Pages & Dynamic Content

8:31

CMS Pages & Dynamic Content

8:31

Utilizing Collection Lists in Framer

9:17

Utilizing Collection Lists in Framer

9:17