Cloning a complete website in 1 minute with Figma (English subtitles)
Вставка
- Опубліковано 20 сер 2024
- ¡UPDATE! Nuevo video probando un plugin mejor ;) • Clonando webs en 1 min...
Desde septiembre de 2022 le han cambiado el nombre al plugin de FIGMA. Ahora hay que buscarlo como Builder.io.
El link directo es este: www.figma.com/...
Ahora puedes invitarme a un cafelito si te gusta lo que subo por el canal ¡Gracias! ko-fi.com/raul... - Ігри
wow que locura que pasada como clonar una web en nada de tiempo de locos, gracias
Maestro. Excelentemente explicado, soy Ingeniero en Informática en Chile y tu video es corto y preciso. Felicitaciones.
Gracias por el feedback Manuel 🤗
@@RaulMarin_FigmaRaúl necesito tu ayuda, no doy soy muy cazurro...hay alguna manera de ponerme en contacto contigo ? Gracias
Eres mi heroe, nunca había usado figma pero lo necesitaba para un trabajo urgente y esto me ha salado brutalmente!!! Gracias!!
Jaja, gracias a ti por verlo y comentar! ;)
Estoy comenzando en el desarrollo web y esta herramienta me parece muy util
Mejor explicado imposible! geniales las dos herramientas! y super útiles!!
Super utiles?... es el super heroe de los utiles?
SENCILLAMENTE ESPECTACULAR, GENIAL VIDEO
¡Potente que teso apreciado, excelente aporte a mi conocimiento, lo que requiera a su servicio!
¡Súper píldora, Raúl! 🙌🏼
Excelente aporte!!!! MUCHAS MUCHISIMAS GRACIAS!
De nada! ;)
Me ecantó que me enseñaras el mundo #figma... gracias... estoy arriba, gracias... 🥰
Gracias a ti!!
Increíble, que buen video!!
Gracias genio. Muchas bendiciones para ti. Nuevo suscriptor
Gracias a ti
Que gran video!!! Eres un crack Raúl.
Gracias! 😊
Eres un Dios! Te lo agradezco muchisimo
OMG!!!! esto puede ahorrar mogollón de tiempo!! Gracias por compartir!!!
Me declaro fan! ♥️
Buenazooo!!! Gran video!👏🏼👏🏼👏🏼
Buen contenido Raúl 🎉
Qué bueno!! Gracias, Raúl!!
Muy buen video ya tiene algo de antigüedad, lo que me gustaría saber es como luego esa web la importamos ? Para agregarlo a nuestro hosting y dominio esa parte no me quedo clara . El video buenísimo 👏 👌 pero si lees el comentario y me explicas te agradecería
Hola! Gracias por comentar ;) El video es ya lago antiguo y ahora tenemos herramientas más potentes incluso. Para poder lanzar ese diseño de nuevo a web con cambios y rediseño se me ocurren Quest (tengo un video en el canal de como funciona) o Animaapp. Yo ahora estoy más trabajando con Framer y también puedes ver algunos videos en el canal. ;)
Muchas gracias por contestar 😊 si es algo que me gustaría tener en cuenta para comenzar deberías subir algo similar el WordPress, si estado viendo varios de tu canal Muchas gracias
Muy buena info gracias 😊😊😊
Gracias a ti por el feedback ;)
Si hubiera sabido ese plugin visbug, hubiera entendido mucho mas rapido el desarrollo web
Gran herramienta sí, también puedes probar Visual Inspector que añade más valor aún al trabajo de inspección. ;) Gracias por pasarte por el canal!
Estas muy guapo amigo
Me encanta tu barba. Saludos
eres un crack amigo
Gracias Raul !
Hola raul, hago lo mismo que tu, pero no me deja abrirlo figma. No me deja importarla a figma
despues que ya modifique mi pagina y necesito pasar el html figma cual pagina usaste paraa descragarlo y hacerlo como ud lo hace y gracias por adelantado
PERO CON QUE PROGRAMA LO ABRISTE AL FINAL
Hola Juan el video esta hecho para hacerlo con Figma.
Como estas? Gracias por compartir la sabiduria, podrias enseñar como descargar esa web a un jason desde figma y usar en wordpress?
hola amigo no puedo utilizar el visbug en una pagina, no me deja que puedo hacer??
Hola, no se has probado a recargar la página de nuevo, comprueba si tienes alguna otra extensión activa, quizás Adblock o similar...
Holaaa, esto esta INCREIBLE! estoy iniciando apenas pero esto me ayuda muchisimo a entender el tema de los espacios, y más.. claro, este video fue hacer 2 años, busque esos plugins y ya no estan =(, podria indicarme otros actualizados?, gracias....
Hola, cambió de nombre hace unos meses. Busca Builder.io es el mismo...
También puedes usar Html to design
como puedo hacer esto pero llevarme la web a wordpress?
Hola Camila, no se puede directamente debes usar algun otro plugin de Figma o buscar un desarrollador que te ayude.
no sirve, no hay interaccion con submenus de la pagina principal, es como sacar una foto del sitio sin acceso a ningun recurso
Hola José Luis, gracias por comentar... Como bien dices Figma es una herramienta solo de diseño y clona la capa visual pero de forma estática. :( Luego se puede animar con otros plugins adicionales pero es un trabajo extra. Esperemos que más adelante todo esto evolucione hacia una integración mayor entre el código y la capa visual. Abrazo, ;)
Excelente el vídeo muy informativo una duda cómo hago para cambiar el dominio y el hosting si me podes ayudar te lo agradecería mucho sigue así eres un crack
Gracias Carlos, el tip es solo para bajar el diseño de una web a Figma. Si después quieres convertirlo en una web con tu propio dominio y hosting debes buscar alguna herramienta que lo haga, o bien un programador que te ayude. Herramientas como esta que cuento en este otro video pueden ayudarte. ua-cam.com/video/vSBYFDv_oaw/v-deo.html&ab_channel=Ra%C3%BAlMar%C3%ADn
Cuando estoy en figma como le doy cmd+/ no veo en ningun lado
Hola, prueba con CMD + p mejor 😉
brutales extensiones!
En figma no me sale el plugin para inatalarlo
Hola, ahora el plugin se llaman Builder. También puedes usar este otro que va mucho mejor. ua-cam.com/video/5wCNy-QdFW8/v-deo.html
y luego si quiero pasarlo a html y css? como lo hago?
Hola, de momento con buenos resultados no es posible. Pero la misma herramienta Builder.io permite subir el resultado. También otras herramientas como Anima app o Quest.
como se pone comando P?? soy totalmente nuevo
Como descargo la página editada en figma para que aparezca como una web en Internet pero editada
¿podrias ponerte un fondo redondo amarillo en el cursor?asi se puede apreciar donde clicas
Gracias por el feedback. Este video tiene ya tiempo y creo que ahora se sigue todo mejor 🙌
@@RaulMarin_Figma cierto,he visto un par mas modernos y ha mejorado mucho.
puedo hacer eso y luesgo y a nose word pres y pegarla?
No, no se puede solo pegar y ya está. Deberías pasar todo de nuevo a WordPress.
no es claro
hola, no encuentro el html figma esa extencion me falta como lo soluciono para llevar el archivo .json a figma por que no me lee el archivo
Hola Pablo, la extensión ha cambiado de nombre en Figma se llama Builder.io www.figma.com/community/plugin/747985167520967365/Builder.io---Figma-to-HTML%2C-React%2C-and-more
se puede usar con imagenes de paginas web? es que tengo que replicar exactamente una pagina apartir de un diseño pero solo tengo una imagen , no sé que estilos y medidas son , solo pude sacar los hex de colores
Hola, no, no conozco ninguna herramienta que haga esa conversión de forma correcta. Prueba a buscar la web en internet si ya existe.
Listo, una vez hecha la clonación, ¿cómo hago para modificarlo y que se genere un PDF o un PPT para presentar con lo que sería el modelo nuevo editador?
Hola Andrea, cuando haces la clonación en Figma, hay una opcion en el menu lateral derecho para exportar el frame a pdf. A power point no es posible salvo que exportes como imagen y lo lleves a esa herramienta. ;)
¿Y si tiene vídeo descarga también el vídeo de la página que se desea descargar?
Hola Roberto, no, hasta ahí no llega el plugin. :(
@@RaulMarin_Figma Sí es cierto me costó mucho pero ya lo comprove y es cierto hasta allí lamentablemente no nos ayuda
espectacular
Podría exportarlo a algún builder cómo Groove funnels y ahí modificarlo o donde puedo previamente insertar un header para poder importar la URL a Groove y desde ahí modificarlo??
Hola! No te pudo confirmar 100% pero yo diría que no. Para eso tendrías que exportar el diseño de Figma con algún otro plugin que genere código web, quizás Anima app, Makers etc.
Pero que biennnn
hola, estoy haciendo un curso online, y antes de dejar de tener acceso, quisiera cronar esta parte de mi curso, para tenerlo como material de consulta, es posible clonar distintos niveles a la vez. y si tengo usuario para entrar,daria problemas. gracias
Hola! Yo creo que es mejor opción alguna extensión de este tipo.. chromewebstore.google.com/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle
Amigo como hago para clonar una página para ponerla en mi hosting y dominio, modificarle imágenes, títulos, etc, pero tener el mismo diseño, será posible usar el JSON en Divi? Me explico? Cómo clonar una página y pasarla a Divi?
Hola! Esta solución no sirve para pasar directamente a Divi ni a ningun maquetador de WP. Habría que hacerlo de forma manual, montando todo de nuevo en WP, pero eso sí, con la ayuda de que en Figma ya lo tienes diseñado y tardarás algo menos.
con el jason se puede subir a worpress?
Hola! No, ese json es solo para el plugin y su plataforma Builder.io. De momento imposible pasarlo a WP.
Hola buen tutorial , una consulta si quiero todas las paginas de una web tengo que agregar una por una, saludos.
Gracias por el feedback! Sí, el plugin solo permite hacerlo 1a 1, 😥
no encuentro ese plugin en figma
Hola, el plugin cambió de nombre hace tiempo es este Builder-io www.figma.com/community/plugin/747985167520967365/Builder.io---Generate-designs-with-AI-%26-export-designs-to-code
@@RaulMarin_Figma gracias
Muy útil! Gracias!! :D
Y si el wordpress tiene themes de pago como se hace? Funcionan las herramientas?
Hola! Este plugin es solo para clonar el diseño, es decir será todo estático. Para volver a convertirlo en código debes hacerlo manual tú mismo o con la ayuda de un desarrollador ;)
Canelita en rama
El video es fantástico, todo el soporte. Sin embargo, he encontrado un problema al transferir de Figma a Web flow: cuando se aplica el auto-layout, todo se desconfigura.
¿Sabes cómo resolverlo?
Gracias Nicola, quizás is usas el plugin que ha salido hace poco para Webflow puedes solucionarlo... webflow.com/figma-to-webflow
aun funciona esta rolita o no ?
Una pagina Web de una sola hoja?....y cuando se deba dar clic en algun lado, donde me llevaria?
Hola, no, no es para eso. Recuerda que la utilidad lo que permite es "bajar" una página a Figma, la función no es funcionar después como web. Sino ahorrarse algo de tiempo de diseño... Para volver a subir el diseño online habría que hacer el código de nuevo.
preguntas: esto me copia el codigo de las funciones de la web que queremos copiar?
Hola, lo que traslada es el diseño visual de la web a Figma, pero no traslada código. Después de traerlo a Figma y hacerle cambios, por ejemplo, habría que volver a utilizar algún plugin como Anima app o software como Framer para volver a recuperar formato web.
YA no está disponible el plugin !
Hola! Sí, es este que ha cambiado un poco de nombre y han añadido funcionalidades. Pero se sigue usando perfectamente con las instrucciones del video ;) El link al plugin es este www.figma.com/community/plugin/747985167520967365
@@RaulMarin_Figma OH muchísimas gracias!
ok pero de ahi como se descarga o se traslada a la pagina de uno.
Hola, este plugin es solo para clonar a Figma, si de ahí quieres convertirlo en web debes hacerlo o bien a mano o con alguno de los plugins que tiene el programa, por ejemplo Quest (ua-cam.com/video/vSBYFDv_oaw/v-deo.html&ab_channel=Ra%C3%BAlMar%C3%ADn-Figmatraining)
Hola, me interesa mucho, me he descargado una landing con el HTML to figma pero luego no se continuar. Yo llamo al plugin apretando en figma comand + p y no pasa nada.. como llamo a la página que me he descargado a figma? Gracias
Hola Beatriz! Le han cambiado el nombre hace unas semanas . Ahora debes buscarlo como Builder.io es este www.figma.com/community/plugin/747985167520967365/Builder.io---Figma-to-HTML%2C-React%2C-and-more
@@RaulMarin_Figma Muchas gracias! lo encontré!!!!!
solo para ese tipo de paginas???
puedo copiar el codigo y pegarlo en una pagina o blog de hmtl?
Hola! No, no funciona así. Solo funciona en sentido html > diseño no al reves.... :(
entiendo que se clona lo que se ve por fuera, y lo que se ve por dentro donde se tiene todo el control de la pagina, creo que se le llama backend, eso no se clona o como haria para tener esa parte ?
Yo también quiero saber eso, has encontrado la respuesta?
como exportas eso o lo vez ya en una pagina web funcionando?
Hola, si te refieres a poder llevar ese diseño de nuevo a una web no es posible de forma automática salvo que uses algún plugin de Figma como Quest o similares... www.figma.com/community/tag/figma%20to%20code/plugins
hace poco una web modifico su politica y elimino su principal seccion, es de publicar anuncios, quisiera copiar la version actual para modificar y poner en marcha un a web sustituta, valdria este programa?
Hola, recuerda que este plugin es para hacer el diseño de una web. Luego necesitas pasarlo a código, WordPress etc.
NICE
Cuando yo pongo comand + p y me sale el buscador, te pongo el HTML to figma y no lo encuenta. sin embargo lo tengo ya instalado en chrome. qué hago?
Busca el plugin en la Comunidad de Figma para instalarlo, ahora se llama Builder.io
@@RaulMarin_Figma muy buena eplicacion, no conseguia el pluggin pero con esto me ayudasde a conseguirlo de nuevo!
Hola, quisiera saber, cómo exporta el json de esa página después de ajustarla en figma?
Hola, gracias por comentar. Aunque a lo mejor el resultado no es el mejor (y el tiempo a invertir es alto), el plugin permite hacer el camino de vuelta si antes te has logado en www.builder.io/c/docs/import-from-figma El resultado no es muy bueno... Si puedo grabaré un video en los próximos días viendo el proceso completo para ver sus pros y sus contras.
como llamas el plugin en figma?? hice todo bn hasta que intente subirlo a figma, me da un error al cargar el archivo
Hola, el plugin ahora se llama Builder.io Búscalo con el shortcut de cmd o control + p
@@RaulMarin_Figma grax
clona los alrchivos por jemplo form.php que es el que envia los mails, gracias
Hola, no, solo clona la parte visual nada de la lógica...
Gracias Raúl, ese archivo .Json que descargas, sólo funciona en figma o se puede usar en un WP con un constructor como Divi por ejemplo? Quedo atento a tu respuesta, mil gracias
Hola Fabian, gracias a ti. No lo he probado con maquetadores de WordPress, pero yo diría que está especificamente pensado para Figma. ;)
buenas noches Raul como hago para comunicarme con usted
ese JSON se puede esar en wordpress?
Hola, pues no que yo sepa... 😬
solo funciona en mac?
No, funciona también en pc. 👍
y como haces para llevarlo al wordpress?
Hola! Para poder pasarlo a WP lo ideal es que instales allí un maquetador visual como Elementor por ejemplo y vayas trasladando todos los elementos, textos 1 por 1... No hay manera mágicas de hacerlo ;)
Y como se cambia las imágenes
¡Hola! Solo tienes que hacer clic en las imágenes e ir a la opción Fill de Figma (inspector de la derecha y cambiarla por otra)
Como la clono y coloco en elementor? saludos
No hay manera automática de hacerlo. Tienes que ir metiendo el estilo y los assets poco a poco en Elementor.
Hola. Estaba buscando algo como esto y lo aclaras muy bien. ¿Cómo puedo sustituir las imágenes por unas propias? Gracias por tu trabajo. Un saludo.
Gracias por verlo. Sobre la duda es sencillo, haz clic o doble clic sobre las imágenes y deberías poder acceder a las imágenes y sustituirlas en el panel derecho. En este video hablé sobre como Figma gestiona las imágenes, por si te vale ;) ua-cam.com/video/un22QiPb4k4/v-deo.html
@@RaulMarin_Figma Muchas gracias, Raúl.
Hola eres tu
Zach Galifianakis?
Jaja, su primo de Madrid ;)
Espectacular el potencial de esto que nos acabas de enseñar. Muchísimas gracias. Una consulta, ¿ Porqué modificas la web con el primer pluggin pudiéndola modificar directamente en Figma ?
Gracias por el feedback. Pues tienes toda la razón, se puede hacer todo en Figma directamente. Era simplemente por dar a conocer la extensión de Chrome, y porque muchas veces podemos usar esos cambios para hacer screenshots de webs, etc. 👍
@@RaulMarin_Figma Gracias a ti por tu respuesta! Por aquí tienes un nuevo seguidor. Saludos desde Barcelona
@@RaulMarin_Figma Me gustaria saber si se puede extraer el codigo fuente html y css para modificarlo en mi editor de codigo y subiir la pagina a internet
@@cristianyunez5031 Hola Cristian, pues eso ya no. Hay algunas herramientas/plugins para Figma como Animaapp o Quest que convierten el diseño de Figma en código. Pero no es un código de calidad...
@@RaulMarin_Figma Dale, gracias por la información y responder!
Hola. En windows que combinación de teclas se utilizan para abrir la ventana para mandar a llamar el plugin? Tu utilizaste comando p, pero en windows las teclas son diferentes. Ojalá me puedas apoyar.
Hola, debería funcionarte ctrl + p
Le falto mencionar que hay que descargar Figma para escritorio, y dentro de esta instalar la extension.
Hola, entendí hasta la descarga del .json, luego abres una especie de word, que app es?
Hola! Creo que te refieres a Figma (www.figma.com/). El proceso es muy fácil:
1. Instalas la extensión de Chrome "Figma to HTML"
2. Descargas el json
3. Vas a Figma (la app de diseño) y le instalas el plugin gratuito "Figma to HTML"
4. Lo abres y le subes el json.
5. Fin, a ver si puedes solucionarlo así.
Puedo exportar el sitio duplicado a HTML y CSS para seguir editando en Visual Studio Code?
Hola! No, Figma no exporta html, lo que sí tienes es acceso a parte del css...
@@RaulMarin_Figma como exportamos el css completo de la página diseñada porfa
Consejo, habla mas despacio flaco, se piertde la accion de pantalla con tu voz. saludos.
Gracias por el feedback ;) Ese vídeo es algo antiguo... ahora creo que todo sale mucho mejor 😎
Hola buenas raúl una pregunta , ¿como hacemos para ponerlo en una web ?
Hola! No se si entiendo bien la pregunta... Sacar el diseño de Figma implica usar html y css y de momento debes hacerlo de forma manual. O invertir algo de tiempo y quizás con herramientas como Animaapp intentarlo...
Sirve para Divi??
Hola, no, esta es una solución solo para pasar de web a Figma. De momento no hay manera de convertir de nuevo a web ese json modificado...
es joda?