How to Improve Component Flexibility Without Detaching

— Do you see designers detaching components?

— No.

— Neither do I, but they exist!

What Are Slots?

A slot is a component designed to be swapped with any other component without breaking its connection to the parent component. I refer to them as “swap slots.” Figma has long supported the ability to swap component instances with other elements from the library.?

Slots allow you to replace component content while maintaining control over parameters, ensuring design consistency. They are a powerful tool for flexibility and adaptation without the need to detach components or lose their original structure.

What are slots for?

The main purpose of using slots is to create new patterns or modify components without breaking their connection to the parent component. This is especially useful when you need to flexibly adjust specific parts of the design while maintaining the overall structure and inheritance of properties from the main component.

Example of using slots:

Take a simple example: a tooltip—an informative box that appears on hover or click. Its basic content is text, but you can optionally add a title or message. A slot in the tooltip allows you to insert additional elements or modify the content without disrupting the structure of the component. This ensures that the component remains intact and continues functioning as intended.

In practice, this looks like this: the instance ◇ Swap Me inside the slot can be replaced with any other component, while still allowing you to control the slot’s parameters—adjusting things like auto-layout, background, borders, and more. In the video, I demonstrated how this works.

How does this work in code?

Interestingly, this technique comes from frontend development. In popular frameworks like React and Vue, there’s a similar concept—slots or render functions—that allows you to insert content into predefined areas of a component. Without such mechanisms, creating flexible and reusable components would be almost impossible.

If you decide to implement slots in your design system, rest assured that frontend developers will support this decision. In Angular, this technique works a bit differently, but the core principles are similar.

Are there any limitations?

You can use slots almost without limitations, but there is an important nuance: if you assemble large organisms (big components) based on slots, it can cause positioning issues. Constant adjustments and corrections of such components can be quite troublesome. For example, I primarily use slots in molecules (small components), where such complexities are minimal, but this allows for minor improvements without the need to break the connection with the main component.

Features of Using Slots in Figma

Figma allows replacing nested components in instances, but often limits control over their parameters. For example, some parameters are inherited from the original component, which can lead to errors when making changes. To create a new organism from several components, you either have to assemble it separately or detach the instance. Slots solve this problem by increasing the flexibility and functionality of components.

Moreover, a slot can be replaced not only with a separate component but also with a group of slots — vertical or horizontal. Any elements can be placed in each of these slots. This provides greater freedom in creating complex and adaptive components.

However, there is a nuance: if there is already a group within the composition of slots (for example, a horizontal group with three elements), it will not be possible to insert another such group, as you cannot insert an instance into itself. To avoid this problem, additional levels of nesting are provided in the components.

Conclusion

Slots are a powerful tool. They allow you to flexibly change the content of components without breaking the connection with parent components and maintaining control over their parameters. This is especially useful for building design systems where it is necessary to maintain the versatility and flexibility of components.

If you need to change a component on the fly, slots will become your best friend. However, keep in mind that larger components may present difficulties, so it is better to use them in molecules. But in any case, this technique will allow you to stay on top of flexibility and adaptability in design.