Cloning a complete website in 1 minute with Figma (English subtitles) 

Super utiles?... es el super heroe de los utiles?

Jaja, gracias a ti por verlo y comentar! ;)

Gracias! 😊

De nada! ;)

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

Gracias a ti

Gracias a ti!!

Gracias a ti por el feedback ;)

Hola Fabian, gracias a ti. No lo he probado con maquetadores de WordPress, pero yo diría que está especificamente pensado para Figma. ;)

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. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vSBYFDv_oaw.html&ab_channel=Ra%C3%BAlMar%C3%ADn

Hola, cambió de nombre hace unos meses. Busca Builder.io es el mismo...

También puedes usar Html to design

Hola, no, no conozco ninguna herramienta que haga esa conversión de forma correcta. Prueba a buscar la web en internet si ya existe.

Gracias Nicola, quizás is usas el plugin que ha salido hace poco para Webflow puedes solucionarlo... webflow.com/figma-to-webflow

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

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.

Hola, debería funcionarte ctrl + p

Le falto mencionar que hay que descargar Figma para escritorio, y dentro de esta instalar la extension.

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. ;)

Hola, recuerda que este plugin es para hacer el diseño de una web. Luego necesitas pasarlo a código, WordPress etc.

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.

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

Gracias por el feedback! Sí, el plugin solo permite hacerlo 1a 1, 😥

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 ;) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-un22QiPb4k4.html

@@RaulMarin_Figma Muchas gracias, Raúl.

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 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é!!!!!

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.

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...

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.

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.

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

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, 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.

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í.

Hola, el plugin ahora se llama Builder.io Búscalo con el shortcut de cmd o control + p

@@RaulMarin_Figma grax

Hola Camila, no se puede directamente debes usar algun otro plugin de Figma o buscar un desarrollador que te ayude.

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 ;)

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!

Hola, prueba con CMD + p mejor 😉

No, no se puede solo pegar y ya está. Deberías pasar todo de nuevo a WordPress.

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...

Hola, ahora el plugin se llaman Builder. También puedes usar este otro que va mucho mejor. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5wCNy-QdFW8.html

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.

Hola! No, ese json es solo para el plugin y su plataforma Builder.io. De momento imposible pasarlo a WP.

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, ;)

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

Hola Juan el video esta hecho para hacerlo con Figma.

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

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 (ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vSBYFDv_oaw.html&ab_channel=Ra%C3%BAlMar%C3%ADn-Figmatraining)

Hola! No, no funciona así. Solo funciona en sentido html > diseño no al reves.... :(

Hola, pues no que yo sepa... 😬

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

Jaja, su primo de Madrid ;)

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 ;)

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!

¡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)

No hay manera automática de hacerlo. Tienes que ir metiendo el estilo y los assets poco a poco en Elementor.

No, funciona también en pc. 👍

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...

Gracias por el feedback ;) Ese vídeo es algo antiguo... ahora creo que todo sale mucho mejor 😎

Hola, no, solo clona la parte visual nada de la lógica...