Slots pattern for flexible components in Figma - Deep Dive

Overview - Slots pattern for flexible components

What is it?

The slots pattern is a design method used in Figma to create flexible components that can hold different types of content in predefined areas called slots. It allows designers to build reusable components where parts can be swapped or customized without changing the whole component. This pattern helps keep designs consistent while allowing flexibility for different use cases.

Why it matters

Without the slots pattern, designers would need to create many separate components for each variation, making updates slow and error-prone. The slots pattern solves this by letting you change only parts of a component, saving time and reducing mistakes. This leads to faster design work and easier maintenance of design systems.

Where it fits

Before learning the slots pattern, you should understand basic Figma components and variants. After mastering slots, you can explore advanced component systems, design tokens, and automation in design systems.

Mental Model

Core Idea

Slots pattern lets you build one component with flexible placeholders that can hold different content, making design reusable and adaptable.

Think of it like...

Think of a photo frame with interchangeable pictures: the frame stays the same, but you can swap the photo inside anytime without changing the frame itself.

┌─────────────────────────────┐
│       Flexible Component     │
│ ┌─────────┐  ┌────────────┐ │
│ │  Slot 1 │  │   Slot 2   │ │
│ │ (Image) │  │ (Text Box) │ │
│ └─────────┘  └────────────┘ │
└─────────────────────────────┘

Slots are placeholders inside the component where content can be swapped.

Build-Up - 7 Steps

1

Foundation

Understanding basic Figma components

Concept: Learn what components are and how they help reuse design elements.

In Figma, a component is a reusable design element. When you create a component, you can use it multiple times across your design. Changing the main component updates all its copies automatically.

Result

You can create a button once and reuse it everywhere. Changing the button updates all instances.

Understanding components is essential because slots build on this idea of reuse and consistency.

2

Foundation

Introduction to component variants

Concept: Variants let you create different versions of a component grouped together.

Variants are like different states or styles of a component, such as a button in normal, hover, or disabled state. They live inside one component set, making it easier to switch between versions.

Result

You can switch a button from normal to hover by selecting a variant instead of swapping components.

Variants organize component versions neatly, preparing you to understand how slots add flexible content inside these variants.

3

Intermediate

What are slots in components?

Concept: Slots are placeholders inside a component where you can insert different content.

Slots define areas inside a component that can hold other components or content. For example, a card component might have a slot for an image and another for text. You can swap what goes inside each slot without changing the card's structure.

Result

You can reuse the same card component but show different images and text by changing slot content.

Slots separate structure from content, allowing flexible reuse without rebuilding components.

4

Intermediate

Creating slots using Figma's component properties

Concept: Use component properties like 'Instance swap' to create slots.

In Figma, you create a slot by placing an instance of another component inside your main component. Then, you expose that instance as a property so users can swap it with other components. This creates a slot that can hold different content.

Result

Your main component shows a placeholder that can be swapped with different content in the design file.

Using instance swaps as slots leverages Figma's native features for flexible design without plugins.

5

Intermediate

Managing slots with nested components

Concept: Slots often contain nested components to keep designs modular.

Inside a slot, you can place components like icons, images, or buttons. This nesting keeps your design organized and lets you update slot content independently. For example, a button inside a slot can be updated without touching the main component.

Result

Slot content updates independently, making design changes faster and safer.

Nesting components inside slots enhances modularity and reduces duplication.

6

Advanced

Using variants inside slots for dynamic content

🤔Before reading on: do you think slots can hold variants that change appearance dynamically? Commit to your answer.

Concept: Slots can hold variants, allowing dynamic content changes inside flexible components.

You can place a variant set inside a slot, so the slot content changes based on variant selection. For example, a slot for an icon can switch between different icon variants depending on the main component's state.

Result

Slots become even more powerful by adapting their content dynamically with variants.

Combining slots and variants creates highly flexible components that adapt to many scenarios.

7

Expert

Limitations and workarounds of slots in Figma

🤔Before reading on: do you think Figma slots support all content types and unlimited nesting? Commit to your answer.

Concept: Understand Figma's current slot limitations and how to work around them.

Figma slots rely on instance swaps and component properties, which have limits: no true slot API, limited nesting depth, and manual management. Designers use naming conventions, component sets, and plugins to simulate advanced slot behavior.

Result

You learn to design within Figma's constraints and use smart workarounds for complex flexible components.

Knowing these limits prevents frustration and encourages creative solutions in design systems.

Under the Hood

