Component properties (text, boolean, instance swap) in Figma - Real Business Scenario

Scenario Mode

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

📋 Request: Your manager wants a reusable dashboard component that can show different sales regions, toggle visibility of a sales summary, and swap between chart types easily.

📊 Data: You have a Figma file with base components: a text label for region name, a sales summary box, and two chart types (bar chart and line chart).

🎯 Deliverable: Create a Figma component with text, boolean, and instance swap properties so users can customize region name, show/hide sales summary, and switch chart types in instances.

Sample Data

Component Part	Property Type	Options/Values
Region Name Label	Text	Any region name (e.g., East, West)
Sales Summary Box	Boolean	Visible (true) or Hidden (false)
Chart Area	Instance Swap	Bar Chart or Line Chart

1

Step 1: Create a new component named 'Sales Dashboard Card' in Figma.

Select the base frame containing the region label, sales summary box, and chart area. Right-click and choose 'Create Component'.

Expected Result

A new component named 'Sales Dashboard Card' appears in the Assets panel.

2

Step 2: Add a text property to the region name label so it can be customized in instances.

Select the text layer for the region name inside the component. In the right sidebar under 'Component Properties', click '+' and choose 'Text'. Name it 'Region Name'.

Expected Result

The region name text becomes editable in component instances.

3

Step 3: Add a boolean property to toggle the visibility of the sales summary box.

Select the sales summary box layer. In 'Component Properties', add a new property of type 'Boolean' named 'Show Summary'. Link this property to the visibility of the sales summary box layer.

Expected Result

In instances, users can check or uncheck 'Show Summary' to show or hide the sales summary box.

4

Step 4: Add an instance swap property to switch between bar chart and line chart in the chart area.

Select the chart area frame. Replace it with a component set containing two variants: 'Bar Chart' and 'Line Chart'. In the main component, add a 'Variant' property named 'Chart Type' linked to this component set.

Expected Result

In instances, users can swap the chart type between bar chart and line chart using the 'Chart Type' dropdown.

5

Step 5: Test the component by creating an instance and customizing all properties.

Drag an instance of 'Sales Dashboard Card' onto the canvas. Change 'Region Name' text to 'West'. Toggle 'Show Summary' off. Swap 'Chart Type' to 'Line Chart'.

Expected Result

The instance updates to show 'West' as region, hides the sales summary box, and displays the line chart.

Final Result

┌───────────────────────────────┐
│ Sales Dashboard Card Instance  │
├───────────────────────────────┤
│ Region Name: West              │
│ [ ] Show Summary (hidden)      │
│ Chart Type: Line Chart         │
│                               │
│      (Line Chart Visual)       │
└───────────────────────────────┘

✓Text property allows easy customization of region names without editing the component.

✓Boolean property controls visibility, making the sales summary optional per instance.

✓Instance swap property enables quick switching between chart types for different data views.

✓Combining these properties makes the component flexible and reusable for various dashboard needs.

Bonus Challenge

Add a color property to the component to let users change the background color of the dashboard card in instances.

Show Hint

Use a 'Color' component property linked to the background rectangle's fill color.

Practice

1. What is the main purpose of using component properties in Figma?

easy

A. To export components as images

B. To customize parts of a component without creating new components

C. To change the color of the entire Figma file

D. To delete unused components automatically

Solution

1. Step 1: Understand component properties

   Component properties allow you to change parts inside a component without making a new one.

2. Step 2: Identify the main benefit

   This saves time and keeps designs consistent by reusing the same component with variations.

3. Final Answer:

   To customize parts of a component without creating new components -> Option B

4. Quick Check:

   Component properties = customize parts [OK]

Hint: Think: change parts, not whole component [OK]

Common Mistakes:

• Confusing properties with exporting features
• Thinking properties change whole file colors
• Assuming properties delete components

2. Which of the following is the correct way to create a boolean property in a Figma component?

easy

A. Use the boolean property type and toggle it on or off

B. Add a text field and type 'true' or 'false'

C. Swap the instance with another component

D. Change the component's fill color

Solution

1. Step 1: Identify boolean property usage

   Boolean properties in Figma are toggles that switch between true or false states.

2. Step 2: Recognize correct creation method

   You create a boolean property by selecting the boolean type and toggling it on or off, not by typing text or swapping instances.

3. Final Answer:

   Use the boolean property type and toggle it on or off -> Option A

4. Quick Check:

   Boolean property = toggle true/false [OK]

Hint: Boolean means toggle on/off, not typing text [OK]

Common Mistakes:

• Typing 'true' or 'false' in text instead of using boolean
• Confusing instance swap with boolean property
• Changing colors instead of property type

3. Given a component with a text property named Label set to "Submit", what will happen if you change the Label property to "Send" in an instance?

medium

A. The text property will be removed from the instance

B. The main component's text changes to "Send" for all instances

C. The text inside the instance changes to "Send" without affecting the main component

D. The instance will break and show an error

Solution

1. Step 1: Understand text property behavior

   Text properties allow instances to override text without changing the main component.

2. Step 2: Apply to the example

   Changing the Label property in an instance updates only that instance's text to "Send".

3. Final Answer:

   The text inside the instance changes to "Send" without affecting the main component -> Option C

4. Quick Check:

   Text property override = instance text change only [OK]

Hint: Instance text changes, main stays same [OK]

Common Mistakes:

• Thinking main component text changes
• Expecting errors on property change
• Assuming property gets deleted

4. You tried to swap an instance property with another component, but the swap option is grayed out. What is the most likely cause?

medium

A. The components are not from the same component set or variant group

B. You forgot to select the boolean property first

C. Text properties cannot be swapped

D. You need to restart Figma to enable swapping

Solution

1. Step 1: Understand instance swap rules

   Instance swap works only between components in the same set or variant group.

2. Step 2: Identify cause of grayed swap

   If swap is disabled, it usually means the components are unrelated or not grouped properly.

3. Final Answer:

   The components are not from the same component set or variant group -> Option A

4. Quick Check:

   Swap enabled only in same variant group [OK]

Hint: Swap only works within same variant group [OK]

Common Mistakes:

• Trying to swap unrelated components
• Confusing boolean property with instance swap
• Restarting app unnecessarily

5. You have a button component with a boolean property IsDisabled that toggles the button's color and disables clicks. How would you set up the component properties to allow instance users to swap the icon inside the button easily?

hard

A. Change the main component's icon directly for all instances

B. Add a boolean property for the icon and toggle it on/off

C. Add a text property and type the icon name manually

D. Add an instance swap property linked to a set of icon components

Solution

1. Step 1: Understand instance swap property

   Instance swap lets users replace parts like icons by choosing from predefined components.

2. Step 2: Apply to icon swapping

   To let users swap icons easily, add an instance swap property linked to icon components.

3. Step 3: Avoid incorrect methods

   Boolean toggles can't swap icons; text properties require manual typing; changing main affects all instances.

4. Final Answer:

   Add an instance swap property linked to a set of icon components -> Option D

5. Quick Check:

   Instance swap = easy icon replacement [OK]

Hint: Use instance swap for easy icon changes [OK]

Common Mistakes:

• Using boolean for icon swap
• Typing icon names instead of swapping
• Changing main component icon directly