With the introduction of container queries in Figma, designers now have more responsive power at their fingertips. Container queries allow components and layouts to adapt based on the size of their parent containers—not just the screen size—bringing Figma even closer to how modern CSS works in code. This article walks you through how to create a container query in Figma and how to use it effectively in your designs.
🧠 What Are Container Queries?
Container queries are logic rules that change the layout or styling of an object based on the dimensions of its immediate parent container. Unlike traditional media queries that respond to screen sizes, container queries respond to the space available within components, frames, or layouts—making them ideal for building adaptive components.
✅ Requirements
Before you begin, ensure you:
- Are using the latest version of Figma.
- Have Dev Mode enabled (for developers).
- Are using Auto Layout to build your components.
✏️ Step-by-Step: How to Create a Container Query in Figma
1. Select a Container (Frame or Component)
- Start by selecting a frame or component that wraps the content you want to control responsively.
2. Enable Auto Layout
- Apply Auto Layout to the container (if it isn’t already).
- This enables dynamic resizing that container queries can respond to.
3. Add Variables (Optional)
- If your layout uses variables (like spacing, padding, font size), you’ll be able to swap them based on container query conditions.
4. Open the ‘Container Query’ Panel
- Select the container and go to the right sidebar.
- Under Layout, click “Add container query”.
5. Set Breakpoints
- Define one or more breakpoints by specifying minimum widths (e.g., 0px, 400px, 800px).
- These are similar to media queries, but for the container’s own width.
6. Assign Styles to Breakpoints
- For each breakpoint, you can:
- Change variables (e.g., font size)
- Adjust layout direction (row vs column)
- Toggle visibility
- Switch between different child components (e.g., mobile vs desktop nav)
7. Preview in Resize Mode
- Resize the parent frame and watch your component respond in real-time to container changes.
💡 Use Case Examples
- Buttons: Make a button stack vertically in a tight container and display horizontally in a wide one.
- Cards: Change from a single-column layout to two-column layout based on card width.
- Navigation Menus: Collapse into a hamburger menu when the container shrinks.
🛠 Pro Tips
- Use named variables for things like padding and font size so they can easily be swapped at different breakpoints.
- Combine component properties with container queries to create ultra-flexible UIs.
- Pair container queries with modes (e.g., light/dark) for even more control.
📌 Final Thoughts
Container queries unlock a powerful responsive design model in Figma, bringing design behavior closer to production code. Whether you’re designing components that scale across dashboards or tweaking layouts for flexible cards, container queries give you precision, control, and elegance.
Designilo 