The Ultimate
Framer Site Checklist for 2025:
1/ Structure & LAYOUT
Only using 3 breakpoints: 1200, 810, and 390.
Only using 3 breakpoints: 1200, 810, and 390.
Breakpoint and containers within are turned into stacks.
Breakpoint and containers within are turned into stacks.
90% relative position elements, 10% absolute position elements.
90% relative position elements, 10% absolute position elements.
Breakpoints and most sections use auto (fit) height so they grow when new content is added.
Breakpoints and most sections use auto (fit) height so they grow when new content is added.
viewport height (VH) based min height is added to hero sections.recommended: 90-100vh.
viewport height (VH) based min height is added to hero sections.recommended: 90-100vh.
most frames use fill width so they adopt to screen width changes.
most frames use fill width so they adopt to screen width changes.
Add your navigation and footer into a layout template.
Add your navigation and footer into a layout template.
Breakpoint > MAIN > SECTION > Content structure is used.
Breakpoint > MAIN > SECTION > Content structure is used.
Top and bottom padding is set on 'SECTION' frames. Left and right padding is set on 'CONTENT' frames.
Top and bottom padding is set on 'SECTION' frames. Left and right padding is set on 'CONTENT' frames.
Max width is set on the content frames.
Max width is set on the content frames.
Layout is tested by previewing and resizing WIDTH.
Layout is tested by previewing and resizing WIDTH.
2/ Typography
text wider than 390px uses fill width. if it isn't, it won't break into new lines on smaller devices.
text wider than 390px uses fill width. if it isn't, it won't break into new lines on smaller devices.
if text is set to width fill, all of its parents are set to auto (fit) height.
if text is set to width fill, all of its parents are set to auto (fit) height.
using auto responsive text by creating text styles and breakpoints on them.
using auto responsive text by creating text styles and breakpoints on them.
headings use 'H1-H6' tags.
headings use 'H1-H6' tags.
paragraphs use 'p' tag.
paragraphs use 'p' tag.
3/ Animations & Interactions
effects are not added to all layers. Use them sparsely.
effects are not added to all layers. Use them sparsely.
User select 'none' is used on text within interactive elements.
User select 'none' is used on text within interactive elements.
Transition settings are matched on nested components.
Transition settings are matched on nested components.
Transition settings are consistent. a set of timing and easing settings are reused throughout all interactions & animations.
Transition settings are consistent. a set of timing and easing settings are reused throughout all interactions & animations.
scroll transform effects are triggered with 'section in view' trigger forprecise control of timing.
scroll transform effects are triggered with 'section in view' trigger forprecise control of timing.
animations & interactions are inspired by https://framer.university resources.
animations & interactions are inspired by https://framer.university resources.
4/ PRO Tips
Alt texts are set on all images for improved accessibility and SEO.
Alt texts are set on all images for improved accessibility and SEO.
Elements repeating more than 3x are turned into components.
Elements repeating more than 3x are turned into components.
No blur values over 20px are used to avoid performance issues.
No blur values over 20px are used to avoid performance issues.
Navigations use 'nav' tag, footers use 'footer' tag, regular elements use 'DIV' tag, links use 'A' tag, clickable but non-link elements use 'button' tag.
Navigations use 'nav' tag, footers use 'footer' tag, regular elements use 'DIV' tag, links use 'A' tag, clickable but non-link elements use 'button' tag.
page titles and descriptions are set, as well as social images.
page titles and descriptions are set, as well as social images.
if full height navigation is used on mobile, page scroll is blocked with the scroll stopper component.
if full height navigation is used on mobile, page scroll is blocked with the scroll stopper component.
override max width values on your content frames across different breakpoints. i use 1000px on desktop, 700px on tablet and 400px on phone.
override max width values on your content frames across different breakpoints. i use 1000px on desktop, 700px on tablet and 400px on phone.