Component properties (text, boolean, instance swap) in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Boolean Component Properties

In Figma, you create a component with a boolean property named ShowIcon. When ShowIcon is true, an icon appears in the component instance; when false, it disappears.

What is the main benefit of using a boolean property for this?

A It locks the icon so it cannot be edited in instances.

B It automatically changes the icon color based on user interaction.

C It allows toggling the icon visibility without creating multiple component variants.

D It duplicates the component to create separate files for each icon state.

💡 Hint

Think about how boolean properties simplify design variations.

Boolean properties let you toggle features like icon visibility inside one component, avoiding multiple variants and making design updates easier.

❓ dax_lod_result

intermediate

Using Text Component Properties for Dynamic Labels

You have a Figma component with a text property called ButtonLabel. You create two instances: one with ButtonLabel set to 'Submit' and another set to 'Cancel'.

What will be the text shown in each instance?

A The text property cannot be changed in instances.

B Both instances show the default label from the main component.

C Both instances show 'ButtonLabel' as literal text.

D The first instance shows 'Submit' and the second shows 'Cancel'.

💡 Hint

Text properties let you customize labels per instance.

Text properties allow each instance to display different text, so 'Submit' and 'Cancel' appear as set.

❓ visualization

advanced

Instance Swap Property Usage

You have a component with an instance swap property called IconType that can swap between three icon components: SearchIcon, CloseIcon, and MenuIcon.

Which visualization best shows how the instance swap property affects the component?

A A single component with a dropdown to select and display one of the three icons inside it.

B A component that changes color but keeps the same icon regardless of selection.

C Three separate components each with a fixed icon and no swapping ability.

D A text label that changes based on icon selection but does not swap icons.

💡 Hint

Instance swap lets you replace parts inside a component dynamically.

Instance swap properties allow swapping nested components, so a dropdown selecting icons inside one component is the correct visualization.

🔧 Formula Fix

advanced

Troubleshooting a Boolean Property Not Working

You created a boolean property ShowBadge in a component to toggle a badge's visibility. However, when you toggle it in instances, the badge never appears or disappears.

What is the most likely cause?

A The badge layer is not linked to the boolean property visibility in the main component.

B Boolean properties only work with text layers, not shapes like badges.

C You must create separate variants instead of using boolean properties.

D The boolean property name must start with 'Is' to work.

💡 Hint

Check how the boolean property controls layers inside the main component.

Boolean properties control visibility by linking to layer visibility in the main component. If not linked, toggling does nothing.

🎯 Scenario

expert

Designing a Flexible Button Component

You need to design a button component in Figma that supports:

• Changing the button text
• Showing or hiding an icon
• Swapping the icon between different styles

Which combination of component properties should you use?

A Use a boolean property for text changes, a text property for icon visibility, and instance swap for button color.

B Use a text property for the button label, a boolean property to toggle icon visibility, and an instance swap property to select the icon style.

C Use only multiple variants for each combination of text, icon visibility, and icon style.

D Use instance swap for text, boolean for icon style, and text property for icon visibility.

💡 Hint

Think about which property type fits each feature best.

Text properties are for editable text, boolean for toggling visibility, and instance swap for swapping nested components like icons.