Website to Figma: guía para agencias y propuestas de rediseño

Todo rediseño empieza con la misma tarea poco glamurosa: llevar el sitio actual del cliente a tu herramienta de diseño. Las capturas de pantalla son rápidas, pero nacen muertas. Reconstruir las páginas a mano es preciso, pero se come días que preferirías dedicar al rediseño en sí.

Esta guía muestra cómo pasar una web a Figma (website to Figma) como capas reales y editables con HTML to Frames, y cómo convertir esa importación en una propuesta de rediseño que tu cliente entienda de un vistazo. Está escrita para agencias y diseñadores freelance, pero el flujo funciona igual de bien para equipos internos que auditan el sitio de su propio producto.

¿Por qué llevar el sitio web actual a Figma?

Una propuesta de rediseño es un argumento. Le estás diciendo al cliente: "esto es lo que tienes, esto es lo que debería ser y este es el porqué". Ese argumento es mucho más sólido cuando la parte de "lo que tienes" es precisa y editable.

• Auditas lo real. El espaciado, la escala tipográfica, el uso del color y la desviación de los componentes se ven en el panel de capas, no se adivinan a partir de una captura.
• Rediseñas sobre la estructura existente. Cambia un hero, sustituye un estilo de tarjeta, rehaz la navegación, mientras el resto de la página se mantiene intacto como contexto.
• Muestras el antes y el después lado a lado. Mismo tamaño de frame, mismo contenido, distinto diseño. Los clientes lo entienden al instante.
• Te ahorras el tiempo de reconstrucción. Las horas que pasarías redibujando el sitio actual se dedican a explorar opciones.

HTML to Frames convierte una página en frames, textos, vectores e imágenes reales de Figma, no en una imagen plana. Si quieres el contexto de esa distinción, lee HTML to canvas frente a capas editables.

Website to Figma frente a URL to Figma: ¿cuál es la diferencia?

La gente busca ambas cosas y, en la práctica, se refieren al mismo flujo. URL to Figma suele describir la mecánica: pega un enlace y obtén un diseño. Website to Figma describe el alcance: varias páginas de un mismo sitio, a menudo en distintos tamaños de pantalla. HTML to Frames cubre ambos, desde una sola importación URL to Figma hasta una captura completa website to Figma con páginas enlazadas.

Paso 1: planifica qué páginas capturar

Antes de abrir Figma, enumera las páginas que sostienen la historia del rediseño. En la mayoría de los sitios de marketing son:

1. Página de inicio
2. Una landing o página de producto clave
3. Precios
4. Sobre nosotros o equipo
5. Índice del blog y un artículo
6. Contacto o una página con un formulario clave

Rara vez necesitas el mapa del sitio completo. Necesitas una página por plantilla, porque lo que vas a rediseñar son las plantillas. Entre seis y diez páginas suelen bastar, lo que encaja perfectamente en una importación Multiple.

Paso 2: importa varias páginas de una vez

Abre el plugin y usa la fuente Multiple. Pega hasta 10 enlaces; se procesan uno tras otro y cada página se convierte en una fila del lienzo. La importación Multiple está disponible en todos los planes, incluido Free.

Algunos detalles importan en el trabajo de agencia:

• Un sitio = un ancho. Desktop usa Site width: el plugin mide el ancho de diseño real de la página al importarla. Los diseños a sangre completa llegan a 1920 con la caja de contenido centrada, los sitios en caja con el ancho de su caja (por ejemplo, 1200, 1280 o 1440) y los sitios fluidos a 1440. En una importación de varias páginas, todas las páginas del sitio comparten ese ancho, así que tus filas quedan alineadas.
• Los nombres de los frames son legibles. Los frames se llaman como domain/path — Desktop (1920), sin protocolo ni www, así que distingues las páginas en el panel de capas.
• Los banners de cookies y las ventanas emergentes se pueden ocultar si lo pides, y las animaciones se congelan para obtener un frame limpio. El sitio se captura tal como lo ve un visitante normal.

Importa las páginas enlazadas en lugar de buscar URLs

Si aún no tienes una lista de páginas, importa primero la página de inicio. Después de la importación, usa Import linked pages: elige otras páginas del mismo sitio en una lista y se importarán como una importación Multiple. Es la forma más rápida de recoger los destinos de la navegación principal sin copiar URLs desde el navegador.

Paso 3: captura el Responsive set

Cada vez más clientes preguntan "¿cómo se ve en mi móvil?" antes que cualquier otra cosa. Responde con frames reales.

Activa el Responsive set para capturar Desktop + Tablet + Mobile con un clic. Tablet mide 768, Mobile 390 y también está Laptop a 1280. En Pro y Team puedes capturar hasta 4 pantallas por importación y definir un ancho personalizado si la analítica del cliente muestra un breakpoint poco habitual. Las pantallas de una página se capturan en paralelo.

La facturación sigue siendo sencilla: 1 importación = 1 página con todas sus pantallas. Desktop, Tablet y Mobile de la página de inicio cuentan como una sola importación.

Paso 4: añade Light + Dark si el sitio lo admite

Si el sitio del cliente responde a prefers-color-scheme, la opción Light + Dark (Pro) captura la página en ambos modos. Obtienes una colección de variables con modos Light y Dark, además de una copia oscura de cada pantalla. Es un punto de partida sólido si el modo oscuro forma parte del brief del rediseño, y te dice de inmediato qué componentes nunca se diseñaron para fondos oscuros.

Ten en cuenta que los archivos de Figma Free permiten un modo por colección, así que en un archivo Free el modo oscuro se omite con una nota.

Paso 5: convierte la importación en una auditoría

Ahora la importación se convierte en un archivo de trabajo. Antes de rediseñar nada, dedica una hora a auditar.

Lee el sistema de diseño que ya existe

