Supplemental Template Checklist
Only top-quality templates stand out on Framer's marketplace. Use this checklist to make sure yours meets the bar.
Purpose of this checklist
This checklist is compliment to Framer's template best practices.
Haven't seen the best practices yet? Go check them out. Come back here when you're done.
So what's this?
It's the nitty gritty stuff that's too general for best practice guidance.
But stuff that, if overlooked, will come back to bite you in support emails or lost sales.
Sad users short term = poor template performance long term.
So spend some time catching these gotchas before launching your next template.
Let's raise the quality bar together.
James Hicks
PS. If you want to add something, reach out to me on X/ Twitter. I'll add it in.
Thanks to these creators who contributed already: @SanndyCreationz, @ehsanshares, @bysharwil
Design
Double-check all text styles are linked to color styles.
Double-check no stray colors applied that aren’t color styles (especially in components).
Double-check all text layers use text styles.
Be intentional and consistent with design choices (e.g. corner radius)
Text
Make sure max-width (c. 600px) is set on body text where necessary (e.g. FAQ answers is an easy miss)
Use "balance" property on text where this is risk of single (orphan) words on a line.
Be consistent with Header punctuation.
Links
Menu items and controls need at least 40x40px touch area.
Mobile menu items and logo should automatically close the menu when clicked.
Internal links should always scroll to the top of the destination page using a scroll section.
The 404 page should have a button to go back to the homepage.
CMS
Set required fields in CMS collections.
Remove unnecessary “Limit to” settings in collection lists.
Add visibility settings to CMS pages and lists to allow for missing information.
Effects
If a hover interaction isn't clickable, reconsider whether it's needed. If you keep it, remove the cursor pointer so it's not misleading.
If a card links to somewhere, make sure the whole card is clickable.
Don't change font-weight or size in hover states, it causes layout shift (i.e. glitchy jittering)
Assets
Use visuals that are relevant to the context of the section.
The play button should start a video directly, not open a pop-up or link.
Ensure component variables (images, text, links) are exposed for easy editing.
Brand logo should be a component for easy editing
Check if there are any unused/outdated components, text, color and link styles under the “Assets” panel. Remove unused components/styles by right clicking and then "Find". If they are not used, delete them. Update them where required.
Tags
Double-check all major sections have <section> tags.
Double-check any text layers where styling is different to the intended tag (e.g. <p> tag on FAQ questions even though it might use h3).
Accessibility
Double-check text over images has sufficient contrast.
Double-check form inputs and buttons have sufficient color contrast.
Double-check any text layers where styling is different to the intended tag (e.g. <p> tag on FAQ questions even though it might use h3).
Make sure smallest fonts (e.g. inputs, indexes) have sufficient size on mobile.
Forms
Set required attributes on form fields.
Make sure form is set up with placeholder “Send To”.
Make sure forms include proper error and incomplete states.
Make sure form submit button has sufficient height on all breakpoints.
Marketplace
Remove elements that aren’t related to the template. e.g. “Buy template” buttons.
Don't get so excited to submit you forget to set custom site description, favicon, and social preview under site settings.
Thanks for stopping by and well done if you got this far!
For more on winning at Framer templates…