# Convertir página web a diseño con Figma

> Mediante el uso del plugin html.to.design podemos convertir de forma automática una página web a un archivo de diseño de Figma.

- URL canónica: https://www.martagonzalez.dev/blog/convertir-pagina-web-a-diseno-con-figma/
- Fecha de publicación: 2022-12-22T12:09:08
- Última actualización: 2026-06-12T16:28:33

---

Figma es una herramienta de trabajo colaborativo que sirve para diseñar interfaces de usuario.
 

La aplicación ofrece la posibilidad de instalar extensiones para agilizar algunas tareas.
 

Mediante el uso del plugin html.to.design podemos convertir de forma automática una página web a un archivo de diseño de Figma .
 
¿Cómo utilizar la extensión html to design de Figma?
 
## Archivo de diseño
 
Creamos un nuevo archivo de diseño de Figma haciendo clic sobre el botón que muestra la siguiente captura.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/12/figma-html-to-design-plugin-01.jpg)
 
## Panel de Recursos
 
Desde la barra de herramientas superior hacemos clic sobre la séptima opción que corresponde al icono de Recursos y mediante el cual desplegaremos un submenú desde el que podremos acceder a la búsqueda de plugins.
 
En éste caso si escribimos en el cuadro de búsqueda html se nos irán listando las diferentes opciones que correspondan al criterio de búsqueda.
 
Hacemos clic en Run de la extensión a ejecutar.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/12/figma-html-to-design-plugin-02.jpg)
 
## Importar Sitio Web
 
El plugin nos ofrece varias opciones de importación pero partiendo del supuesto de que muchas veces no contamos más que con la dirección pública del sitio recurriremos a esta opción.
 
Introducimos la dirección del sitio web y hacemos clic en Importar.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/12/figma-html-to-design-plugin-03.jpg)
 

 
## Diseño Figma Importado
 
La fidelidad del resultado dependerá de la cantidad de elementos bloqueantes que existan en la página aunque incluso siendo así ahorraremos tiempo de trabajo.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/12/figma-html-to-design-plugin-04.jpg)