How would you structure a flexible data table component in Figma?

WHAT THIS TESTS: This question evaluates whether you can architect multi-layered Figma components that balance flexibility with usability. Interviewers want to see that you understand the difference between variant properties, boolean properties, and instance swap properties, and that you know how to combine them without creating an unmaintainable explosion of variants. They are also checking for auto layout fluency and whether you think about the consumer, meaning other designers who will drag this into their files.

A GOOD ANSWER COVERS: A strong response starts with atomic cell primitives. You would create separate base components for a text cell, avatar cell, and status badge cell, then expose them via instance swap properties so any cell in the row can be exchanged without detaching. Next, you would build the row as an auto layout container with a boolean property to show or hide the leading checkbox, avoiding dead space when it is off. For row states, you use variant properties sparingly, typically just for default, hover, and selected, keeping the matrix small. You then nest the row inside a table organism, using auto layout with fill containers so columns can stretch across different frame widths. Finally, you mention documentation, such as a cover sheet or readme component, explaining which properties to toggle.

COMMON WRONG ANSWERS: The biggest red flag is proposing one giant component with dozens of variants for every combination of cell type and state, which creates a maintenance nightmare. Another warning sign is suggesting designers detach instances to change cell content, which breaks updates. Saying you would use separate pages for hover and selected states instead of variant properties also signals weak component modeling.

LIKELY FOLLOW-UPS: Expect the interviewer to ask how you would handle sorting indicators, empty states, or pagination controls. They might also probe performance by asking how many variants is too many for a single component, or how you would structure a table header that supports draggable columns.

ONE CONCRETE EXAMPLE: Imagine a user directory table. The row component has a boolean for the checkbox, three variant states, and four cell slots. Each slot uses an instance swap property defaulting to a text cell. A designer drops the row into a table frame, swaps the first slot to an avatar component, the third to a status badge, toggles the checkbox on, and sets the state to selected. The row auto layout adjusts to the frame width, and the selected state background color updates everywhere because nothing is detached.