How do you use boolean properties for optional icon and chevron?

WHAT THIS TESTS: This question checks whether you understand how to use Figma component properties to control layer visibility and avoid combinatorial variant explosion. The interviewer wants to see that you can model optional UI elements with boolean properties rather than static variants, keeping the design system maintainable and the instance controls consolidated.

A GOOD ANSWER COVERS: First, you create a single main component for the list item that contains the text layer, an icon layer on the left, and a chevron layer on the right. Second, you add a boolean property named something like show icon and bind it to the icon layer visibility, then add a show chevron boolean bound to the chevron layer visibility. Third, you explain that this lets one component cover all four states: text only, icon only, chevron only, and both icon and chevron. Fourth, you note that consumers editing an instance will see clean toggles in the right panel without needing to dig into layers or documentation.

COMMON WRONG ANSWERS: A major red flag is suggesting you create four separate variants for every combination of icon and chevron presence, which scales terribly when you later add more optional elements. Another mistake is saying you will manually hide layers on instances using the layers panel, because that breaks component updates and forces designers to hunt for nested overrides. It is also weak to suggest using instance swap properties for this use case, since swap props are meant for replacing one component with another, not for simple show and hide behavior.

LIKELY FOLLOW-UPS: The interviewer might ask how you would handle an optional badge or a third optional element without creating eight variants, which is another chance to mention adding another boolean property. They could also ask how you would communicate intended usage to other designers, where you should mention adding property descriptions and documentation links. Another follow-up might be how boolean properties interact with variant properties, such as using variants for size or state while using booleans for optional elements.

ONE CONCRETE EXAMPLE: Imagine a settings row in a mobile app. The row always has a label. Sometimes it shows a wifi icon on the left, sometimes a right chevron to indicate navigation, sometimes both, and sometimes neither. Instead of four variants, you build one list item component with two boolean toggles. A designer placing the component in a settings screen simply flips show icon to true and show chevron to false for the wifi row, or toggles both off for a plain informational row. This keeps the component set small and the overrides panel predictable.