Template best practices

Learn how to create high-quality templates that buyers can trust and enjoy using.

Great templates are polished, easy to customize, and ready to use in real projects. Use this checklist as a reference when creating, publishing, and maintaining templates in the Framer Community.

Originality

A strong template solves a clear problem and provides a unique starting point for buyers.

  • The template is built around a clear audience or use case.

  • Layouts, flows, and visual design feel original and differentiated.

  • Existing templates have not been reused or lightly modified.

  • The template provides meaningful value beyond native Framer features.

Design

Consistent design helps buyers understand and trust a template.

  • Styling is consistent across all pages.

  • Visual hierarchy is clear and easy to scan.

  • Colors, typography, and spacing feel cohesive.

  • Shared text and color styles are used throughout the template.

  • A custom 404 page is included.

  • Visual assets are polished and high quality.

Layout

Well-structured layouts make templates easier to navigate and customize.

  • Pages have a clear purpose and hierarchy.

  • Layout templates are used where appropriate.

  • Stacks, grids, and auto-height layouts support flexibility.

  • Horizontal scrolling issues are avoided.

  • Layouts remain organized as content changes.

Text

Thoughtful copy improves clarity and creates a more professional experience.

  • Text is legible and aligned with the overall design.

  • Spelling and grammar have been reviewed.

  • Framer fonts are used where appropriate.

  • Text is balanced to avoid awkward line breaks and orphans.

  • Placeholder and lorem ipsum content has been removed.

Responsive

Templates should feel at home on every screen size.

  • Layouts adapt cleanly across mobile, tablet, and desktop breakpoints.

  • Fixed sizes that break responsiveness are avoided.

  • Components adapt gracefully to screen changes.

  • Content remains readable and usable on smaller screens.

Clear and reliable links create a better browsing experience.

  • Expected email and phone actions use mailto: and tel: links.

  • Interactive elements are visually recognizable as clickable.

  • Hover and active states are clearly defined.

  • Broken or inactive links have been removed.

CMS

The CMS helps buyers manage and update content more efficiently.

  • Repeatable content is managed through the CMS where appropriate.

  • CMS fields are connected clearly to pages and components.

  • Empty and unused CMS entries have been removed.

  • CMS collections and fields use clear naming.

Code

Custom code should add value without adding unnecessary complexity.

  • Custom code is clean, minimal, and easy to understand.

  • Native Framer features are used when appropriate.

  • Embeds are only used when necessary.

  • Custom code is maintained and compatible with current Framer features.

Effects

Motion should support the experience rather than distract from it.

  • Motion is used purposefully to guide attention.

  • Excessive or overly complex animations are avoided.

  • Performance remains a consideration when adding effects.

  • Animations feel smooth and intentional.

Assets

Organized assets make templates easier to maintain and customize.

  • Assets are grouped into clearly named folders.

  • External components are up to date.

  • Duplicate assets have been removed.

  • File names are descriptive and easy to understand.

Tags

Clear metadata helps improve discoverability and accessibility.

  • Semantic tags are used where appropriate.

  • Headings and paragraphs follow a logical structure.

  • Images include meaningful alt text.

  • Content is organized in a way that supports search and accessibility.

Accessibility

Accessible templates work better for more people.

  • Each page includes a title and description in site settings.

  • Color contrast supports readability.

  • Standard accessibility practices have been followed.

  • Form fields are clearly labeled.

Performance

Fast templates create a better experience for buyers and visitors.

  • Framer's performance checks have been reviewed.

  • Images and media are optimized for the web.

  • Large, uncompressed assets are avoided.

  • Motion and effects do not negatively impact page performance.

Templates should only include content that can be legally distributed.

  • Assets are original or properly licensed.

  • Permission has been obtained for any client work included in the template.

  • Copyright and licensing requirements are respected.

Community

Clear listings help buyers understand exactly what they are purchasing.

  • Preview images accurately represent the template.

  • Relevant categories have been selected.

  • The description clearly explains the template's value.

  • Unique features and use cases are highlighted.

  • Setup requirements and limitations are clearly communicated.

Support

Reliable support helps buyers get the most from their purchase.

  • Available support options are clearly explained.

  • Questions and support requests receive timely responses.

  • Refund terms are clearly communicated.

  • Buyer-facing templates are maintained and updated.

  • Advertisements and unrelated promotions have been removed.

Great templates are polished, easy to customize, and ready to use in real projects. Use this checklist as a reference when creating, publishing, and maintaining templates in the Framer Community.

Originality

A strong template solves a clear problem and provides a unique starting point for buyers.

  • The template is built around a clear audience or use case.

  • Layouts, flows, and visual design feel original and differentiated.

  • Existing templates have not been reused or lightly modified.

  • The template provides meaningful value beyond native Framer features.

