Course Curriculum
50+ lessons, 12 hours of video content, and a lifetime of updates. Everything you need to become a professional Framer developer.
Module 1
Fundamentals
1
Introduction to the Framer ecosystem
05m
A guided tour of the workspace, panels, and core mental models you'll use every day.
1
Introduction to the Framer ecosystem
A guided tour of the workspace, panels, and core mental models you'll use every day.
05m
2
Understanding the Canvas and Viewports
12m
How Framer renders pages and how viewport sizes shape every design decision you make.
2
Understanding the Canvas and Viewports
How Framer renders pages and how viewport sizes shape every design decision you make.
12m
3
Sizing & Constraints (Relative vs Absolute)
18m
Master the rules that determine how elements grow, shrink, and lock to the canvas.
3
Sizing & Constraints (Relative vs Absolute)
Master the rules that determine how elements grow, shrink, and lock to the canvas.
18m
4
The Hierarchy of Layers
Reading
How layer order, naming, and grouping influence both performance and team collaboration.
4
The Hierarchy of Layers
How layer order, naming, and grouping influence both performance and team collaboration.
Reading
5
Creating your first interactive component
24m
Build a reusable button component from scratch with hover and click states wired up.
5
Creating your first interactive component
Build a reusable button component from scratch with hover and click states wired up.
24m
6
Working with Auto Layout & Stacks
16m
Stack elements horizontally and vertically using Framer's auto-layout engine.
6
Working with Auto Layout & Stacks
Stack elements horizontally and vertically using Framer's auto-layout engine.
16m
7
Color systems & typography tokens
14m
Define a token-driven color and type system that scales across an entire site.
7
Color systems & typography tokens
Define a token-driven color and type system that scales across an entire site.
14m
8
Fundamentals knowledge check
Quiz
A short quiz to confirm you've internalized the fundamental concepts of Framer.
8
Fundamentals knowledge check
A short quiz to confirm you've internalized the fundamental concepts of Framer.
Quiz
9
Starter files & keyboard shortcuts
Resource
Downloadable starter project plus a printable PDF of essential keyboard shortcuts.
9
Starter files & keyboard shortcuts
Downloadable starter project plus a printable PDF of essential keyboard shortcuts.
Resource
Build your legacy on the web.
Join 5,000+ designers who have moved beyond static mockups to shipping production-ready sites for global brands.
Join 5,000+ designed building on Framer
Build your legacy on the web.
Join 5,000+ designers who have moved beyond static mockups to shipping production-ready sites for global brands.
Join 5,000+ designed building on Framer