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.

Practice

1. What is the main purpose of the Slots pattern in Figma components?

easy

A. To create placeholders inside components for flexible content

B. To lock components so they cannot be edited

C. To export components as images

D. To automatically generate color palettes

Solution

1. Step 1: Understand the Slots pattern concept

   Slots act as placeholders inside components where you can insert different content later.

2. Step 2: Identify the main purpose

   This allows components to be flexible and reusable by changing only the slot content.

3. Final Answer:

   To create placeholders inside components for flexible content -> Option A

4. Quick Check:

   Slots = placeholders for flexible content [OK]

Hint: Slots hold flexible content inside components [OK]

Common Mistakes:

• Thinking slots lock components
• Confusing slots with export features
• Assuming slots generate colors automatically

2. Which of the following is the correct way to define a slot inside a Figma component?

easy

A. Group layers and rename the group to 'Slot'

B. Use the 'Export' option on a layer

C. Add a frame and mark it as a slot placeholder

D. Create a text layer with the word 'Slot'

Solution

1. Step 1: Recall how slots are defined

   Slots are defined by adding a frame or container inside a component and marking it as a slot placeholder.

2. Step 2: Evaluate the options

   Only Add a frame and mark it as a slot placeholder correctly describes adding a frame and marking it as a slot placeholder.

3. Final Answer:

   Add a frame and mark it as a slot placeholder -> Option C

4. Quick Check:

   Slot definition = frame marked as slot [OK]

Hint: Slots are frames marked as placeholders inside components [OK]

Common Mistakes:

• Confusing slots with export settings
• Thinking renaming groups creates slots
• Assuming text layers define slots

3. Given a component with a slot named IconSlot, what happens when you drag a new icon into this slot instance?

medium

A. The component breaks and shows an error

B. The original component's icon changes everywhere

C. The slot disappears and cannot be reused

D. The new icon replaces the slot content in that instance only

Solution

1. Step 1: Understand slot instance behavior

   When you drag content into a slot in an instance, it replaces the slot content only for that instance.

2. Step 2: Check effect on original component

   The original component remains unchanged; only the instance shows the new content.

3. Final Answer:

   The new icon replaces the slot content in that instance only -> Option D

4. Quick Check:

   Slot content replaced per instance [OK]

Hint: Slot content changes only in the instance, not original [OK]

Common Mistakes:

• Thinking original component changes globally
• Believing slots disappear after use
• Assuming errors occur on drag

4. You created a slot inside a component but when you drag content into it, the content does not appear. What is the most likely cause?

medium

A. The slot frame was not marked as a slot placeholder

B. The component is locked and cannot be edited

C. The dragged content is not supported by Figma

D. The component has no fill color

Solution

1. Step 1: Check slot setup

   If content does not appear when dragged, the slot frame might not be properly marked as a slot placeholder.

2. Step 2: Rule out other causes

   Locking or fill color does not prevent slot content from showing; Figma supports common content types.

3. Final Answer:

   The slot frame was not marked as a slot placeholder -> Option A

4. Quick Check:

   Unmarked slot frame blocks content [OK]

Hint: Mark frames as slots to accept content [OK]

Common Mistakes:

• Assuming locking blocks slot content
• Blaming unsupported content types
• Thinking fill color affects slots

5. You want to create a reusable button component with a slot for an icon and a slot for label text. Which approach best uses the Slots pattern to achieve this?

hard

A. Create two separate components: one for icon and one for label, then group them

B. Create a component with two frames marked as slots: one for the icon and one for the label text

C. Use a single text layer and change its content for icon and label

D. Create a component with fixed icon and label layers without slots

Solution

1. Step 1: Understand the goal

   You want a flexible button where icon and label can be changed independently.

2. Step 2: Apply Slots pattern

   Defining two frames as slots inside the button component allows replacing icon and label content separately in instances.

3. Step 3: Evaluate other options

   Grouping separate components or fixed layers does not provide the same flexibility and reusability.

4. Final Answer:

   Create a component with two frames marked as slots: one for the icon and one for the label text -> Option B

5. Quick Check:

   Multiple slots = flexible reusable component [OK]

Hint: Use multiple slot frames for flexible parts [OK]

Common Mistakes:

• Using fixed layers instead of slots
• Grouping separate components without slots
• Trying to use one text layer for icon and label