Toplist
- Website
- Checklist
Toplist
- Website
- Checklist
Toplist
- Website
- Checklist
My 29 Point Framer Website Checklist
Building a clean, responsive, and well-structured Framer website takes more than just great design. It’s all about nailing the details that make your site functional, fast, and visually seamless across devices. Here’s my ultimate 29-point checklist to make sure your Framer site is top-tier.
Posted by
Nandi
Table of contents
Structure & layout
When I first started building in Framer, I used to overthink my layouts a lot. I’d throw in too many breakpoints, mess with fixed heights, and end up breaking things every time I resized the browser. Sound familiar?
This section is everything I wish someone told me earlier. It’s my go-to checklist for building clean, responsive structures that just work across every screen size. If you’re trying to make your site feel polished without overcomplicating things, start here.
1. Only Using 3 Breakpoints
Stick to three breakpoints: 1200, 810 and 390 (Desktop, Tablet, and Mobile). Too many breakpoints complicate your design, while too few make your site feel unpolished on certain devices.
2. Breakpoints and containers
Ensure your breakpoints and containers are properly structured and turned into stacks. Each section should scale smoothly across breakpoints without breaking the layout.
3. 90% relative, 10% absolute
Use relative sizing (percentage-based widths, flex, auto) 90% of the time. Absolute positioning should only be used when necessary, like for overlays or specific animations.
4. Breakpoints and sections use auto fit
Sections should use auto (fit) height to adapt naturally to different screen sizes. Avoid fixed heights that can cause awkward gaps or overflow issues.
5. Viewport height
Use viewport height (VH) carefully, ensuring hero sections adapt to different screen sizes without causing layout jumps. I’d recomend around 90-100VH
6. Fill width
Use fill width for key sections so they stretch dynamically, instead of using fixed pixel values that don’t adjust well on all screens.
7. Navigation and footer to layout
Your navigation and footer should be added to a template. Use layout properties (like stacking and spacing) to stay consistent and adaptable across breakpoints.
8. Content structure
The main section of each page should adjust smoothly at each breakpoint. Breakpoint > Main > Section > Content. Make sure your hero sections and key content areas don’t break when resizing.
9. Section and content frames
Each section should contain well-structured content frames that help organize the layout. So the top and bottom padding should be set on ‘section’ frames. The left and right padding should be set on ‘content’ frames.
10. Max width
Content frames should have a max width set to prevent them from stretching too wide on larger screens.
11. Preview and resize width
Preview and resize your site manually to ensure everything adapts correctly. Test the layout and then resize width if needed.
Structure & layout
When I first started building in Framer, I used to overthink my layouts a lot. I’d throw in too many breakpoints, mess with fixed heights, and end up breaking things every time I resized the browser. Sound familiar?
This section is everything I wish someone told me earlier. It’s my go-to checklist for building clean, responsive structures that just work across every screen size. If you’re trying to make your site feel polished without overcomplicating things, start here.
1. Only Using 3 Breakpoints
Stick to three breakpoints: 1200, 810 and 390 (Desktop, Tablet, and Mobile). Too many breakpoints complicate your design, while too few make your site feel unpolished on certain devices.
2. Breakpoints and containers
Ensure your breakpoints and containers are properly structured and turned into stacks. Each section should scale smoothly across breakpoints without breaking the layout.
3. 90% relative, 10% absolute
Use relative sizing (percentage-based widths, flex, auto) 90% of the time. Absolute positioning should only be used when necessary, like for overlays or specific animations.
4. Breakpoints and sections use auto fit
Sections should use auto (fit) height to adapt naturally to different screen sizes. Avoid fixed heights that can cause awkward gaps or overflow issues.
5. Viewport height
Use viewport height (VH) carefully, ensuring hero sections adapt to different screen sizes without causing layout jumps. I’d recomend around 90-100VH
6. Fill width
Use fill width for key sections so they stretch dynamically, instead of using fixed pixel values that don’t adjust well on all screens.
7. Navigation and footer to layout
Your navigation and footer should be added to a template. Use layout properties (like stacking and spacing) to stay consistent and adaptable across breakpoints.
8. Content structure
The main section of each page should adjust smoothly at each breakpoint. Breakpoint > Main > Section > Content. Make sure your hero sections and key content areas don’t break when resizing.
9. Section and content frames
Each section should contain well-structured content frames that help organize the layout. So the top and bottom padding should be set on ‘section’ frames. The left and right padding should be set on ‘content’ frames.
10. Max width
Content frames should have a max width set to prevent them from stretching too wide on larger screens.
11. Preview and resize width
Preview and resize your site manually to ensure everything adapts correctly. Test the layout and then resize width if needed.
Structure & layout
When I first started building in Framer, I used to overthink my layouts a lot. I’d throw in too many breakpoints, mess with fixed heights, and end up breaking things every time I resized the browser. Sound familiar?
This section is everything I wish someone told me earlier. It’s my go-to checklist for building clean, responsive structures that just work across every screen size. If you’re trying to make your site feel polished without overcomplicating things, start here.
1. Only Using 3 Breakpoints
Stick to three breakpoints: 1200, 810 and 390 (Desktop, Tablet, and Mobile). Too many breakpoints complicate your design, while too few make your site feel unpolished on certain devices.
2. Breakpoints and containers
Ensure your breakpoints and containers are properly structured and turned into stacks. Each section should scale smoothly across breakpoints without breaking the layout.
3. 90% relative, 10% absolute
Use relative sizing (percentage-based widths, flex, auto) 90% of the time. Absolute positioning should only be used when necessary, like for overlays or specific animations.
4. Breakpoints and sections use auto fit
Sections should use auto (fit) height to adapt naturally to different screen sizes. Avoid fixed heights that can cause awkward gaps or overflow issues.
5. Viewport height
Use viewport height (VH) carefully, ensuring hero sections adapt to different screen sizes without causing layout jumps. I’d recomend around 90-100VH
6. Fill width
Use fill width for key sections so they stretch dynamically, instead of using fixed pixel values that don’t adjust well on all screens.
7. Navigation and footer to layout
Your navigation and footer should be added to a template. Use layout properties (like stacking and spacing) to stay consistent and adaptable across breakpoints.
8. Content structure
The main section of each page should adjust smoothly at each breakpoint. Breakpoint > Main > Section > Content. Make sure your hero sections and key content areas don’t break when resizing.
9. Section and content frames
Each section should contain well-structured content frames that help organize the layout. So the top and bottom padding should be set on ‘section’ frames. The left and right padding should be set on ‘content’ frames.
10. Max width
Content frames should have a max width set to prevent them from stretching too wide on larger screens.
11. Preview and resize width
Preview and resize your site manually to ensure everything adapts correctly. Test the layout and then resize width if needed.
Section 1 complete.
Section 1 complete.
Section 1 complete.
Typography
Good typography makes everything feel more polished, and bad typography? It ruins even the best designs. I used to ignore stuff like text width or heading tags, but once I started paying attention, my sites instantly felt more professional.
This section covers the basics I now follow on every project: how wide your text should be, how to make it scale, and how to keep things clean and accessible. It’s not just about making things look good, it’s about making them work well too.
12. Text 390px
Text blocks should have a maximum width of 390px to maintain readability, especially for long paragraphs.
13. Text width fill
For adaptive text, use Fill width so it resizes properly, rather than setting a fixed width.
14. Auto responsive text
Enable auto-responsive text to ensure font sizes scale dynamically based on screen size.
15. Headings Use H1 - H6 Tags
Use proper H1-H6 tags for headings to maintain accessibility and SEO structure.
16. Paragraphs Use "p" Tags
Paragraphs should always be wrapped in <p> tags to ensure proper text spacing and structure.
Typography
Good typography makes everything feel more polished, and bad typography? It ruins even the best designs. I used to ignore stuff like text width or heading tags, but once I started paying attention, my sites instantly felt more professional.
This section covers the basics I now follow on every project: how wide your text should be, how to make it scale, and how to keep things clean and accessible. It’s not just about making things look good, it’s about making them work well too.
12. Text 390px
Text blocks should have a maximum width of 390px to maintain readability, especially for long paragraphs.
13. Text width fill
For adaptive text, use Fill width so it resizes properly, rather than setting a fixed width.
14. Auto responsive text
Enable auto-responsive text to ensure font sizes scale dynamically based on screen size.
15. Headings Use H1 - H6 Tags
Use proper H1-H6 tags for headings to maintain accessibility and SEO structure.
16. Paragraphs Use "p" Tags
Paragraphs should always be wrapped in <p> tags to ensure proper text spacing and structure.
Typography
Good typography makes everything feel more polished, and bad typography? It ruins even the best designs. I used to ignore stuff like text width or heading tags, but once I started paying attention, my sites instantly felt more professional.
This section covers the basics I now follow on every project: how wide your text should be, how to make it scale, and how to keep things clean and accessible. It’s not just about making things look good, it’s about making them work well too.
12. Text 390px
Text blocks should have a maximum width of 390px to maintain readability, especially for long paragraphs.
13. Text width fill
For adaptive text, use Fill width so it resizes properly, rather than setting a fixed width.
14. Auto responsive text
Enable auto-responsive text to ensure font sizes scale dynamically based on screen size.
15. Headings Use H1 - H6 Tags
Use proper H1-H6 tags for headings to maintain accessibility and SEO structure.
16. Paragraphs Use "p" Tags
Paragraphs should always be wrapped in <p> tags to ensure proper text spacing and structure.
Section 2 complete.
Section 2 complete.
Section 2 complete.
Animations & interactions
Animations are where the magic happens, but only if they’re done right. I’ve definitely gone overboard before, throwing effects on everything and wondering why my site felt laggy or chaotic. The key is being intentional. This section covers the animation rules I stick to now: keep things smooth, consistent, and performance-friendly. From smart transition settings to scroll-based effects, these tips will help your site feel just as good as it looks.
17. Effects are not added to all layers
Avoid applying effects (like shadows or blurs) to all layers—use them selectively to maintain performance and visual hierarchy.
18. "None" is used on text
For text that doesn’t need special effects, set the effect type to None to avoid unnecessary rendering.
19. Transition settings on nested components
Check that nested components have transition settings that don’t conflict with each other, ensuring smooth animations.
20. Transition settings
Make sure all transition settings are optimized for ease-in-out or custom curves that feel natural. Timing and easing settings should be reused in all transitions and animations.
21. Scroll transform effects
Make sure scroll transform effects are triggered with ‘section in view’ for dynamic and precise interactions.
22. Framer.university
Refer to framer.university for resources and inspiration when working on your site.
Animations & interactions
Animations are where the magic happens, but only if they’re done right. I’ve definitely gone overboard before, throwing effects on everything and wondering why my site felt laggy or chaotic. The key is being intentional. This section covers the animation rules I stick to now: keep things smooth, consistent, and performance-friendly. From smart transition settings to scroll-based effects, these tips will help your site feel just as good as it looks.
17. Effects are not added to all layers
Avoid applying effects (like shadows or blurs) to all layers—use them selectively to maintain performance and visual hierarchy.
18. "None" is used on text
For text that doesn’t need special effects, set the effect type to None to avoid unnecessary rendering.
19. Transition settings on nested components
Check that nested components have transition settings that don’t conflict with each other, ensuring smooth animations.
20. Transition settings
Make sure all transition settings are optimized for ease-in-out or custom curves that feel natural. Timing and easing settings should be reused in all transitions and animations.
21. Scroll transform effects
Make sure scroll transform effects are triggered with ‘section in view’ for dynamic and precise interactions.
22. Framer.university
Refer to framer.university for resources and inspiration when working on your site.
Animations & interactions
Animations are where the magic happens, but only if they’re done right. I’ve definitely gone overboard before, throwing effects on everything and wondering why my site felt laggy or chaotic. The key is being intentional. This section covers the animation rules I stick to now: keep things smooth, consistent, and performance-friendly. From smart transition settings to scroll-based effects, these tips will help your site feel just as good as it looks.
17. Effects are not added to all layers
Avoid applying effects (like shadows or blurs) to all layers—use them selectively to maintain performance and visual hierarchy.
18. "None" is used on text
For text that doesn’t need special effects, set the effect type to None to avoid unnecessary rendering.
19. Transition settings on nested components
Check that nested components have transition settings that don’t conflict with each other, ensuring smooth animations.
20. Transition settings
Make sure all transition settings are optimized for ease-in-out or custom curves that feel natural. Timing and easing settings should be reused in all transitions and animations.
21. Scroll transform effects
Make sure scroll transform effects are triggered with ‘section in view’ for dynamic and precise interactions.
22. Framer.university
Refer to framer.university for resources and inspiration when working on your site.
Section 3 complete.
Section 3 complete.
Section 3 complete.
Pro tips
These are the little things that really add up. The kind of stuff that’s easy to miss when you’re focused on layout and design, but they make a huge difference in how polished, accessible, and functional your site feels.
I’ve learned most of these the hard way (like forgetting alt text or wondering why something looked blurry for no reason).
This section is full of small, smart moves that help your site perform better, feel smoother, and stand out in all the right ways.
23. Alt texts
Every image should have alt text for accessibility and SEO benefits.
24. Elements repeating
Avoid unnecessary repetition of elements. Of an element is repeated more than 3 times, it should be turned into a component
25. No blur values
Check that blur values are used intentionally and aren’t over 20px to avoid performance issues.
26. Tags
Ensure elements are correctly labeled with semantic tags for better SEO and structure. Navigations use ‘Nav’ tags, footers use ‘footer’ tags, regular elements use ‘div’ tag, links use ‘a’ tag and clicable non-link elements use ‘button’ tag.
27. Page titles and description
Set proper page titles and descriptions for SEO and social media sharing.
28. Stopper component
Use a Stopper Component to avoid layout shifts and ensure smooth scrolling experiences.
29. Override max width values
Override max width values where needed to prevent layouts from breaking on extreme screen sizes.
Pro tips
These are the little things that really add up. The kind of stuff that’s easy to miss when you’re focused on layout and design, but they make a huge difference in how polished, accessible, and functional your site feels.
I’ve learned most of these the hard way (like forgetting alt text or wondering why something looked blurry for no reason).
This section is full of small, smart moves that help your site perform better, feel smoother, and stand out in all the right ways.
23. Alt texts
Every image should have alt text for accessibility and SEO benefits.
24. Elements repeating
Avoid unnecessary repetition of elements. Of an element is repeated more than 3 times, it should be turned into a component
25. No blur values
Check that blur values are used intentionally and aren’t over 20px to avoid performance issues.
26. Tags
Ensure elements are correctly labeled with semantic tags for better SEO and structure. Navigations use ‘Nav’ tags, footers use ‘footer’ tags, regular elements use ‘div’ tag, links use ‘a’ tag and clicable non-link elements use ‘button’ tag.
27. Page titles and description
Set proper page titles and descriptions for SEO and social media sharing.
28. Stopper component
Use a Stopper Component to avoid layout shifts and ensure smooth scrolling experiences.
29. Override max width values
Override max width values where needed to prevent layouts from breaking on extreme screen sizes.
Pro tips
These are the little things that really add up. The kind of stuff that’s easy to miss when you’re focused on layout and design, but they make a huge difference in how polished, accessible, and functional your site feels.
I’ve learned most of these the hard way (like forgetting alt text or wondering why something looked blurry for no reason).
This section is full of small, smart moves that help your site perform better, feel smoother, and stand out in all the right ways.
23. Alt texts
Every image should have alt text for accessibility and SEO benefits.
24. Elements repeating
Avoid unnecessary repetition of elements. Of an element is repeated more than 3 times, it should be turned into a component
25. No blur values
Check that blur values are used intentionally and aren’t over 20px to avoid performance issues.
26. Tags
Ensure elements are correctly labeled with semantic tags for better SEO and structure. Navigations use ‘Nav’ tags, footers use ‘footer’ tags, regular elements use ‘div’ tag, links use ‘a’ tag and clicable non-link elements use ‘button’ tag.
27. Page titles and description
Set proper page titles and descriptions for SEO and social media sharing.
28. Stopper component
Use a Stopper Component to avoid layout shifts and ensure smooth scrolling experiences.
29. Override max width values
Override max width values where needed to prevent layouts from breaking on extreme screen sizes.
Section 4 complete.
Section 4 complete.
Section 4 complete.
Final thoughts
This checklist ensures your Framer website is responsive, well-structured, and optimized for both performance and usability. Follow these 29 points, and you’ll have a solid foundation for a top-tier website.
Need more in-depth explanations on these points? Check out my tutorial on the ultimate checklist for Framer.
Final thoughts
This checklist ensures your Framer website is responsive, well-structured, and optimized for both performance and usability. Follow these 29 points, and you’ll have a solid foundation for a top-tier website.
Need more in-depth explanations on these points? Check out my tutorial on the ultimate checklist for Framer.
Final thoughts
This checklist ensures your Framer website is responsive, well-structured, and optimized for both performance and usability. Follow these 29 points, and you’ll have a solid foundation for a top-tier website.
Need more in-depth explanations on these points? Check out my tutorial on the ultimate checklist for Framer.
