HTML to Design: flujo de rediseño para diseñadores y agencias

El diseño suele fluir en una dirección: un mockup en Figma se convierte en HTML en un navegador. Pero buena parte del trabajo real va en sentido contrario. Un cliente te entrega un sitio en vivo y te pide un rediseño. Un producto se ha ido alejando de sus mockups originales tras tres años de publicaciones. Un desarrollador construyó una función directamente en código y ahora el equipo de diseño tiene que hacerse cargo de ella.

Esa dirección inversa, HTML to design (de HTML a diseño), consiste en tomar lo que existe en el navegador y convertirlo de nuevo en un archivo de diseño editable. Bien hecho, ahorra días de reconstrucción manual y te da algo mejor que un moodboard de capturas: un archivo de trabajo con frames, textos, estilos y componentes reales.

Este artículo presenta un flujo de trabajo práctico para diseñadores y agencias, desde la primera auditoría hasta un prototipo clicable, con HTML to Frames.

Qué significa realmente "HTML to design"

La expresión abarca cualquier proceso que convierte código en vivo o un sitio web en un archivo de diseño que puedes editar. Hay tres formas generales de hacerlo:

1. Reconstrucción manual: abres el sitio, lo mides en DevTools y recreas cada frame a mano.
2. Capturas de pantalla: capturas imágenes de cada página y las pegas en Figma como referencia.
3. Capas editables: conviertes la página renderizada en frames, textos, vectores e imágenes reales de Figma.

Cada una tiene su lugar, pero difieren mucho en coste y en lo que puedes hacer después.

Las capturas sirven como referencia. Las reconstrucciones manuales siguen teniendo sentido para una sola página pequeña que quieres reestructurar desde cero. Para cualquier cosa más grande, las capas editables son el punto de partida que escala.

Para quién es este flujo

• Diseñadores UI/UX y web que hacen rediseños, auditorías o análisis de referencias.
• Agencias de diseño que necesitan el sitio de un cliente en Figma en minutos para preparar una propuesta de rediseño. El plan Team comparte cinco puestos con una sola clave de licencia.
• Equipos de sistemas de diseño que consolidan colores, tipografía y componentes que se han desviado en producción.
• Desarrolladores front-end que quieren entregar un build de localhost a un diseñador como archivo de Figma.
• Product managers y profesionales de marketing que necesitan paneles con sesión iniciada o estados concretos en Figma para planificar.

El flujo, paso a paso

Esta es la secuencia que recomendamos. Puedes saltarte pasos, pero el orden importa: cada uno se apoya en el anterior.

Paso 1: audita lo que existe

Antes de importar nada, decide qué páginas importan. En la mayoría de los sitios es una lista corta:

• la página de inicio,
• una o dos landings o páginas de producto clave,
• precios o el proceso de pago,
• una plantilla de contenido, como una entrada de blog,
• cualquier pantalla con sesión iniciada que forme parte del alcance del rediseño.

Apunta también qué estados necesitas: un menú de navegación abierto, un formulario con errores de validación, un carrito lleno. No se puede llegar a ellos solo con una URL; los capturarás con la extensión de Chrome.

Paso 2: importa un Responsive set

Ahora trae las páginas. Para páginas públicas:

1. Abre HTML to Frames y elige Multiple.
2. Pega hasta 10 enlaces. Se procesan uno tras otro y cada página se convierte en una fila del lienzo.
3. Elige el Responsive set: Desktop, Tablet y Mobile con un clic (hasta cuatro pantallas por importación en Pro y Team).
4. Activa Hide cookie banners & popups para que las superposiciones no tapen el contenido.
5. Activa Styles & variables (Pro) si piensas extraer un sistema de diseño en el siguiente paso.

La pantalla Desktop usa Site width: el plugin mide el ancho de diseño real de la página en lugar de adivinarlo. Los sitios a sangre completa llegan a 1920 con el contenido centrado, los sitios en caja con el ancho de su caja y los sitios fluidos a 1440. Un sitio recibe un único ancho en todas sus páginas.

Recuerda la regla de conteo: una importación = una página con todas sus pantallas. Un Responsive set de cinco páginas son cinco importaciones, no quince.

Tras la primera importación, Import linked pages te permite elegir más páginas del mismo sitio en una lista. Para páginas con sesión iniciada o localhost, usa la extensión de Chrome y Send to Figma. Para páginas que solo existen como archivos, usa Local file para importar un archivo HTML, la carpeta completa de un sitio o un .zip. La guía HTML to Figma cubre cada fuente en detalle.

Paso 3: extrae el sistema de diseño

Aquí es donde una importación deja de ser una imagen del sitio y se convierte en una base de trabajo. Con Styles & variables (Pro) activado, el plugin crea:

• Variables de color a partir de los colores usados al menos dos veces y de las propiedades personalizadas CSS del sitio (--brand-primary se convierte en brand/primary) en una colección Colors · <domain> (hasta 96).
• Estilos de texto (hasta 48).
• Estilos de sombra (sm, md, lg, xl).

Dos detalles lo hacen práctico para proyectos reales:

• Reutilización. Si tu archivo ya tiene variables o estilos con valores coincidentes, el plugin los reutiliza. Importar el mismo sitio dos veces no crea nada nuevo.
• Snap to my file's styles (Pro). Si ya tienes un sistema de diseño, los colores y textos importados pueden ajustarse al estilo más cercano de tu archivo cuando no hay una coincidencia exacta, usando la distancia de color perceptual OKLab y la misma familia tipográfica y peso, con un tamaño dentro de un 10 %.

