Using Slots

The <slot> HTML element—part of the Web Components technology suite—is a placeholder inside a web component. This terminology has carried across to design tools for a consistent design language and approach.

Overview

Some components require a great degree of flexibility in the content they display, this is particularly true when nested components are required.

Figma advocates using a method where you create a space in your component to swap in custom content. This is called the slot method.

The idea is that the library component contains a nested slot component which the user can replace with their own custom components and instances.

This offers the maintainability of the system components alongside the flexibility of custom layouts.

The outer component should never be detached.

Placeholder Components

The following components use this technique:

Accordions

Overlays

Cards

How to use slots

This approach is widely documented and you can follow along some of the tutorial.

Additional Tutorials

Slot Components: Video Tutorial | Demo File

Demo file: https://www.figma.com/community/file/969234311094210750

Quick Tips

Set up your component instances in the overall UI and then you can find out the dimensions of the slot instance. You can use this to inform the sizes you need for your custom component.

When you swap a custom component with a slot instance it may not fit properly. You can adjust the auto constraint properties on your component and the outer layers to ensure things fit.

If your custom component is too large for the slot area you can set the clip content to true on the wrapping layer.