Figma's Slot Pattern: Flexible Components Without Detaching

WHY IT EXISTS Before slots, designers faced a dilemma when a component's content needed to change: either create a massive number of variants for every possible layout, or detach the instance from the main component. Detaching breaks the link to the design system, meaning the instance no longer receives updates, leading to inconsistency and maintenance nightmares. Slots were created to provide flexibility without this destructive tradeoff.

THE MENTAL MODEL A slot is like an empty shelf in a pre-built bookcase. The bookcase (the main component) has a fixed structure, like its overall size and material. But you can place any books, plants, or objects (your custom content) you want on that specific shelf (the slot) without having to rebuild the entire bookcase. Each bookcase instance can have different items on its shelf while still being the same fundamental bookcase.

HOW IT WORKS A slot is a component property applied to a frame layer inside a main component. When you use an instance of that component, this 'slotted' frame becomes a flexible container. You can insert any content—text, images, or even other components—directly into that slot within the instance. The instance remains linked to the main component, receiving updates to any non-slotted parts, while your custom content in the slot is preserved. This maps closely to how slots behave in code frameworks like React.

WHEN TO USE IT Use slots for components that require variable internal content or structure. This is especially powerful for components with repeating elements, such as items in a task list or tabs in a navigation bar. It's also ideal for freeform layouts like cards, modals, or page sections where the content and arrangement change between use cases. Using slots helps simplify your component library by drastically reducing the number of variants needed.

WHEN NOT TO USE IT Avoid using slots for simple, atomic components where the content is predictable, like a basic icon button. Slots are for variable content, while variants are better for managing a component's own state or style (e.g., hover, disabled, primary, secondary). Using slots where a simple boolean or variant property would suffice adds unnecessary complexity.

ONE CANONICAL EXAMPLE A 'Modal' component. The main component defines the modal's container, including the background overlay, border-radius, and a close button. Inside the container, you create a slot. In one instance, a designer can use this modal for a simple confirmation, placing only a title and two buttons into the slot. In another instance, they can use the same modal for a complex form, placing input fields, labels, and text into the slot. Both instances are still linked to the same 'Modal' component and will inherit any updates to the container or close button.