Feature request: Responsive Component Swap Based on Container Width

Hi, and apologies for posting a new question – it may well have been asked before. To be honest, I can’t be bothered to look it up. Besides, the more questions on a single topic, the better the chances of success.

I’m not really sure how or what to write here, so I’ll just set out my ideas and suggestions – things I keep coming back to whilst working in Figma.

Feature request: Responsive Component Swap Based on Container Width

It would be extremely useful to have a way to automatically switch a component variant or nested component based on the width of its parent frame or container.

When designing responsive interfaces, components often need to change significantly between desktop, tablet, and mobile layouts. Auto Layout handles resizing well, but sometimes resizing is not enough — the component itself needs to change.

For example:

• Width > 1200px → Desktop Navigation

• Width 768–1200px → Tablet Navigation

• Width < 768px → Mobile Navigation

Ideally, we could define breakpoint rules directly on a component or instance, similar to CSS media/container queries.

When the parent frame is resized, Figma would automatically switch the component to the corresponding variant or nested instance.

Something like:

Container width < 768px → Variant: Mobile

Container width ≥ 768px → Variant: Desktop

This would make designing and maintaining responsive layouts much easier. Instead of creating separate screens and manually switching component variants for every breakpoint, designers could build truly responsive components that react to their container.

It would also bring responsive behavior in Figma much closer to how components actually work in production.