Guía de diseño para flexbox y diseño de cuadrícula

Las herramientas de diseño de UI cada vez son mejores a la hora de traducir el diseño a código, lo que significa que más de las decisiones que tomamos como diseñadores tienen un impacto en la parte de desarrollo del proceso del producto.

La función de Figma con mayor impacto es el diseño automático, que se traduce en código CSS Flexbox para el desarrollo web. El diseño de cuadrícula también se puede usar en ciertos escenarios, pero actualmente casi ninguna herramienta de diseño de interfaz de usuario lo admite.

En este artículo, aprenderá qué hacen Flexbox y el diseño de cuadrícula, los beneficios de usar ambos para desarrollar sitios web y las formas en que puede crear maquetas de diseños compatibles con Flexbox y diseño de cuadrícula.

¿Qué es Flexbox?

Flexbox (o “módulo de caja flexible”) permite a los desarrolladores codificar diseños horizontales y verticales de forma inteligente, donde no se conocen necesariamente las dimensiones de los elementos involucrados. En general, requiere menos código (lo cual es más manejable) en comparación con las técnicas tradicionales, especialmente en diseños horizontales, ya que los sitios web son verticales por naturaleza.

Como puedes imaginar, Flexbox también es increíble para el diseño responsivo, ya que es más dinámico y basado en reglas que estático. Al usar el diseño automático en Figma, básicamente estás usando Flexbox. Además, el modo de desarrollo traduce tus diseños automáticos a código de Flexbox. ¡Genial!

La relación entre flexbox y el diseño automático

Para comprender verdaderamente los beneficios de Flexbox y por qué el diseño está cada vez más entrelazado con el código, es mejor comparar el código resultante con y sin Flexbox/diseño automático.

Considere dos rectángulos uno al lado del otro, sin diseño automático. En primer lugar, el modo de desarrollo no genera el código necesario para mostrarlos horizontalmente porque no comprende (sin diseño automático) la relación entre ellos. Sin este código, lo natural es que se apilen verticalmente. De hecho, así es como se ve un sitio web sin ningún estilo:

Para establecer esta relación, se necesitaría envolver los rectángulos en un marco (o, dicho de otro modo, un contenedor flexible) con el diseño automático activado, donde el comportamiento predeterminado es mostrar los elementos secundarios horizontalmente. Esto hace que el modo de desarrollo genere el siguiente código:

#container { display : flex ; flex - dirección : horizontal ; }        

El modo de desarrollo también genera un espacio de 100 píxeles entre los dos rectángulos. Esta propiedad CSS solo funciona con Flexbox y diseño de cuadrícula, por lo que, de nuevo, no obtendrás nada si no usas el diseño automático.gap: 100rem;

Finalmente, el modo de desarrollo crea un espaciado de 100 píxeles alrededor del marco. Esta propiedad CSS no es exclusiva de Flexbox ni del diseño de cuadrícula, pero no se generará si no se usa el diseño automático. Sin el diseño automático, no se obtiene ningún código de diseño:padding: 100rem;

Así que esto cubre la dirección.

Pero ahora, ¿cómo se consigue que este diseño sea responsivo? El método tradicional consiste en crear varias mesas de trabajo (o, en términos de Figma, marcos de nivel superior), cada una mostrando el diseño en un tamaño diferente, pero no hace falta decir lo complicado que sería logísticamente (y más aún si los rectángulos/columnas tuvieran contenido, claro).

De todas formas, este método tampoco genera código de diseño (ni siquiera código de consulta de medios, que es el equivalente en desarrollo web a tener varios marcos de nivel superior). Así es como se ve el código de consulta de medios:

@ media ( max - ancho : 575px ) { /* hacer algo */ }     @ media ( ancho mínimo : 576px ) y ( ancho máximo : 767px ) { / * hacer otra cosa * / }        @ media ( min - ancho : 768px ) { /* hacer algo más */ }     

Esto no es lo ideal. Sobre todo cuando puedes evitarlo.

