Cómo convertir cualquier sitio web en un diseño Figma

Figma es una gran herramienta que se está convirtiendo rápidamente en una de las favoritas entre los diseñadores web y de UX/UI. Puede crear diseños web adaptables rápida y fácilmente con esta herramienta gratuita basada en navegador.

Si bien la mayoría de las personas crean sus diseños desde cero en Figma, usted puede inspirarse en sitios web reales y crear fácilmente un diseño de Figma directamente desde una página HTML existente. Aquí está cómo hacerlo.

Por qué debería crear diseños de Figma a partir de HTML

Hay muchas razones por las que puede querer replicar un diseño web existente como un diseño de Figma. Hacer esto a través del complemento Figma ahorra tiempo, lo que le permite concentrarse en ajustar su diseño.

Practicar el diseño web recreando páginas web existentes es una excelente manera de aprender de los maestros. También puede utilizar la herramienta de diseño de HTML a Figma si ha diseñado y publicado anteriormente una página web a la que ha perdido el acceso. En lugar de rediseñarlo desde cero, puede ahorrar tiempo volviéndolo a convertir a Figma para trabajar en él nuevamente.

Ahora que sabe por qué esta herramienta puede ser útil, es hora de aprender cómo funciona.

Cómo convertir cualquier sitio web en un diseño Figma

Para comenzar cualquier trabajo de diseño basado en Figma, debe abrir Figma e iniciar sesión o registrarse. Puede usar la versión del navegador, Figma , o descargar la aplicación de escritorio ; ambos funcionan de la misma manera para este proyecto.

Abra un nuevo archivo de diseño para comenzar su proyecto de diseño de HTML a Figma.

Paso 1: Descargue el complemento html.to.design

Para poder convertir directamente un sitio web en vivo en un diseño de Figma, necesitará un complemento. Hay innumerables complementos en Figma para ayudarlo con sus diseños, incluidos complementos para crear maquetas para teléfonos y dispositivos. Puede agregar el diseño de su sitio web convertido a una maqueta más tarde si lo desea.

Para descargar el complemento, seleccione el menú de Figma (logotipo de Figma) > Complementos > Buscar más complementos . Como alternativa, puede seleccionar Recursos > Complementos . Desde cualquier opción, escriba en la barra de búsqueda html.to.design .

Busque la opción proporcionada por divRIOTS y seleccione Ejecutar . Esto abre el complemento como un cuadro de diálogo en su lienzo de Figma.

Paso 2: pegue la URL del sitio web

El complemento html.to.design es gratuito, pero ofrece una versión pro. Puede completar su proceso de diseño por completo con la versión gratuita.

Encuentre el sitio web del que desea hacer un diseño de Figma. Debe usar un sitio web público, no una página web a la que solo se pueda acceder iniciando sesión. Vamos a usar nuestra página de inicio, MakeUseOf.com.

Copie la URL completa y péguela en el cuadro de importación en Figma, reemplazando el marcador de posición del sitio web de Apple.

Paso 3: Carga tu diseño

Después de pegar la URL del sitio web, abra Configuración debajo del cuadro de importación para seleccionar el tamaño del diseño. Puede importar el diseño para una variedad de dispositivos, pero tendrá más éxito al elegir un dispositivo de escritorio si usó una URL de escritorio y mejor si usa una URL móvil para dispositivos móviles.

También hay opciones personalizadas para dispositivos o tamaños que no están disponibles como opciones predeterminadas. Estamos eligiendo MacBook Pro 14” con un tema Light .

Una vez que haya especificado su dispositivo y vea la configuración, seleccione Importar para que su diseño HTML cobre vida en Figma. Espere hasta que la barra de carga esté completa para que se complete el diseño de Figma.

Dependiendo del sitio web que haya utilizado, es posible que observe un cuadro emergente que explica que algunos tipos de letra tuvieron que ser reemplazados. Esto se debe a los derechos de autor de los tipos de letra con licencia. Figma los reemplazará con tipos de letra a los que tenga acceso.

Salga de cualquier ventana emergente, luego salga del cuadro de diálogo del complemento para ver su nuevo diseño en su forma completa.

Paso 4: edite su diseño de Figma

Desde aquí, puede comenzar a editar su página web de Figma de la forma que desee. Como se mencionó, esta función de HTML a Figma le permite aprender cómo se diseñaron las páginas web existentes para inspirarlo a crear las suyas propias desde cero. Puede usar el diseño base del sitio web y crear una presentación usando transiciones en Figma, o simplemente aprender cómo otros diseñadores configuran las páginas web.

En el menú de la izquierda, encontrarás las capas. Dado que esto se ha convertido directamente de HTML, las capas pueden ser más detalladas, o incluso confusas, de lo que estás acostumbrado cuando diseñas tú mismo. Seleccione una sección en el diseño para encontrar las capas resaltadas en el menú de la izquierda.

Puede reemplazar imágenes, volver a escribir títulos y texto del cuerpo, o mover cosas dentro del diseño haciendo doble clic en el aspecto del diseño. El complemento html.to.figma no replica la configuración de transición o animación al hacer clic en enlaces o cambiar de página. Puede agregarlos por su cuenta.

Cómo convertir una página web privada

La mayor parte del proceso de creación de un sitio web privado, uno que requiere una cuenta para acceder, en comparación con una página web pública es el mismo. Sin embargo, en lugar de pegar la URL, debe usar una extensión de Chrome que genere un archivo.

Para comenzar, abra Figma y el complemento html.to.figma de la misma manera que antes.

Paso 1: descarga y ejecuta la extensión de Chrome

Solo puede usar esta extensión con Google Chrome, así que abra Chrome para comenzar. En el cuadro de diálogo del complemento Figma, seleccione la extensión de Chrome, o abra la extensión aquí en su navegador Chrome.

Seleccione Agregar a Chrome > Agregar extensión para agregar la extensión a su navegador.

Con la extensión agregada, navegue hasta el sitio web privado o la página cuyo diseño desea replicar (estamos usando una página de Instagram) y seleccione la extensión. Las extensiones colapsadas se encuentran debajo del ícono de la pieza del rompecabezas en su navegador.

Le preguntará si desea capturar toda la página o solo lo que está a la vista. Haga su selección y luego la captura aparecerá en sus descargas como un. archivo h2d.

Paso 2: arrastre el archivo generado al complemento de Figma

Vaya a su aplicación Figma o al sitio de Figma en su navegador y arrastre su descarga. archivo h2d en la caja. El archivo se cargará y generará de la misma manera que la opción de sitio web público.

Al igual que con la versión de la página web pública, puede hacer doble clic en los aspectos del diseño para editarlos o hacer clic en el menú de la izquierda para ver dónde aparecen en el diseño.

Es posible que desee agregar nuevos elementos de diseño al diseño de la página web, como un efecto de vidrio esmerilado de Figma, o incluso podría replicar partes del diseño de la página web como una plantilla maestra para las presentaciones de Figma. En 2022, Adobe adquirió Figma, por lo que podemos esperar formas más divertidas de usar Figma en el futuro.

Use cualquier sitio web para inspirarse en sus diseños de Figma

Si bien Figma es principalmente para diseñar sitios web o páginas de UX/UI desde cero, es una gran oportunidad para completar las páginas web existentes para ver cómo se crearon. También puede hacer que su diseño web sea una réplica de un sitio existente si no está seguro de por dónde empezar desde una pizarra vacía.

Otra gran razón por la que debería usar el complemento html.to.figma es si ya diseñó un sitio web al que perdió el acceso. Puede completar la página en Figma y comenzar de nuevo sin tener que comenzar de nuevo.