Swapping instances in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer using Figma to create interactive reports.

📋 Request: Your manager wants you to demonstrate how to swap instances of components in a dashboard design to quickly change visual styles without rebuilding layouts.

📊 Data: You have a Figma file with a dashboard layout containing multiple instances of a 'Card' component in different styles (e.g., light and dark themes).

🎯 Deliverable: Create a Figma file showing a dashboard with cards, then swap instances of the cards to change their styles while keeping the layout intact.

Sample Data

Card Name	Instance Style	Content
Sales Card	Light Theme	Monthly Sales: $50,000
Profit Card	Light Theme	Monthly Profit: $12,000
Customer Card	Dark Theme	New Customers: 300
Growth Card	Dark Theme	Growth Rate: 5%

1

Step 1: Open your Figma dashboard file containing the card instances.

Locate the 'Sales Card' instance with the Light Theme style.

Expected Result

You see the Sales Card displayed with the Light Theme style.

2

Step 2: Select the 'Sales Card' instance on the canvas.

Right-click the instance and choose 'Swap Instance' from the context menu.

Expected Result

The Swap Instance panel opens showing available component variants.

3

Step 3: In the Swap Instance panel, select the 'Dark Theme' variant of the 'Sales Card' component.

Click on the Dark Theme variant to replace the current Light Theme instance.

Expected Result

The Sales Card instance changes to the Dark Theme style, keeping its position and content.

4

Step 4: Repeat the swap for the 'Profit Card' instance from Light Theme to Dark Theme.

Select the Profit Card instance, right-click, choose 'Swap Instance', and select Dark Theme variant.

Expected Result

Profit Card instance updates to Dark Theme style without layout changes.

5

Step 5: Verify that the layout and content remain unchanged after swapping instances.

Check that all cards keep their positions and text content is intact.

Expected Result

Dashboard layout is consistent; only card styles have changed.

Final Result

Dashboard Layout
+----------------+  +----------------+
| Sales Card     |  | Profit Card    |
| (Dark Theme)   |  | (Dark Theme)   |
| Monthly Sales  |  | Monthly Profit |
| $50,000       |  | $12,000       |
+----------------+  +----------------+
+----------------+  +----------------+
| Customer Card  |  | Growth Card    |
| (Dark Theme)   |  | (Dark Theme)   |
| New Customers  |  | Growth Rate    |
| 300           |  | 5%            |
+----------------+  +----------------+

Bonus Challenge

Create a toggle button in Figma that swaps all card instances between Light and Dark themes with one click.

Show Hint

Use Figma Variants and Interactive Components to link the toggle button to swap instance states.