The Ultimate Framer Template Checklist
The Ultimate Framer Template Checklist
The Ultimate Framer Template Checklist
Designing for the Framer Marketplace isn’t just about good visuals, your template should be clean, accessible, customizable, and high-performing. This checklist ensures you meet best practices across design, interactivity, performance, SEO, and project setup before submitting your work.
Designing for the Framer Marketplace isn’t just about good visuals, your template should be clean, accessible, customizable, and high-performing. This checklist ensures you meet best practices across design, interactivity, performance, SEO, and project setup before submitting your work.
Core Setup
Core Setup
Use component variables so template users can customize easily without digging into layers.
Use component variables so template users can customize easily without digging into layers.
Use component variables so template users can customize easily without digging into layers.
Apply accessibility tags like aria-labels and semantic tags for better screen reader and SEO support.
Apply accessibility tags like aria-labels and semantic tags for better screen reader and SEO support.
Apply accessibility tags like aria-labels and semantic tags for better screen reader and SEO support.
Keep layer names and structure clear to make the file easy to navigate.
Keep layer names and structure clear to make the file easy to navigate.
Keep layer names and structure clear to make the file easy to navigate.
Manage responsiveness smartly with at least three breakpoints (desktop, tablet, mobile).
Manage responsiveness smartly with at least three breakpoints (desktop, tablet, mobile).
Manage responsiveness smartly with at least three breakpoints (desktop, tablet, mobile).
Clean up and organize your text, color, and effect styles, deleting unused ones.
Clean up and organize your text, color, and effect styles, deleting unused ones.
Clean up and organize your text, color, and effect styles, deleting unused ones.
Fill in all project settings including language, favicon, meta images, and site info.
Fill in all project settings including language, favicon, meta images, and site info.
Fill in all project settings including language, favicon, meta images, and site info.
Visuals
Visuals
Avoid using more than 10 blur effects since they slow down performance.
Avoid using more than 10 blur effects since they slow down performance.
Avoid using more than 10 blur effects since they slow down performance.
Disable pointer events on static elements to avoid confusing cursor changes.
Disable pointer events on static elements to avoid confusing cursor changes.
Disable pointer events on static elements to avoid confusing cursor changes.
Use Framer’s native theming system to enable light and dark mode.
Use Framer’s native theming system to enable light and dark mode.
Use Framer’s native theming system to enable light and dark mode.
Keep font weights consistent across states and avoid sudden jumps.
Keep font weights consistent across states and avoid sudden jumps.
Keep font weights consistent across states and avoid sudden jumps.
Stick to font weights between 400–800 for readability and contrast.
Stick to font weights between 400–800 for readability and contrast.
Stick to font weights between 400–800 for readability and contrast.
Interactivity
Interactivity
Add hover and pressed states for all interactive elements like buttons and links.
Add hover and pressed states for all interactive elements like buttons and links.
Add hover and pressed states for all interactive elements like buttons and links.
Use subtle animations for hover or click micro-interactions to add polish.
Use subtle animations for hover or click micro-interactions to add polish.
Use subtle animations for hover or click micro-interactions to add polish.
Disable hover states on mobile devices to prevent unwanted behavior.
Disable hover states on mobile devices to prevent unwanted behavior.
Disable hover states on mobile devices to prevent unwanted behavior.
Performance
Performance
Upload all images at 2x resolution for retina displays.
Upload all images at 2x resolution for retina displays.
Upload all images at 2x resolution for retina displays.
Use SVGs for icons and vector graphics to keep them sharp and lightweight.
Use SVGs for icons and vector graphics to keep them sharp and lightweight.
Use SVGs for icons and vector graphics to keep them sharp and lightweight.
Run a Lighthouse test and aim for a performance score of at least 90.
Run a Lighthouse test and aim for a performance score of at least 90.
Run a Lighthouse test and aim for a performance score of at least 90.
SEO
SEO
Add unique SEO titles and descriptions to every page.
Add unique SEO titles and descriptions to every page.
Add unique SEO titles and descriptions to every page.
Use proper semantic HTML tags like h1, h2, section, and nav for structure.
Use proper semantic HTML tags like h1, h2, section, and nav for structure.
Use proper semantic HTML tags like h1, h2, section, and nav for structure.
Pages
Pages
Include a custom 404 page to handle broken links.
Include a custom 404 page to handle broken links.
Include a custom 404 page to handle broken links.
Layers & Structure
Layers & Structure
Use auto height instead of fixed heights on sections and components.
Use auto height instead of fixed heights on sections and components.
Use auto height instead of fixed heights on sections and components.
Avoid fixed widths in layouts and use 1fr with max-width for flexibility.
Avoid fixed widths in layouts and use 1fr with max-width for flexibility.
Avoid fixed widths in layouts and use 1fr with max-width for flexibility.
Ensure CTA buttons have working links.
Ensure CTA buttons have working links.
Ensure CTA buttons have working links.
Delete any unused elements left in the file.
Delete any unused elements left in the file.
Delete any unused elements left in the file.
Use text styles for easy global customization.
Use text styles for easy global customization.
Use text styles for easy global customization.
Wrap each section with the section tag for accessibility and clarity.
Wrap each section with the section tag for accessibility and clarity.
Wrap each section with the section tag for accessibility and clarity.
Don’t convert entire sections into components, only reusable parts inside them.
Don’t convert entire sections into components, only reusable parts inside them.
Don’t convert entire sections into components, only reusable parts inside them.
Make sure the logo links back to the homepage.
Make sure the logo links back to the homepage.
Make sure the logo links back to the homepage.
Add working links inside hamburger menus.
Add working links inside hamburger menus.
Add working links inside hamburger menus.
Extend background graphics to full width by setting absolute position to 0.
Extend background graphics to full width by setting absolute position to 0.
Extend background graphics to full width by setting absolute position to 0.
Create variables that allow customization on desktop without opening components.
Create variables that allow customization on desktop without opening components.
Create variables that allow customization on desktop without opening components.
Remove unused layers to keep the file clean.
Remove unused layers to keep the file clean.
Remove unused layers to keep the file clean.
Keep consistent vertical spacing between sections.
Keep consistent vertical spacing between sections.
Keep consistent vertical spacing between sections.
Assets & Components
Assets & Components
Delete unused components from the assets panel.
Delete unused components from the assets panel.
Delete unused components from the assets panel.
Remove unused fonts to reduce file size.
Remove unused fonts to reduce file size.
Remove unused fonts to reduce file size.
Delete leftover or unused code files.
Delete leftover or unused code files.
Delete leftover or unused code files.
Delete any unused elements left in the file.
Delete any unused elements left in the file.
Delete any unused elements left in the file.
Click “update” to sync elements with styles where needed.
Click “update” to sync elements with styles where needed.
Click “update” to sync elements with styles where needed.
Site Settings
Site Settings
Set the site language in project settings.
Set the site language in project settings.
Set the site language in project settings.
Add a custom domain if applicable.
Add a custom domain if applicable.
Add a custom domain if applicable.
Add page titles, slugs, descriptions, and preview images to each page.
Add page titles, slugs, descriptions, and preview images to each page.
Add page titles, slugs, descriptions, and preview images to each page.
If you’ve checked everything off this list, your Framer template is clean, optimized, and Marketplace-ready. Submitting with this level of polish not only speeds up approval but also makes your template more valuable to buyers.
Take a moment to run through your file one last time, then hit publish with confidence.
If you’ve checked everything off this list, your Framer template is clean, optimized, and Marketplace-ready. Submitting with this level of polish not only speeds up approval but also makes your template more valuable to buyers.
Take a moment to run through your file one last time, then hit publish with confidence.
