Website a Figma: la guía completa para convertir páginas web en vivo en diseños editables
Los equipos necesitan rediseñar sitios web cuyo diseño original falta, está desactualizado o nunca existió. La página de producción suele ser la única versión exacta de la UI, y trazarla a mano en Figma cuesta días por pantalla.
La conversión website-to-Figma resuelve esto. Señalas a Codia AI una URL en vivo (o pegas HTML/CSS) y obtienes un archivo editable de Figma: frames, capas de texto, componentes y tokens de diseño. Diseñadores y diseñadoras pueden auditar, rediseñar, documentar o extraer un sistema de diseño desde una página de producción en lugar de reconstruirla desde cero.
Producto relacionado de Codia: Codia HTML to Figma.
Esta guía cubre todo: cuándo usar website-to-Figma frente a screenshot-to-Figma frente a HTML-to-Figma, consejos específicos para landing pages / apps SaaS / e-commerce / sitios de marketing, preparación de captura y limpieza posterior a la conversión.
Cuándo usar website-to-Figma
Usa este flujo cuando:
- El archivo Figma original falta o está desactualizado, y la producción es la fuente de verdad.
- Estás empezando un rediseño y necesitas una base editable de la página actual.
- Estás auditando la diferencia entre la fuente de Figma y la deriva en producción.
- Estás haciendo investigación competitiva y necesitas referencias editables, no capturas.
- Estás documentando la UI de un producto en vivo de vuelta en Figma para trabajo de sistema de diseño.
- Estás extrayendo un sistema de diseño de páginas existentes.
- Heredaste un sitio de marketing y necesitas meterlo bajo control de design ops.
Website-to-Figma vs Screenshot-to-Figma vs HTML-to-Figma
Los tres flujos tienen intención parecida, pero entradas y compensaciones distintas:
| Flujo | Entrada | Ideal para |
|---|---|---|
| Website to Figma | URL en vivo | La página es accesible en un navegador. Quieres pistas de layout a nivel de fuente (CSS calculado, nombres reales de fuentes). |
| Screenshot to Figma | PNG/JPG | No puedes acceder a la página en vivo (de pago, interna, borrada, solo tienes una imagen). |
| HTML to Figma | HTML/CSS bruto | Tienes el código fuente y quieres la máxima fidelidad. Común en flujos liderados por desarrollo. |
En la práctica, la mayoría de los equipos usa una mezcla: URLs en vivo para sitios actuales o de competidores, capturas para boards de inspiración y referencias inaccesibles, y HTML bruto para conversiones orientadas a ingeniería.
Flujo de trabajo
- Elige la URL y el viewport. Decide si vas a capturar escritorio, tablet o móvil; captura cada breakpoint por separado para cubrir responsive.
- Prepara la página. Cierra banners de cookies, descarta popups y widgets de chat, inicia o cierra sesión según corresponda y espera a que carguen las fuentes y las imágenes diferidas.
- Captura estados clave por separado. Una página convertida refleja lo que estaba visible. Captura navegación abierta, modal abierto, estado vacío, toggle de precios, tarjeta hover, menú móvil y estado con sesión iniciada como trabajos separados.
- Ejecuta la conversión. Codia AI analiza layout, tipografía, colores, iconos, imágenes y estructura de componentes.
- Abre el resultado en Figma. Cada viewport capturado se convierte en su propio frame.
- Revisa (lista abajo).
- Convierte en componentes las secciones repetidas: navegación, hero, tarjetas de funcionalidades, footers, bloques CTA.
Consejos según el escenario
Landing pages de marketing
- Convierte una sección a la vez en páginas largas (hero, funcionalidades, prueba social, precios, FAQ, footer). Obtendrás una estructura Auto Layout más limpia por sección que con una sola captura gigante.
- Las ilustraciones del hero y los degradados decorativos suelen llegar como raster; sustitúyelos por activos vectoriales de tu sistema de diseño si necesitas que sean editables.
- Las tablas de precios se benefician de una captura enfocada: desplázate hasta la tabla y convierte solo esa sección.
- Para variantes de A/B testing, convierte cada variante por separado y colócalas una al lado de la otra en Figma para revisarlas.
Pantallas de apps SaaS
- Las pantallas reales de producto suelen contener datos personalizados o sensibles; usa una cuenta de demo o un estado vacío para capturar.
- Sidebars, top nav y modales se repiten entre pantallas. Convierte una pantalla, luego convierte el chrome en componente y después convierte pantallas adicionales que reutilicen los mismos componentes.
- Los estados vacíos, de error y de carga suelen faltar en la fuente de Figma y vale la pena capturarlos de forma específica.
- Para cuadrículas densas y tablas, consulta los consejos de dashboard en Screenshot to Figma.
Sitios de e-commerce
- Las galerías de producto llegan como marcadores de imagen; sustitúyelas por fotos reales del producto.
- Los selectores de variantes, tallas y cantidad son buenos candidatos para convertirse inmediatamente en componentes.
- Conviene convertir juntos el PDP, el carrito y el flujo de checkout para que el sistema de diseño refleje el recorrido de compra completo.
Investigación competitiva
- Convierte landing pages de competidores en referencias editables de Figma para que tu equipo pueda analizar estructura, copy, jerarquía y composición visual, no solo mirar capturas planas.
- Agrupa varias capturas de competidores en un mismo archivo de Figma para revisarlas en paralelo.
- Usa las capturas como inspiración y análisis, no como reproducciones 1:1. Siempre rehazlas con tu propia marca antes de publicar.
Documentar la UI de producción de vuelta en Figma
- Convierte todas las páginas con más tráfico del producto en producción, una por una.
- Mapea los colores y estilos tipográficos recuperados a tu librería de Figma al importarlos; el informe marca cualquier color o estilo que no coincida con el sistema.
- Esta es la base para cerrar la brecha entre "fuente Figma" y "producción".
Qué limpiar después de la conversión
Trata la importación como un borrador editable sólido. Revisa:
- Fuentes. Las web fonts se sustituyen en la primera apertura en Figma. Mapea a las fuentes de tu sistema de diseño.
- Estilos de texto. Sustituye tipografías ad hoc por los tokens de tu sistema de diseño.
- Iconos. Reemplaza iconos raster con assets SVG correctos de tu librería.
- Imágenes de fondo. Recorta correctamente; sustituye fondos decorativos por assets del sistema de diseño si hace falta.
- Secciones repetidas. Agrupa tarjetas, elementos de navegación, botones y footers en componentes de Figma.
- Restricciones responsivas. Reconstruye Auto Layout para cualquier frame que deba escalar entre breakpoints.
- Widgets de terceros. Globos de chat, banners de cookies y overlays de analítica no pertenecen a tu sistema de diseño; elimínalos.
- Tokens de color. Mapea los colores recuperados a tus tokens de color del sistema de diseño.
Errores comunes
Capturar el viewport equivocado. Una captura de 1440 px no te dirá cómo se ve la página a 375 px. Captura cada breakpoint que realmente te importe.
Olvidar descartar overlays. Los banners de cookies, widgets de chat y encuestas de Hotjar también se capturan y añaden trabajo de limpieza. Descártalos antes.
Capturar estado personalizado. Datos reales de usuario, nombres, herramientas internas: cierra sesión o usa una cuenta de demo antes de capturar.
Una sola captura larga. Las páginas largas convierten mejor si se capturan sección por sección.
Omitir estados interactivos. Menús, modales, tarjetas hover y estados vacíos no están en la captura por defecto. Captúralos como trabajos separados.
Tratar la conversión como si fuera diseño. La salida es una base. El trabajo de diseño es la limpieza, la componentización y las decisiones de rediseño que vienen después.
Conversión por API y por lotes
Para trabajo de diseño puntual, el plugin y la web app bastan. Para equipos que convierten bibliotecas enteras de páginas — agencias reconstruyendo 200 sitios de clientes, equipos internos documentando una superficie completa del producto, design ops auditando marca en varios mercados — la Visual Struct API acepta URLs, captura páginas y devuelve JSON estructurado que tu tooling puede convertir en Figma o canalizar hacia pipelines de diseño posteriores.
Los endpoints por lotes admiten ingesta masiva de URLs con callbacks webhook cuando termina el procesamiento.
Preguntas frecuentes
¿Se puede convertir cualquier sitio web en Figma?
La mayoría de las páginas web visibles pueden convertirse en borradores editables útiles. Las apps muy dinámicas, las páginas pesadas en canvas (3D, WebGL) y las pantallas personalizadas pueden necesitar limpieza adicional. Los sitios que bloquean la captura automatizada necesitan un flujo basado en captura.
¿Capturará los layouts responsive?
Captura el viewport que especifiques. Captura escritorio, tablet y móvil por separado cuando necesites cobertura responsive.
¿Capturará estados interactivos?
Solo el estado visible. Menús, modales, tarjetas hover y estados vacíos deben capturarse como trabajos separados.
¿El archivo convertido incluye código real?
No: Figma es una herramienta de diseño, no una fuente de código. Si quieres ir de un sitio web a código, puedes hacer website → Figma → Figma to Code, o capturar una pantalla y usar Screenshot to Code directamente.
¿Es útil para investigar competidores?
Sí. Las referencias editables en Figma son mucho más útiles para análisis y planificación de rediseño que las capturas planas, pero trátalas siempre como inspiración, no como copias 1:1.
¿Y las páginas protegidas por autenticación?
Usa una sesión de navegador iniciada o una cuenta de demo temporal. Los datos sensibles de clientes nunca deben estar en las entradas de captura.
¿La conversión puede manejar un sitio completo de una sola vez?
Para trabajo de diseño individual, captura página por página. Para capturas de sitios completos (docenas o cientos de páginas), usa la Visual Struct API con endpoints por lotes.