Si el sitio admite modo oscuro, elige Light + Dark (Pro). La página se captura en ambos esquemas de color y obtienes una colección de variables con modos Light y Dark, además de una copia oscura de cada pantalla. Ten en cuenta que los archivos de Figma Free permiten un modo por colección, así que allí el modo oscuro se omite con una nota.

El resultado es un inventario honesto de lo que el sitio usa de verdad, a menudo el artefacto más útil de toda la auditoría. Ver una larga serie de grises casi idénticos en una colección defiende la consolidación mejor que cualquier diapositiva.

Paso 4: convierte la repetición en componentes

Con Components & hover states (Pro), las estructuras repetidas (tarjetas, botones, elementos de menú) se convierten en componentes e instancias, conservando las sustituciones de texto e imagen. Los elementos con estado hover se convierten en un conjunto de componentes con variantes Default y Hover, además de una interacción de prototipo on-hover. Los componentes principales se reúnen en un frame Components · <site>.

Esto te da un inventario de componentes que racionalizar. Siguientes pasos habituales:

• fusionar componentes de botón casi duplicados en un solo conjunto con variantes,
• renombrar los componentes según tu convención de nombres,
• sustituir instancias por los componentes de tu propia biblioteca cuando ya existan.

Paso 5: itera sobre la estructura real

Ahora, a diseñar. Como el layout llega como frames anidados con Auto Layout donde el plugin pudo verificarlo, los cambios se comportan como en un archivo que hubieras construido tú:

• edita los titulares y observa cómo se reorganiza la pila,
• cambia un espacio o el padding de una sección,
• cambia una variable de color y mira cómo se actualizan todos sus usos,
• redimensiona un frame y deja que Fill y Center hagan su trabajo.

En nuestras pruebas con sitios reales, se dedujo Auto Layout en aproximadamente el 86–97 % de los frames. Los frames que se quedan en posición absoluta reciben restricciones sensatas, y la pantalla de resultados indica por qué un frame se quedó en posición absoluta. La explicación del Auto Layout entra en detalle.

Un hábito útil: conserva la importación original en su propia página como el "antes" y duplícala para tu rediseño. Activa Reference screenshot (Pro) durante la importación si quieres una capa de imagen oculta y bloqueada para comparar lado a lado con la página en vivo.

Paso 6: prototipa

Las páginas importadas ya vienen en parte conectadas:

• Los enlaces siguen siendo clicables (Open link).
• Los enlaces entre páginas importadas se convierten en interacciones Navigate, así que una importación de varias páginas es un flujo clicable desde el primer momento.
• Los encabezados fijos y sticky y las zonas con scroll horizontal funcionan en el modo Present.
• Las variantes hover del paso 4 vienen con interacciones on-hover.

Eso significa que puedes poner el prototipo del "antes" junto al del "después" en una presentación al cliente sin conectar ninguno de los dos desde cero.

Paso 7: mantenlo sincronizado

Los sitios no dejan de cambiar. Cada frame importado guarda su URL de origen, así que Re-import está a un clic cuando cambia la página en vivo. Como las variables y los estilos existentes se reutilizan, volver a importar no llena tu archivo de duplicados.

Casos de uso en la práctica

Propuestas de rediseño de agencias

Una agencia que presenta un rediseño necesita rápidamente el sitio actual del cliente en Figma. Importa las páginas clave como Responsive set, extrae el sistema de diseño y tendrás una sección objetiva de "esto es lo que tenéis hoy", con el inventario real de color y tipografía, antes de mostrar una sola idea nueva. El plan Team comparte cinco puestos, así que varios diseñadores pueden trabajar con la misma licencia. Consulta website to Figma y la guía de rediseño.

Auditorías del desfase entre diseño y código

Importa la página de producción y colócala junto al mockup original. Las diferencias de espaciado, colores y tipografía aparecen capa a capa, y las variables generadas revelan cuántos colores fuera de la paleta se han colado.

Funciones construidas por desarrolladores

Un desarrollador prototipó una función en localhost. Captúrala con la extensión de Chrome, envíala a Figma y el diseñador la pulirá en el mismo archivo que el resto del producto.

Páginas generadas por IA

Si el punto de partida es HTML de Claude o Cursor, conecta el asistente por MCP y la página llegará a tu plugin abierto. Consulta AI to Figma.

Aprendizaje y análisis

Los estudiantes pueden importar sitios bien construidos y estudiar cómo se estructuran las secciones, cómo escala la tipografía y cómo se repite el espaciado, capa a capa.

Consideraciones de privacidad en el trabajo con clientes

Las agencias importan a menudo sitios de clientes, así que importa qué pasa con los datos. Las páginas se renderizan en un navegador aislado y en sandbox; el resultado se entrega una sola vez y luego se elimina de la memoria, sin escribirse nunca en disco. Los archivos locales subidos se eliminan en cuanto termina la importación. El plugin no lee el contenido de tu archivo de Figma. La página de seguridad recoge la política completa.

Cómo empezar

La forma más rápida de comprobar si este flujo te encaja es probarlo con una página real en la que estés trabajando. Free incluye 10 importaciones al mes; Pro añade las funciones de sistema de diseño y componentes descritas arriba. Compara los planes en precios, consulta la documentación o mira cómo se comparan otras herramientas en la página de alternativas.