Importar a Figma frente a reconstruir a mano: coste en tiempo y precisión

¿Qué es más rápido, importar una página o reconstruirla a mano?

La importación asume el trabajo de construir capa por capa, así que tu tiempo pasa a la revisión y la limpieza del resultado. Aun así, nadie ha publicado una comparación con cronómetro en la que se pueda confiar, y nosotros no vamos a inventar una. La propia web de UnHTML tampoco afirma ningún ahorro de tiempo ni ninguna cifra de precisión.

Por eso comparamos el trabajo paso a paso y después te mostramos cómo medir tu propia página de forma justa. La respuesta depende de tu página, y por eso el método importa más que cualquier promedio.

Qué implica reconstruir a mano

Reconstruir una página en Figma te convierte en el motor de maquetación. Cada decisión que el navegador tomó a partir del CSS, tú la vuelves a tomar con el ratón.

Marcos, texto e imágenes, uno por uno

En Figma, el auto layout se configura marco por marco. Seleccionas capas, pulsas Shift A o eliges Add auto layout, y luego eliges un flujo (vertical, horizontal o grid). Después fijas el padding, el gap y el modo de redimensionado de cada hijo: Hug contents, Fill container o Fixed, con tamaños mínimo y máximo opcionales. Una página con decenas de secciones anidadas supone decenas de esas pasadas.

El texto añade su propia tarea. Cada título y cada párrafo necesita que su familia tipográfica, peso, tamaño, altura de línea e interletrado coincidan con la hoja de estilos, y los elementos repetidos, como tarjetas o ítems de navegación, hay que copiarlos y mantenerlos coherentes. Nada de esto es difícil. Son muchas decisiones pequeñas y repetibles, y cada una es una oportunidad de equivocarse un poco en un valor.

Traducir los valores por defecto de CSS

La página original también depende de valores por defecto de CSS que no se ven en el navegador. La referencia de flexbox de MDN los enumera: flex-direction es row por defecto, flex-wrap es nowrap, flex-grow es 0, flex-shrink es 1 y align-items es stretch. Si se te pasa uno, tu reconstrucción se aleja del original de maneras difíciles de ver a simple vista. Acabas leyendo DevTools casi tanto como trabajas en Figma.

Flexbox y grid son modelos distintos

Flexbox es unidimensional. CSS Grid es bidimensional, con pistas fr, gap y colocación por número de línea o por nombre de área. El auto layout de Figma ya tiene un flujo grid, pero sigues traduciendo a mano entre ambos modelos: un grid-template-columns: 2fr 1fr 1fr se convierte en un conjunto de anchos de columna y ajustes de relleno que eliges tú.

Qué hace una importación en esos mismos pasos

UnHTML lee un archivo HTML autocontenido, un .webarchive de Safari o un scene.json de su CLI de código abierto. Convierte los layouts flex, grid y block de la página en auto layout a partir del CSS, incluidos el espaciado, el padding, el wrap y el stretch. El texto sigue siendo editable, con familia, peso, tamaño, color, letter-spacing y line-height conservados. El SVG se convierte en vectores nativos y los degradados se trasladan.

No siempre lo consigue, y lo dice. Cuando un marco no puede reproducir la geometría capturada, recurre al posicionamiento absoluto. También puedes desactivar por completo la conversión a auto layout. El informe de importación enumera las fuentes sustituidas, los marcos revertidos a absoluto y las imágenes omitidas.

El trabajo que queda es de revisión. Cuenta con limpiar una importación eliminando capas de ruido y aplanando lo que no vayas a editar. Ese tiempo forma parte de tu medición.

Conviene pensar en la importación como un traslado del esfuerzo, no como su desaparición. Dejas de construir la estructura desde cero. Inspeccionas una estructura que ya existe. Para quien conoce bien Figma, inspeccionar suele ser la tarea más fácil, pero solo tu propia prueba dirá si es más rápido en tu página. Una página larga y densa también alcanza antes el límite de 500 capas del plan gratuito, lo que cambia las cuentas, como se explica más abajo.

Dónde se pierde precisión en ambos casos

Ninguna de las dos vías es exacta. Simplemente fallan en sitios distintos.

A mano, los errores son silenciosos. Nadie te da una lista de lo que has hecho mal. Con una importación, las desviaciones quedan registradas y puedes auditarlas. Es una ventaja real de precisión, pero no es fidelidad al píxel: el resultado es fiel y editable, no un clon exacto al píxel. Sobre las fuentes, consulta cómo funciona la sustitución de fuentes.

Cómo medir tu propia página de forma justa

Haz una prueba pequeña. No te fíes de ningún promedio, tampoco del nuestro.

1. Elige una sección real de tu página, por ejemplo una cabecera junto con una cuadrícula de tarjetas.
2. Fija primero el viewport. UnHTML ofrece Desktop 1440, Mobile 390 y anchos personalizados; usa el mismo ancho en ambos intentos.
3. Cronometra la reconstrucción a mano desde un marco vacío hasta que "coincide con el original" en ese ancho.
4. Cronometra la ejecución de la importación y después la revisión y la limpieza, como una sola cifra.
5. Cuenta las diferencias que conserva cada versión respecto al original, no solo los minutos.

Anota ambas cifras y el número de diferencias. Anota también contra qué estabas comparando. Si tu referencia es la página en vivo a un solo ancho, dilo, porque una reconstrucción que coincide a 1440 px aún puede diferir a 390 px. Una nota breve junto a cada resultado hace que la comparación sea repetible cuando un compañero la ejecute en otra página. Si reconstruyes dos veces la misma sección, la segunda pasada es más rápida porque ya conoces la página; por eso conviene importar primero o usar dos secciones distintas de tamaño similar.

Cuándo reconstruir a mano sigue siendo mejor

A veces la importación es la herramienta equivocada. Una página muy pequeña puede llevar lo mismo construirla que revisarla. Un rediseño en el que no vas a conservar la estructura no se beneficia de una copia fiel. Y si solo necesitas unos pocos elementos, copiar elementos desde Chrome DevTools o el trazado de capturas de pantalla puede bastar.

El tamaño también cuenta. Según la página de precios con fecha del 16 de septiembre de 2026, el plan gratuito limita cada importación a 500 capas. Pro, una compra única de $39 por editor, elimina ese límite. Consulta la página para ver los precios vigentes antes de decidir.

La conclusión

Una importación cambia la forma del trabajo: menos construcción, más revisión, y un informe que te dice dónde se quedó corta. Una reconstrucción a mano te da control total y ningún registro de auditoría. Cuál es más rápida es una pregunta sobre tu página, y una prueba de diez minutos con una sección responde mejor que cualquier promedio.

Preguntas frecuentes

¿Es más rápido importar una página a Figma que reconstruirla a mano?

Las fuentes publicadas no ofrecen tiempos medidos, y la propia UnHTML tampoco afirma ninguno. Una importación sustituye la construcción capa por capa por una sola ejecución, de modo que el trabajo pasa a la revisión y la limpieza. Cuánto ahorra depende de tu página, así que cronometra una sección de ambas formas.

¿Una página importada es exacta al píxel?

No. UnHTML produce capas fieles y editables, no un clon exacto. Las fuentes sustituidas, los marcos que recurren al posicionamiento absoluto y las imágenes omitidas aparecen en el informe de importación para que puedas comprobarlos.

¿Qué pasa con una página más grande de lo que permite el plan gratuito?

El plan gratuito limita cada importación a 500 capas. Pro, una compra única de $39 por editor, elimina el límite. Para una página muy pequeña, el plan gratuito suele bastar.