☑️
Project Checklist
📁General
Only use 3 breakpoints: 1200, 810, and 390
Limit breakpoints to ensure consistency across devices.
Breakpoint and container width are turned into stacks
Use stacks for better layout management.
90% relative positioning elements, 10% absolute positioning elements
Prefer relative positioning for flexibility.
Breakpoints and most sections use auto (fit) height
Allow sections to grow with new content.
Viewport height (vh) based min height is added to hero sections
Ensure hero sections scale appropriately.
Most frames use fill width so they adopt to screen width changes
Frames should adapt to screen size dynamically.
📐Structure & Layout
Add your navigation and footer into a layout template
Create reusable templates for navigation and footer.
Recommended: 90-100vh
Set viewport height for optimal layout.
Breakpoint > main > section > content structure is used
Follow a hierarchical layout structure.
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
Limit content width for better readability.
Layout is tested by previewing and resizing width
Verify layout responsiveness.
🔤Typography
Using auto responsive text by creating text styles and breakpoints on them
Apply responsive text styles.
Text wider than 390px uses fill width
Ensure text adapts to smaller devices.
If text is set to width fill, all of its parents are set to auto (fit) height
Maintain proper height scaling.
Headings use 'H1-H6' tags
Use semantic HTML for accessibility.
Paragraphs use 'P' tag
Ensure proper paragraph tagging.
🎨Colors
Using Color Styles to save your web colors
Create and reuse color styles for consistency.
Ensure sufficient contrast between text and background
Maintain accessibility standards.
🖥️Components
Remove unused components
Go to the Assets library and search for your components, touch the three dots '...' and select 'Find' to see if the if is it ever used.
Ensure Components have a responsive variant
Make sure to adapt to different screens.
💥Animations
Effects are not added to all layers
Use animations sparingly for performance.
User select 'none' is used on text within interactive elements
Prevent text selection on interactive areas.
Transition settings are matched on nested components
Ensure consistent animation behavior.
Interactions and animations are consistent
Reuse a set of timing and easing settings.
Scroll transform effects are triggered with 'section in view' trigger
Use precise control of timing.
💰Framer Plans
Select appropriate plan based on project needs
Choose between free, pro, or team plans.
See which plan is right for you⚙️Settings & Domain
Connect your custom domain
Set DNS records on your domain provider to connect the URL.
Page titles and descriptions are set
These are the values that users on google search will see.
Set social preview images
This image will appear when you share your website link.
🔍SEO
Give your elements a tag [Accessibility > tag in the style panel]
Improve accessibility with proper tagging.
Alt texts are set on all images
Improve accessibility and SEO.
Use code snippets in settings for Google Analytics
Integrate tracking codes.
Set meta titles, descriptions, social preview image
Optimize for search engines.
Add favicon and apple touch icon
Enhance branding and mobile experience.
🔌Plugins
Run the 'Spellchecker' Plugin
Spell Checker auto-detects language and corrects spelling in real-time! Supports English, Spanish, and Portuguese, so you can focus on what you do best, designing and creating.
Plugin LinkRun the 'Renamer' Plugin
Quickly rename layers, clean up messy names, and easily navigate to any layer in your project.
Plugin LinkRun the 'Tidy Up' Plugin
Arrange pages, breakpoints, and frames with one click. Choose from horizontal, vertical, or grid layouts, and customize frame spacing.
Plugin LinkRun the 'Link Checker' Plugin
Link Checker helps you find and fix broken links in your Framer projects effortlessly. Get detailed reports, detect errors like 404s, HTTPS issues, and unreachable links, and manage them with ease.
Plugin Link✅Pro Tips
Elements repeating more than 3x are turned into components
Enhance maintainability.
No blur values over 20px are used
Avoid performance issues.
Clickable but non-link elements use 'button' tag
Regular elements use 'div' tag, links use 'a' tag.
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
Use 1000px on desktop, 700px on tablet, 400px on phone.