Part of 100+ video lessons
Short, step-by-step lessons you can rewatch anytime.
Hands-on project
Follow along in the host project and build as you learn.
Certificate path
Counts toward your Framer Fundamentals certificate.
Start from a finished component, add a second version, then switch between them per instance.
Variants are created inside the component, not on the instance sitting on the page.
Copy the existing variant and restyle it. Same structure, different look.
Give each variant a clear name, then pick the one you want per instance from the properties panel.
KEEP A DESIGN SYSTEM CONSISTENT
Change the shared structure once and every variant stays in step.
BUILD ONE COMPONENT WITH MANY LOOKS
Primary, secondary and icon buttons from a single reusable element.
SWITCH VARIANTS PER INSTANCE
Choose the version you need from the properties panel without detaching anything.
Components in Framer
A component is an element you build once and reuse everywhere. Change the original and every copy across the site updates with it.
Building a Responsive Navbar Component in Framer
Build a navbar as one component: sketch the bar, fix it to the top of the page, then add a hamburger view that opens a full menu on mobile.
CURRICULUM
WHAT YOU’LL LEARN IN THIS COURSE
In the Ultimate Framer Masterclass, you’ll master Framer from the ground up. Follow real projects, get expert feedback, and finally design and ship the way you’ve always wanted to.
Take your button component and add a secondary variant with a different fill and text colour. Place both on the page, then switch one instance between them.
03:30
PUBLISH CHECKLIST
Component opened
Second variant added
Variant restyled
Variants named
Instance switched
Structure still matches
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
FREQUENTLY ASKED QUESTIONS
Everything you need to know about this lesson.
What are variants in Framer?
Variants are alternative versions of the same component, such as a button's primary, secondary and hover styles. They live inside one component rather than as separate ones.
How do I add a variant in Framer?
Open the component, duplicate the existing variant, then restyle the copy. Name each one so you can pick it per instance from the properties panel.
Should I use variants or separate components in Framer?
Use variants when the versions share structure and purpose, like button styles. Use separate components when the elements are genuinely different things.
CERTIFICATION
BECOME A CERTIFIED FRAMER MASTER
Earn 3 official certifications that show you don’t just know Framer, but you can
design, build, and execute real pixel-perfect sites.
Rated excellent by 900+ students
4.8
Lifetime access
14-day money-back guarantee
Stream anywhere
