Overriding instance properties in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Instance Property Overrides

In Figma, when you override a property of an instance, what happens to the original component's property?

A The instance loses the ability to override that property again.

B The instance automatically updates to match any changes in the original component's property.

C The original component's property is permanently changed for all instances.

D The instance keeps its own value, ignoring changes to the original component's property.

💡 Hint

Think about how overrides allow customization without affecting the master component.

When you override a property in an instance, that instance uses its own value for that property. Changes to the original component's property won't affect the overridden property in that instance.

🎯 Scenario

intermediate

Overriding Text in Multiple Instances

You have a button component with default text 'Submit'. You create three instances and override the text in each to 'Save', 'Send', and 'Upload'. Later, you change the default text in the main component to 'Confirm'. What text will appear in each instance?

A Instances show 'Save', 'Send', and 'Upload' as overridden; none change to 'Confirm'.

B All instances revert to 'Submit' ignoring overrides.

C Only the instance with no override changes to 'Confirm'; others keep their text.

D All instances show 'Confirm' because the main component changed.

💡 Hint

Overrides protect instance properties from changes in the main component.

Since all three instances have overridden the text, they keep their custom text. Changes to the main component's text do not affect overridden properties.

❓ dax_lod_result

advanced

Calculating Overridden Property Counts

Imagine a dataset of component instances with a column 'IsOverridden' (TRUE/FALSE). You want to calculate the percentage of instances that have overridden properties.

Which DAX measure correctly calculates this percentage?

A Override Percentage = DIVIDE(CALCULATE(COUNTROWS(Instances), Instances[IsOverridden] = TRUE()), COUNTROWS(Instances), 0)

B Override Percentage = COUNTROWS(FILTER(Instances, Instances[IsOverridden] = TRUE())) / COUNTROWS(Instances)

C Override Percentage = CALCULATE(COUNTROWS(Instances), Instances[IsOverridden] = TRUE()) * 100

D Override Percentage = COUNTROWS(Instances) / COUNTROWS(FILTER(Instances, Instances[IsOverridden] = TRUE()))

💡 Hint

Use DIVIDE to avoid division by zero errors and CALCULATE to filter rows.

Option A uses CALCULATE to count overridden instances, divides by total instances, and uses DIVIDE to safely handle division.

🔧 Formula Fix

advanced

Fixing Incorrect Override Count Measure

A DAX measure to count overridden instances is written as:

OverrideCount = COUNTROWS(FILTER(Instances, Instances[IsOverridden] == TRUE()))

Why does this measure cause an error?

A The column 'IsOverridden' must be aggregated before filtering.

B COUNTROWS cannot be used with FILTER in DAX.

C The '==' operator is invalid in DAX; it should be a single '='.

D FILTER requires a table, but Instances is a column.

💡 Hint

Check the syntax for comparison operators in DAX.

DAX uses a single '=' for comparison, not '=='. Using '==' causes a syntax error.

❓ visualization

expert

Designing a Dashboard to Show Override Impact

You want to create a dashboard that shows how many instances have overridden properties and how those overrides affect component usage over time.

Which visualization setup best communicates this information?

A A scatter plot with instance IDs on X-axis and override status on Y-axis, colored by component type.

B A stacked bar chart showing counts of overridden vs non-overridden instances by month, plus a line chart showing total instances over time.

C A pie chart showing the percentage of overridden instances, with a table listing all instance names.

D A single KPI card showing total number of instances without any breakdown.

💡 Hint

Think about combining categorical and time series data for clear insights.

Option B uses a stacked bar chart to compare overridden vs non-overridden counts over time, and a line chart to show overall trends, making it easy to see impact and usage.

Practice

1. What does overriding instance properties in Figma allow you to do?

easy

A. Create a new component from scratch

B. Customize parts of an instance without changing the original component

C. Delete the original component permanently

D. Lock the instance to prevent changes

Solution

