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.
Pages and layers on the left, insert and layout along the top, properties on the right.
Pages become the URLs on your site. Layers break each page down, starting with its breakpoints.
Prebuilt sections and elements, plus the layout tools and shortcuts you'll use constantly.
Preview clicks through the real site. The properties panel styles whatever you've selected.
FIND YOUR WAY AROUND THE EDITOR
Know what every panel does, and which shortcuts save the most time.
KEEP PROJECTS ORGANISED
Name layers, use the canvas for ideas, and set who can access what.
PREVIEW BEFORE YOU PUBLISH
Click through the site as a visitor would, at any width, before it goes live.
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.
Layout in Framer
Framer's layout system works like auto layout in Figma or Flexbox in Webflow. Learn how stacks and grids bring alignment and order to your elements.
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.
Open a project and name every layer on one page, then preview it at each breakpoint.
08:53
PUBLISH CHECKLIST
Pages and layers explored
Insert menu tried
Layout shortcuts learned
Layers renamed
Previewed the page
Properties panel used
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
FREQUENTLY ASKED QUESTIONS
Everything you need to know about this lesson.
How is the Framer editor laid out?
Pages and layers sit on the left, insert and layout tools run along the top, and the properties panel on the right styles whatever you've selected.
Why isn't something on my canvas showing on the published site in Framer?
Anything sitting outside a breakpoint never ships. The canvas is a working space for ideas; only what's inside a breakpoint appears on the live site.
How do I check a Framer site before publishing?
Use preview. It clicks through the real site the way a visitor would, at any width, so you can catch problems before it goes live.
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
