Overriding instance properties in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a product designer working with a design system in Figma.

📋 Request: Your manager wants you to create a dashboard prototype using components, but with customized colors and text for different sections without creating new components from scratch.

📊 Data: You have a set of base components for cards, buttons, and text styles. Each component has default properties like color, font size, and text content.

🎯 Deliverable: A Figma prototype dashboard where you override instance properties such as colors and text on component instances to reflect different data categories.

Sample Data

Component	Default Color	Default Text
Card	#FFFFFF (White)	Title
Button	#007AFF (Blue)	Click Me
Text	#000000 (Black)	Sample Text

1

Step 1: Insert instances of the Card component onto your Figma canvas for each dashboard section.

Drag and drop the Card component from the Assets panel onto the canvas three times.

Expected Result

Three Card instances appear on the canvas, each with white background and default title text.

2

Step 2: Override the background color property of each Card instance to represent different data categories.

Select each Card instance, then in the right panel under Fill, change the color to #FFCDD2 (light red), #C8E6C9 (light green), and #BBDEFB (light blue) respectively.

Expected Result

Each Card instance shows a different background color reflecting its category.

3

Step 3: Override the text content of the title inside each Card instance to match the category name.

Double-click the title text inside each Card instance and change it to 'Sales', 'Marketing', and 'Support'.

Expected Result

Each Card instance displays the correct category title.

4

Step 4: Insert Button component instances inside each Card and override their text to reflect actions.

Drag Button component into each Card instance, then change button text to 'View Sales', 'View Marketing', and 'View Support'.

Expected Result

Buttons inside each Card show customized text matching the section.

5

Step 5: Override the Button color property to match the Card background for visual harmony.

Select each Button instance and change Fill color to a darker shade of the Card's background color: #D32F2F, #388E3C, #1976D2.

Expected Result

Buttons have colors that complement their Card backgrounds.

Final Result

Dashboard Prototype
+-----------------------+  +-----------------------+  +-----------------------+
| Card (Sales)          |  | Card (Marketing)      |  | Card (Support)        |
| Background: Light Red |  | Background: Light Green|  | Background: Light Blue |
| Title: Sales          |  | Title: Marketing      |  | Title: Support        |
| [View Sales Button]   |  | [View Marketing Button]|  | [View Support Button] |
+-----------------------+  +-----------------------+  +-----------------------+

✓Instance properties like color and text can be overridden without changing the original component.

✓Overriding allows quick customization for different dashboard sections.

✓Maintains consistency while enabling flexibility in design.

Bonus Challenge

Create a new dashboard section by duplicating a Card instance and override multiple properties including font size, color, and button text.

Show Hint

Select the duplicated Card instance, then override text properties and use the Fill and Text panels to adjust colors and font sizes.