Instead of creating separate components for every version of a button, menu, card, or form, variants allow you to keep everything organized inside a single reusable component system.

Variants are commonly used to create:

• Interactive buttons

• Hover effects

• Dropdown menus

• Tabs

• Accordions

• Mobile navigation menus

• Form states

• Dynamic cards

• Loading states

Understanding variants is an important step toward building more advanced, interactive websites in Framer.

What Is a Variant?

A variant is a different state or version of the same component.

Think of variants as multiple versions of a component that share the same structure but display different appearances or behaviors.

For example, a button might have four variants:

Button├── Default├── Hover├── Pressed└── Disabled

Button├── Default├── Hover├── Pressed└── Disabled

Button├── Default├── Hover├── Pressed└── Disabled

Instead of creating four separate button components, everything exists inside one component system.

This keeps projects cleaner, easier to maintain, and significantly more scalable.

Why Variants Matter

Without variants, every state would need its own separate component.

For example:

Primary ButtonPrimary Button HoverPrimary Button PressedPrimary Button Disabled

Primary ButtonPrimary Button HoverPrimary Button PressedPrimary Button Disabled

Primary ButtonPrimary Button HoverPrimary Button PressedPrimary Button Disabled

As projects grow, this quickly becomes difficult to manage.

Variants solve this by grouping related states together.

Benefits include:

• Better organization

• Faster workflows

• Easier maintenance

• More advanced interactions

• Cleaner component libraries

Most professional Framer projects rely heavily on variants.

Understanding Component States

Many interface elements naturally have multiple states.

For example:

A button can be:

• Default

• Hovered

• Pressed

• Disabled

A dropdown can be:

• Open

• Closed

A navigation menu can be:

• Expanded

• Collapsed

Variants allow all of these states to exist within a single component.

Common Variant Examples

Button Variants

Buttons are one of the most common uses for variants.

Examples:

Primary Button├── Default├── Hover├── Active└── Disabled

Primary Button├── Default├── Hover├── Active└── Disabled

Primary Button├── Default├── Hover├── Active└── Disabled

Each state may use different:

• Colors

• Shadows

• Scale

• Typography

• Opacity

Navigation Menu Variants

Mobile menus often use variants.

Examples:

Mobile Menu├── Closed└── Open

Mobile Menu├── Closed└── Open

Mobile Menu├── Closed└── Open

The menu icon, layout, and visibility may change between states.

Card Variants

Cards frequently contain multiple states.

Examples:

Feature Card├── Default├── Hover└── Expanded

Feature Card├── Default├── Hover└── Expanded

Feature Card├── Default├── Hover└── Expanded

Hover states can reveal additional content or animations.

Form Variants

Forms often need feedback states.

Examples:

Input Field├── Default├── Active├── Error└── Success

Input Field├── Default├── Active├── Error└── Success

Input Field├── Default├── Active├── Error└── Success

Different states help communicate information to users.

Tabs and Accordions

Tabs and accordions are excellent candidates for variants.

Examples:

FAQ Item├── Collapsed└── Expanded

FAQ Item├── Collapsed└── Expanded

FAQ Item├── Collapsed└── Expanded

Rather than building separate layouts, variants manage the transition between states.

How Variants Work

Variants are built on top of components.

A typical workflow looks like:

1. Create a component

2. Add one or more variants

3. Modify each state

4. Connect interactions

5. Animate transitions

This creates a reusable interactive system.

Creating Variants

The process typically begins with a component.

Step 1: Create a Component

Build your element first.

Examples:

• Button

• Card

• Navigation menu

• Accordion

Convert it into a component.

Step 2: Add a Variant

Create additional states for the component.

For example:

Button├── Default└── Hover

Button├── Default└── Hover

Button├── Default└── Hover

Each variant starts as a copy of the original state.

Step 3: Modify the Appearance

Customize the new variant.

Examples:

• Change colors

• Increase scale

• Add shadows

• Reveal content

• Adjust opacity

Each variant should represent a unique state.

Step 4: Connect Interactions

Variants become powerful when connected to interactions.

Examples:

• Hover triggers

• Click triggers

• Tap interactions

• Scroll-based changes

This transforms static components into interactive experiences.

What Can Variants Change?

Variants can modify almost every visual property.

Colors

Examples:

• Background color

• Text color

• Border color

Useful for hover and active states.

Size

Variants can:

• Grow

• Shrink

• Expand

Common for buttons and cards.

Opacity

Opacity controls visibility.

Examples:

• Hidden content

• Tooltips

• Overlays

Layout

Entire layouts can change between variants.

Example:

Card├── Compact└── Expanded

Card├── Compact└── Expanded

Card├── Compact└── Expanded

The expanded version may reveal additional content.

Visibility

Elements can appear or disappear between states.

Useful for:

• Dropdowns

• Accordions

• Menus

Typography

Variants can change:

• Font weight

• Size

• Color

