Del código de vuelta al diseño
HTML to design: recupera el archivo de diseño del que se alejó tu código
Cuando el producto publicado ya no coincide con los mockups, vuelve a importarlo. HTML to Frames convierte el HTML en vivo en un archivo de Figma con variables, estilos y componentes.
- Variables de color a partir de las propiedades personalizadas CSS de tu sitio
- Las tarjetas y botones repetidos se convierten en componentes
- Se ajusta a tu sistema de diseño existente
Muy pronto en Figma Community
HTML to design es lo contrario de la entrega habitual: en lugar de convertir un mockup en código, conviertes el código ya publicado de nuevo en un archivo de diseño. Los equipos recurren a ello cuando el archivo de Figma se ha quedado atrás respecto a producción, cuando un cliente entrega un sitio sin ningún archivo fuente o cuando un rediseño tiene que partir de lo que los usuarios ven hoy y no de un mockup de hace dos años.
El problema de la mayoría de los flujos inversos es que el resultado es un callejón sin salida. Obtienes una imagen de la página, o rectángulos sueltos con valores hexadecimales fijos, y alguien pasa una semana reconstruyendo estilos a mano. HTML to Frames está hecho para producir un archivo que de verdad puedas mantener. En Pro, extrae variables de color de los colores usados al menos dos veces y de las propiedades personalizadas CSS del sitio, de modo que --brand-primary se convierte en brand/primary dentro de una colección Colors · <domain>. Junto a ellas se crean estilos de texto y de sombra, y las estructuras repetidas, como tarjetas, botones y elementos de menú, se convierten en componentes con instancias.
Si tu equipo ya tiene un sistema de diseño en Figma, el plugin no compite con él. Las variables y los estilos que coinciden se reutilizan y, con Snap activado, los valores sin coincidencia exacta se ajustan al color o estilo de texto más cercano de tu propio archivo. Importar el mismo sitio dos veces no crea nada nuevo.
El resultado es un archivo de diseño que nace ordenado. Lee la guía del flujo HTML to design para un recorrido completo, mira cómo funciona la conversión básica en HTML to Figma o compara lo que incluye cada plan en precios.
Del código en producción a un archivo de diseño funcional
- 01
Importa las páginas en vivo
Pega una URL o hasta 10 enlaces, o arrastra la carpeta del sitio si tienes el resultado del build.
- 02
Activa Styles & variables
Se crean variables de color, estilos de texto y estilos de sombra, reutilizando todo lo que ya coincida en tu archivo.
- 03
Activa Snap para tu sistema
Los valores fuera del sistema se ajustan a tu color o estilo de texto más cercano en lugar de crear casi duplicados.
- 04
Ordena los componentes
Las estructuras repetidas llegan como componentes e instancias en un frame Components, listas para renombrar y documentar.
- 05
Empieza el rediseño
Itera sobre layouts reales con Auto Layout en lugar de redibujar desde cero el producto actual.
Resultado de sistema de diseño, no solo capas
Variables de color
Hasta 96 variables de color a partir de colores repetidos y propiedades personalizadas CSS, agrupadas en una colección por dominio.
Estilos de texto y sombra
Hasta 48 estilos de texto más estilos de sombra en tamaños sm, md, lg y xl.
Ajuste a tus estilos
Usa la distancia perceptual OKLab para los colores y, para el texto, la misma familia y peso con un tamaño dentro de un 10 %.
Componentes automáticos
Las tarjetas, botones y elementos de menú que se repiten se convierten en componentes e instancias, conservando las sustituciones de texto e imagen.
Variantes hover
Los elementos con estado hover se convierten en conjuntos de componentes con variantes Default y Hover y una interacción on-hover.
Modos Light y Dark
Captura ambos esquemas de color en una colección de variables con modos Light y Dark, además de una copia oscura de cada pantalla.
Por qué hacer ingeniería inversa de un diseño a mano es lento
Reconstruir a ojo una página de producción en Figma significa medir espaciados, muestrear colores, adivinar tamaños de fuente y redibujar iconos. Una sola página de marketing puede llevar un día. Un producto con decenas de pantallas lleva semanas, y el resultado sigue alejándose de los valores reales.
HTML to Frames lee los valores directamente del navegador, así que los espaciados, los colores y los tamaños tipográficos son exactos, no aproximados. Los iconos SVG se convierten en vectores editables. El layout se traduce a Auto Layout y se verifica con 2 px de tolerancia, y el posicionamiento absoluto solo se conserva donde el Auto Layout movería algo.
Eso cambia cómo es el primer día de un rediseño. En lugar de dedicarlo a reconstruir, el equipo empieza con una copia precisa del producto actual y dedica el tiempo a tomar decisiones:
- ¿Qué colores se usan de verdad y cuáles son casi duplicados accidentales?
- ¿Qué componentes se repiten y cuántas variantes existen en la práctica?
- ¿Dónde se aparta el layout publicado del sistema previsto?
La guía de rediseño de website to Figma explica cómo lo usan las agencias para preparar propuestas.
Como cada frame conserva su URL de origen, puedes volver a importar una página después de la siguiente versión y compararla con el rediseño. El archivo de diseño sigue conectado a producción en lugar de convertirse en otra instantánea que poco a poco queda desactualizada.
Cómo se extraen las variables y los estilos
La extracción está pensada para producir un conjunto pequeño y útil, no un estilo por elemento.
Colores
Un color se convierte en variable cuando se usa al menos dos veces o cuando el sitio lo define como propiedad personalizada CSS. Los nombres de las propiedades personalizadas se conservan como estructura: --brand-primary se convierte en brand/primary. Hasta 96 variables de color van a una colección Colors · <domain>.
Texto y sombras
Se crean hasta 48 estilos de texto a partir de la tipografía realmente renderizada en la página. Las sombras se agrupan en estilos sm, md, lg y xl.
Reutilizar antes de crear
Si tu archivo ya tiene una variable o un estilo con el mismo valor, se reutiliza. Importa el mismo sitio dos veces y no se crea nada nuevo, lo que mantiene ordenado un archivo de larga duración.
Light + Dark
Con el esquema de color Light + Dark, la página se captura con ambas configuraciones de prefers-color-scheme y una sola colección recibe dos modos. Los archivos de Figma Free solo permiten un modo por colección, así que en ese caso el modo oscuro se omite con una nota.
Todo esto es opcional. Desactiva Styles & variables y obtendrás capas simples con valores sin procesar, que a veces es justo lo que quieres para una referencia rápida o un análisis puntual.
Snap: mantener las importaciones dentro de tu sistema de diseño
El código de producción rara vez coincide perfectamente con un sistema de diseño. Un botón puede usar #2161E9 cuando el token es #2160E8, o un título puede medir 31 px en lugar de 32 px. Importar esos valores literalmente llenaría tu archivo de estilos casi duplicados.
Snap to my file's styles (ajustar a los estilos de mi archivo) lo resuelve. Cuando no hay una coincidencia exacta, el plugin busca el color más cercano de tu archivo mediante la distancia perceptual OKLab, y el estilo de texto más cercano con la misma familia tipográfica y el mismo peso y un tamaño dentro de un 10 %. Después, las capas importadas se vinculan a tus estilos en lugar de a estilos nuevos.
Esto resulta útil en tres situaciones:
- Auditorías en las que quieres ver el producto expresado en el sistema oficial.
- Rediseños que deben empezar dentro del sistema desde el primer frame.
- Análisis de la competencia en los que reestilizas otro layout con tus propios tokens.
Snap, Styles & variables y Components & hover states son funciones Pro. El plugin nunca lee el contenido de tu archivo más allá de lo que necesita; escribe capas y solo lee los metadatos de sus propios frames, como se describe en la página de seguridad.
Snap funciona mejor cuando tu archivo ya contiene estilos de color y de texto publicados. Empieza con una biblioteca pequeña y limpia, importa una página representativa y comprueba qué valores se ajustaron antes de lanzar una importación Multiple más grande con el resto del sitio.
Preguntas frecuentes
Describe el proceso de convertir código en vivo o un sitio web publicado de nuevo en un archivo de diseño editable. En lugar de diseñar primero y programar después, importas lo que ya está construido para que el archivo de diseño vuelva a coincidir con producción, algo útil para rediseños, auditorías y sitios entregados sin archivos fuente.
En Pro, sí. Los colores usados al menos dos veces y los definidos como propiedades personalizadas CSS se convierten en variables. Una propiedad como --brand-primary se convierte en brand/primary dentro de una colección Colors con el nombre del dominio. Se crean hasta 96 variables de color por importación.
No. Las variables y los estilos que ya están en tu archivo se reutilizan cuando los valores coinciden, e importar el mismo sitio dos veces no crea nada nuevo. Con Snap activado, los valores sin coincidencia exacta se vinculan a tu color o estilo de texto existente más cercano en lugar de crear otros nuevos.
Las estructuras repetidas, como tarjetas, botones y elementos de menú, se detectan y se convierten en componentes con instancias, conservando las sustituciones de texto e imagen. Los elementos con un estado hover distinto se convierten en conjuntos de componentes con variantes Default y Hover. Los componentes principales se colocan en un frame Components aparte.
Sí, en Pro. Elige Light + Dark como esquema de color y la página se captura con ambas configuraciones. Obtienes una colección de variables con modos Light y Dark, además de una copia oscura de cada pantalla. Los archivos de Figma Free permiten un modo por colección, así que allí se omite el modo oscuro.
No. Para la mayoría de los sitios basta con una URL pública. Si tienes el resultado del build, puedes arrastrar la carpeta del sitio o un .zip, y para las páginas que requieren inicio de sesión la extensión gratuita de Chrome captura lo que muestra tu navegador. Todas las vías producen el mismo resultado editable.
Relacionado
Deja de redibujar la web.
Pega un enlace y obtén capas de Figma reales, editables y responsive en segundos. Gratis para empezar: 10 importaciones cada mes.
Sin tarjeta de crédito. Pro se compra dentro de Figma.
Muy pronto en Figma Community