Capas, tasas de reemplazo y sustitución de fuentes en una importación a Figma

Abres el panel de capas de una importación y tres números te dicen casi todo lo que necesitas saber: cuántas capas obtuviste, cuántas secciones cayeron en posición fija en vez de auto layout, y cuántas fuentes se sustituyeron. Nada de eso es aleatorio. Los tres números se remontan a cómo se construyó el HTML, el CSS y las fuentes de la página original, y los datos públicos de millones de páginas reales ya muestran el patrón.

El método de captura importa aquí, así que va primero. Las cifras de conteo de capas vienen del Web Almanac 2024 de HTTP Archive, que rastrea el DOM de millones de páginas activas dos veces al año. Las cifras de fuentes vienen del capítulo de fuentes del Web Almanac 2025, del mismo proyecto. Ambos son conjuntos de datos públicos y con fecha. Esa es una forma más honesta de responder "cómo es una importación típica" que correr UnHTML sobre un lote pequeño de páginas y llamarlo representativo.

Cuántas capas genera realmente una página de marketing

UnHTML mapea la estructura de una página uno a uno: un div se vuelve un frame, un nodo de texto se vuelve una capa de texto, una imagen se vuelve un relleno de imagen. Nada se aplana ni se combina en el camino, así que el conteo de capas de una importación sigue de cerca el conteo de elementos DOM de la página.

La distribución es más amplia de lo que la mayoría espera. Según el desglose por percentiles del Web Almanac 2024 para páginas móviles, el percentil 10 tiene 180 elementos. El percentil 25 tiene 342. La mediana está en 594. El percentil 75 llega a 1,010, y el percentil 90 llega a 1,716. La mediana bajó un poco, de 653 en 2022 a 594 en 2024, pero el cuarto superior de páginas sigue muy por encima de los mil elementos.

De dónde vienen esos elementos también importa. Los divs representan el 28.7% de todos los elementos en una página promedio, con las etiquetas de enlace (a) en 12.6% y los spans en 11.2%. Sumando los elementos de lista (li) con 7.7%, la mayor parte de un conteo de capas típico son contenedores genéricos y enlaces, no nodos con contenido real. Una página construida con divs anidados en exceso superará en capas a otra con el mismo contenido visible pero construida con marcado semántico y más plano, siempre.

Esa distribución coincide directamente con el plan gratuito de UnHTML, que tiene un límite de 500 capas y usa posicionamiento absoluto en vez de auto layout. Una página en el percentil 25, 342 elementos, pasa ese límite sin problema. La página mediana, 594 elementos, ya está por encima. Una página en el percentil 75, 1,010 elementos, es más del doble del límite. La propia auditoría de tamaño de DOM de Lighthouse advierte a partir de 800 nodos y falla por completo por encima de 1,400. Es decir, la página que ya aparece marcada por exceso de DOM en PageSpeed Insights es, con la misma medición, la página con más probabilidad de necesitar la conversión a auto layout sin límite de Pro en lugar del plan gratuito.

Sustitución de fuentes: quién está expuesto y quién no

La sustitución de fuentes tampoco se distribuye de forma pareja en la web. El capítulo de fuentes del Web Almanac 2025 pone el uso de fuentes web en el 88% de todas las páginas, un poco más que el 87% de 2024. El 12% restante depende de fuentes del sistema y nunca enfrenta una pregunta de sustitución.

Entre el 88% que sí usa una fuente personalizada, el hospedaje es la línea divisoria. El 72% autohospeda al menos un archivo de fuente, mientras que Google Fonts aparece sola en el 54% de las páginas de escritorio y el 47% de las móviles. Figma obtiene cualquier Google Font a demanda, sin necesidad de instalación local, así que esa mitad aproximada de todo el uso de fuentes casi nunca provoca una sustitución. La exposición se concentra en el segmento autohospedado que no es de Google.