1. Step 1: Understand instance and component relationship

   An instance is a copy of a component that inherits its properties.

2. Step 2: Recognize what overriding means

   Overriding lets you change specific properties of an instance without affecting the original component.

3. Final Answer:

   Customize parts of an instance without changing the original component -> Option B

4. Quick Check:

   Overriding = Customize instance only [OK]

Hint: Remember: override changes instance, not original [OK]

Common Mistakes:

• Thinking overriding deletes the original component
• Confusing overriding with creating new components
• Believing overriding locks the instance

2. Which of the following is the correct way to override the text property of an instance in Figma?

easy

A. Double-click the instance and edit the text directly

B. Edit the original component's text

C. Right-click and select 'Detach Instance'

D. Use the 'Lock' option on the instance

Solution

1. Step 1: Identify how to edit instance text

   Double-clicking an instance allows direct editing of its text property.

2. Step 2: Understand difference from editing component

   Editing the original component changes all instances, not just one.

3. Final Answer:

   Double-click the instance and edit the text directly -> Option A

4. Quick Check:

   Edit instance text = Double-click instance [OK]

Hint: Double-click instance to change text quickly [OK]

Common Mistakes:

• Editing the original component instead of the instance
• Detaching instance unnecessarily
• Locking instance instead of editing

3. Given a component with a blue rectangle and text 'Hello', if you override the rectangle color to red in an instance, what will happen when you update the original component's rectangle color to green?

medium

A. The instance rectangle changes to green, text changes to original component's text

B. The instance rectangle changes to green, text changes to 'Hello'

C. The instance rectangle stays red, text remains 'Hello'

D. The instance rectangle stays red, text changes to original component's text

Solution

1. Step 1: Understand property overriding behavior

   Overridden properties in an instance stay as set, ignoring component updates for those properties.

2. Step 2: Apply to rectangle color and text

   Rectangle color overridden to red stays red; text not overridden remains synced with component ('Hello').

3. Final Answer:

   The instance rectangle stays red, text remains 'Hello' -> Option C

4. Quick Check:

   Overridden color stays, non-overridden text syncs [OK]

Hint: Overridden properties ignore component updates [OK]

Common Mistakes:

• Assuming all instance properties update with component
• Thinking overridden text changes automatically
• Confusing overridden and non-overridden properties

4. You tried to override the fill color of an instance, but the color did not change. What is the most likely reason?

medium

A. The fill color is locked in the original component

B. You edited the original component instead of the instance

C. The instance is detached from the component

D. You did not select the fill property in the instance

Solution

1. Step 1: Check if fill color can be overridden

   Some properties like fill color can be locked in the component, preventing overrides.

2. Step 2: Understand why color didn't change

   If locked, changing fill on instance has no effect; you must unlock in component.

3. Final Answer:

   The fill color is locked in the original component -> Option A

4. Quick Check:

   Locked property blocks override [OK]

Hint: Check if property is locked before overriding [OK]

Common Mistakes:

• Editing original component instead of instance
• Assuming detaching fixes override issues
• Forgetting to select the correct property

5. You have a button component with text and background color. You want to create an instance with a different text and a different icon image, but keep the background color linked to the component. How should you override the instance properties?

hard

A. Override all properties including background color to new values

B. Create a new component for the different text and icon

C. Detach the instance and edit all properties freely

D. Override the text and icon image properties only, leave background color unchanged

Solution

1. Step 1: Identify which properties to override

   To keep background color linked, do not override it; override only text and icon image.

2. Step 2: Understand impact of overriding background color

   Overriding background color breaks link to component updates; avoid if you want consistency.

3. Final Answer:

   Override the text and icon image properties only, leave background color unchanged -> Option D

4. Quick Check:

   Override selective properties to keep component link [OK]

Hint: Override only what changes, keep others linked [OK]

Common Mistakes:

• Overriding background color unnecessarily
• Detaching instance losing component benefits
• Creating new component instead of overriding