University
Log in
Search
⌘E
My learning
Try Webflow — it's free
Learn
Courses
Learning Paths
Videos
Docs
Resources
Certifications
Webflow University Pro
Interactive Learning
Glossary
The Webflow Way
Engage
Support
Community
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
All coursesDesign systems for teams & AI agents
Variables as a system

Variables as a system

Build a variable system with primitive and semantic variables, theme modes, and clear guidance for AI agents.
Trouble with this video? YouTube may be blocking it for you. Watch it directly on YouTube instead.

Variables as a system

Build a variable system with primitive and semantic variables, theme modes, and clear guidance for AI agents.

1

Getting started

Coming soon

1

Background & preview
3:00
Background & preview
Coming soon

1

Intro to design systems in Webflow
8:40
Intro to design systems in Webflow
Coming soon

1

How the parts work together
3:30
How the parts work together
Coming soon

2

Styles & variables

Coming soon

2

Intro to variables
5:48
Intro to variables
Coming soon

2

Styles, variables, & naming
3:00
Styles, variables, & naming
Coming soon

2

Variables as a system
8:33
Variables as a system
Coming soon

2

Build a flexible variable system
2:30
Build a flexible variable system
Coming soon

3

Components

Coming soon

3

Intro to components
5:03
Intro to components
Coming soon

3

Build flexible components
3:00
Build flexible components
Coming soon

3

Properties, variants, & slots
4:28
Properties, variants, & slots
Coming soon

3

Components for teams & AI agents
3:00
Components for teams & AI agents
Coming soon

4

Pages & CMS content

Coming soon

4

Page templates
3:00
Page templates
Coming soon

4

Create a static page template
3:08
Create a static page template
Coming soon

4

Add components to CMS rich text
2:25
Add components to CMS rich text
Coming soon

4

Components in CMS rich text
2:30
Components in CMS rich text
Coming soon

5

Share & maintain your system

Coming soon

5

Shared Libraries
8:59
Shared Libraries
Coming soon

5

Bring in an existing site
4:00
Bring in an existing site
Coming soon

5

Use your system with AI
3:00
Use your system with AI
Coming soon

5

Best practices & resources
2:00
Best practices & resources
Coming soon

Course progress

0%

Assessment

Test your knowledge

Up next

Build a flexible variable system

Connect primitives and semantics, adapt values with modes, and scale smoothly with functions.
Continue to next lesson
→
Complete course
✓