Let's be honest. Design systems are brilliant in theory, but they can become a bit of a nightmare in practice. You start with clean components, shared libraries, and everyone's happy. Then things grow. Variants multiply like rabbits. Designers start detaching instances because the component just doesn't flex enough. Sound familiar?

Well, Figma Slots are here to fix that. Announced at Schema 2025 and now in open beta, slots are a new type of component property that let you create flexible areas inside your components. Designers can add, remove, and rearrange content directly in an instance -- without detaching it. That's massive.

And here's the thing that gets me really excited as a UX Engineer: slots work exactly like how we build components in React with `children`. Design and code finally speak the same language.

• • •

So, What Exactly Are Slots?

Think of a slot as a "content zone" inside a component. It's a designated area where you can freely insert, remove, or rearrange any type of layer -- instances, text, images, frames, icons -- while the parent component keeps its structure intact.

You'll know you're working with a slot because Figma shows a pink border around the slot area when you select or hover over the component instance. Pretty handy visual cue.

Slots enable repeating elements like task lists, playlists, and form fields without a fixed number of items.

Why Should You Care?

Before slots, when a component needed flexibility, your options were pretty limited:

  • Create more variants -- and end up with variant explosion (a modal with 5 layout options means 5+ variants)
  • Hide layers -- stuff a dropdown with 10 hidden items, just in case. Messy.
  • Detach the instance -- lose the connection to the main component and miss all future updates
  • Use instance swap -- limited to swapping one component for another. Not real composition.

None of these are great solutions, right? Slots change the game completely. Here's what they unlock:

  • Repeating elements: Task lists, menus, tabs that need a variable number of items
  • Freeform layouts: Cards, modals, and panels with flexible content arrangements
  • Cleaner libraries: Way fewer variants and hidden layers to maintain
  • No more detaching: Instances stay connected and keep receiving updates
  • Code alignment: Slots mirror how React `children` and Vue `` work. Finally!
Freeform layouts: modals and cards with varying content, all from a single base component.
• • •

The Two Main Use Cases

1. Repeating Elements

You know those components that have items used over and over -- task lists, dropdown menus, playlists, navigation items? The problem was always: how many items do you include by default? Five? Ten? What happens when someone needs eleven?

Before slots, you'd either hide extra layers or the designer would just detach. Now? The slot accepts any number of items. Add as many as you need. The component stays lean, and the connection stays intact. Simple as that.

2. Freeform Layouts

Modals and cards are classic examples. A modal might need a title with two buttons, or a title with an image and three buttons, or maybe just a form. Every combination used to mean another variant or a detached instance.

With slots, you keep the modal structure and let designers drop in whatever content they need -- instances, text, images. No more variant explosion. No more detaching.

From filter lists to dashboards to music players -- same structure, different content. One slot-based component does it all.
• • •

How to Create Slots (Three Ways)

The good news is that creating slots is straightforward. There are three methods, and each one fits different workflows.

Method 1: Convert a Frame to a Slot

This is the one you'll use most often. If you've already got a frame inside your component that marks the flexible area, just convert it.

  1. Select a nested frame inside your main component
  2. Right-click and select Convert to slot
  3. Or use the shortcut: Ctrl + Shift + S (Windows) / Cmd + Shift + S (Mac)
  4. You can also click Convert to slot from the right panel
Converting a frame to a slot -- right-click or use the keyboard shortcut. Quick and easy.

Method 2: Wrap Objects in a New Slot

Working with text layers, groups, or instances that aren't wrapped in a frame? No worries. Select them and wrap them in a slot.

  1. Select one or more layers inside a main component
  2. Right-click and choose Wrap in new slot
  3. Done! Your content is now inside a slot with a new slot property created automatically
Wrapping existing layers in a new slot. Your content stays, flexibility gets added.

Method 3: Create the Slot Property First

If you like to plan ahead (I do), you can create the slot property from the right panel first, then assign it to a frame when you're ready.

  1. Select your main component
  2. Click Create property and choose Slot
  3. Set up the name, description, and preferred instances
  4. Later, select a frame and click Convert to slot, then pick your existing slot property
Create the property first, apply it later. Great for when you want to plan your component structure.
• • •

Using Slots in Instances

Once your main component has slots, using them in instances is dead simple. Here's the fun part.

Adding Content

You can add any layer type to a slot. Here are your options:

  • Drag and drop from the canvas or Assets panel
  • Click the + button on the slot to see a curated list of components
  • Duplicate layers inside the slot to quickly add more items
  • Use any drawing tool to create content directly inside the slot
Adding content to a slot: drag from Assets, click the + button, or just duplicate what's already there.

Resetting and Clearing

Made a mess? No problem. Reset slot brings it back to the main component's default state. Delete contents clears everything so you can start fresh. Both options are in the More actions menu. Really useful when you're experimenting.

• • •

5 Pro Tips for Getting the Most Out of Slots