Con Styles & variables (Pro), el plugin crea variables de color a partir de los colores usados dos o más veces y de las propiedades personalizadas CSS del sitio, de modo que --brand-primary se convierte en brand/primary. También obtienes estilos de texto y estilos de sombra. Importa el mismo sitio dos veces y no se crea nada nuevo, porque las variables y los estilos existentes se reutilizan cuando los valores coinciden.

Esa colección es un inventario honesto. Treinta grises casi idénticos u once tamaños de texto de cuerpo cuentan su propia historia en tu propuesta.

Detecta los componentes repetidos

Con Components & hover states (Pro), las estructuras repetidas, como tarjetas, botones y elementos de menú, se convierten en componentes e instancias, y los elementos con estado hover se convierten en conjuntos de componentes con variantes Default y Hover. Los componentes principales van a un frame "Components · site". Para una auditoría, ese frame es un inventario ya hecho de lo que realmente usa el sitio actual.

Revisa la estructura del layout

La mayoría de los frames llegan con Auto Layout, así que puedes redimensionar y reorganizar. El plugin primero construye la página con precisión de píxel, luego deduce pilas, espacios, padding y alineación y verifica la posición de cada hijo antes de conservar el resultado. Si un frame no se puede expresar limpiamente, mantiene posiciones absolutas con restricciones sensatas, y la pantalla de resultados te dice por qué. El mecanismo completo se explica en Auto Layout explicado.

Conserva una capa de referencia

Activa Reference screenshot para añadir una capa oculta y bloqueada que puedes mostrar para comparar la importación con la página en vivo. Es útil cuando un cliente pregunta: "¿de verdad esto es lo que tenemos hoy?"

Paso 6: construye la propuesta de rediseño

Con un "antes" preciso y editable, la propuesta casi se monta sola.

Duplica y luego rediseña

Duplica cada fila importada. Conserva el original como Before (antes), etiqueta la copia como After (después) y empieza a rediseñar sobre la copia. Como el contenido es texto real e imágenes reales, rediseñas con los propios textos y fotografías del cliente, no con lorem ipsum.

Presenta tableros antes/después

Coloca los frames Before y After lado a lado con el mismo ancho. Para cada plantilla, añade dos o tres anotaciones que expliquen el cambio: jerarquía más clara, formularios más cortos, mejor contraste, componentes consolidados.

Prototipa el flujo

Los enlaces entre páginas importadas se convierten en interacciones Navigate, y los encabezados fijos o sticky siguen funcionando en el modo Present. Eso significa que puedes recorrer con clics el sitio actual y luego la propuesta dentro del mismo prototipo, lo que resulta muy convincente en una llamada.

Antes y después: qué cambia en tu flujo de trabajo

Plan Team y licencias para agencias

Las agencias suelen tener más de un diseñador trabajando en un rediseño. Así encajan los planes:

• Free: $0, 10 importaciones al mes, 1 pantalla por importación, importación Multiple con 10 enlaces. Bueno para probar el flujo con un sitio pequeño.
• Pro: $7 al mes en el lanzamiento ($9 normalmente), importaciones ilimitadas con uso razonable, hasta 4 pantallas por importación, además de estilos y variables, Snap, componentes y hover, Light + Dark, ancho personalizado, Detailed layers, Reference screenshot y Extra wait. Se compra con el propio sistema de pago de Figma.
• Team: $22 al mes en el lanzamiento ($29 normalmente), las mismas funciones que Pro, 5 puestos mediante una clave de licencia compartida.

Para una agencia que hace unos cuantos rediseños al mes, Team mantiene a todos con las mismas funciones sin que cada diseñador tenga que comprar por separado. Consulta los precios para más detalles.

Ejemplo de calendario: un sprint de rediseño de dos semanas

Así puede ser un sprint típico cuando el plugin se encarga de la importación. Adáptalo a tu proceso.

El paso de importación, que antes llevaba uno o dos días de reconstrucción, se reduce a la primera mañana.

Consejos que ahorran tiempo con sitios de clientes

• Usa Extra wait (Pro) en sitios que cargan contenido tarde, como sliders o secciones diferidas.
• Elige el idioma de la página en sitios multilingües; el plugin admite 15 idiomas.
• Resuelve primero las fuentes. La pantalla Missing fonts sugiere reemplazos antes de construir y recuerda tus elecciones para cada sitio.
• Vuelve a importar con un clic cuando el cliente publique un cambio a mitad del proyecto. La URL de origen se guarda en el frame.
• Atento al contenido incrustado. Los mapas, los vídeos sin póster y los canvas WebGL llegan como una imagen de esa caja, porque no pueden ser capas.
• Las páginas con sesión iniciada necesitan la vía del navegador. Para portales de clientes o paneles que requieren inicio de sesión, usa la extensión de Chrome; consulta nuestra guía de localhost y páginas con sesión iniciada.

Datos del cliente y privacidad

A las agencias se les pregunta a menudo cómo se trata el material de los clientes. Las páginas se renderizan en un navegador aislado y en sandbox, se entregan una sola vez, luego se eliminan de la memoria y nunca se escriben en disco. El plugin no lee el contenido de tu archivo de Figma; solo escribe capas. La página de seguridad tiene los detalles que puedes reenviar a un cliente.

En resumen

Pasar la web de un cliente a Figma como capas editables convierte el primer paso, y el más tedioso, de un rediseño en una importación rápida. Obtienes un "antes" preciso, una auditoría construida a partir del CSS real del sitio y un archivo en el que la propuesta crece de forma natural junto al original. Empieza con una plantilla, revisa el resultado y luego trae el resto del sitio con Multiple e Import linked pages.

¿Listo para probarlo? Mira todas las funciones, lee la documentación o consigue el plugin y haz tu primera importación.