Great components are easy to understand, simple to customize, and ready to use in real projects. Use this checklist as a reference when building, publishing, and maintaining components for the Framer Community.

Originality

A strong component solves a clear problem and offers something meaningfully different.

• The component solves a clear problem or use case.

• The component offers original functionality or design.

• Existing components have not been reused or lightly modified.

• Native Framer features are not recreated unnecessarily.

• The component remains focused and easy to understand.

Structure

Well-structured components are easy to customize and work with.

• Properties are available for content and settings users are likely to customize.

• Text, images, icons, and other editable content are easy to update.

• The component has a sensible default size on the canvas.

• Complex properties include helpful descriptions.

• Property controls are organized in a logical order.

• Component names, layers, variants, and variables are clearly labeled.

Design

Polished design helps buyers understand and trust your component.

• Colors, typography, and spacing are consistent.

• The component is visually polished and production-ready.

• Styling remains flexible enough for different brands and use cases.

• Interactive components include appropriate states and variants.

• Visual details feel intentional and consistent throughout the experience.

Responsiveness

Components should feel at home on every screen size.

• The component works well across mobile, tablet, and desktop layouts.

• Breakpoint variants are included where necessary.

• Stacks and layout tools are used to create flexible layouts.

• Spacing and alignment remain consistent across screen sizes.

• Horizontal scrolling and layout issues are avoided.

Performance

Fast and efficient components create a better experience for buyers.

• The component performs well on both desktop and mobile devices.

• Interactions feel responsive and predictable.

• Unused assets, layers, and elements have been removed.

• Animations avoid unnecessary layout shifts.

• The component does not negatively impact page performance or optimization.

Code

Custom code should add value without adding unnecessary complexity.

• Custom code adds meaningful value to the component.

• Logic is concise, readable, and maintainable.

• Code is efficient and free of errors.

• Deprecated APIs and insecure patterns are avoided.

• Native Framer features are used when appropriate.

Community

Clear listings help buyers understand exactly what they’re getting.

• The listing accurately represents the component.

• The description clearly explains what the component does.

• Unique features and use cases are clearly highlighted.

• The live preview remains focused on the component itself.

• Only one visible component instance is shown in the preview when possible.

• Branding, advertisements, and unrelated content are avoided.

Thumbnails

Strong thumbnails communicate value at a glance.

• The thumbnail clearly shows the component.

• A single component instance is the primary focus.

• The visual is simple, focused, and easy to understand.

• Unnecessary text and decorative elements are avoided.

• Assets are sharp and high quality.

• The thumbnail accurately represents the component experience.

Support

Reliable support helps buyers get the most from their purchase.

• The creator name and workspace information are clear and consistent.

• Buyers receive access to the component as expected after purchase.

• The component is maintained and updated as Framer evolves.

• Refund terms are clearly communicated.

• Questions and support requests receive timely responses.