Swap content using "swap"

When working with components in Figma, you will often want to customise content without losing the connection to Designsystemet. Detaching a component solves this quickly, but means you miss out on future updates from the library.

With swap, you can keep the connection and replace content when needed. This provides flexibility while the structure and styling remain unchanged.

What is swap?

Swap lets you replace one component with another directly in an instance. When a component is selected, you will find the instance menu in the right-hand panel in Figma.

In the video below, we replace the body in the Alert component with a custom component containing text, details, and buttons.

Why use swap?

• Keeps the connection to the library. Changes to the main component are inherited automatically.
• Provides flexibility. You can vary content without changing the structure.
• Ensures consistency. Design and behaviour are defined by Designsystemet.

Slot areas in components

Several of our components include built-in slots, as we cannot anticipate every type of content you may need. This applies to components such as Card, Details, and Dialog.

A slot is an open area within a component where you can place your own content. This can range from simple text to more complex combinations of components.

If the content consists of multiple elements, we recommend grouping them into a separate component and placing it in the slot using swap, as shown in the video above.