En cambio, podrías optar por la fluidez, incluso si se combina con algunos elementos estáticos. Como se mencionó anteriormente, esto significa activar el diseño automático en el contenedor ( o hacer clic en “Diseño automático +” en el panel “Diseño”).shift + A

Ahora solo necesita definir el comportamiento de cada columna. Podría, por ejemplo, establecer el “An” de la columna izquierda en “360” y el “An” (o “redimensionamiento horizontal” debajo de “An”) de la columna derecha en “llenar contenedor” (es decir, que llene el espacio restante).

Es posible que aún se requieran consultas de medios o marcos de nivel superior adicionales según lo que intente lograr, pero, no obstante, el diseño automático le otorga una excelente línea para la columna de la derecha: .align-self: stretch;

El diseño automático/flexbox se basa en relaciones, donde todos los elementos involucrados se conocen y respetan sus límites. Es, en esencia, álgebra: piensa en la columna derecha como r, la columna izquierda como 360y el contenedor flexible como 1080.

Te queda ( es el espaciado).r = 1080 - 360 - 100100

¿Y si el contenedor también fuera responsivo? Es decir, “llenar contenedor” en lugar de 1080… Bueno, primero, para acceder a funciones de Flexbox como “llenar contenedor”, su elemento principal también requeriría diseño automático.

Así que ahora la ecuación es , donde si entonces , pero en realidad podría ser cualquier cosa y es por eso que terminas con la belleza de abajo al final de todo:r = c - 360 - 100 c = 1080r = 620c

Sencillo pero elegante y con código libre.

Incluso podrías añadir “ancho mínimo…” o “ancho máximo…” (para acceder a ellos, haz clic en el menú desplegable “W”) a cualquiera de las capas para definir restricciones. Esto te proporciona aún más código ( y ) que, de nuevo, solo está disponible para capas con diseño automático o anidadas en diseños automáticos.min-width: x;max-width: x;

Entonces, si estableciera la columna izquierda “Agregar ancho máximo…” en “360” y usara “llenar contenedor”, esto haría que las columnas sean 50/50 hasta que la columna izquierda alcance 360, en cuyo caso dejaría de estirarse.

¡Todo esto utilizando sólo un marco de nivel superior!

Existe otra opción de diseño automático llamada “abrazar contenido”. Sin embargo, es imposible que la columna derecha se expanda para llenar el espacio restante del contenedor, mientras que este se contrae para ajustarse al tamaño de su contenido. Aunque esto es claramente una paradoja, es fácil perderse en la lógica al autodistribuir todo. Dicho esto, creo que es más fácil conciliar la lógica que gestionar varios marcos de nivel superior. Pensarlo en términos algebraicos ayuda mucho.

¿Qué es el diseño de la cuadrícula?

Cuando se necesitan diseños de filas o columnas, el diseño de cuadrícula es más adecuado. Digo “de filas o columnas” porque el código de tabla HTML ( ) sigue siendo la única forma semántica/correcta de codificar tablas reales, pero esa es una conversación para otro momento. Por ahora, considere el diseño de cuadrícula como adecuado para, por ejemplo, tarjetas:table.../table

En términos de código CSS, necesitarías algo como esto:

#container { display : cuadrícula ; cuadrícula - plantilla - columnas : repetir ( 3 , 1fr ); }          

1frsignifica 1 fracción (básicamente, 3 columnas igualmente espaciadas).

Nada del otro mundo por ahora, pero seguro que te preguntas… ¿por qué no usar flexbox, ya que los elementos flexibles se pueden envolver? La razón es que envolver puede ser complicado. Por ejemplo, podrías fácilmente terminar con algo como esta monstruosidad desalineada:

Una ventaja de Flexbox es que ofrece opciones de alineación. Puedes comprobarlo experimentando con la configuración de alineación en la sección “Diseño automático” del panel “Diseño” (recuerda que puedes combinar alineaciones anidando marcos con diseños automáticos).