Design

Consistent design helps buyers understand and trust a template.

  • Styling is consistent across all pages.

  • Visual hierarchy is clear and easy to scan.

  • Colors, typography, and spacing feel cohesive.

  • Shared text and color styles are used throughout the template.

  • A custom 404 page is included.

  • Visual assets are polished and high quality.

Layout

Well-structured layouts make templates easier to navigate and customize.

  • Pages have a clear purpose and hierarchy.

  • Layout templates are used where appropriate.

  • Stacks, grids, and auto-height layouts support flexibility.

  • Horizontal scrolling issues are avoided.

  • Layouts remain organized as content changes.

Text

Thoughtful copy improves clarity and creates a more professional experience.

  • Text is legible and aligned with the overall design.

  • Spelling and grammar have been reviewed.

  • Framer fonts are used where appropriate.

  • Text is balanced to avoid awkward line breaks and orphans.

  • Placeholder and lorem ipsum content has been removed.

Responsive

Templates should feel at home on every screen size.

  • Layouts adapt cleanly across mobile, tablet, and desktop breakpoints.

  • Fixed sizes that break responsiveness are avoided.

  • Components adapt gracefully to screen changes.

  • Content remains readable and usable on smaller screens.

Clear and reliable links create a better browsing experience.

  • Expected email and phone actions use mailto: and tel: links.

  • Interactive elements are visually recognizable as clickable.

  • Hover and active states are clearly defined.

  • Broken or inactive links have been removed.

CMS

The CMS helps buyers manage and update content more efficiently.

  • Repeatable content is managed through the CMS where appropriate.

  • CMS fields are connected clearly to pages and components.

  • Empty and unused CMS entries have been removed.

  • CMS collections and fields use clear naming.

Code

Custom code should add value without adding unnecessary complexity.

  • Custom code is clean, minimal, and easy to understand.

  • Native Framer features are used when appropriate.

  • Embeds are only used when necessary.

  • Custom code is maintained and compatible with current Framer features.

Effects

Motion should support the experience rather than distract from it.

  • Motion is used purposefully to guide attention.

  • Excessive or overly complex animations are avoided.

  • Performance remains a consideration when adding effects.

  • Animations feel smooth and intentional.

Assets

Organized assets make templates easier to maintain and customize.

  • Assets are grouped into clearly named folders.

  • External components are up to date.

  • Duplicate assets have been removed.

  • File names are descriptive and easy to understand.

Tags

Clear metadata helps improve discoverability and accessibility.

  • Semantic tags are used where appropriate.

  • Headings and paragraphs follow a logical structure.

  • Images include meaningful alt text.

  • Content is organized in a way that supports search and accessibility.

Accessibility

Accessible templates work better for more people.

  • Each page includes a title and description in site settings.

  • Color contrast supports readability.

  • Standard accessibility practices have been followed.

  • Form fields are clearly labeled.

Performance

Fast templates create a better experience for buyers and visitors.

  • Framer's performance checks have been reviewed.

  • Images and media are optimized for the web.

  • Large, uncompressed assets are avoided.

  • Motion and effects do not negatively impact page performance.

Templates should only include content that can be legally distributed.

  • Assets are original or properly licensed.

  • Permission has been obtained for any client work included in the template.

  • Copyright and licensing requirements are respected.

Community

Clear listings help buyers understand exactly what they are purchasing.

  • Preview images accurately represent the template.

  • Relevant categories have been selected.

  • The description clearly explains the template's value.

  • Unique features and use cases are highlighted.

  • Setup requirements and limitations are clearly communicated.

Support

Reliable support helps buyers get the most from their purchase.

  • Available support options are clearly explained.

  • Questions and support requests receive timely responses.

  • Refund terms are clearly communicated.

  • Buyer-facing templates are maintained and updated.

  • Advertisements and unrelated promotions have been removed.

FAQ

  • Are these best practices required?

    No. These recommendations are intended to help creators build higher-quality templates and provide a better experience for buyers. Apply the guidance that makes sense for your template and workflow.

  • What should I do before publishing my template?

    Review the checklist above and address any items relevant to your template. Clear presentation, responsive layouts, useful content, and accurate marketplace assets can help create a better experience for buyers.

  • Will Framer review my template?

    No. Templates can be published without manual review. You are responsible for ensuring that your template is accurate, usable, and ready for buyers.

  • Why should I follow these recommendations?

    Templates that are polished, reliable, and easy to customize are easier for buyers to trust. Following these best practices can improve discoverability, reduce support requests, and help your template reach more buyers.

Updated