CSS Container queries: why we must consider them in Figma and how to implement them

A new responsive design approaches beyond breakpoints

Container queries are a groundbreaking concept in the world of web design and have the potential to fundamentally change the way we approach responsive design in the browser. As the design landscape evolves, it becomes essential to envision how container queries will impact our design processes in Figma.

In this guide, we’ll explore the current design approach using breakpoints and how it might change with container queries. We’ll also investigate how to leverage the existing Figma features to design for container queries to create fluid and adaptive user experiences together.

Note: It’s a little hard to put an actual number on this because there is a significant gap between something being available and widely supported.

First things first: Responsive web design with media queries and breakpoints

Let's start with the basics and the status quo and ensure we are all on the same page. What is a media query?

📍Note: There are alternative techniques for achieving responsive design that do not rely on breakpoints. For instance, working with pure flexbox or CSS grid setup. Additionally, when it comes to adjusting text size, clamp() offers a fantastic way to control typography dynamically. However, in order to comprehend container queries, it's essential to first have a solid understanding of the media query setup. Despite these alternatives, media queries and breakpoints remain the widely used and go-to approach for establishing responsive design in the present day.

Media queries tell websites how to adapt their appearance based on the viewport size. Breakpoints are specific points or, rather, thresholds where changes occur. This way, websites can adjust their layout and styles to fit different screen sizes, ensuring that they look good and function properly on various devices.