ARE YOU READY TO MASTER FRAMER?
Free. No credit card required.
SIZING THAT NEVER
FULLY CLICKED
Fixed, fill, relative, fit-content. You kind of get it. Seeing them side by side is what actually makes it stick.
GOOGLING THE SAME FRAMER CONCEPTS ON EVERY NEW PROJECT
You've done this before. But every time you open a new file, you're back to square one on sizing modes. This fixes that.
LAYOUTS THAT LOOK RIGHT UNTIL YOU RESIZE
Usually one sizing or positioning choice is off. Once you know what to look for, the guessing stops.
FUNDAMENTALS
FRAME
Holds everything.
FRAME
FRAME NAME CONVENTIONS
A frame or element inside another frame is referred to its children.
CHILD
PARENT
GRANDPARENT
STACKS
Percentage based sizing.
GRID
Auto layout in grid formation.
GAP
Set space between elements.
PADDING
"Invisible inner border" space around your frame.
SIZING
FIXED
Fixed size. Never changes.
160PX
RELATIVE
Percentage based sizing.
80%
FILL
Fill as much space as available.
FILL
FIXED
FIT CONTENT
Takes up no more space than required.
FIT THIS CONTENT
POSITIONING
RELATIVE
Relative to every element with stack layout applied.
ABSOLUTE
Changes the positioning of that frame, without affecting the others.
STICKY
Stuck to a set position in a parent frame on scroll.
0%
50%
100%
FIXED
Stuck position on the viewport.
COMPONENTS
COMPONENT
Global & reusable element. Any frame can become a component.
COMPONENT
VARIABLE
Change specific fields like text or color specific to one instance.
TEXT TITLE
VARIANT
Different versions of the same component.
COMPONENT
CMS
COLLECTION
The newspaper itself. The collection holds all of your CMS items.
ITEM
The posts / items inside a collection. E.g; Articles within a newspaper.
FIELDS
Fields required to add a new CMS item. E.g; Text, Option, Content
The 30-Day Framer Mastery Challenge is 30 days of hands-on builds. No theory. Real sites. Ryan walks you through every step.
800+ students
4.8
