Supplemental Template Checklist
Check these gotchas before you submit your Framer template
Purpose of this checklist
This checklist is designed to be a compliment to—not a replacement for—Framer's official template requirements.
Make sure you use Framer's template requirements first and go through it thoroughly.
This is a compilation of feedback I've received when submitting my own Framer templates, plus feedback I've seen from others on X or elsewhere.
Some items are already in Framer's template requirements but are easy to overlook (so worth double-checking).
Other items are too specific for the template requirements, but will catch you out if you don't think to check them.
I hope you find it useful.
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 have contributed feedback 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 have 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.
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.
Logo should be a component.
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. Even “buy template” buttons are not allowed.
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…