El formato agrega otro filtro, y atrapa a más páginas de lo que sugeriría solo la elección de hospedaje. El 65.2% de las solicitudes de fuentes en la web se entrega como WOFF2, el formato moderno dominante. Pero a partir de 2026, la instalación local de fuentes de Figma solo lee archivos TTF y OTF. Una fuente autohospedada, licenciada correctamente y presente en la página como WOFF2, igual se sustituye al importar, a menos que esa misma familia también exista en tu máquina como TTF u OTF. Tener la fuente correcta no es lo mismo que tenerla en un formato que Figma pueda ver.

Las fuentes variables agregan un modo de fallo más estrecho. El 39.4% de las páginas de escritorio y el 41.3% de las móviles ya usa una fuente variable. Si al archivo instalado le falta un solo estilo estático, comúnmente Bold, solo ese estilo se sustituye mientras el resto de la familia se importa correctamente. El resultado se ve raro la primera vez que aparece en un informe: una familia, en parte correcta, en parte sustituida.

Cómo se ve un reemplazo cuando realmente ocurre

En una importación aparecen dos tipos distintos de reemplazo, y vienen de lugares distintos. El primero es de diseño: una sección que no se puede mapear de forma limpia al auto layout de Figma cae en posicionamiento absoluto y fijo. El segundo es de fuente: un nodo de texto que UnHTML no puede resolver contra una fuente instalada o una Google Font cae en Inter, y queda registrado en el informe de importación.

El reemplazo de diseño no es un problema de compatibilidad de navegadores. El soporte de Flexbox llega al 98% de los navegadores en uso activo, y el de Grid está en 97.5%, prácticamente universal en ambas especificaciones. Cuando una sección aun así cae en posición absoluta al importar, la causa es cómo se escribió específicamente el CSS de esa sección: contenedores anidados en exceso, contextos de posicionamiento mezclados, o un diseño manejado por JavaScript en lugar de reglas CSS que UnHTML pueda leer de forma estática. No es una función faltante en el navegador que la renderiza.

Figma tiene su propio reemplazo, separado, un nivel por debajo de los cambios de fuente que registra UnHTML. Según el propio blog de ingeniería de Figma, cuando un carácter no tiene un glifo en la fuente activa, Figma resuelve ese carácter individual con la familia de fuentes Noto, de forma consistente en macOS, Windows y la web, en vez de encadenar las fuentes de reemplazo específicas de cada plataforma que usaría un navegador. Eso es un reemplazo más estrecho, a nivel de carácter, dentro del renderizador de Figma, separado de la sustitución a nivel de familia que registra un informe de importación.

Cómo leer tu propio informe de importación

El informe que genera una importación es la forma más rápida de convertir estos promedios en una respuesta específica para una página específica. Tres cosas vale la pena revisar, en orden: el conteo total de capas contra el límite de 500 capas del plan gratuito, la lista de familias de fuentes sustituidas contra lo que realmente tienes instalado en tu máquina, y cualquier sección marcada como reemplazo a posición fija si piensas rediseñarla después.

Una forma práctica de recorrer un informe con varias sustituciones: revisa la lista primero. Luego decide, familia por familia, si vale la pena instalar la fuente real localmente como TTF u OTF y volver a correr la importación, o aceptar Inter porque el archivo es una maqueta rápida y no una reconstrucción exacta de la tipografía. UnHTML muestra este informe de forma automática en cada importación, en línea con su propia política de privacidad de resolverlo todo de forma local.

Lo que suman estos números

El conteo de capas, la tasa de reemplazo y la sustitución de fuentes se remontan a la misma causa: cómo se construyeron el marcado, el CSS y las fuentes de una página específica. Una página ligera y semántica con Google Fonts y reglas limpias de flex o grid pasará el plan gratuito y llegará con su tipografía intacta. Una página cargada de divs, construida con fuentes WOFF2 autohospedadas y secciones en posición absoluta, alcanzará el límite de capas, sustituirá varias fuentes y necesitará un segundo repaso de diseño.

Nada de eso es visible antes de importar. Se vuelve visible en el momento en que abres el informe.