Por qué el Auto Layout de Figma se descuadra al importar una web

Una fila de tarjetas que estaba alineada en el navegador llega a Figma con una tarjeta cuatro píxeles más abajo. Nada está roto lo bastante como para señalarlo. Esto es lo que pasó.

Importas una página web a Figma, el panel de capas se llena y algo no encaja. Una fila de tarjetas que en el navegador estaba alineada tiene ahora una tarjeta cuatro píxeles más abajo. Una barra de navegación que estaba centrada está centrada más o menos. Nada está roto lo bastante como para señalarlo, pero el archivo ya no coincide con la captura que dejaste abierta al lado.

Casi siempre es Auto Layout, aplicado donde no tocaba. Merece la pena entender por qué pasa, porque la solución no es «desactivar Auto Layout», sino saber cuándo los dos sistemas de maquetación coinciden de verdad y cuándo una herramienta está adivinando.

Dos motores de maquetación que nunca iban a coincidir

Un navegador coloca una página con CSS. Flexbox, grid, floats, flujo en línea, márgenes que colapsan, un line-height que empuja el texto fuera de su propia caja, redondeos de subpíxel que cambian según la plataforma. Décadas de reglas, y la mayoría son casos límite que solo importan una vez.

Figma coloca un frame con Auto Layout. Es un sistema mucho más pequeño, y a propósito: una dirección, un espaciado, cuatro valores de padding, alineación en dos ejes, y por cada hijo un grow y un stretch. Poco más.

Auto Layout no es una reimplementación de flexbox. Se parece a flexbox como una bicicleta se parece a una moto. Así que cuando un conversor lee display: flex y pone layoutMode: "HORIZONTAL", está afirmando algo: estos dos sistemas van a colocar cada hijo en el mismo sitio. A veces es cierto. A menudo es casi cierto, que es peor.

Dónde se separan sin avisar

Algunos casos concretos, todos con aspecto de flexbox y ninguno reproducible por Auto Layout.

• Márgenes en los ítems flex. En CSS un hijo puede llevar su propio margen, incluido margin-left: auto para empujar un grupo a la derecha. Auto Layout tiene un único espaciado para todo el frame y ningún margen por hijo.
• space-around y space-evenly. Auto Layout tiene SPACE_BETWEEN. Los otros dos reparten el espacio sobrante de otra forma, y no hay ajuste que lo reproduzca.
• align-items: baseline. Texto de tamaños distintos apoyado en una línea base común, algo habitual en titulares y filas de precios. Auto Layout alinea por bordes y centros de caja, no por líneas base.
• flex-grow fraccionado. flex: 1 se traduce a layoutGrow: 1. flex: 2 y flex: 0.5 no se traducen a nada.
• flex-wrap. Una fila con salto es una geometría distinta de una fila única, y dónde salta depende del ancho del contenedor en el momento de la captura.
• Remedición del texto. Esta es la que pilla a las herramientas. Una capa de texto ajustada a su contenido la mide Figma, con la fuente que Figma tiene, al tamaño que Figma calcula. Si esa medida difiere del navegador aunque sea un píxel, todos los hermanos que van detrás en la pila se desplazan.

Por eso el problema aparece muchas veces solo después de instalar una fuente que faltaba, o solo en el ordenador de otra persona.

Por qué los conversores lo aplican igualmente

Porque un archivo lleno de frames con Auto Layout parece mejor producto que uno lleno de rectángulos posicionados en absoluto. Queda bien en una demo y da para un punto en la lista de funciones. Y en el caso corriente, una fila sencilla o una cuadrícula de tarjetas con espaciado uniforme, es genuinamente mejor: puedes redimensionar el frame y se comporta.

El fallo está en que la herramienta no distingue el caso corriente del casi-encaja sin comprobarlo, y comprobar cuesta más que no comprobar.

Qué hacer

Si ya lo has importado

Coge el frame que se ve mal y pon su modo de maquetación en ninguno, en la sección de layout del panel derecho. Los hijos conservan su posición actual, así que si el desplazamiento ya ocurrió esto lo congela en lugar de deshacerlo. Por eso lo útil casi siempre es reimportar, no reparar.

Antes comprueba una cosa: ¿tienes instaladas en tu equipo las fuentes que usaba la página? Una fuente sustituida vuelve a medir cada capa de texto, y ninguna cantidad de ajustes salva un archivo cuyo texto tiene el ancho equivocado. Figma te dice qué fuentes faltan al abrir el archivo.

Si estás eligiendo herramienta

Pregunta qué hace cuando los dos sistemas discrepan. Hay tres respuestas posibles y solo una buena.

1. Aplicar Auto Layout allí donde vea flexbox. Rápido, luce en la demo, y te entrega un archivo que se ha movido sin decírtelo.
2. No aplicarlo nunca. Siempre correcto, nunca útil. Recibes un montón de capas absolutas, exactas y penosas de editar.
3. Aplicarlo solo donde reproduce el original. Correcto y útil, pero exige que la herramienta prediga de verdad lo que hará Figma y lo compare.

Cómo lo decide Snapture

Snapture toma la tercera opción, y el mecanismo cabe en un párrafo.

En el momento de capturar ya sabe dónde está cada elemento, porque ha leído la página renderizada: tiene el rectángulo real, calculado por el navegador, de cada hijo. Antes de poner un layout simula lo que haría el motor de Figma con ese mismo frame, con el padding, el espaciado, la alineación y el reparto del grow, y produce un rectángulo previsto por hijo. Después compara los dos conjuntos. Si cada hijo cae a menos de medio píxel de donde lo puso el navegador, se aplica el layout. Si alguno falla, el frame entero conserva coordenadas absolutas exactas.

Hay una segunda comprobación al otro lado. Después de que el plugin de Figma aplique el layout, vuelve a medir los hijos, esta vez contra el motor real y no contra una predicción, y si algo se ha movido más allá de ese mismo medio píxel devuelve el frame a las coordenadas capturadas. Esa comprobación existe porque una capa de texto puede remedirse al importar de un modo que ninguna simulación anticipa.

Qué aspecto tiene en la práctica

Pasar el conversor por páginas reales da idea de lo selectivo que es. Son las cifras de la misma medición publicada en la página de mediciones.

La fila interesante es la de MDN. Cinco frames con Auto Layout sobre 253 nodos parece un fallo de la herramienta. Es la herramienta funcionando: la maquetación de los artículos de MDN es sobre todo flujo de documento y floats, algo que Auto Layout no modela en absoluto, así que el filtro rechazó casi todo y conservó posiciones exactas. Para esa página, ese es el intercambio correcto.

Linear, en cambio, está construido casi por completo con filas flex de espaciado uniforme. 261 de sus frames superan la comparación de verdad, y esos frames se comportan bien cuando los redimensionas en Figma.

En resumen

El Auto Layout de una importación solo es fiable si algo lo ha verificado. Flexbox y Auto Layout se solapan lo suficiente como para engañar a un conversor y difieren lo suficiente como para mover tu archivo, y la diferencia suele aparecer como unos píxeles en lugar de como una rotura evidente, que es justo el tipo de error que más tiempo cuesta encontrar.

Si una herramienta no sabe decirte qué hace cuando los dos discrepan, da por hecho que no comprueba.

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia