Exportar páginas web a Figma

Cómo funciona el flujo de trabajo local

CloneWebsite no envía ninguna página web a un servidor de conversión. La extensión de Chrome lee la página renderizada en tu pestaña activa, crea un archivo .cdesign versionado en la memoria y lo descarga o almacena localmente. El plugin Figma de CloneWebsite abre ese archivo y crea capas en el documento de Figma actual.

Página web renderizada → Extensión de Chrome → archivo .cdesign local → plugin Figma → capas editables

El archivo .cdesign es un contenedor abierto basado en ZIP. Contiene un manifiesto, un archivo de escena JSON por cada estado capturado y recursos de imagen con direccionamiento por contenido.

Capturar una página o componente

1. Abre la página web y espera a que su contenido y fuentes web terminen de renderizarse.
2. Abre la barra de herramientas de CloneWebsite y cambia la salida de Sitio web a Figma.
3. Elige Clonar página o Clonar componente.
4. Abre las opciones de captura de Figma y elige combinaciones de viewport y tema. El ajuste inicial captura el viewport y el tema actuales. Puedes añadir viewports de 1440, 768 y 390 píxeles y temas claro u oscuro, hasta seis combinaciones.
5. Mantén activada la Captura mejorada cuando necesites viewports responsive, estados de interacción de componentes, retrocesos de rasterización para iframe/filtros o una geometría de navegador más precisa.
6. Selecciona Iniciar. En el modo componente, haz clic en el componente en la página y confirma la selección.
7. Descarga el archivo .cdesign resultante o guárdalo en la lista de proyectos local de la extensión para descargarlo más tarde.

Permiso de depurador de Chrome

Chrome no permite declarar el permiso debugger como opcional, por lo que se concede al instalar la extensión. CloneWebsite solo adjunta el depurador cuando inicias una captura de Figma con Captura mejorada activada. Se usa temporalmente para emular combinaciones de viewport/tema, forzar estados pseudo soportados de componentes y crear capturas de pantalla locales para subárboles visuales no soportados. La extensión se desconecta de la pestaña cuando la captura finaliza o falla.

Cuando la Captura mejorada está desactivada, la extensión no adjunta el depurador. El modo básico captura el viewport actual, el tema actual y el estado de componente Default. El informe de captura explica qué escenas o retrocesos mejorados se omitieron.

Chrome DevTools y otro cliente del depurador no pueden controlar la misma pestaña al mismo tiempo. Cierra DevTools para esa pestaña si la captura mejorada informa de un error de adjunción.

Importar a Figma

Durante la fase de publicación interna:

1. Compila el plugin desde figma_plugin/ con pnpm install && pnpm build.
2. En Figma Desktop, elige Plugins → Development → Import plugin from manifest….
3. Selecciona figma_plugin/manifest.json.
4. Ejecuta CloneWebsite Design Importer.
5. Suelta el archivo .cdesign, selecciona las escenas a importar e inicia la importación.

El plugin no tiene permiso de red. El análisis del archivo, la creación de imágenes, la coincidencia de fuentes y la generación de capas se realizan dentro de Figma en tu dispositivo.

Qué sigue siendo editable

• Marcos, rellenos, bordes, radios de esquina, sombras y modos de mezcla básicos
• Contenido de texto, tamaño de fuente, altura de línea, alineación, decoración y color
• Capas de imagen y SVG
• Diseños Flexbox de alta confianza como Auto Layout de Figma
• Componentes seleccionados como componentes de Figma
• Estados de componente Default, Hover, Focus, Active y Disabled como variantes cuando la captura mejorada puede mapear el componente seleccionado

Las regiones de página Grid y de formato libre usan posicionamiento absoluto para preservar la geometría. Los filtros complejos, máscaras, iframes, superficies de vídeo y efectos de navegador no soportados pueden convertirse en capas de retroceso de rasterización local.

Fuentes e informes de importación

Los plugins de Figma no pueden instalar una fuente web remota de la página en el editor. El importador primero busca la familia y el estilo solicitados entre las fuentes disponibles para Figma. Si no puede cargar una coincidencia exacta, usa un retroceso local editable y enumera la sustitución en el informe de importación.

El informe también enumera los recursos faltantes, los retrocesos de rasterización, el marcado SVG no seguro omitido, los límites de nodos y las advertencias de captura. Revísalo antes de tratar el archivo importado como fuente de diseño de producción.

Privacidad y uso responsable

El contenido de la página no se sube a CloneWebsite. Las solicitudes de red durante la captura se limitan a la descarga de recursos ya referenciados por la página, además de un punto de conexión de IA BYOK opcional si configuraste esa función por separado. Consulta la política de privacidad de la extensión.

Solo captura páginas a las que estés autorizado a acceder. Los derechos de autor, marcas, datos personales y derechos de diseño del sitio original permanecen con sus propietarios.