Instead of rebuilding the same button, card, navigation menu, or section multiple times, you can create a component once and reuse it wherever needed. This improves consistency, speeds up development, and makes website maintenance significantly easier.

This guide explains how to create components, manage them effectively, and build a scalable component system for your projects.

Before You Create a Component

Before converting something into a component, ask yourself:

• Will this element be reused?

• Will it appear on multiple pages?

• Will I need to update it later?

• Should it remain visually consistent across the website?

If the answer is yes, creating a component is usually the right choice.

Good component candidates include:

• Buttons

• Navigation menus

• Cards

• Forms

• Testimonials

• Pricing tables

• Call-to-action sections

• FAQ items

• CMS cards

Step 1: Design the Element

Start by building the element exactly as you want it to appear.

This can be something simple, such as:

• A button

• A card

• A form field

Or something more advanced, such as:

• A navigation menu

• A pricing section

• A testimonial carousel

• A complete hero section

For example, a button component might contain:

Button Frame├── Button Text└── Icon

Button Frame├── Button Text└── Icon

Button Frame├── Button Text└── Icon

A card component might contain:

Card Frame├── Image├── Title├── Description└── CTA Button

Card Frame├── Image├── Title├── Description└── CTA Button

Card Frame├── Image├── Title├── Description└── CTA Button

The better your initial structure, the more useful your component will be later.

Step 2: Organize Your Layers

Before creating a component, clean up the layer structure.

Make sure:

• Layers are named properly

• Unnecessary elements are removed

• The hierarchy is organized

• Auto Layout is configured correctly

For example:

Bad structure:

Frame 1├── Text 4├── Frame 6└── Rectangle 2

Frame 1├── Text 4├── Frame 6└── Rectangle 2

Frame 1├── Text 4├── Frame 6└── Rectangle 2

Better structure:

Pricing Card├── Plan Name├── Plan Features├── Price└── CTA Button

Pricing Card├── Plan Name├── Plan Features├── Price└── CTA Button

Pricing Card├── Plan Name├── Plan Features├── Price└── CTA Button

Organized layers make components easier to maintain.

Step 3: Select All Relevant Layers

Select every layer that should belong to the component.

For example:

A testimonial card may include:

• Profile image

• Customer name

• Company name

• Testimonial text

• Rating icons

Everything that should remain together should be included.

Step 4: Create the Component

After selecting the layers:

1. Right-click the selection

2. Choose Create Component

3. Framer converts the selected layers into a reusable component

Once created, the component becomes available for reuse throughout the project.

Understanding What Happens Next

When a component is created, Framer generates:

• One main component

• Unlimited reusable instances

The main component becomes the source of truth.

Every instance remains connected to that source.

Main Component vs Instance

Understanding this relationship is essential.

Main Component

The main component is the original version.

All future updates originate from here.

Example:

Primary Button (Main Component)

Primary Button (Main Component)

Primary Button (Main Component)

Changes made here affect every connected instance.

Instance

Instances are copies of the component placed throughout the website.

Example:

Primary Button├── Homepage Button├── Pricing Page Button├── Contact Page Button└── Footer Button

Primary Button├── Homepage Button├── Pricing Page Button├── Contact Page Button└── Footer Button

Primary Button├── Homepage Button├── Pricing Page Button├── Contact Page Button└── Footer Button

All instances inherit updates automatically.

Using Component Instances

After creating a component, you can reuse it anywhere.

Common locations include:

• Landing pages

• CMS templates

• Navigation systems

• Marketing pages

• Product pages

Instead of recreating elements, simply insert a new instance.

Why Reuse Matters

Imagine a website with:

• 30 pages

• 15 buttons per page

Without components:

You may need to edit hundreds of buttons manually.

With components:

One update changes every button instantly.

This is one of the biggest productivity advantages of Framer.

Editing Components

Once a component exists, future changes should typically be made to the main component.

Examples:

• Updating colors

• Changing typography

• Adjusting spacing

• Modifying animations

• Improving responsiveness

Changes automatically sync to connected instances.

What Updates Automatically?

Updates typically include:

• Colors

• Layout structure

• Typography

• Spacing

• Borders

• Shadows

• Animations

This ensures consistency across the website.

Understanding Instance Overrides

Sometimes individual instances need unique content.

This is where overrides become useful.

Overrides allow instances to change certain properties without breaking their connection to the main component.

Common Instance Overrides

Examples include:

• Text content

• Images

• Icons

• Links

• CMS data

• Variant selection

For example:

Team Member Card├── Instance 1 → Sarah├── Instance 2 → John├── Instance 3 → Alex

Team Member Card├── Instance 1 → Sarah├── Instance 2 → John├── Instance 3 → Alex

