Тёмный

Cómo clonar un diseño web en Figma | HTML to Design 

Mokkapp
Подписаться 4 тыс.
Просмотров 10 тыс.
50% 1

✅ 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

Опубликовано:

 

19 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 45   
@mokkapp
@mokkapp 7 месяцев назад
✅ Descubre también cómo puedes crear una Landing en Figma con Inteligencia Artificial ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-j6g5Oodjbtw.html
@xyuriko6163
@xyuriko6163 3 месяца назад
Espectacular Con la última funcionalidades de Figma
@juandaniel-
@juandaniel- 15 дней назад
SImplemente gracias!!!
@mokkapp
@mokkapp 14 дней назад
Gracias a ti por el comentario! 😊
@miguelnoboa1516
@miguelnoboa1516 7 месяцев назад
Muchas gracias 🙌 saludos desde 🇪🇨 Ecuador
@mokkapp
@mokkapp 7 месяцев назад
A ti! saludos desde España!
@CesarIkari
@CesarIkari 2 месяца назад
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!
@mokkapp
@mokkapp 2 месяца назад
Qué maravilla!! Cuanto me alegro que pueda servirte de ayuda para ganar tiempo! 💪🏼
@mikelsalvadorgarcia5034
@mikelsalvadorgarcia5034 6 месяцев назад
Eres un genio bro mil gracias
@mokkapp
@mokkapp 6 месяцев назад
Gracias a ti! 👍
@sebastian.gallego
@sebastian.gallego 7 месяцев назад
Genial !! Muchas Gracias !!
@mokkapp
@mokkapp 7 месяцев назад
Gracias a ti! Un saludo Sebastian
@miguelsarmiento9268
@miguelsarmiento9268 7 месяцев назад
increible pro gracias.
@mokkapp
@mokkapp 7 месяцев назад
A ti! 👍
@sarariosochoa2264
@sarariosochoa2264 2 месяца назад
Definitivamente eeres un ckrack. Woooow
@mokkapp
@mokkapp 2 месяца назад
Muchas gracias por tu valoración! Cuanto me alegro que pueda servirte de ayuda mi contenido. Saludos 👋
@alexandrasanchez2287
@alexandrasanchez2287 Месяц назад
Muchas gracias
@mokkapp
@mokkapp Месяц назад
A ti! 🙂
@victorcruzgomez6565
@victorcruzgomez6565 7 месяцев назад
Excelente información. Me gustaría saber como exportar un diseño de Figma a Html+ CSS. Gracias
@mokkapp
@mokkapp 7 месяцев назад
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 😉
@mokkapp
@mokkapp 6 месяцев назад
Hola! mira este video a ver si te sirve este plugin de Figma: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xgUPMP7bY30.htmlsi=O3Y_bSvAE0RL4h3O
@PablodelaCruzSabor
@PablodelaCruzSabor 19 дней назад
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
@mokkapp
@mokkapp 18 дней назад
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.
@voyagestours
@voyagestours 3 месяца назад
EXCELENTE VIDEO I SUBSCRIBE THANKS👍GREETINGS FROM 🇨🇭SWITZERLAND🇨🇭
@mokkapp
@mokkapp 3 месяца назад
I love that country!! Greetings fron Spain! 👋
@cedyluisbaez8147
@cedyluisbaez8147 5 месяцев назад
Disculpa mi ignorancia la pagina wed que , ya allas copiado. Una ves la pagina original ya no este funcionando mi copia seguiria funcionando?🤔🤔
@mokkapp
@mokkapp 5 месяцев назад
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.
@SnideroVEVO
@SnideroVEVO 3 месяца назад
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,
@mokkapp
@mokkapp 3 месяца назад
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..
@loganj.3217
@loganj.3217 3 месяца назад
y luego como lo publicas o exportas el proyecto???
@mokkapp
@mokkapp 3 месяца назад
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
@jelikoarts6355
@jelikoarts6355 3 месяца назад
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
@mokkapp
@mokkapp 3 месяца назад
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.
@loganj.3217
@loganj.3217 3 месяца назад
y luego como descargo la plantilla para tenerla de forma local?????
@mokkapp
@mokkapp 3 месяца назад
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
@AnimalsonRails
@AnimalsonRails 5 месяцев назад
Bro y como ago para clonar una web y modificarla pora hacer una para mi
@mokkapp
@mokkapp 5 месяцев назад
Al utilizar este plugin se genera una copia en tu archivo de Figma. Ahí es cuando puedes modificar todo directamente en Figma
@liansanchez4870
@liansanchez4870 18 дней назад
buena tarde, como hago para editar cada de una de las paginas que contiene esta web?
@mokkapp
@mokkapp 18 дней назад
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
@liansanchez4870
@liansanchez4870 17 дней назад
@@mokkapp Gracias ♥♥♥♥♥♥
@12zayco
@12zayco 4 месяца назад
Una pregunta? Yo tengo una página web que quiero clonar, por los artículos que tienen ellos , los tengo yo , y quiero vender,
@12zayco
@12zayco 4 месяца назад
Se podrá clonar y después poner otro nombre de web
@mokkapp
@mokkapp 4 месяца назад
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.
@anfforero
@anfforero 4 месяца назад
@@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.
@mokkapp
@mokkapp 6 месяцев назад
🚀⚡ Descubre también cómo pasar de Figma a Código: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xgUPMP7bY30.htmlsi=O3Y_bSvAE0RL4h3O
Далее
Figma Tutorial for Beginners (2024): Website Design
41:56
De Figma a HTML con Css  | Practica 1
12:42
Просмотров 9 тыс.
CURSO DE FIGMA 2024 | 01 Introducción a Figma
1:25:11
Просмотров 27 тыс.
Esta IA diseña tu WEB o APP
6:59
Просмотров 51 тыс.
SACAR datos de una WEB de FORMA LEGAL. SCRAPPING WEB.
9:05
Curso de Diseño Web - Creando un Portafolio en Figma
1:01:48