Cómo clonar un diseño web en Figma | HTML to Design
Вставка
- Опубліковано 14 лип 2024
- ✅ Debes conocer este PLUGIN de FIGMA para AHORRAR HORAS DE TRABAJO en diseño web.
El plugin y extensión de Chrome 'HTML to Design' es una forma asombrosa de clonar páginas web en Figma en pocos minutos.
Este plugin útil para aquellos que estáis comenzando en el mundo del diseño web y se preguntan cómo se crean esas páginas web atractivas, este plugin es una joya. Les permite explorar de manera interactiva y educativa cómo se utilizan los frames y el auto-layout, que son esenciales en el diseño web moderno. Además, es una herramienta invaluable para recuperar proyectos antiguos en los que has podido trabajar con otras herramientas de diseño y has perdido los archivos originales. Con 'HTML TO Design', puedo rescatar esas creaciones y actualizarlas para usarlas en nuevos proyectos.
Si trabajas para clientes y te piden actualizaciones de contenido o reestructuraciones en sus sitios web, este plugin permite realizar esos cambios en cuestión de minutos, lo que ahorra tiempo y esfuerzo considerablemente.
Capítulos:
00:00 Introducción
01:15 Información del plugin
02:50 Copiar la URL
03:46 Analizar la web clonada
07:34 Usar Extensión de Chrome
#htmlToDesign #ux #figma #comousarhtmltodesign
✅ Descubre también cómo puedes crear una Landing en Figma con Inteligencia Artificial ua-cam.com/video/j6g5Oodjbtw/v-deo.html
Espectacular
Con la última funcionalidades de Figma
SImplemente gracias!!!
Gracias a ti por el comentario! 😊
Muchas gracias 🙌 saludos desde 🇪🇨 Ecuador
A ti! saludos desde España!
Genial !! Muchas Gracias !!
Gracias a ti! Un saludo Sebastian
Eres un genio bro mil gracias
Gracias a ti! 👍
Me caerá de lujo! Justo tenía que rehacer en figma unas páginas para un cliente (que trabajamos en mi empresa) pero esto me ahorrará el rehacer todas las páginas desde cero para luego editarlas y añadir la información que nos solicitan!
Qué maravilla!! Cuanto me alegro que pueda servirte de ayuda para ganar tiempo! 💪🏼
increible pro gracias.
A ti! 👍
Definitivamente eeres un ckrack.
Woooow
Muchas gracias por tu valoración! Cuanto me alegro que pueda servirte de ayuda mi contenido. Saludos 👋
Muchas gracias
A ti! 🙂
🚀⚡ Descubre también cómo pasar de Figma a Código: ua-cam.com/video/xgUPMP7bY30/v-deo.htmlsi=O3Y_bSvAE0RL4h3O
EXCELENTE VIDEO I SUBSCRIBE THANKS👍GREETINGS FROM
🇨🇭SWITZERLAND🇨🇭
I love that country!! Greetings fron Spain! 👋
Excelente información. Me gustaría saber como exportar un diseño de Figma a Html+ CSS. Gracias
Gracias Victor! Eso que preguntas es posible con el DEV MODE de Figma o el plugin "Anima - Figma to Code". Es una buena sugerencia para hacer un video en breve 😉
Hola! mira este video a ver si te sirve este plugin de Figma: ua-cam.com/video/xgUPMP7bY30/v-deo.htmlsi=O3Y_bSvAE0RL4h3O
Excelente y existe la forma de copiar tambien la funcionalidad o sea el codigo y la programación para reemplazarlo con nuestro contenido? Muchas gracias
Hola! No, eso no es posible. Este plugin lo que hace es capturar sólo la parte visual y transformarla a diseño en Figma.
Disculpa mi ignorancia la pagina wed que , ya allas copiado. Una ves la pagina original ya no este funcionando mi copia seguiria funcionando?🤔🤔
Hola! Nunca se me ha presentado ese caso así que no puedo asegurarlo al 100%... Pero te comento: el plugin escanea el código HTML, CSS, etc... para identificar los elementos de la interfaz de usuario, como botones, texto, imágenes, etc. y luego crea un diseño en Figma para cada elemento de la interfaz de usuario identificado. Una vez que el plugin ha creado el diseño, puedes editarlo y personalizarlo según sea necesario ya que crea un diseño independiente del código original y se almacena en tu "cuenta" de Figma. Si puedo probar ese caso que comentas, te informo si se produce algún fallo o se pierde algo de la copia.
y luego como lo publicas o exportas el proyecto???
Este plugin no hace esto, sólo hace la copia del diseño para que luego mejores el diseño en Figma, tal y como se puede ver en el vídeo, no conecta tu diseño con ningún servidor para publicar tu proyecto o exportarlo. Para ello debes utilizar otros plugins como Locofy.ai por ejemplo
Hola pregunta, tengo una página hecha con HTML, Css y Js. Es posible poner el enlace de mi web y montarlo también así como está aquí? O tiene otro procedimiento? Es que quisiera hacer un resideño sin tener que manipular mis archivos originales de manera práctica
Hola! Si tu web tiene una URL si. Este plugin únicamente lo que hace es lo mismo que cuando estamos en un navegador cualquiera, clicamos botón derecho para inspeccionar y vemos ahí el HTML, clases CSS, iconos, etc.. sólo que lo procesa de tal manera que puedes ver en Figma esa copia. Si por ejemplo has utilizado flexbox en CSS, eso se traduce a Auto layout en Figma.
Te consulto, por que yo quiero clonar una web pero hay que ingresar con usuario y contrasea, ingreso con mi clave pero figma no lo toma a esa parte. Como aria? Es una seccion de un catalogo. Muchas gracias,
Hola! Según tu pregunta creo que lo que puede pasar es que la web en cuestión tenga un script de seguridad que no permita hacer ni utilizar este tipo de plugins..
Una pregunta? Yo tengo una página web que quiero clonar, por los artículos que tienen ellos , los tengo yo , y quiero vender,
Se podrá clonar y después poner otro nombre de web
Básicamente este plugin lo que hace, es lo mismo cuando en un navegador inspeccionas una web y tienes ahí el código html, las clases CSS, etc.. Sólo que automatizado y lo ejecuta en pocos segundos para pasarlo al formato de Figma. Por ejemplo, convierte el flexbox de CSS a Auto-layout.
@@12zayco Es solo el diseño amigo, aunque se pueda exportar un html o un css de figma (supongo que si). No sería mas que una pagina estatica y local en tal caso. Una verdadera aplicacion es muchisimo mas que el diseño. Aunque siempre puedes tratar de implementar con algo como wordpress. Igual te tocaría estudiar un poquito, pero no tanto.
y luego como descargo la plantilla para tenerla de forma local?????
Lo mismo, está plugin sólo te copia la estructura en tu archivo de Figma. No se conecta con Github ni otro sistema de repositorios. Para ello debes usar el plugin de Locofy. Aunque tienes otros similares en la comimunidad de Figma
buena tarde, como hago para editar cada de una de las paginas que contiene esta web?
Hola! Una vez capturada la web puedes ver todos los elementos que la contiene en la barra de la izquierda, al clicar sobre cada elemento lo puedes editar
@@mokkapp Gracias ♥♥♥♥♥♥
Bro y como ago para clonar una web y modificarla pora hacer una para mi
Al utilizar este plugin se genera una copia en tu archivo de Figma. Ahí es cuando puedes modificar todo directamente en Figma