Introducing Framer Training
Introducing Framer Training
Design & build modern
websites with zerø code
Tactical video lessons on building custom sites with Framer.
Tactical video lessons on building
custom sites with Framer.
Pre-order now
Pre-order now
View curriculum
View curriculum
Framer Training
framer.training
Components
Project
Logo
Button
Feature
Header
Footer
Video
Styles
Text
H1
Heading / 1
Supply, 18
H2
Heading / 2
Supply, 16
H3
Heading / 3
Supply, 14
P
Paragraph
Supply, 12
Position
Type
Relative
Size
Width
Auto
Fit
Height
Auto
Fit
Effects
Video
Component
Source
reel.mp4
On Canvas
Play
Pause
Controls
Show
Hide
Muted
Yes
No
Curriculum
Curriculum
Modules to level up
your Framer game
Introduction
Course overview
Meet your teacher
Framer vs. other tools
Interface walkthrough
Pre-design checklist
Introduction
Course overview
Meet your teacher
Framer vs. other tools
Interface walkthrough
Pre-design checklist
Introduction
Course overview
Meet your teacher
Framer vs. other tools
Interface walkthrough
Pre-design checklist
Effects & Motion
Effects overview
Element effect options
Scroll transforms & variants
Motion-based components
Best practices / do's and don'ts
Effects & Motion
Effects overview
Element effect options
Scroll transforms & variants
Motion-based components
Best practices / do's and don'ts
Effects & Motion
Effects overview
Element effect options
Scroll transforms & variants
Motion-based components
Best practices / do's and don'ts
Content & CMS
CMS overview
Creating a CMS collection
Sorting & filtering content
CMS-generated site pages
Use cases, tactics, and more
Content & CMS
CMS overview
Creating a CMS collection
Sorting & filtering content
CMS-generated site pages
Use cases, tactics, and more
Content & CMS
CMS overview
Creating a CMS collection
Sorting & filtering content
CMS-generated site pages
Use cases, tactics, and more
Components
Components overview
Creating variants & variables
Interactive element states
Utilizing code components
Utilizing built-in plugins
Components
Components overview
Creating variants & variables
Interactive element states
Utilizing code components
Utilizing built-in plugins
Components
Components overview
Creating variants & variables
Interactive element states
Utilizing code components
Utilizing built-in plugins
Core Concepts
Type, graphics, and images
Stack & grid-based layouts
Positioning (relative, fixed)
Element sizing (fixed, fill, auto)
Reusable text & color styles
Core Concepts
Type, graphics, and images
Stack & grid-based layouts
Positioning (relative, fixed)
Element sizing (fixed, fill, auto)
Reusable text & color styles
Core Concepts
Type, graphics, and images
Stack & grid-based layouts
Positioning (relative, fixed)
Element sizing (fixed, fill, auto)
Reusable text & color styles
Extras & Details
Responsive design
Overlays & embeds
Custom code overrides
Settings & SEO metatags
Tips, tactics, and shortcuts
Extras & Details
Responsive design
Overlays & embeds
Custom code overrides
Settings & SEO metatags
Tips, tactics, and shortcuts
Extras & Details
Responsive design
Overlays & embeds
Custom code overrides
Settings & SEO metatags
Tips, tactics, and shortcuts
Pricing
Pricing
Pricing
Pre-order now
for a 50% discount
Solo
$199
$399
Lifetime updates
10+ hours of video
50% off launch price
Certificate of completion
Pre-order
Solo
$199
$399
Lifetime updates
10+ hours of video
50% off launch price
Certificate of completion
Pre-order
Solo
$199
$399
Lifetime updates
10+ hours of video
50% off launch price
Certificate of completion
Pre-order
Community+
$399
$799
Everything in solo, plus:
Student portal via Maven
Live sessions & events
Community chat
Pre-order
Community+
$399
$799
Everything in solo, plus:
Student portal via Maven
Live sessions & events
Community chat
Pre-order
Community+
$399
$799
Everything in solo, plus:
Student portal via Maven
Live sessions & events
Community chat
Pre-order
Mentorship
$999/m
Everything in community, plus:
Private help & guidance
Fast, async messaging
Weekly 1 on 1 sessions
Subscribe
Mentorship
$999/m
Everything in community, plus:
Private help & guidance
Fast, async messaging
Weekly 1 on 1 sessions
Subscribe
Mentorship
$999/m
Everything in community, plus:
Private help & guidance
Fast, async messaging
Weekly 1 on 1 sessions
Subscribe
When does the course start?
June 23rd. You'll get an email with all details before it goes live.
How much does it cost?
June 23rd. You'll get an email with all details before it goes live.
What's included?
June 23rd. You'll get an email with all details before it goes live.
Can I get a refund?
June 23rd. You'll get an email with all details before it goes live.
When does the course start?
June 23rd. You'll get an email with all details before it goes live.
How much does it cost?
June 23rd. You'll get an email with all details before it goes live.
What's included?
June 23rd. You'll get an email with all details before it goes live.
Can I get a refund?
June 23rd. You'll get an email with all details before it goes live.
When does the course start?
June 23rd. You'll get an email with all details before it goes live.
How much does it cost?
June 23rd. You'll get an email with all details before it goes live.
What's included?
June 23rd. You'll get an email with all details before it goes live.
Can I get a refund?
June 23rd. You'll get an email with all details before it goes live.
Meet you Teacher
Meet you Teacher
Meet you Teacher
Teacher Introduction
and recognition
Traf
Creator of this course
Framer Training provides concise, tactical lessons on designing & publishing modern websites directly from a freeform canvas.
10x your ability to publish.
10% of the time & effort.
— @traf
Jorn van Dijk
CE-YO at Framer
“Traf is one of the top experts using Framer.I'm a huge fan of his work & sophisticated style."
— @jornvandijk
Jack Butcher
Founder of Visualize Value
“Traf is a world class designer. If your goal is to learn how to build beautiful, thoughtful products & websites, Traf is your answer.”
— @jackbutcher
Join 150+ future Framer
experts from all over the www
Join 150+ future
Framer experts from
all over the www
Pre-order-now
Pre-order-now
Pre-order-now