Website to Figma: pasa la web completa a Figma, no solo la página de inicio

Hay tres formas de pasar muchas páginas de una web a Figma, y se combinan bien.

Varios enlaces

Pega hasta 10 URLs en la pestaña Multiple. El plugin las procesa de forma secuencial y coloca cada página en su propia fila, así que las capturas Desktop, Tablet y Mobile de una página quedan juntas y las páginas se apilan una debajo de otra.

Import linked pages

Después de una importación, el plugin puede mostrar otras páginas del mismo sitio enlazadas desde ella. Elige las que quieras y se ejecutarán como una importación Multiple. Empezando por la página de inicio, esto suele cubrir la navegación principal en un par de rondas.

Carpeta del sitio o .zip

Si tienes el build estático, arrastra la carpeta a la pestaña Local file o sube un .zip de hasta 30 MB y luego elige qué páginas HTML traer. Los archivos se abren desde la memoria dentro de un navegador aislado y se eliminan en cuanto termina la importación.

Cada página cuenta como una importación, sea cual sea el número de pantallas. En Free tienes 10 importaciones al mes; Pro y Team son ilimitados dentro de un margen de uso razonable. Consulta los precios para más detalles.

Un conjunto estático de frames es útil, pero los clientes y las partes interesadas entienden un sitio más rápido cuando pueden recorrerlo con clics. HTML to Frames conserva la navegación que ya tienes:

• Los enlaces entre páginas importadas se convierten en interacciones Navigate, así que al hacer clic en Pricing en el frame de la página de inicio vas al frame de precios.
• Los demás enlaces conservan una acción Open link y se abren en el navegador.
• Los encabezados fijos y sticky se quedan en su sitio mientras haces scroll en el modo Present.
• Las zonas con scroll horizontal, como carruseles y tiras de pestañas, se desplazan de lado.

En Pro, los elementos con estado hover se convierten en conjuntos de componentes con variantes Default y Hover y una interacción on-hover, así que los botones y los elementos de menú reaccionan cuando pasas el cursor por encima.

Esto convierte el sitio importado en una base que puedes presentar tal cual. Recorre la experiencia actual, señala los problemas con comentarios y luego duplica los frames y empieza el rediseño junto al original. Como cada frame guarda su URL de origen, puedes volver a importar cualquier página más adelante y comparar el sitio en vivo con la propuesta. Más sobre cómo se estructuran las páginas en HTML to frame.

Las conexiones de prototipo solo se crean entre páginas que forman parte de la importación, así que añadir páginas con Import linked pages también amplía el flujo clicable.

Para una agencia de diseño, la primera semana de un proyecto suele irse en recrear el sitio existente del cliente para tener algo que rediseñar. Importarlo elimina la mayor parte de ese trabajo y deja al equipo con un archivo que ya está organizado.

Un flujo típico es así:

1. Antes del pitch: importa las plantillas clave del cliente y activa Styles & variables para ver el sistema de color y tipografía que realmente se usa.
2. Durante el descubrimiento: presenta la importación clicable al cliente y anota los puntos problemáticos directamente sobre los frames.
3. Durante el rediseño: duplica los frames y modifícalos en su sitio; los componentes extraídos de estructuras repetidas aceleran los cambios globales.
4. En la entrega: vuelve a importar las páginas modificadas para confirmar lo que se publicó.

El plan Team ofrece cinco puestos con una clave de licencia compartida, por un precio de lanzamiento de $22 al mes, con hasta cuatro pantallas por importación. Encaja con un estudio pequeño en el que varios diseñadores importan sitios de clientes en paralelo.

Las agencias que trabajan para clientes también suelen preguntar por los datos. Las páginas se renderizan en un navegador aislado y los resultados se entregan una sola vez y nunca se escriben en disco. La información completa está en la página de seguridad.