Use slots to build flexible components in Figma

Slots, a type of component property, are flexible areas added to components that let you freely add and arrange content directly inside an instance without having to detach it, all while maintaining adherence to your team's design system.

Use slots for:

• Repeating elements: Components that contain things like task lists or tabs
• Freeform layouts: Components such as cards or modals that have varying layouts
• Simplified and cleaner libraries: Decreasing the number of variants or hidden layers needed to represent the various ways an asset can look
• Experimentation: Allowing for experimentation while adhering to accurate component usage
• Healthier design systems: Reducing occurrences of detached components so instances will continue receiving updates from the main component
• Code: Mapping closer to how slots behave in code, namely React

You can also set preferred instances to guide designers on what assets are recommended for use within the slot.

Common use cases

Repeating elements

Some components contain elements used repeatedly in succession—such as task lists, forms, and playlists—and don’t necessarily have a fixed number of occurrences. With slots, you can add as many repeating items as they need without detaching the instance from the main component.

Freeform layouts

Some base components have numerous permutations of what it can look like—such as modals and cards—and thus require flexibility in how a layout is arranged and the types of content that goes into it. With slots, you can resize and rearrange items as needed, and even insert layers of all types like instances, text, images, to name a few.

Add a slot

A slot can be applied to layers nested within a main component or within variants of the same component set. You cannot bind a component property to the top level layer of a component.

Components with slots can be published empty or with pre-populated, default content inside.

There are several ways to add slots to main components.

Convert a frame to a slot

Any frame in a main component can be converted to a slot. This is handy for when you’ve already pre-defined the area you wish to be a slot with a frame.

1. Select a nested frame inside a main component.
2. Choose from the following options:
   • Right-click and select Convert to slot.
   • Use the keyboard shortcut ⌘ Command ⇧ Shift S (Mac) or ⌃ Control ⇧ Shift S (Windows).
   • From the right panel, click Convert to slot. Select an existing slot property from the dropdown or choose to create a new one.

The frame will be converted to a slot, and a new slot component property will be created. From the Properties section of the right panel, click Edit slot property to update the slot name, add a description, and set preferred instances. Learn more about editing a slot property.

Wrap objects in a new slot

If you’re working with objects that are not frames—such as text layers, groups, instance components, or a selection of multiple objects—you can wrap them in a new slot.

1. From any main component, select a non-frame object or multiple layers.
2. Right-click, and select Wrap in new slot.

This will create a new slot and place your selection into it, and a new slot property will be created. From the Properties section of the right panel, click Edit slot property to update the slot name, add a description, and set preferred instances. Learn more about editing a slot property.

Create a slot property, then apply it to a layer

You can also create a slot property from the right panel.

1. Select a main component on the canvas.
2. Click Create property and choose Slot from the right panel.
3. A settings modal will appear, where you can update the slot name, add documentation, and set preferred instances.
4. This will create a slot property, but it will not define a slot area on your layers until you assign it to a frame. When you are ready to assign this slot property to a frame, select the frame click Convert to slot in the right sidebar, then select the existing slot property from the dropdown.

Configure a slot property

You can leave a slot empty or add layers to it as default content. 

A slot can take on most of the same properties as a frame. For example, you can apply horizontal and vertical auto layout, minimum and maximum dimensions, color fills, effects, and variables, to name a few.

To edit an existing slot property, select the main component and find the slot in the right panel. Hover over the slot property and click Edit property. From there you can update the name and description, and set preferred instances.

Set preferred instances

Setting preferred instances for a slot allows your team to choose from a set of curated components when adding assets to a slot. It is an optional step that you can take if you want to reduce guesswork by guiding designers toward recommended or most commonly used components. 

Remove a slot

There are a couple of ways to remove a slot from a main component:

• To completely remove the slot property as well as its contents, drag the slot out of main component, then delete the slot.
• To remove the slot property but keep its contents, select the main component. Then, from the right panel, click next to the slot property name. Or, use the keyboard shortcut ⌘ Command ⇧ Shift G (MacOS) or Ctrl ⇧ Shift G (Windows).

Work with slots in instances

Add content to a slot

Once a main component is set up with a slot, you can pull an instance of it and start adding content into the slot. A pink border will appear around a slot when you select or hover over its top level component.

Any layer type can be added to a slot. Here are some ways you can insert content into a slot:

• Drag objects from the canvas or Assets panel into the slot.
• Hover over the slot and click Add instances. A popup will appear with a list of components and libraries. If there are any preferred instances (suggested) defined on the slot, the filter set to preferred by default.
• Duplicate layers within the slot.
• Use any tool to add layers directly into the slot.

Reset a slot

Resetting a slot will undo any overrides on a slot and revert it back to how the slot looks in the main component.

1. Select the slot layer.
2. Click More actions and choose Reset slot.

Clear a slot

Clearing a slot will remove all layers within the slot so that you can start fresh.

1. Select the slot layer.
2. Click More actions and choose Delete contents.

Handoff to developers

Map structured content from a Figma component directly into your code examples using Code Connect. This makes it possible to represent flexible child content such as text, layers, or nested components, inside your code snippets. 

Learn more about Code Connect.

Resources

Ready to continue your journey with slots? Check out these resources to learn more:

• Learn how to migrate an existing library to use slots
• Understand the difference between slots, instance swap, and variants
• Get hands-on practice with the Slots playground file
• See slots in action in this 4-minute Slots video tutorial
• Read Figma's blogpost on how to supercharge your design system with slots