These tips come from Figma's work with early testers. I've added my own perspective as someone who works on both the design and code side.

Tip 1: Start Where People Detach the Most

Don't try to add slots to everything at once. Look at which components your team detaches the most -- that's your starting point. Usually it's dialogs, dropdown menus, modals, cards, and panels. These are the components where slots will make the biggest difference immediately.

Quick checklist for prioritising:

  • Components that appear on many screens
  • Components with too many variants
  • Components that get duplicated across the system
  • Components that need to support different content types

Tip 2: Use Default Content Wisely

You can publish a slot empty or with default content inside. Default content is great for components where the layout is predictable but might occasionally change -- like a card with a standard image-title-button layout. An empty slot is better when designers need to build the content from scratch every time.

My recommendation? Default to filled slots for common patterns, empty slots for truly flexible areas. Your team will thank you.

Empty slot (left) vs slot with default content (right). Both work -- pick what suits your component best.

Tip 3: Set Preferred Instances

This is a brilliant feature that many people overlook. When you set preferred instances for a slot, designers see a curated list of recommended components when they click the + button. Think of it as gentle guidance, not restrictions.

Why bother? Three reasons:

  • Faster workflows -- no more searching through the entire library
  • Better consistency -- the right components get used in the right places
  • Smoother handoff -- developers see familiar components, fewer questions asked

Tip 4: Go Big -- Use Slots for Layouts Too

Here's something that surprised early testers: slots aren't just for small components like buttons or menus. They work brilliantly for page-level layout components too. Headers, sidebars, content areas, footers -- define the overall structure once, then let slots handle the content differences.

Instead of creating five different page layouts, create one layout component with slots for each region. Same framework, endless variations. It's how we think about layouts in code, and now design can work the same way.

Tip 5: Bridge Design and Code

This is the tip closest to my heart as a UX Engineer. In React, we build container components that accept `children` -- content that gets injected into a defined region. Vue uses `` elements for exactly the same thing. And now Figma slots bring that same compositional pattern into design.

// React component with children (the code equivalent of a Figma slot)
function Modal({ children, title }) {
  return (
    <div className="modal-overlay">
      <div className="modal-container">
        <h2>{title}</h2>
        <div className="modal-content">
          {children}  {/* This is the "slot" */}
        </div>
      </div>
    </div>
  );
}

// Usage: inject any content into the slot
<Modal title="Confirm Action">
  <p>Are you sure you want to proceed?</p>
  <ButtonGroup>
    <Button variant="secondary">Cancel</Button>
    <Button variant="primary">Confirm</Button>
  </ButtonGroup>
</Modal>

When design and code share the same mental model, handoff becomes so much smoother. Engineers see exactly what content goes where. Designers build layouts that actually reflect how components work in production. Everyone wins.

And if you're using Code Connect, slots show up directly in code snippets. That's proper design-to-code alignment right there.

• • •

Slots vs Instance Swap vs Variants -- When to Use What

This is a question I get asked a lot, so let me break it down simply:

Slots are for areas where content is unpredictable. Modals, cards, page sections, dropdown menus -- anywhere the structure stays fixed but the content inside changes freely.

Instance swap is for replacing one specific component with another similar one. Icon swaps, avatar changes, toggling between button types. One-to-one replacements.

Variants are for predefined states. Button states (default, hover, disabled), sizes (small, medium, large), themes (light, dark). Discrete, known options.

The best components? They combine all three. A card might use variants for size, instance swap for the icon, and a slot for the content body. That's when things get really powerful.

• • •

Things to Keep in Mind

Before you go all-in, a few important notes:

  • Slots go on nested layers only -- you can't add a slot to the top-level layer of a component
  • Removing a slot is destructive -- if instances have been modified and you remove the slot from the main component, those changes are lost. Always test in a branch first!
  • Slots work with auto layout -- you can apply horizontal/vertical layout, min/max dimensions, fills, and variables. Brilliant.
  • Slots work across variants -- use multi-edit to apply a slot across variants in the same component set
  • MCP support is coming -- Figma is adding slot support to the MCP server for AI-powered workflows. Exciting times!
• • •

Ready to Migrate?

If your team has been using workarounds -- hidden layers, too many variants, detached instances -- Figma has a proper migration guide that covers the most common patterns and how to move them to slots.

My advice? Start small. Pick your most-detached component, convert it to use slots, set up preferred instances, and publish. Get feedback from your team, iterate, then expand. Don't try to migrate everything at once.

• • •

Useful Resources

• • •

Wrapping Up

Slots are genuinely one of the most exciting Figma features in a long time. They bring design closer to how production code works, they reduce the friction that makes teams detach instances, and they make design systems more flexible without losing control.

The question isn't whether to use slots -- it's where to start. Look at the components your team detaches most. That's your answer. Start there, keep it simple, and watch your design system become something people actually enjoy using.

Happy designing!