Use Boolean and Text properties to build a flexible card component

WHAT THIS TESTS: This question evaluates whether you understand modern Figma component architecture beyond basic variants. Senior designers and design-system engineers are expected to use component properties to reduce variant proliferation and preserve instance editability. The interviewer wants to see that you can combine Boolean and Text properties with auto layout to create a single, flexible component that adapts to content changes without detaching or swapping.

A GOOD ANSWER COVERS: Four specific implementation choices in order. First, the image should live inside an auto-layout frame or layer group that has a Boolean property applied directly to its visibility toggle. This lets consumers show or hide the image from the properties panel without deleting layers. Second, the title and description text layers each need a Text property so content editors can override copy directly on the instance while the component stays intact. Third, the card must use auto layout with hug contents and conditional spacing so that hiding the image automatically collapses the gap and reflows the remaining text blocks. Fourth, you should explicitly state that variants are reserved for structural differences like horizontal versus vertical layouts, not for content presence or absence.

COMMON WRONG ANSWERS: The biggest red flag is suggesting two variants such as Card with Image and Card without Image. That approach explodes the variant table as soon as you add another optional element and forces consumers to swap components to change content, which destroys nested overrides. Another weak answer is recommending that users simply delete the image layer on the instance; this breaks the component link and creates drift. Some candidates also forget to mention auto layout, implying they would manually nudge text layers when the image disappears, which signals a lack of production-ready systems thinking.

LIKELY FOLLOW-UPS: The interviewer may ask how you would handle an optional button row or metadata tag beneath the description. They might also probe what happens if the image needs three distinct aspect ratios, which is the boundary where variants become appropriate. Another common pivot is asking how you would document these properties for consumers or how you would structure the same card in code using props and conditional rendering.

ONE CONCRETE EXAMPLE: Imagine a news card in a design system. The main component has a top frame containing a placeholder image with a Boolean property named Show Image defaulting to true. Below it, a vertical auto-layout stack holds a headline text layer with a Text property named Headline and a body text layer with a Text property named Description. When a designer drops the card into a wireframe and toggles Show Image off, the image frame collapses to zero height and the text stack shifts up automatically because the auto-layout gap is set to hug contents. The designer then types Breaking News into the Headline field directly on the instance without detaching the component. If the system later adds an optional author line, you extend the same pattern with another Boolean and Text property rather than duplicating variants.