Breakpoint VS Container Queries: Diseño Basado en Componentes
Aprenda la diferencia entre diseñar para el ancho de la pantalla (Breakpoints) y diseñar para el ancho del contenedor (Container Queries), y cómo esto revoluciona el diseño de componentes.
El Cambio de Paradigma en el Diseño de Producto
Durante la última década, hemos diseñado “pantallas”: móvil, tablet y escritorio. Sin embargo, en un sistema de diseño moderno, diseñamos componentes que habitan en diferentes lugares. Un mismo componente de “Tarjeta de Producto” puede aparecer en una rejilla de 3 columnas en la página principal, o en una sola columna estrecha en una barra lateral.
Diseñar basándose solo en el ancho de la pantalla (Breakpoints) obliga a crear reglas muy complejas y específicas para cada lugar. Las Container Queries permiten que el componente sea “inteligente” por sí mismo.
1. Breakpoints (Media Queries): La Visión Global
- Cómo funcionan: El código pregunta: “¿Cuánto mide la ventana del navegador?”. Si es menor de 600px, aplica el diseño de móvil.
- Cuándo usarlo: Para cambios estructurales de alto nivel, como ocultar el menú lateral, cambiar el número de columnas de la web o ajustar los márgenes globales.
- Limitación: Si un componente está en una barra lateral estrecha en un monitor 4K, el breakpoint dirá “Monitor 4K”, pero el componente solo tiene 300px para respirar. Aquí es donde el diseño se rompe.
2. Container Queries: La Visión del Componente
- Cómo funcionan: El código pregunta: “¿Cuánto mide el espacio donde me han metido?”. Si mi contenedor mide menos de 400px, me pongo en vertical; si mide más, me pongo en horizontal.
- Cuándo usarlo: Para el diseño atómico de componentes (cards, tablas, banners, inputs). El componente se adapta a su contexto sin importar el tamaño de la pantalla.
- Ventaja UX: Garantiza la legibilidad y la jerarquía visual del componente en cualquier parte de la interfaz, reduciendo errores visuales y roturas de layout.
Comparativa: ¿Cuál elegir?
| Característica | Breakpoints | Container Queries |
|---|---|---|
| Referencia | Ancho del Viewport (Pantalla). | Ancho del Contenedor Padre. |
| Nivel de Control | Global (Página). | Granular (Componente). |
| Uso Ideal | Layout de alto nivel (Grid). | UI de bajo nivel (Atómico). |
| Portabilidad | Baja (El componente depende de la página). | Alta (El componente es autónomo). |
Cómo Diseñar para Container Queries en Figma
Figma aún no tiene una funcionalidad nativa llamada “Container Queries”, pero puedes simular este comportamiento mediante el uso estratégico de Auto Layout y la propiedad “Fill Container”.
- Diseña tu componente con Auto Layout y fíjate en cómo se comporta cuando lo estiras de forma independiente del frame principal.
- Usa la propiedad “Wrap” para que los elementos salten de línea automáticamente basándose en su ancho, emulando la lógica de las Container Queries.
- Añade anotaciones en el handoff: “Este componente debe pasar a vertical cuando su ancho baje de 450px”.
Beneficios para el Sistema de Diseño
- Componentes más Reutilizables: No necesitas variantes separadas para cada tamaño de pantalla; una sola variante inteligente se adapta a todo.
- Código más Limpio: Menos media queries específicas dispersas por todo el CSS.
- Diseño más Resiliente: El diseño “no se rompe” si el desarrollador decide mover un componente de sitio en el futuro.
Consejos de Mentor
- Diseña el “peor escenario”: Prueba tu componente en contenedores ridículamente estrechos y ridículamente anchos. Verás rápidamente dónde necesitas aplicar una regla de Container Query.
- No abandones los Breakpoints: Sigue usándolos para la estructura general de tu web (navbars, footers, grids principales). Son complementarios, no sustitutos.
- El nombre del contenedor importa: En el código, el componente debe saber quién es su “padre” para poder medirse contra él. Refleja esto en tu jerarquía de capas en Figma.
Recursos y Herramientas
- MDN Web Docs: CSS Container Queries
- Ahmad Shadeed: A Guide to Container Queries
- CSS Tricks: Container Queries are finally here
- Artículos: Why designers should care about Container Queries
layout-grid-vs-intrinsic intrinsic-sizing constraints-auto-layout escala-responsiva