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.
Take a finished button or card, make it a component, then reuse it and watch the update flow through.
Design it properly first. Whatever you turn into a component becomes the master every copy follows.
Create it from the right-click menu and it moves to the assets panel, ready to reuse anywhere.
Drag copies onto the page, then edit the original and watch every instance change with it.
SPOT WHAT SHOULD BE A COMPONENT
Recognise the repeated elements worth building once: buttons, cards, navbars and footers.
KNOW WHAT A COMPONENT ACTUALLY IS
Tell the difference between a component, an instance and an ordinary frame.
UPDATE A WHOLE SITE FROM ONE PLACE
Change the original once and every instance on every page follows.
Understanding Frames
Every great site starts with frames, Framer's core building block. In this foundational lesson you'll learn what frames are, how they work, and why they're essential to everything you'll design going forward.
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 a button you've already built, turn it into a component, place three copies on the page, then change the original's colour and watch all three update.
03:10
PUBLISH CHECKLIST
Element finished first
Component created
Three instances placed
Original edited
All instances updated
Named in assets
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
FREQUENTLY ASKED QUESTIONS
Everything you need to know about this lesson.
What is a component in Framer?
A component is an element you build once and reuse across the site. Every copy is an instance pointing back to the original, so editing the original updates all of them.
What's the difference between a component and a frame in Framer?
A frame is a one-off box. A component is a reusable master: place instances anywhere, and a change to the master flows through to every instance.
How do I edit every instance of a component at once in Framer?
Edit the component itself rather than an instance. Open the original from the assets panel, make the change, and every instance across the site updates.
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
