Figma Slots: Guide and Expert Review (April 2026)

What are Figma Slots?

Slots are flexible areas that are placed in main components and allow content to be added and arranged directly in an instance without detaching it, while maintaining the design system.

The core principle can be broken down simply: Within a component, you define an area (the slot) that serves as a container for variable content. Other components, texts or elements can be inserted, removed or rearranged there. The instance remains completely connected to the main component. Everything that should be fixed remains fixed: padding, borders, shadows, buttons. Only the slot area is open.

Slots vs. variants - the crucial distinction. Variants describe the state of a component: open or closed, active or inactive, expanded or collapsed. Slots describe what can be in a component. The distinction sounds subtle, but is huge in practice.

We agreed with each other in the test:

  "The instances simply say the state of that one component. But when it comes to wanting flexibility in a component, such as in modals or entire sections... that's where slots actually become very helpful."

In Figma, slots are visually highlighted in pink. This is a deliberate design decision so that they immediately catch the eye in the layer panel and are not overlooked.

The concept behind slots has long been familiar to developers. Anyone coming from a development background has worked with this pattern throughout their career: Children props at React, Vue's slot system, Web Components' slot elements: developers have been putting interfaces together like this for years. The concept of a predefined area into which content is inserted is fundamental to the way the web works.

Slots is Figma's approach to the way developers actually work. 

"Slot is simply the name Figma gave it. But the developers don't actually work in such a way that they have a component with things that they show and hide. We only have that in Figma." 

The recommendation from our team: validate early on with your own developers whether the slot concept corresponds to their way of working. The chances are good that it does.

Creating Figma slots: Step-by-step guide

Slots only work within components. Each frame within a main component can be converted into a slot. Free frames outside of components are not possible. This is the first and most important requirement.

How to turn a frame into a slot:

1. Create or open component: No slot without an existing component. If none exists yet, first define the desired structure as a component.
   
   
2. Create frame within the component: This frame becomes the slot container. It defines the area in which variable content will later be inserted.
   
   
3. Convert frame to slot: There are three equivalent ways to do this:
   
   
   
   • Right toolbar: Click on "Convert to slot" (the small plus icon)
     
     
   • Right-click on the frame: select "Convert to Slot" in the context menu
     
     
   • Keyboard shortcut: ⌘ Command ⇧ Shift S (Mac) or ⌃ Control ⇧ Shift S (Windows)
     
     
4. Optional: Enter description: e.g. "Text elements only" or "Text elements only".E.g. "Text elements only" or "Checkbox, Radio Button, Input Field". Sounds like a small thing, but is worth its weight in gold in larger teams.
   
   
5. Optional: Define Preferred Instances: Components that should be suggested as the default selection when someone fills the slot.
   
   

Auto Layout remains the silent prerequisite: Without a correctly configured Auto Layout, inserted elements do not behave as expected. Before slots are used productively, the Auto Layout setup of the component must be clean. Otherwise, everything shifts and the wild search for errors begins.

Slot descriptions are team communication: In large design systems with many contributors, the description function is not a minor matter. By editing the slot property in the properties panel, you can customize the name, description and preferred instances. 

We recommend: formatted text, links, even code snippets can be stored here. 

"If you have a huge design system and work with a lot of people, you want to prevent questions. That's why you can write down all the rules here." 

The more complete the description, the fewer queries.

Three real-world use cases

The following examples are from an ongoing project that our design team is actively working on. Each of these cases was a specific pain point that the team addressed with Figma Slots.

Modals: From 20 variants to one basic component

The initial situation: 20 modal variants in the design system. All with the same basic structure: Header, buttons, shadow, border, padding. The only difference was in the inner area, in the content. And yet each one existed as an independent component.

The solution with Figma Slots: A single basic component in which the header, buttons, shadow, border and padding are defined as fixed elements. The variable inner area becomes a slot. Different content can be inserted in each instance without changing the base.

"The padding is correct everywhere, the borders are correct everywhere, the shadows are correct and the buttons are in the right place. Only the content is variable." 

A sentence that summarizes the entire promise of Slots. 20 variants become one component. Consistency increases, maintenance effort decreases.

Chapter boxes: Flexible task lists without hard-coded maximum

In the project, there are chapter boxes that contain tasks. Previously, we needed separate components for 3, 6 or any number of tasks per chapter. Every new requirement (e.g. a seventh task) meant: back to the design system, adapt the component, create a new variant, check everywhere to make sure nothing had shifted.

With slots: A box component with a fixed frame (chapter number, heading, description) and a slot for the tasks. Insert any number of task instances. No hard-coded maximum number. No separate components per number of tasks. The box grows with the content, not with the design system.

FAQ lists: Finally solving order problems

FAQ components come in three flavors: open, closed and list. Arranging and rearranging FAQ entries within an instance was a manual feat of strength.

"I went into the instance, added one there, went back - and then I noticed that Content had changed the order of the texts. I had to change the order everywhere. I lost so much time with actually three clicks by moving things up and down."

The slot solution: a wrapper component plus a slot for the FAQ entries. Add, remove, reorder - all within the instance, all without detaching.

Important to know: The free order in the slot can also produce inconsistencies. Clear team rules remain necessary.

Slots vs. variants: When to use which

"Do we need a variant or a slot here?" 

The answer lies in the difference between state and content.

Variants describe states. An accordion is open or closed. A button is active or inactive. A checkbox is checked or unchecked. These are semantic differences that belong to the component itself.

Slots describe variable content within a constant shell. A modal always has the same frame, but the content changes. A FAQ list always has the same layout, but the number of entries varies. A content page always has the same structure, but the modules within it can be freely combined.

This distinction is particularly clear in atomic design. Atoms and molecules (buttons, input fields, checkboxes) remain independent components with variants.

"The whole molecules and atoms still exist - but when it comes to larger areas, like whole sections, slots become very helpful to have more flexibility."

Slots unfold their value at the level of organisms and sections. Where components are put together and the content becomes truly variable.