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.

Practice

1. What does swapping instances in Figma allow you to do?
Swapping instances means:

easy

A. Replace one component instance with another while keeping custom changes

B. Delete a component from the design permanently

C. Create a new component from scratch

D. Group multiple layers into a frame

Solution

1. Step 1: Understand the purpose of swapping instances

   Swapping instances means replacing one component instance with another without losing custom edits like colors or text.

2. Step 2: Compare options with this definition

   Only Replace one component instance with another while keeping custom changes describes this behavior correctly; others describe unrelated actions.

3. Final Answer:

   Replace one component instance with another while keeping custom changes -> Option A

4. Quick Check:

   Swapping instances = Replace component keeping edits [OK]

Hint: Swapping keeps your edits but changes the base component [OK]

Common Mistakes:

• Thinking swapping deletes components
• Confusing swapping with creating new components
• Assuming swapping groups layers

2. Which of the following is the correct way to swap an instance in Figma?

easy

A. Delete the instance and insert the new component manually

B. Double-click the instance and type the new component name

C. Drag the new component over the instance and drop it

D. Right-click the instance and select 'Swap Instance', then choose the new component

Solution

1. Step 1: Recall the swapping method in Figma

   Swapping is done by right-clicking the instance and selecting 'Swap Instance' to pick a new component.

2. Step 2: Evaluate other options

   Double-clicking edits text, dragging replaces layers but not swap instance, deleting loses custom changes.

3. Final Answer:

   Right-click the instance and select 'Swap Instance', then choose the new component -> Option D

4. Quick Check:

   Swap via right-click menu = Right-click the instance and select 'Swap Instance', then choose the new component [OK]

Hint: Use right-click menu to swap instances quickly [OK]

Common Mistakes:

• Trying to swap by double-clicking
• Dragging components over instances thinking it swaps
• Deleting instance instead of swapping

3. Given a Figma file with a button component instance that has custom text 'Submit' and a red fill, what happens if you swap this instance with a different button component that has a blue fill and default text 'Click'? Choose the correct outcome.

medium

A. The instance keeps the old button's red fill and text 'Submit' without any change

B. The instance changes to the new button but resets text to 'Click' and fill to blue

C. The instance changes to the new button's shape, but keeps the red fill and the text 'Submit'

D. The instance disappears and must be recreated

Solution

1. Step 1: Understand what swapping preserves

   Swapping keeps custom overrides like text and fill color unless the new component lacks those properties.

2. Step 2: Apply this to the example

   The text 'Submit' and red fill are custom changes, so they remain after swapping to the new button shape and style.

3. Final Answer:

   The instance changes to the new button's shape, but keeps the red fill and the text 'Submit' -> Option C

4. Quick Check:

   Swapping keeps custom text and fill [OK]

Hint: Swapping keeps your edits, changes base component shape [OK]

Common Mistakes:

• Assuming swapping resets all properties
• Thinking swapping deletes the instance
• Believing swapping keeps old component shape

4. You tried swapping an instance in Figma but the custom color changes disappeared. What is the most likely cause?

medium

A. You swapped the instance with a frame instead of a component

B. The new component does not have the same color properties exposed for overrides

C. Swapping always resets all custom changes

D. You forgot to save the file before swapping

Solution

1. Step 1: Identify why custom colors might be lost

   If the new component lacks matching color properties exposed for overrides, custom colors cannot be preserved.

2. Step 2: Evaluate other options

   Saving the file doesn't affect swapping, swapping does not always reset changes, and swapping with a frame is not possible.

3. Final Answer:

   The new component does not have the same color properties exposed for overrides -> Option B

4. Quick Check:

   Missing override properties cause lost custom colors [OK]

Hint: Check if new component exposes same override properties [OK]

Common Mistakes:

• Assuming swapping always resets changes
• Blaming unsaved file for lost changes
• Trying to swap with non-component frames

5. You have a dashboard design with multiple instances of a card component, each customized with different text and colors. You want to update the card style globally by swapping all instances to a new card component with a modern look, but keep each card's custom text and colors. What is the best approach?

hard

A. Select all card instances and use the 'Swap Instance' option to replace them with the new card component

B. Manually replace each card instance by deleting and adding the new component, then reapply custom text and colors

C. Create a new frame and copy all custom text and colors into new card components inside it

D. Use the 'Detach Instance' option on all cards, then replace them with new components

Solution

1. Step 1: Understand the goal

   You want to update the base card style globally but keep each instance's custom text and colors intact.

2. Step 2: Evaluate methods

   Swapping all instances preserves custom overrides while updating the base component. Manual replacement loses overrides and wastes time. Detaching instances removes link to components, losing benefits.

3. Final Answer:

   Select all card instances and use the 'Swap Instance' option to replace them with the new card component -> Option A

4. Quick Check:

   Swap all instances to update style, keep custom edits [OK]

Hint: Swap all instances at once to keep custom edits and update style [OK]

Common Mistakes:

• Deleting and recreating instances losing customizations
• Detaching instances losing component benefits
• Copying text/colors manually wasting time