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.