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

Поделиться
HTML-код
  • Опубликовано: 29 окт 2024

Комментарии • 48

  • @mokkapp
    @mokkapp  11 месяцев назад +3

    ✅ Descubre también cómo puedes crear una Landing en Figma con Inteligencia Artificial ruclips.net/video/j6g5Oodjbtw/видео.html

  • @CesarIkari
    @CesarIkari 7 месяцев назад

    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  7 месяцев назад

      Qué maravilla!! Cuanto me alegro que pueda servirte de ayuda para ganar tiempo! 💪🏼

  • @xyuriko6163
    @xyuriko6163 8 месяцев назад

    Espectacular
    Con la última funcionalidades de Figma

  • @JorgeMartinez-wd5xi
    @JorgeMartinez-wd5xi 2 месяца назад

    Muy buena esta información, me ha ayudado mucho. Gracias por compartir.

    • @mokkapp
      @mokkapp  2 месяца назад

      Gracias a ti por comentar! 😁

  • @juandaniel-
    @juandaniel- 4 месяца назад

    SImplemente gracias!!!

    • @mokkapp
      @mokkapp  4 месяца назад +1

      Gracias a ti por el comentario! 😊

  • @miguelnoboa1516
    @miguelnoboa1516 11 месяцев назад

    Muchas gracias 🙌 saludos desde 🇪🇨 Ecuador

    • @mokkapp
      @mokkapp  11 месяцев назад

      A ti! saludos desde España!

  • @mokkapp
    @mokkapp  11 месяцев назад

    🚀⚡ Descubre también cómo pasar de Figma a Código: ruclips.net/video/xgUPMP7bY30/видео.htmlsi=O3Y_bSvAE0RL4h3O

  • @sarariosochoa2264
    @sarariosochoa2264 6 месяцев назад

    Definitivamente eeres un ckrack.
    Woooow

    • @mokkapp
      @mokkapp  6 месяцев назад

      Muchas gracias por tu valoración! Cuanto me alegro que pueda servirte de ayuda mi contenido. Saludos 👋

  • @mikelsalvadorgarcia5034
    @mikelsalvadorgarcia5034 11 месяцев назад +1

    Eres un genio bro mil gracias

    • @mokkapp
      @mokkapp  11 месяцев назад

      Gracias a ti! 👍

  • @victorcruzgomez6565
    @victorcruzgomez6565 11 месяцев назад +3

    Excelente información. Me gustaría saber como exportar un diseño de Figma a Html+ CSS. Gracias

    • @mokkapp
      @mokkapp  11 месяцев назад +1

      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  11 месяцев назад

      Hola! mira este video a ver si te sirve este plugin de Figma: ruclips.net/video/xgUPMP7bY30/видео.htmlsi=O3Y_bSvAE0RL4h3O

  • @PablodelaCruzSabor
    @PablodelaCruzSabor 5 месяцев назад

    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  5 месяцев назад

      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.

  • @miguelsarmiento9268
    @miguelsarmiento9268 11 месяцев назад +1

    increible pro gracias.

    • @mokkapp
      @mokkapp  11 месяцев назад

      A ti! 👍

  • @alexandrasanchez2287
    @alexandrasanchez2287 5 месяцев назад

    Muchas gracias

    • @mokkapp
      @mokkapp  5 месяцев назад

      A ti! 🙂

  • @loganj.3217
    @loganj.3217 8 месяцев назад +1

    y luego como lo publicas o exportas el proyecto???

    • @mokkapp
      @mokkapp  8 месяцев назад

      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

  • @sebastian.gallego
    @sebastian.gallego 11 месяцев назад

    Genial !! Muchas Gracias !!

    • @mokkapp
      @mokkapp  11 месяцев назад +1

      Gracias a ti! Un saludo Sebastian

  • @cedyluisbaez8147
    @cedyluisbaez8147 9 месяцев назад +1

    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  9 месяцев назад +1

      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.

  • @voyagestours
    @voyagestours 7 месяцев назад

    EXCELENTE VIDEO I SUBSCRIBE THANKS👍GREETINGS FROM
    🇨🇭SWITZERLAND🇨🇭

    • @mokkapp
      @mokkapp  7 месяцев назад

      I love that country!! Greetings fron Spain! 👋

  • @SnideroVEVO
    @SnideroVEVO 7 месяцев назад

    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  7 месяцев назад

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

  • @jelikoarts6355
    @jelikoarts6355 8 месяцев назад

    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  8 месяцев назад

      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.

  • @12zayco
    @12zayco 9 месяцев назад +1

    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 9 месяцев назад

      Se podrá clonar y después poner otro nombre de web

    • @mokkapp
      @mokkapp  9 месяцев назад

      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 8 месяцев назад

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

  • @comecrywithme2189
    @comecrywithme2189 3 месяца назад

    Hola, necesito ayuda por favor
    tengo dificultades en la vista de celular, se ve con mucho zoom, y no se como hacer para que se vea normal (como entras a cualquier pagina) . Cualquier persona que pueda ayudarme por favor

    • @mokkapp
      @mokkapp  3 месяца назад

      Hola, Necesitaría saber qué es exactamente lo que tratas de hacer para entender cual es el problema que tienes. Ya me dices

    • @comecrywithme2189
      @comecrywithme2189 3 месяца назад

      @@mokkapp Hola, tengo una página web por figma, al terminarla, la importe para vista de celular y computadora, pero al entrar en celular si se ve la página normal pero se ajusto un zoom que no se ve muy bien y bueno digamos que no es muy atractivo para el público, por eso no se que hacer para que se vea normal en vista celular, puedo enviarte fotos del problema para que me entiendas mejor
      Espero puedas ayudarme por favor

  • @liansanchez4870
    @liansanchez4870 5 месяцев назад

    buena tarde, como hago para editar cada de una de las paginas que contiene esta web?

    • @mokkapp
      @mokkapp  5 месяцев назад

      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 5 месяцев назад

      @@mokkapp Gracias ♥♥♥♥♥♥

  • @loganj.3217
    @loganj.3217 8 месяцев назад

    y luego como descargo la plantilla para tenerla de forma local?????

    • @mokkapp
      @mokkapp  8 месяцев назад

      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