Component instances in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Component Instances in Figma

Which statement best describes a component instance in Figma?

A A copy of a component that inherits properties from the main component but can have some overrides.

B A group of layers that cannot be reused across different files.

C An independent design element that can be edited without affecting the original component.

D A locked layer that prevents any changes in the design.

💡 Hint

Think about how changes in the main component affect its copies.

A component instance is a copy of a main component that inherits its properties. You can override some properties like text or colors, but structural changes come from the main component.

❓ visualization

intermediate

Identifying Component Instances in a Figma File

You have a Figma file with multiple buttons. How can you visually identify which buttons are component instances?

A They have a blue outline and a diamond icon in the layers panel.

B They have a purple outline and a diamond icon in the layers panel.

C They have a green outline and a star icon in the layers panel.

D They have no outline and a circle icon in the layers panel.

💡 Hint

Look for the color and icon that Figma uses for instances.

In Figma, component instances are marked with a purple outline and a diamond icon in the layers panel, distinguishing them from main components and regular groups.

❓ data_modeling

advanced

Overriding Properties in Component Instances

Which of the following properties cannot be overridden in a component instance in Figma?

A Text content inside a text layer.

B Fill color of a shape layer.

C Adding new layers inside the instance.

D Position and size of the instance itself.

💡 Hint

Think about what changes affect the main component structure.

You cannot add new layers inside a component instance. To add layers, you must edit the main component. Overrides are limited to existing properties like text, colors, and position.

🔧 Formula Fix

advanced

Why Does My Component Instance Not Update?

You updated the main component in Figma, but some instances did not reflect the changes. What is the most likely reason?

A The instances were detached from the main component.

B The instances are locked layers preventing updates.

C The main component was deleted accidentally.

D The file is in offline mode and cannot sync changes.

💡 Hint

Consider what happens when you detach an instance.

When you detach an instance, it becomes a regular group and no longer updates with changes to the main component.

🎯 Scenario

expert

Managing Nested Component Instances

You have a main component called Card that contains a nested component called Button. You want to change the button color across all cards without affecting other buttons outside cards. What is the best approach?

A Detach the button instances inside cards and recolor them individually.

B Edit the <em>Button</em> main component directly to change its color.

C Override the button color in each card instance manually.

D Create a new variant of the <em>Button</em> component and swap nested instances inside <em>Card</em> to this variant.

💡 Hint

Think about how to apply changes only to nested buttons inside cards.

Creating a new variant of the Button component and swapping nested instances inside Card allows you to change button color only within cards without affecting other buttons.