Search

Design Systems

Build Components, Variants, variables, Color Styles, and Text Styles, then use the Agent to turn repeated patterns into a reusable system.

Search all 107 lessons…

Search all 107 lessons…

Search all 107 lessons…

Agents

,

Design Systems

Keep your growing site consistently with the Agent

4:45

Agents

,

Design Systems

Review Agent changes safely with Branching

5:38

Basics

,

Agents

,

Design Systems

Give one Component multiple states with the Agent

3:45

Basics

,

Agents

,

Design Systems

How to use Component Variants in Framer

4:32

Design Systems

How to use Component variables in Framer

5:15

Lesson thumbnail for connecting Framer to Claude Code, Codex, Cursor, and more.

Basics

,

Agents

,

Design Systems

Connect Framer to Claude Code, ChatGPT Codex, Cursor, and more

7:13

All Design Systems

Search 41 lessons…

Search 41 lessons…

Turn your design system into a reusable skill

9:24

Turn your design system into a reusable skill

9:24

Review Agent changes safely with Branching

5:38

Review Agent changes safely with Branching

5:38

Keep your growing site consistently with the Agent

4:45

Keep your growing site consistently with the Agent

4:45

Design responsive layouts that work on every screen

3:05

Design responsive layouts that work on every screen

3:05

How to use Component Variants in Framer

4:32

How to use Component Variants in Framer

4:32

Give one Component multiple states with the Agent

3:45

Give one Component multiple states with the Agent

3:45

How to use Component variables in Framer

5:15

How to use Component variables in Framer

5:15

Lesson thumbnail for connecting Framer to Claude Code, Codex, Cursor, and more.

Connect Framer to Claude Code, ChatGPT Codex, Cursor, and more

7:13

Connect Framer to Claude Code, ChatGPT Codex, Cursor, and more

7:13

Adding a Locale in Framer — lesson cover image

Add a locale in Framer

5:18

Add a locale in Framer

5:18

Sharing Vector Sets across Projects — lesson cover image

Share Vector Sets across Framer projects

3:40

Share Vector Sets across Framer projects

3:40

Connecting Vector Sets to the Framer CMS — lesson cover image

Connect Vector Sets to the Framer CMS

3:38

Connect Vector Sets to the Framer CMS

3:38

Animating Vectors in Framer — lesson cover image

Animate Vectors in Framer

4:25

Animate Vectors in Framer

4:25

Customizing Vectors with Variables in Framer — lesson cover image

Customize Vectors with variables in Framer

4:59

Customize Vectors with variables in Framer

4:59

Replace component instances site-wide in Framer — lesson cover image

Replace Component instances across your site in Framer

1:38

Replace Component instances across your site in Framer

1:38

Creating and Organizing Vector Sets in Framer — lesson cover image

Create and organize Vector Sets in Framer

6:58

Create and organize Vector Sets in Framer

6:58

Drawing with Vectors in Framer — lesson cover image

Draw with Vectors in Framer

7:56

Draw with Vectors in Framer

7:56

Getting Started with Vectors — lesson cover image

Get started with Vectors in Framer

1:31

Get started with Vectors in Framer

1:31

Adding Inline Links as Overrides in Framer — lesson cover image

Add inline links with Overrides in Framer

4:26

Add inline links with Overrides in Framer

4:26

Animating vector paths in Framer — lesson cover image

Animate vector paths in Framer

14:36

Animate vector paths in Framer

14:36

Using Events for nested interactions in Framer — lesson cover image

Use Events for nested interactions in Framer

9:28

Use Events for nested interactions in Framer

9:28

Adding animated effects at the component level in Framer — lesson cover image

Add animated effects at the Component level in Framer

3:11

Add animated effects at the Component level in Framer

3:11

On-Page Editing — lesson cover image

Edit content with On-Page Editing in Framer

5:11

Edit content with On-Page Editing in Framer

5:11

Selection colors — lesson cover image

Set text selection colors in Framer

0:57

Set text selection colors in Framer

0:57

Using layout templates in Framer — lesson cover image

Use Layout Templates in Framer

12:22

Use Layout Templates in Framer

12:22

Creating light and dark themes in Framer — lesson cover image

Create light and dark themes in Framer

6:30

Create light and dark themes in Framer

6:30

Text styles in Framer — lesson cover image

Create Text Styles in Framer

7:06

Create Text Styles in Framer

7:06

Link and color styles in Framer — lesson cover image

Create Link Styles and Color Styles in Framer

9:36

Create Link Styles and Color Styles in Framer

9:36

Styling frames in Framer — lesson cover image

Style Frames in Framer

10:47

Style Frames in Framer

10:47

Get started with building CMS plugins — lesson cover image

Build a CMS Plugin for Framer

5:07

Build a CMS Plugin for Framer

5:07

Workspace plugins for enterprise — lesson cover image

Use Workspace Plugins in Framer Enterprise

2:52

Use Workspace Plugins in Framer Enterprise

2:52

Form input variants and validation — lesson cover image

Create form input Variants and validation in Framer

7:51

Create form input Variants and validation in Framer

7:51