Use slots to build flexible components in Figma
Before you start using slots, it's essential to understand who can use this feature and how it can benefit your design workflow.
Anyone with edit access to a design file can add slots to components, making it a versatile feature for teams and individuals alike.
New to creating components? Don't worry, you can check out our guide to components to get started.
Slots are a type of component property that allows you to create flexible areas within main components. This enables you to add, resize, and arrange content within an instance without having to detach it, making it a powerful tool for designers.
You can also set preferred instances to guide designers on what assets are recommended for use within the slot, and set minimum or maximum number of layers that can be added to a slot, giving you more control over your design.
Migrate a library to use slots
If you or your team have been using workarounds to 'recreate' slots, it's time to migrate to using Figma Design’s native slots feature. Check out our article on migrating a library to use slots to learn more.
Common use cases
Use slots for:
- Repeating elements: Components that contain repeating items like task lists or tabs
- Freeform layouts: Components such as cards or modals with varying layouts
- Simplified and cleaner libraries: Decrease the number of variants or hidden layers needed to represent the various ways an asset can look
- Experimentation: Allow for experimentation while maintaining adherence to accurate component usage
- Healthier design systems: Reduce occurrences of detached components so instances will continue receiving updates from the main component
- Code: Map closer to how slots behave in code, namely React
Repeating elements
Components containing repeating elements—such as task lists, input fields on a form, and music playlists—might not have a fixed number of occurrences. When you create a component with slots, you can add as many repeating items as you need without detaching the instance from its main component.
Freeform layouts
Certain base components have numerous permutations of what it can look like—such as modals and cards. They require flexibility in how a layout is arranged and in the types of content it contains. With slots, you can resize and rearrange items as needed and insert layers of all types—like instances, text, images, to name a few.
Create a slot in a main component
Slot can be used on nested layers in main components or in variants of the same component set. You convert a frame to a slot, wrap layers in a slot, or apply an existing slot property to a frame.
You cannot bind a slot property to the top level layer of a component.
Use slots on variants: You can apply a slot property across variants within the same component set. To do this, use multi-edit to select multiple similar layers, then create and add the slot property to layers in bulk.
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.
- Select a nested frame inside a main component.
- Choose from the following options:
- Right-click and select Convert to slot.
- Use the keyboard shortcut ⌘ Command ⇧ ShiftS (Mac) or ⌃ Control ⇧ ShiftS (Windows).
- From the right sidebar, 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 sidebar, click Edit slot property to update the slot name, add a description, and set preferred instances.
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.
- From any main component, select a non-frame object or multiple layers.
- 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 sidebar, click Edit slot property to update the slot name, add a description, and set preferred instances.
Create a slot property, then apply it to a layer
You can also create a slot property from the right sidebar.
- Select a main component on the canvas.
- Click Create property and choose Slot from the right sidebar.
- A settings modal will appear, where you can update the slot name, add documentation, and edit other slot settings.
- 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.
Edit slot settings
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.
Components with slots can be published empty or with pre-populated, default content inside.
To adjust the settings and default options on a slot, select the main component and find the slot in the right panel. Then, hover over the slot property and click Edit property. From there you can:
- Update the slot property’s name and description
- Set minimum and maximum layer counts
- Set preferred instances
- Only allow preferred instances
- Display empty slots by default
- Set items to fill container by default
Set minimum and maximum layer counts
There is no limit to the number of layers that can be added to a slot. However, there are cases where you may wish to guide your team to keep within a range of number of layers in a slot.
For example, consider an avatar group component that shows who’s active in a file. When the number of avatars exceeds five, the circles begin to crowd one another. Setting a maximum layer count of five on the avatar slot communicates this guidance to designers directly in the file, without needing them to check external documentation.
A minimum layer count can be useful on components used in workflows that require choice, like a radio group. Since a single radio button doesn’t allow users to make a selection, setting a minimum of two layers communicates the intended usage.
To set a limit on layer count on a slot, use the Minimum layers and Maximum layers fields to define it. You can use both fields to define a range, or use just one of the fields.
Once a limit is defined, anyone using an instance of the slot can see the limits from the right sidebar when the slot or its component. They can click the Limits label to view details about the limits and whether they’ve been met.
Note: Layer count limits are designed to guide your team, not restrict them. If a designer goes past a limit, a warning will appear at the bottom of the screen and the limit label will turn orange as a friendly nudge to keep designs on track, but they can continue working beyond the set limit.
Set preferred instances
Create a curated list of components for your team to choose from by setting preferred instances on a slot. This is an optional step that you can take to reduce guesswork by guiding designers toward recommended or commonly used components.
To set preferred instances on a slot, click Select preferred instances. Check the boxes next to the instances you want to include.
Only allow preferred instances
The Only allow preferred instances setting informs designers to add only instances from the preferred instances list.
For example, you may want to only allow use of preferred instances for an empty-state illustration slot where designers choose from a list of curated and approved illustrations.
Or, consider an input form component that must be compositional. It should be able to handle varying combinations of input types, and designers should be able to rearrange and reorder content. However, you want designers to know to use only certain assets for the form component—like text inputs, dropdowns, text areas, date pickers, and so on. So, you enable this setting.
Display empty slots by default
When you hover over a component containing a slot, the slot layer will be indicated by a pink box.
If you wish for the slot indicator to be persistent, you can do so for any empty slots by checking By default, display empty slots from the main component.
Set items to fill container by default
When you toggle on By default, fill items on slot’s counter-axis on a slot, any items added to the slot will have Fill container applied to the resizing setting on the axis opposite of the slot’s flow direction.
For example, if a slot’s auto layout flow is set to Vertical (where layers run along the y-axis), then any objects added to that slot will be set to fill container on the x-axis. In other words, the slot will stretch their width to fill the available space.
Work with slots in instances
Once a main component is set up with a slot, you can pull an instance of it and start adding content, rearranging layers, and removing objects from the slot as if the slot was a regular frame.
Add content
Any layer type can be added to a slot. Here are some ways you can insert content into a slot within a component instance:
- Use any tool to add layers directly into the slot.
- Duplicate layers within the slot.
- Drag objects from the canvas or Assets panel into the slot.
- From the canvas, hover over the slot and click Add instances from the canvas. Or, select the slot and hover over the slot property name in the right sidebar, then click Add instances. A popup will appear with a list of components and libraries. If there are any preferred instances defined on the slot, the filter will be set to preferred by default.
Apply changes
While you can make changes to content living within a slot of a component instance, there are some changes that can and cannot be made to the slot layer itself.
Visual properties like fill, stroke, opacity, and effects can be added or edited on the slot layer. You can also edit the layer name and manage its export settings.
However, it’s not possible to make changes to the underlying structure of an instance. Changes cannot be made to a slot’s position, auto layout flow, and constraints. These need to be updated from the main component.
View limits
If there are any limits set on the slot—such as using only preferred instances, minimum layer count, or maximum layer count—they will be displayed in the right sidebar when the slot or its parent instance component is selected. Click on the label to view details about the slot’s limits.
Reset a slot
When overrides have been made to a slot, its respective slot property will get a [Modified] tag in the properties panel.
To reset a slot and revert it back to how the slot looks in the main component:
- Select the slot layer.
- 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.
- Select the slot layer.
- Click More actions and choose Delete contents.
Remove a slot
Warning: Removing a slot property from a main component is a destructive action. If an instance has been modified using slots and the slot property is removed from the main component, that instance’s slot area will be reset to its default state.
There are a couple of ways to remove a slot from a main component:
- To remove the slot property, select the main component and click Delete property next to the slot property name. The slot frame and its contents will be retained.
- To remove the frame but keep the slot property and its contents, use the keyboard shortcut ⌘ Command ⇧ Shift G (MacOS) or Ctrl ⇧ Shift G (Windows).
Considerations
Using component properties in slots
Component properties cannot be applied to layers from inside a slot.
However, you can apply component properties to main components, and then insert an instance into a slot. The component properties applied to it will persist and remain available.
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
If you're weighing this for your own project, that's the kind of decision we help with at Chulbul Design.
Frequently Asked Questions
What are slots in Figma?
Slots in Figma are a type of component property that allows you to create flexible areas within main components. This enables you to add, resize, and arrange content within an instance without having to detach it.
How do I create a slot in Figma?
To create a slot in Figma, select a main component and click Create property and choose Slot from the right sidebar. You can also convert a frame to a slot or wrap objects in a new slot.
Can I set limits on the number of layers in a slot?
Yes, you can set minimum and maximum layer counts on a slot to guide your team on the intended usage of the slot.
How do I remove a slot from a main component?
To remove a slot from a main component, select the main component and click Delete property next to the slot property name. The slot frame and its contents will be retained.