to indicate different states.

Animations

Variants can include animation changes such as:

• Scale

• Rotation

• Position

• Opacity

These transitions help create polished interactions.

Variant Naming Best Practices

Good naming is essential.

As projects grow, unclear names become difficult to manage.

Use Descriptive Names

Good examples:

DefaultHoverActivePressedDisabledExpandedCollapsedOpenClosed

DefaultHoverActivePressedDisabledExpandedCollapsedOpenClosed

DefaultHoverActivePressedDisabledExpandedCollapsedOpenClosed

These names immediately communicate purpose.

Avoid Generic Names

Poor examples:

State 1State 2Version AVersion B

State 1State 2Version AVersion B

State 1State 2Version AVersion B

These become confusing over time.

Group Related States

Example:

Button├── Default├── Hover├── Pressed└── Disabled

Button├── Default├── Hover├── Pressed└── Disabled

Button├── Default├── Hover├── Pressed└── Disabled

The relationship between states is immediately clear.

Interactive Variants

Variants become significantly more powerful when combined with interactions.

Hover Interactions

Examples:

• Button color changes

• Card elevation effects

• Image zoom effects

Hover interactions are one of the most common uses for variants.

Click Interactions

Examples:

• Menu expansion

• Tab switching

• Accordions opening

These interactions help create dynamic interfaces.

Scroll-Based Interactions

Variants can also be triggered through scrolling.

Examples:

• Navigation changes

• Sticky headers

• Section transitions

This helps create more immersive experiences.

Variant Transitions

Moving between states should feel smooth and intentional.

Abrupt changes often feel unpolished.

Why Transitions Matter

Transitions help users understand:

• What changed

• Why it changed

• What action triggered it

Good transitions improve usability and perceived quality.

Common Transition Types

Fade Transitions

Elements gradually appear or disappear.

Examples:

• Tooltips

• Dropdowns

• Modals

Scale Transitions

Elements grow or shrink.

Examples:

• Buttons

• Cards

• Icons

Slide Transitions

Content moves into position.

Examples:

• Mobile menus

• Side panels

• Drawers

Color Transitions

Colors animate smoothly between states.

Examples:

• Hover buttons

• Active navigation items

Responsive Variants

Variants should work properly across all screen sizes.

A state that works perfectly on desktop may behave differently on mobile.

Always test:

• Desktop

• Tablet

• Mobile

before publishing.

Mobile Considerations

One of the biggest mistakes beginners make is forgetting that touch devices do not support hover interactions.

Examples:

Desktop:

Hover → Show Tooltip

Hover → Show Tooltip

Hover → Show Tooltip

Mobile:

No Hover Available

No Hover Available

No Hover Available

Always provide alternative interactions for touch devices.

Responsive Testing Checklist

Verify:

• Buttons remain usable

• Layouts don’t break

• Hidden content remains accessible

• Interactions work on touch screens

• Animations feel smooth

Variants and Design Systems

Professional design systems often rely heavily on variants.

Example:

Button Component├── Primary├── Secondary├── Ghost├── Hover├── Active└── Disabled

Button Component├── Primary├── Secondary├── Ghost├── Hover├── Active└── Disabled

Button Component├── Primary├── Secondary├── Ghost├── Hover├── Active└── Disabled

Rather than managing multiple components, everything exists within a single organized system.

Common Beginner Mistakes

Creating Too Many Variants

Variants should simplify systems, not complicate them.

Example:

Button├── Variant 1├── Variant 2├── Variant 3├── Variant 4├── Variant 5├── Variant 6└── Variant 7

Button├── Variant 1├── Variant 2├── Variant 3├── Variant 4├── Variant 5├── Variant 6└── Variant 7

Button├── Variant 1├── Variant 2├── Variant 3├── Variant 4├── Variant 5├── Variant 6└── Variant 7

This quickly becomes difficult to manage.

Only create states that serve a real purpose.

Poor Naming

Generic labels create confusion.

Always name variants based on their function.

Ignoring Mobile Devices

Hover effects and interactions often behave differently on touch devices.

Always test mobile behavior.

Duplicating Components Instead of Using Variants

A common mistake is creating separate components for every state.

Example:

Button DefaultButton HoverButton ActiveButton Disabled

Button DefaultButton HoverButton ActiveButton Disabled

Button DefaultButton HoverButton ActiveButton Disabled

Variants provide a cleaner solution.

Over-Animating States

Animations should enhance usability, not distract from it.

Keep transitions:

• Fast

• Smooth

• Purposeful

Best Practices

Keep Systems Simple

Create only the states you actually need.

Use Clear Naming

Names should instantly communicate purpose.

Build Reusable Interaction Systems

Think beyond individual pages.

Create components that can be reused throughout the project.

Maintain Consistency

Use similar animation timing and behaviors across all variants.

Test Every State

Review:

• Desktop interactions

• Tablet layouts

• Mobile usability

before publishing.