Figma implements slots by allowing components to contain instances of other components exposed as properties. These instance swaps act as placeholders users can replace. Internally, Figma tracks these relationships and updates all instances when the main component or slot content changes.

Why designed this way?

Figma chose instance swaps for slots to reuse existing component infrastructure without adding complex new APIs. This keeps the system simple and compatible with existing workflows, balancing flexibility and usability.

┌─────────────────────────────┐
│      Main Component         │
│ ┌───────────────┐           │
│ │ Slot Instance │◄───┐      │
│ └───────────────┘    │      │
│                      │      │
│   Component System    │      │
│ ┌─────────────────┐  │      │
│ │ Instance Swap   │──┘      │
│ └─────────────────┘         │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do slots automatically resize to fit any content inside? Commit yes or no.

Common Belief: Slots automatically adjust size to fit any content placed inside them.

Reality: Slots do not automatically resize; their size depends on the main component's layout and constraints.

Why it matters: Assuming automatic resizing leads to broken layouts and unexpected overlaps in designs.

Quick: Can slots hold any type of content, including text and images, without restrictions? Commit yes or no.

Common Belief: Slots can hold any content type freely, like text, images, or shapes.

Reality: Slots typically hold component instances; freeform content like raw text or images must be wrapped in components first.

Why it matters: Not knowing this causes confusion when trying to swap raw content directly, leading to wasted time.

Quick: Do slots in Figma support unlimited nesting of components inside components? Commit yes or no.

Common Belief: Slots support unlimited nesting of components inside components without issues.

Reality: Figma has practical limits on nesting depth and complexity, which can cause performance issues or confusion.

Why it matters: Ignoring nesting limits can slow down files and make components hard to maintain.

Quick: Are slots a built-in Figma feature with a dedicated API? Commit yes or no.

Common Belief: Slots are a dedicated Figma feature with a special API for flexible content areas.

Reality: Slots are a design pattern using instance swaps and component properties, not a separate Figma API.

Why it matters: Misunderstanding this leads to expecting features that don't exist and frustration.

Expert Zone

1

Slots can be combined with interactive components to create dynamic UI prototypes that adapt content based on user actions.

2

Naming conventions for slot properties are crucial for clarity and maintainability in large design systems.

3

Using nested variants inside slots can create complex but highly reusable components, but requires careful management to avoid confusion.

When NOT to use

Avoid slots when your component content is static or rarely changes, as slots add complexity. For simple components, use straightforward variants or separate components instead.

Production Patterns

In production design systems, slots are used to build buttons with customizable icons, cards with interchangeable images and text, and navigation bars where menu items can be swapped easily.

Connections

React component props

Slots in Figma are similar to props.children in React, where components accept flexible content passed from outside.

Understanding slots helps grasp how UI frameworks pass content dynamically, bridging design and development.

Modular furniture design

Both use fixed structures with interchangeable parts to create flexible setups.

Seeing slots like modular furniture helps appreciate the balance between stability and flexibility in design.

Database normalization

Slots separate content from structure, similar to how normalization separates data to reduce duplication.

This connection shows how organizing parts independently improves maintainability across fields.

Common Pitfalls

#1 Trying to swap raw text directly into a slot without wrapping it in a component.

Wrong approach:

Placing plain text inside a slot instance expecting it to swap dynamically.

Correct approach:

Wrap the text inside a text component instance, then place that instance in the slot for swapping.

Root cause:

Misunderstanding that slots work with component instances, not raw elements.

#2 Assuming slots resize automatically to fit content, causing layout breakage.

Wrong approach:

Designing slots without fixed size or constraints, expecting content to adjust layout.

Correct approach:

Set constraints and fixed sizes on slots to control layout and prevent overlap.

Root cause:

Confusing slot flexibility with automatic layout adjustment.

#3 Nesting too many components inside slots, leading to slow file performance.

Wrong approach:

Creating deeply nested slot components without limits.

Correct approach:

Limit nesting depth and simplify slot content to maintain performance.

Root cause:

Not considering Figma's performance limits and complexity management.

Key Takeaways

Slots pattern in Figma enables flexible, reusable components by defining placeholders for interchangeable content.

Slots rely on instance swaps and component properties, not a dedicated API, which shapes their capabilities and limits.

Combining slots with variants and nested components creates powerful, adaptable design elements for complex systems.

Understanding slots prevents common mistakes like improper content swapping and layout issues, improving design efficiency.

Slots connect design and development concepts, bridging Figma components with programming patterns like React props.