Responsive

We use CSS container queries on a per-component basis, allowing us to have increased flexibility and control compared to the traditional “breakpoint” approach.

• Each component will be designed and implemented independent of a “page” or “comp” under the assumption that it’ll take up all of the space available.
• Container queries will enable the component to change how it renders based on that available space, meaning we will no longer need to consider situations where a component has to change/revert to a “previous” size when page layouts change.

• Component-level responsiveness. Components are self-contained and adapt regardless of where they’re placed on the page.
• Reduced complexity. They simplify responsive design by eliminating the need for complex media query breakpoints that rely solely on viewport size.
• Improved reusability. Components are reusable and adaptable to different layout scenarios.

Responsive layouts in Figma are best achieved with Auto Layout, which allows designers to apply horizontal or vertical layouts and spacing to nested Frames for flexible designs. For more detailed information, view Figma’s article on auto layout here.