Y naturalmente, estos también producen propiedades CSS Flexbox:

align - items : flex - inicio | centro | flex - fin | estirar | espacio - entre ; justify - content : flex - inicio | centro | flex - fin | estirar | espacio - entre ;                  

(Haga doble clic en el cuadro de alineación para ).space-between

Así que piense en Flexbox como una herramienta con mejores opciones de alineación y mayor flexibilidad en sus opciones de tamaño, y en Grid Layout como una herramienta con mejores opciones de cuadrícula . Por ejemplo, los desarrolladores podrían añadir elementos al primer elemento de la cuadrícula para crear algo como esto:grid-row: span 2;

¡A veces cualquiera de los dos puede hacer el trabajo!

Desafortunadamente, Figma aún no admite el diseño de cuadrícula (bueno, no de forma nativa).

Cómo obtener el código de diseño de cuadrícula a partir de los diseños

Hay dos herramientas principales que puedes usar para obtener códigos de diseño de cuadrícula para tus diseños: Penpot y Anima.

Penpot (en lugar de Figma)

Penpot no es tan conocido como otras herramientas de diseño de UI, pero tiene una excelente calificación de 4.62/5 según la Encuesta de Herramientas de Diseño de 2023. Su característica más reciente es la compatibilidad con diseño de cuadrícula, y que yo sepa, es la única herramienta de diseño de UI que la ofrece. Además, es sorprendentemente similar a Figma, así que podría valer la pena echarle un vistazo. ¿Mencioné que también es gratuita/de código abierto?

Complemento Anima (para Figma)

Si realmente querías generar código de diseño de cuadrícula a partir de maquetas de Figma (es comprensible, ya que es la herramienta de diseño de interfaz de usuario más popular por un amplio margen), vale la pena echarle un vistazo al plugin Anima para Figma (en concreto, la función de diseño a código con IA de Anima ). Aunque es una solución de diseño a código, no es tan exigente como la mayoría de las funciones de diseño a código. Además, tampoco es lo que algunos considerarían una función sin código, ya que se espera que los desarrolladores desarrollen sobre el código resultante, lo cual es fácil de hacer.

Desde el punto de vista del diseño, su cuadrícula debería verse así:

Después, ejecuta el plugin Anima desde el modo de desarrollo y activa la opción “Usar cuadrícula CSS” (ajustes preestablecidos Diseño adaptable). No te preocupes, Anima sabe perfectamente cuándo usar el diseño de cuadrícula y cuándo usar Flexbox.

Conclusiones clave

Flexbox y el diseño de cuadrícula son increíbles, y aunque, en realidad, solo dispones del diseño automático de Figma para crear diseños compatibles con Flexbox, la compatibilidad de Penpot con el diseño de cuadrícula indica que podrías ver otras herramientas de diseño de UI siguiendo su ejemplo. Solo así podrás contar con una solución de diseño a código moderada, ya que las herramientas sin código suelen ser demasiado exigentes, mientras que programar desde cero suele requerir más tiempo.

La principal conclusión es usar el diseño automático, no en todas partes, sino donde sea conveniente (aunque probablemente descubras que sí lo es en la mayoría). Esto proporcionará a los desarrolladores diseños útiles y dinámicos en lugar de coordenadas poco útiles.

¿Tienes alguna pregunta? Déjala en los comentarios.

¡Y gracias por leer!

¿Su interfaz está acaparando la CPU de sus usuarios?

A medida que las interfaces web se vuelven cada vez más complejas, las funciones que consumen muchos recursos exigen cada vez más del navegador. Si te interesa supervisar y rastrear el uso de CPU, memoria y otros recursos del lado del cliente para todos tus usuarios en producción, prueba LogRocket.

Modernice su forma de depurar aplicaciones web y móviles: comience a monitorearlas de forma gratuita .

Si quieres conocer otros artículos parecidos a Guía de diseño para flexbox y diseño de cuadrícula puedes visitar la categoría Guias.