☑️
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.
Estructura y Diseño
No items available for this section.
Tipografía
No items available for this section.
Colores
No items available for this section.
Componentes
No items available for this section.
Animaciones
No items available for this section.
Planes de Framer
No items available for this section.
Configuraciones y Dominio
No items available for this section.
🔍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.