Team Member Card├── Instance 1 → Sarah├── Instance 2 → John├── Instance 3 → Alex

All cards share the same layout but display different content.

When to Use Overrides

Overrides are ideal when:

• Structure remains consistent

• Content changes between instances

Examples:

• Team members

• Testimonials

• Blog cards

• Product cards

Organizing Components

As projects grow, component management becomes increasingly important.

A project with:

• 5 components

requires little organization.

A project with:

• 100+ components

requires a structured system.

Create Component Categories

Common categories include:

Components├── Buttons├── Forms├── Navigation├── Cards├── Marketing├── CMS└── Layouts

Components├── Buttons├── Forms├── Navigation├── Cards├── Marketing├── CMS└── Layouts

Components├── Buttons├── Forms├── Navigation├── Cards├── Marketing├── CMS└── Layouts

Folders make large projects easier to manage.

Naming Components Properly

One of the biggest mistakes beginners make is using unclear names.

Bad examples:

• Component 1

• Button Copy

• Frame 8

• New Card

Good examples:

• Primary Button

• Secondary Button

• Testimonial Card

• Footer Navigation

• Pricing Plan Card

Names should describe purpose, not appearance.

Naming Components at Scale

As websites grow, naming becomes even more important.

Example:

Buttons├── Primary Button├── Secondary Button├── Ghost Button└── CTA Button

Buttons├── Primary Button├── Secondary Button├── Ghost Button└── CTA Button

Buttons├── Primary Button├── Secondary Button├── Ghost Button└── CTA Button

This structure makes components easier to locate and maintain.

Using Nested Components

Components can contain other components.

This is called nesting.

Example:

Navigation Component├── Logo Component├── Menu Item Component├── CTA Button Component└── Mobile Menu Component

Navigation Component├── Logo Component├── Menu Item Component├── CTA Button Component└── Mobile Menu Component

Navigation Component├── Logo Component├── Menu Item Component├── CTA Button Component└── Mobile Menu Component

Nested components allow complex systems to remain organized.

Benefits of Nested Components

Nested systems improve:

• Reusability

• Consistency

• Scalability

• Maintenance

A change to a nested button component can update multiple larger components automatically.

Responsive Components

Every component should be tested across breakpoints.

Components that work perfectly on desktop may fail on mobile.

Always test:

• Desktop

• Tablet

• Mobile

before publishing.

Responsive Component Checklist

Verify:

• Text wraps properly

• Images resize correctly

• Buttons remain clickable

• Spacing remains consistent

• Layouts do not break

Responsive issues often become harder to fix later.

Components and Auto Layout

Most modern Framer components use Auto Layout.

Benefits include:

• Automatic spacing

• Better responsiveness

• Easier content management

• More predictable behavior

Auto Layout significantly improves component flexibility.

Components and Variants

Many components contain multiple states.

Examples:

• Default button

• Hover button

• Active button

• Disabled button

These states are usually managed using variants.

Variants allow a single component to support multiple appearances and interactions.

Components and CMS

Components work extremely well with CMS content.

Examples include:

• Blog cards

• Team member cards

• Resource listings

• Portfolio items

Using components ensures all CMS items remain visually consistent.

Common Beginner Mistakes

Creating Components Too Late

Many designers wait until a project is nearly finished before creating components.

This often results in:

• Duplicate layouts

• Extra work

• Inconsistencies

Build reusable systems early.

Creating Components for Everything

Not every layer needs to become a component.

Examples that usually don’t require components:

• Decorative graphics

• One-off illustrations

• Unique layouts used only once

Focus on reusable elements.

Ignoring Naming Conventions

Poor naming creates confusion as projects grow.

Always use descriptive names.

Overly Complex Components

Some designers build components with:

• Excessive nesting

• Too many variants

• Unnecessary complexity

Keep systems as simple as possible.

Ignoring Mobile Testing

A component that looks perfect on desktop may fail on mobile.

Always test responsiveness before publishing.

Advanced Component Ideas

Once you’re comfortable with basic components, consider building:

Interactive Buttons

Buttons with hover states and animations.

Testimonial Cards

Reusable customer review layouts.

CMS Content Cards

Dynamic cards connected to collections.

Navigation Systems

Reusable menus used across the entire website.

Pricing Components

Cards with variants for different plans.

Reusable Forms

Contact forms and lead generation forms used throughout the site.

Feature Blocks

Marketing sections that can be dropped into any page.

Best Practices

Build Components Early

Create reusable systems from the start.

Keep Components Flexible

Design components that work in multiple situations.

Use Consistent Naming

Clear naming reduces confusion.

Test Responsiveness Frequently

Review every component on mobile devices.

Organize Components Into Folders

Good organization improves long-term maintainability.

Use Components With Variants

Variants make components significantly more powerful.