How do you optimize nested Auto Layout for performance?

What's really being asked

This question evaluates whether a candidate understands that Figma's performance degrades as layer count and nesting depth increase, particularly when nested auto layout frames must recalculate constraints on every resize or content change. Seniors should demonstrate architectural discipline by choosing the right layout primitive rather than stacking convenience frames.

The full answer

First, flatten hierarchy by using Grid for two-dimensional bento or dashboard layouts instead of nesting vertical auto layout frames inside horizontal ones, which doubles the constraint calculation chain. Second, use Wrap on horizontal flows to push items to the next line natively rather than creating separate row containers. Third, audit and remove redundant group frames that do not add padding, spacing, or alignment; every frame is a layout node that must be evaluated. Fourth, prefer component instances with boolean properties and variant swaps over detached frames or one-off copies, because instances share a master definition and reduce unique layer objects. Fifth, avoid invisible spacer layers or absolute-positioned hack elements to force alignment; they add layers and break the responsive contract.

The mistakes people make

A junior candidate might suggest flattening the design into static frames with manual positioning to speed things up, which sacrifices responsiveness. Another red flag is recommending invisible rectangles or spacer components to push content around; this increases layer count without adding semantic value. Proposing to detach all components into raw frames is also wrong, as it bloats the file with duplicate layers and kills maintainability.

What usually comes next

The interviewer might ask how you would refactor an existing eight-level-deep component library without breaking instances in production files. They could also ask whether hidden layers in nested components still impact performance, or how you balance atomic design granularity against file weight.

A concrete example

Imagine a product card with an image, title, price row, and tag list. A naive approach wraps the card in vertical auto layout, nests the price row in horizontal auto layout, and nests each tag row in another horizontal auto layout with manual line breaks. An optimized approach uses a single vertical auto layout for the card, sets the tag container to horizontal with Wrap enabled so tags flow naturally, and removes any intermediate grouping frames between the image and text. This cuts layer depth from six frames to three and reduces constraint recalculation by roughly half during resizing.