How would you structure a complex reusable Figma table with Auto Layout?

WHAT THIS TESTS: This question evaluates whether you can architect multi-level component hierarchies in Figma rather than just draw static rectangles. The interviewer wants to see that you understand how hug and fill constraints interact inside nested Auto Layout frames, how component properties reduce variant sprawl, and how to balance flexibility with maintainability in a design system.

A GOOD ANSWER COVERS: Four layers in order. First, the cell primitive: a base component that uses hug contents for height and fill container or fixed width for columns, containing a text layer or a nested avatar or badge component. Second, the row component: a horizontal Auto Layout frame set to fill container width, holding multiple cell instances; each cell can be swapped via component properties or nested instances to show text, avatar, or status badges. Third, the table body: a vertical Auto Layout frame that stacks row components, allowing variable row heights because each row hugs its own content. Fourth, the column resizing strategy: use fill container on cells so they stretch with the parent frame, or combine fixed-width columns with a fill column for the remaining space, and show that you would use a header row with matching cell widths to keep alignment.

COMMON WRONG ANSWERS: Flattening the entire table into one giant component with no nesting, which kills reusability. Using manual resizing for every column instead of Auto Layout constraints, making updates impossible. Creating a separate variant for every possible row permutation, leading to variant explosion, rather than using component properties and nested instance swaps. Ignoring hug versus fill and saying you would just eyeball row heights. Suggesting that Auto Layout cannot handle tables, which reveals a gap in modern Figma fluency.

LIKELY FOLLOW-UPS: How would you handle horizontal scrolling versus responsive truncation? What happens when a cell needs to expand to two lines of text? How would you document this component for developers, especially spacing tokens? Would you use variables for column widths or stick to frame resizing? How do you handle empty states or loading skeletons inside the same structure?

ONE CONCRETE EXAMPLE: Imagine a user directory table. The base cell component has a text layer set to hug height and fill width. A variant of that cell swaps the text for an avatar group or a status badge using nested instances. The row component is a horizontal Auto Layout frame with four cells: one fixed width for the avatar, one fill for the name, one fixed for the role badge, and one fixed for the status dot. The row itself hugs height so it grows if the name wraps. The table frame stacks ten rows vertically with zero gap. When the designer drags the table frame wider, the name column stretches because it is set to fill, while the avatar, badge, and status columns stay fixed. Changing a row from a text cell to a badge cell is a single component property toggle, not a new variant.

Source: Untitled UI