How Do You Switch Components in Figma?

The question "How do you switch components in Figma?" can be interpreted in two primary ways: either changing the state of a specific type of component like a toggle switch, or replacing one component instance with a completely different one. Below, we'll explore both possibilities.

Understanding "Switching Components"

In Figma, "switching components" can refer to:

1. Modifying the state of a component instance that is designed with different states (like turning a toggle switch on or off).
2. Replacing one component instance on your canvas with an instance from a different master component in your library.

Let's look at how to perform each action.

Option 1: Changing the State of a "Switch" Component Instance

When talking about a "Switch" component, we often refer to a UI element designed to represent a binary choice, similar to a toggle.

What is a "Switch" Component?

As defined, a Figma Switch is a user interface component that represents a binary option, allowing users to toggle between two states. It typically consists of visual elements like a track and a thumb (or handle).

How to Change Its State in Design Mode

If the Switch component was built using Variants, changing its state is straightforward:

1. Select the specific instance of the Switch component on your canvas.
2. Look at the Properties section in the right-hand sidebar.
3. You will see dropdown menus corresponding to the variant properties defined for the component (e.g., State, Theme, Size).
4. Click the dropdown for the state property (like State) and select the desired state (e.g., On, Off).

This instantly updates the appearance of the selected component instance on your canvas.

How to Change Its State in Prototype Mode

For interactive prototypes, you can set up interactions that change the component's state when clicked or dragged, simulating how a user would interact with a real switch.

1. Switch to the Prototype tab in the right-hand sidebar.
2. Select the Switch component instance.
3. Add an interaction (e.g., "On click," "On drag").
4. Set the action to "Change to" and select the desired variant (state) of the same component.

In the prototype view, you can then interact with the component, and as the reference states, the thumb (or handle) can be dragged or clicked to change its position, indicating the current state of the switch.

Option 2: Swapping One Component Instance for Another

This process involves replacing an existing instance on your canvas with an instance from a different master component available in your project or linked libraries.

Here's how to do it:

1. Select the component instance you wish to replace on your canvas.
2. Look at the right-hand sidebar. In the Layer section, you'll see the name of the current master component displayed next to the component icon (often a diamond).
3. Click on the current component's name or the dropdown arrow next to it. This opens the Instance Swap menu.
4. The Instance Swap menu shows a list of available components. You can browse through local components, components from enabled libraries, or use the search bar at the top to find a specific component by name.
5. Click on the name of the component you want to swap to.

The selected instance on your canvas will be replaced by an instance of the new component you chose. Figma attempts to preserve certain overrides, such as text content or color changes, where possible between the old and new components.

This method is incredibly useful for iterating on designs or replacing placeholder components with final versions from a design system.

Whether you're changing the state of a specific "Switch" component or swapping one component for another entirely, Figma provides intuitive methods through the right-hand sidebar in both Design and Prototype modes.