El plugin Weblify para Figma enlaza a la Weblify Chrome Extension, gratuita, para importar sitios web. La extensión funciona directamente en tu navegador, también en páginas que usan tu inicio de sesión o tu sesión actual del navegador.
Importar un sitio web
- Instala la Weblify Chrome Extension.
- Abre en Chrome la página web que quieres copiar.
- Selecciona el icono de la extensión Weblify para abrir su barra de herramientas en la página.
- Deja Current Window Size o abre el control de tamaño para elegir uno o varios tamaños de captura.
- Elige Copy page para copiar la página entera o Pick element para seleccionar un elemento.
- Espera a que aparezca la confirmación Copied to clipboard. Si copias una página, deja que Weblify termine de desplazarse y de preparar el contenido.
- Vuelve a tu archivo de Figma y pega con Command + V en macOS o Ctrl + V en Windows.
También puedes elegir Import website en el menú ⋯ del plugin Weblify para Figma y seleccionar Download the Chrome Extension.
Elegir los tamaños de captura
Abre el control de tamaño que hay junto al logotipo de Weblify para ver Capture sizes. El control muestra el tamaño seleccionado, o un recuento como 2 sizes cuando hay varios seleccionados.
| Tamaño | Área visible del navegador |
|---|---|
| Current Window Size | El ancho y el alto del contenido de la ventana actual de tu navegador. Las dimensiones se actualizan cuando cambias el tamaño de la ventana. |
| Desktop | 1440 × 900 píxeles |
| Tablet | 768 × 1024 píxeles |
| Mobile | 390 × 844 píxeles |
| Custom | Introduce un ancho de 280 a 2560 píxeles y un alto de 320 a 2400 píxeles. |
Marca varias casillas para copiar a Figma frames independientes, con nombre, uno al lado del otro. Siempre queda al menos un tamaño seleccionado. Tus elecciones se mantienen al usar Restart, hasta que vuelvas a cargar la página web.
Copy page incluye la altura completa de la página en cada ancho seleccionado. El ajuste de alto define el área visible que se usa para maquetar la página; no recorta el resultado a esa altura. Pick element copia el elemento seleccionado tal como se ve en cada tamaño elegido.
Usa Current Window Size por sí solo para capturar la página en directo tal como está maquetada ahora. Los demás tamaños vuelven a maquetar una copia de la página, así que el contenido controlado por JavaScript, el contenido incrustado o los gráficos de canvas pueden ser distintos.
Cargar el contenido antes de copiar
Copy page se desplaza automáticamente por la página antes de capturarla. Así se da tiempo a que carguen las imágenes con carga diferida y las secciones que aparecen al desplazarse. Después, Weblify restaura tu posición de desplazamiento original y captura la página preparada en los tamaños que hayas seleccionado.
La preparación tiene un límite de tiempo y de desplazamiento para que las páginas con un feed infinito no sigan cargando para siempre. Aun así, puede faltar contenido muy lento, los últimos elementos de un feed infinito o el contenido que el sitio elimina al desplazarte. Pick element no desplaza la página automáticamente antes de copiar.
Si falta algo, desplázate tú hasta ese contenido, espera a que aparezca y prueba con Pick element seleccionando solo Current Window Size.
Elegir un elemento
Selecciona Pick element, pasa el cursor por la página y haz clic en el elemento que quieres copiar. Usa los controles de arriba y abajo para pasar a un elemento padre o hijo antes de copiarlo.
Si el elemento seleccionado está oculto en alguno de los tamaños elegidos, Weblify muestra un error en lugar de copiar un frame vacío. Elige un tamaño en el que el elemento sea visible y vuelve a intentarlo.
Después de copiar correctamente, selecciona Restart para volver a la barra de herramientas con tus tamaños elegidos intactos, o cierra el aviso de confirmación.
Las páginas internas del navegador y la Chrome Web Store no permiten que las extensiones añadan controles a la página. Abre una pestaña con un sitio web normal antes de seleccionar el icono de la extensión Weblify.