Figma Auto Layout vs CSS Flexbox y Grid: cerrando la brecha entre el diseño y el código
Cómo se asigna el diseño automático de Figma al flexbox y la cuadrícula CSS (dirección, espacio, relleno, abrazo, relleno, envoltura) y dónde difieren, para que los diseños sobrevivan al traspaso.
Idea clave
El diseño automático de Figma se comporta de manera muy similar al flexbox CSS: la dirección se asigna a la dirección flexible, el espacio al espacio, el relleno al relleno, "Abrazar el contenido" al tamaño por contenido, "Llenar el contenedor" para flexibilizar el crecimiento o el ancho completo, y envolver para flexibilizar. El flujo de cuadrícula del diseño automático corresponde a la cuadrícula CSS. Aparecen diferencias con los tamaños mínimo y máximo, ajuste de texto, alineación de línea base y puntos de interrupción receptivos, así que verifíquelos explícitamente en la transferencia.
el mapeo
La guía de Figma describe marcos de diseño automático que organizan a los niños por dirección, espaciado, relleno y alineación, con flujos horizontales, verticales y de cuadrícula y un ajuste opcional. Cada uno tiene un equivalente cercano a CSS:
Abrazo, llene y arregle
En Figma, un marco configurado para abrazar el contenido cambia de tamaño según sus elementos secundarios, y un marco secundario configurado para llenar el contenedor se extiende para llenar el espacio disponible; Figma señala que si un niño está configurado para llenar, el padre ya no puede abrazar en esa dirección. En CSS, los equivalentes son el tamaño basado en contenido (automático o ajuste de contenido) y flex: 1 o ancho: 100%. La guía flexbox de MDN explica cómo flex-grow, flex-shrink y flex-basis distribuyen el espacio, que es el lado CSS de la misma idea.
donde aparece la brecha
La mayoría de los errores de transferencia provienen de algunas áreas:
- Tamaños mínimo y máximo: configúrelos en ambos lugares, o el texto y los contenedores se comportarán de manera diferente en los extremos.
- Texto: la altura de la línea, el ajuste y el truncamiento difieren entre la representación del texto Figma y el navegador.
- Alineación de línea base: CSS puede alinearse según la línea base de texto; compruebe cómo se pretendía esto.
- Hijos absolutos: "Ignorar diseño automático" de Figma (anteriormente posición absoluta) se asigna a posición: absoluta en un padre posicionado.
- Capacidad de respuesta: los marcos de diseño automático no tienen puntos de interrupción; Defina cómo cambian los diseños en cada ancho.
Rejillas
Utilice el flujo de cuadrícula del diseño automático para diseños bidimensionales reales y asígnelo a la cuadrícula CSS, que MDN describe como un sistema para distribuir contenido en filas y columnas. Las filas flexibles ajustadas no son lo mismo que una cuadrícula: los elementos de una fila ajustada no se alinean en columnas.
El movimiento es la brecha más grande
El diseño se asigna razonablemente bien desde Figma a CSS. Motion no: las transiciones prototipo deben reconstruirse en código y los estados a menudo se pierden. Esa es la brecha entre herramientas con tiempos de ejecución, como ExodeUI (lo hacemos nosotros) y Rive, dirección para componentes interactivos.
Principios clave para recordar
- Dirección de diseño automático, espacio, relleno y ajuste del mapa a flexbox
- Abrazo ≈ tamaño del contenido; Relleno ≈ flex: 1 o 100% ancho
- Mapas de flujo de cuadrícula a la cuadrícula CSS
- Verifique los tamaños mínimos y máximos, el texto, las líneas base y los puntos de interrupción en la transferencia
- El movimiento y los estados son la brecha más grande entre el diseño y el código
Preguntas frecuentes
Fuentes
- Guide to auto layout — Centro de ayuda Figma
- Basic concepts of flexbox — Documentos web MDN
- Basic concepts of grid layout — Documentos web MDN