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.
Stacks
Set direction, distribution, alignment and wrap on a parent frame to line up its children.
Gap and padding
Gap is the space between elements. Padding is the space inside the frame's edge.
Button
Grids
Switch a stack to a grid and set columns, rows and advanced sizing for larger layouts.
FROM FREEFORM TO STRUCTURED
Ryan takes a set of loose cards and brings them into line with a stack, then a grid.
Select the parent frame
Layout is controlled on the frame that holds the children.
Add a stack
Choose direction, distribute and align, then set the gap and padding.
Switch to a grid
Set columns and rows, and use the advanced options for widths and heights.
04:22
Align anything with stacks and grids
Use direction, distribution, gap and padding to control exactly where elements sit.
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.
Overflow in Framer
Overflow decides what happens when content is bigger than the frame it lives in. Learn the four overflow types and when to use each one.
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.
FUNDAMENTALS
Take a handful of loose cards and put them in a stack. Try each distribute option, then switch the frame to a three-column grid.
Learn the basics
PUBLISH CHECKLIST
Is the page responsive?
Do I use a container?
Using text & color styles?
Used components for reusable elements
Updated SEO
Published my site
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
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
