Slots pattern for flexible components in Figma - Step-by-Step Guide

Introduction

The slots pattern helps you build flexible components in Figma that can hold different content in specific areas. This makes your designs reusable and easy to update without changing the whole component.

When you want a button component that can have different icons or text inside it.

When creating a card component that needs to show different images or descriptions.

When designing a modal that can have various header and footer content.

When you want to swap parts of a component without detaching it.

When building a dashboard widget that can display different charts or data.

Steps

Step 1: Create a new component

- Layers panel

A new component appears in your assets and on the canvas

💡 Use a clear name for your component to find it easily later

Step 2: Add placeholder layers inside the component

- Component frame on the canvas

Empty frames or shapes appear where you want flexible content

💡 Name these placeholders clearly, like 'Slot - Icon' or 'Slot - Text'

Step 3: Convert placeholder layers to components

- Right-click placeholder layers → Create Component

Placeholders become nested components that act as slots

💡 This allows swapping content easily in instances

Step 4: Use the main component in your design

- Assets panel → drag component onto canvas

An instance of your flexible component appears

💡 You can now swap slot components inside this instance

Step 5: Swap slot components inside the instance

- Select slot component inside instance → right-click → Swap Instance

The slot content changes without affecting the whole component

💡 Use this to customize each instance with different content

Before vs After

Before

A button component with fixed icon and text that cannot be changed per instance

After

A button component with slots for icon and text that can be swapped individually in each instance

Settings Reference

Component Naming

📍 Layers panel

Helps identify slots and main components clearly

Default: Untitled

Swap Instance

📍 Right-click menu on nested component inside instance

Allows replacing slot content with other components

Default: Current nested component

Instance Overrides

📍 Properties panel when instance selected

Customize slots without detaching the instance

Default: Inherits from main component

Common Mistakes

Not converting placeholders to components before using them as slots

Slots won't be swappable if they are just regular layers

Always create nested components for each slot placeholder

Naming slots unclearly or not at all

Makes it hard to identify which slot to swap in instances

Use clear, descriptive names for slot components

Detaching instances to change slot content

Loses connection to main component and breaks reusability

Use the Swap Instance feature to change slot content

Summary

Slots pattern lets you build components with flexible, swappable parts.

Use nested components as slots inside a main component for easy customization.

Always name slots clearly and swap content via instance overrides to keep reusability.