Como diseñar una página web bonita y sin saber de diseño | Figma

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

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

  • @FalconMasters
    @FalconMasters  3 года назад +32

    📌 Si quieres aprender como programar tus sitios web desde cero te invito a mi curso de Diseño Web Profesional desde Cero en el que aprenderás todo lo necesario:
    www.udemy.com/course/diseno-web/?referralCode=BCC54890816B6A9BCFB7

    • @FalconMasters
      @FalconMasters  Год назад

      @@ihardblackHola si, puedes ver mis cursos desde aquí:
      www.desarrolloweb.io/

  • @dobaladri
    @dobaladri Год назад +8

    Te quiero demasiado amigo. No haces una idea de lo bien que explicas y el valor de estos tutoriales. CRACK.

  • @paolocarriontipo1635
    @paolocarriontipo1635 3 года назад +101

    Profesor : Nadie te puede enseñar cómo hacer interfaces bonitas si no sabes de diseño :/
    FalconMasters : que haga un vídeo dice :D

  • @edustreamimg
    @edustreamimg 3 года назад +1

    Que bien trabajas el diseño. Es un ecosistema con muchas patas y todas las controlas. Alucinante!

  • @gabrielrincon6744
    @gabrielrincon6744 3 года назад +5

    Eres el mejooooorrrrrrr , Vi un comentario de que estos vídeos son mejores que platzi , y yo : eso es obvio en platzi según las críticas no actualizan los programas pero tú falcón eres EL MEJOR !! E APRENDIDO BASTANTE GRACIAS MIL GRACIAS SIEMPRE TIENES MI MANITO ARRIBA 👍👍👊

    • @FalconMasters
      @FalconMasters  3 года назад

      Muchas gracias por el apoyo, lo aprecio mucho :D

  • @lucashabibi7277
    @lucashabibi7277 5 месяцев назад +1

    Tremendo, tengo que presentar un prototipo el sabado (en 2 dias) y esto me aceleró todos los procesos, muchas gracias loco

  • @matiashau5985
    @matiashau5985 3 года назад +4

    Todo un capo el Falcon, todos somos unos Falcon Masters 😎😎👌🏻👌🏻😎

  • @Jqvco
    @Jqvco 3 года назад +135

    Me encantaría que hagas un video explicando como pasar nuestro diseño de Figma hacia código de HTML y CSS, por favor! :D

  • @wilmercuevas6491
    @wilmercuevas6491 3 года назад +1

    Eres el mejor! No se que haría la sociedad sin gente como tú subiendo videos en youtube 👏

  • @sebastiansl7007
    @sebastiansl7007 Год назад

    gracias por tu tutorial hrmano , justo estoy en un examen de 1 mes , realizar una pagina web espero lograr una nota increible con cada paso a paso de tu video , mucha suerte en tu vida

  •  3 года назад +3

    Muy buen tutorial como siempre, Falcon. Es una estupenda herramienta para ahorrar en tiempo y en entrega en nuestros proyectos Webs. Muchas gracias por poner este material de calidad para mejorar nuestro día a día en la web.

  • @LucasEstebanLPS
    @LucasEstebanLPS Год назад +14

    Ahora ya no se puede importar la lista de estilos, por lo menos a mi me dice que me tengo que suscribir si o si. Si tenes alguna otra alternativa para copiar los estilos te lo ageradeceria. Gracias por todo, saludos desde Argentina.

  • @ricardolopez6194
    @ricardolopez6194 3 года назад

    Eres un crack man, pura calidad.
    Estoy seguro y quizás hasta podría apostar que tu contenido gratuito te ha dado mas que a muchos que cobran millones por re-explicar como se creo la rueda.(Y no hablo solo de dinero).
    Carlos Arturo >Platzi

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

    Muchas gracias!, haz sido mi mejor maestro de programación

  • @inumakitoge4620
    @inumakitoge4620 3 года назад +9

    talvez no leas este comentario pero bueno, solo quería decirte que me has ayudado mucho enserio te mando un enorme abrazo :3. saludos

    • @FalconMasters
      @FalconMasters  3 года назад +6

      Siempre intento leer todos los comentarios.
      Muchas gracias a ti por apoyar mis videos, me da mucho gusto que te sean de ayuda! :D

  • @annabadyka4658
    @annabadyka4658 3 года назад

    Muy interesante y valioso tutorial. Me ahorraste horas interminables delante del ordenador. Muchas gracias.

  • @thedarck131
    @thedarck131 3 года назад +1

    No he visto el video estoy en vacaciones pero se que es de 5 estrellas, lo vere cuando llegue a casa

  • @R4z0r_arg
    @R4z0r_arg 3 года назад

    Grande Falcon! Sin dudas figma es mi herramienta favorita de diseño, muy recomendable usarla!

  • @jav1978
    @jav1978 3 года назад

    Excelente Carlos por este video, felicidades eres un gran maestro me ayudo este video gracias, saludos desde Venezuela

  • @Mateoballoon_cr
    @Mateoballoon_cr 3 года назад +5

    Como diseñar sin saber diseñar, excelente video

  • @Shalon412
    @Shalon412 3 года назад

    Muy buena. Estoy haciendo desarrollo Web en Google y me parece muy interesante..

  • @victoriademkoff7432
    @victoriademkoff7432 Год назад

    "Nos aprovechamos un poco..." me hizo reir!, buen video!

  • @julianvelez6563
    @julianvelez6563 3 года назад +1

    Falconmasters sos un crack me has ayudado mucho

  • @LenRM
    @LenRM 3 года назад

    Enamorada de FalconMasters 😍🧡🧡 Gracias por el contenido.

  • @d-landjs
    @d-landjs 2 года назад

    Excelente Falcon, super entendible y conciso!!! Espero ver mas tutos de Figma :D

  • @3xploit988
    @3xploit988 3 года назад

    Veo muchas personas criticando si una plataforma u otra son mejores, pienso no debería ser de esa forma ya que cada plataforma, youtuber o persona tiene su forma y metodología para enseñar, todas y cada una nos aportan en algo. El error cae sobre nosotros los usuarios que consumimos el contenido, que a veces queremos que nos enseñen todo, en vez de tomar esas bases y por cuenta propia, realizar búsquedas, investigar y con esas bases llevarlas a otro nivel. A veces la plataforma puede ser buena, quizás los malos somos nosotros.

  • @gianfrancogerman8889
    @gianfrancogerman8889 3 года назад +1

    Muchas gracias por enseñar más sobre Figma 😁

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

    Qué buen video! Muchas gracias! ❤

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

    Genial explicación, gracias!

  • @GHXtreme
    @GHXtreme 3 года назад +1

    Excelente tutorial, amigo. Un saludo

  • @jsonchicas
    @jsonchicas 3 года назад +2

    Grande FalconMasters!!!

  • @macmdq
    @macmdq Год назад +2

    Muy bueno el video, puedes poner el link del template?, los que yo encuentro no tienen la parte de Blocks. Gracias

  • @andrestovarjaime696
    @andrestovarjaime696 3 года назад +6

    Me encanto el video!! En serio es una excelente herramienta y tu forma de explicarlo es increíble, una duda, hay forma de exportar nuestro diseño a un html, css? O es solo para crear mockups

    • @FalconMasters
      @FalconMasters  3 года назад +1

      Muchas gracias!
      Si se puede exportar a HTML y CSS con plugins y herramientas pero no lo recomiendo, porque el código que generan no suele estar bien escrito.

    • @andrestovarjaime696
      @andrestovarjaime696 3 года назад

      @@FalconMasters muchas gracias!!!

  • @jaimeandresmartinez9198
    @jaimeandresmartinez9198 3 года назад

    Súper bueno este tutorial, de Figma, Es Una Gran Ayuda Para Diseñar Páginas Web, que a mí Parecer es un Dolor se Cabeza el Área de Diseño. Muchas Gracias Por Estos Tutoriales, Deberían hacer Un Curso Sobre Kotlin y Como o Cual Programa Es bueno Para Diseñar Video Juegos Para Android y iOS y Playstation, y Xbox, Bendiciones

  • @lopesawsky
    @lopesawsky 3 года назад +1

    Vídeo buenísimo! 👌♥️

  • @gabonav4888
    @gabonav4888 3 года назад

    Qué buen vídeo, explicas bien. Gracias!

  • @Gamer212Xtreme
    @Gamer212Xtreme 3 года назад

    Muchas gracias! Excelente video.

  • @ezravazquez3795
    @ezravazquez3795 2 года назад

    Muchas gracias amigo, excelente video!

  • @autosespecialistas394
    @autosespecialistas394 3 года назад

    Una pregunta amigo por casualidad no tienes algún vídeo de cómo comprar un dominio y enlazar o subir mi página creada

  • @amongustoxico1356
    @amongustoxico1356 3 года назад

    Grande! Falcón, genio!

  • @jem8900
    @jem8900 3 года назад

    Porque creas los main components a la izquierda si luego haces detach? Cual es la razon? Gracias

  • @germanpinto883
    @germanpinto883 2 года назад

    Yo podria usar varios disenos para armar una sola pagina? o sea que si me gustaron los iconos de un diseno, pero los botones de otro y un background de otro, podria hacer eso?

  • @diegfb2001
    @diegfb2001 3 года назад +1

    Pregunta ultra noob del día, qué perspectivas o potencial puede llegar a tener estos sistemas de diseños web (este y los otros que existen) sin saber programación, qué limitaciones pueden tener? De llegar a dominar alguno, qué posibilidades laborales o demanda reales existen? Soy un recién caído del catre en este tema y tengo interés en que sea una profesión. También empecé con tus tutoriales de HTML!

    • @FalconMasters
      @FalconMasters  3 года назад +2

      Estos sistemas de diseño son solamente para las personas que no saben o no quieren dedicarse a diseñar un sitio web.
      Yo invito a todos a que aprendan de diseño web tanto en la parte de diseñar prototipos desde cero, hasta la parte de programarlos. En mi opinión es lo mejor.

  • @josecalcagni8472
    @josecalcagni8472 3 года назад +3

    👉👉👉 Carlos Arturo, excelente tutorial, muy buen contenido y bien explicado, no me había dado cuenta que eras el mismo instructor de los cursos de Udemy de Diseño Profesional, PHP y MYSQL y el de Bootstrap, a los que ya estoy suscrito, muy buenos y completos por lo demás. 😃👌👍 Adicional a la información que entregas en este tutorial quería consultar respecto del plan free de Figma, cuando ellos hablan de archivos ilimitados en borrador se refieren a que no se pueden publicar y si en el plan Professional se pueden personalizar los dominios de lo que publiques??? 🙏🙏🙏

  • @walterperez8594
    @walterperez8594 3 года назад +2

    Hermano, dame tips sobre como iniciar una APP Web, desde el hosting porfa!!! pd ame tu curso de boostrap lo compre en udemy y es mi mejor compra!! saludos :D

  • @djartymx
    @djartymx 3 года назад

    Muchas gracias por tu video!!!!

  • @EloyIslado
    @EloyIslado 3 года назад +1

    Excelente tutorial, gracias. Quisiera que realice tutorial de como hacer sitio web para cursos online, así como learndash, pero utilizado lenguajes web

  • @Franvia_
    @Franvia_ Год назад

    que programa estas usando ?

  • @cristianbecquerbernardogut8912
    @cristianbecquerbernardogut8912 3 года назад +1

    Excelente video me gustaría que Hague’s un video para pasar tu diseño de figma a html y css sería genial gracias por el video

  • @edustreamimg
    @edustreamimg 3 года назад +2

    Y una vez que tienes el diseño final en figma lo puedes exportar como assets los estilos/imagenes para poder usarlos en web?

  • @williamquintero7476
    @williamquintero7476 19 дней назад

    y se puede migrar a un hosting?

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 года назад

    Genial el video , ojala subas mas material asi

  • @rukasu_desu
    @rukasu_desu 2 месяца назад +1

    Buenas tardes, ahora que esta la version 2, cuando busco un banner, el banner es directamente una imagen y no me deja editar nada... ayuda :(

  • @CristianPerez-wr1kr
    @CristianPerez-wr1kr 3 года назад +2

    Hola FM ¿Que tal estás?
    (Este comentario está fuera de contexto con el vídeo)
    Te quería preguntar que aplicación para móvil me recomiendas para editar HTML y CSS
    Un abrazo!
    PDT: Tu curso de HTML y CSS me ha servido un montón!

  • @mayma721
    @mayma721 3 года назад

    Dijiste que esto sirve para una aplicación móvil o hay algún equivalente

  • @ANANDASALUD
    @ANANDASALUD 3 года назад

    Pero, ralentiza? carga bien?

  • @jairobernaldev7234
    @jairobernaldev7234 3 года назад

    Te genera despues el html y el css para usarlo?

  • @jackarnoldramirezvera6136
    @jackarnoldramirezvera6136 2 года назад

    Everything works at its best!!

  • @fer2a95
    @fer2a95 3 года назад

    Excelente! Gracias 🤘🏻

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

    Este template ya no se encuentra disponible

  • @InspiireVibes
    @InspiireVibes Год назад

    ya no se puede compartir librería gratis? 14:35

  • @jeanpaultorrealbaalonso6850
    @jeanpaultorrealbaalonso6850 3 года назад +2

    Hola, los diseños que hagas en figma son responsive? Saludos

  •  3 года назад +1

    Y después de terminar como lo paso a código html y CSS ?

    • @backend-cataphract
      @backend-cataphract 3 года назад

      eso es solo el diseño en boceto amigo, para pasarlo tienes que hacerlo a pie con css y html, aunque existen frameworks como bootstrap que te facilitan las cosas.

    •  3 года назад

      @@backend-cataphract es usted muy amable, gracias, tenía dudas.

  • @ferlh1633
    @ferlh1633 2 года назад

    Me salvaste la vida.

  • @luisadrianmendezfelipe3300
    @luisadrianmendezfelipe3300 3 года назад

    esque FalconMastersGOD buen tutorial

  • @isabellaorozco797
    @isabellaorozco797 2 года назад

    disculpa ¿en qué aplicación tenías el ejemplo? para trabajar desde ahí.
    buen video.

  • @miguelvazquezmx
    @miguelvazquezmx 2 года назад

    Hola, mil gracias por tu video y por la manera de enseñar, muy clara. Felicidades.
    Soy nuevo en el mundo de la programación y diseño de páginas webs, tengo una que maqueté con elementor. Pero la pregunta y lo que no logro entender es: ¿qué hago con esto que creamos? ¿cómo hago para que se vea en mi sitio web y queden los botones funcionales? Mil gracias.

  • @ultrasenses
    @ultrasenses 3 года назад +1

    Tus tutoriales son los mejores, muchas gracias!! ... una preguntilla, y luego de tener este diseño tan chulo ya maquetado, cómo se pasa esto a una web real? Tienes algún tutorial? Saludos desde Barcelona :)

    • @FalconMasters
      @FalconMasters  3 года назад +2

      Muchas gracias Isabel.
      Esto es solamente el diseño, para pasarlo a una web real tienes que hacerlo con código.
      La mayoría de mis videos en mi canal son sobre esto. Te recomiendo empezar por mis cursos de HTML, CSS y Javascript en RUclips
      O si quieres un curso completo que enseña todo también tengo mi curso de diseño web en Udemy.
      Te lo dejo por si quieres darle un vistazo:
      www.udemy.com/course/diseno-web/?referralCode=BCC54890816B6A9BCFB7

  • @diegomercado7963
    @diegomercado7963 3 года назад +3

    Hola, excelente video, hay alguna manera que despues del diseño uno ya le pueda agregar funcionalidades con js o algo asi, o tocaria empezar a importar los componentes al entorno de desarrollo y aplicar el codigo? O sino como puedes hacer esa pagina que diseñaste funcional para un cliente?

  • @GuidoCentesimo
    @GuidoCentesimo 3 года назад

    Genial tu vídeo gracias

  • @oscarperedo-o7d
    @oscarperedo-o7d 11 месяцев назад

    Hola, para tener acceso al boton de community es necesario comprar la licencia?

    • @aguss3163
      @aguss3163 10 месяцев назад +1

      El boton esta abajo, me di cuenta recien
      abajo a la izquierda del todo

  • @iptvpro8349
    @iptvpro8349 3 года назад

    por que al copiar y pegar no me aprece las letras ni nada se borra la interfaz

  • @Unknown-jg8vn
    @Unknown-jg8vn 2 года назад

    Como puedo crear un sistema de diseño propio? Espero tu respuesta...

  • @guevara0283
    @guevara0283 3 года назад +1

    Tal vez la pregunta que voy hacer suene tonta pero soy nuevo en estoy ya que apenas empiezo aprender esto, me gustó mucho como queda el diseño al final con figma pero como se hace para implementarlo después en HTML y CSS? Gracias y me disculpó si formuló mal la pregunta 😅

    • @FalconMasters
      @FalconMasters  3 года назад +2

      No es una pregunta tonta, pero tu mismo ya te la has respondido. Una vez que tenemos el diseño podemos utilizar HTML para darle esa misma estructura. Todo lo puedes hacer utilizando Flexbox y CSS Grid.
      Todo esto lo puedes aprender en mis videos y cursos donde hacemos practicas con código.

    • @guevara0283
      @guevara0283 3 года назад

      @@FalconMasters gracias por responder, veré tus otros vídeos y cursos para aprender cómo y nuevamente muchas gracias

  • @arieljosue8458
    @arieljosue8458 3 года назад

    Una consulta. No conozco casi nada, pero amo el Diseño Web. ¿Eso ya está listo para subir a un hosting con dominio? osea adaptando a mi estilo/negocio.

    • @alfonsobeltranpacheco3560
      @alfonsobeltranpacheco3560 3 года назад +2

      Yo tengo entendido que no, eso solo es el diseño, son imágenes de como se vería la pagina por así decirlo. para subirlo al Hosting se tiene que programar.

    • @arieljosue8458
      @arieljosue8458 3 года назад +1

      @@alfonsobeltranpacheco3560 gracias por responder mi duda. Si me parecía que había leído que es solamente Diseño UI/UX.

  • @jcsoftdev
    @jcsoftdev 3 года назад

    pero qué buen vídeo 😃😃😃

  • @aallysonss
    @aallysonss Год назад +2

    Ya no existe ese archivo de landify :"( pusieron una versión 2 muy pobre en cuanto a recursos

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

      Yo he estado buscando alternativas pero nada

  • @luismiguelavendano3021
    @luismiguelavendano3021 2 года назад

    Me llama la atencion tu curso de diseño web, una pregunta en ese curso enseñas como llevar esos diseños elegantes a codigo?

    • @FalconMasters
      @FalconMasters  2 года назад

      Hola, si básicamente todo mi curso trata sobre el código y como pasar un diseño a sitio real.

  • @Aprendizzz2009
    @Aprendizzz2009 3 года назад +1

    pero, pero... esto se exporta una vez diseñado? html5? La página creada es adaptable? No encuentro esas opciones dentro de Figma... Salu2 y muchas gracias por el tutorial...!!! 👍

    • @alfonsobeltranpacheco3560
      @alfonsobeltranpacheco3560 3 года назад +1

      Solo es una herramienta de diseño hermano, no te exporta el diseño a código html y css. Es como si hicieras un dibujo de como se debe ver la pagina web, pero hasta ahí.

    • @Aprendizzz2009
      @Aprendizzz2009 3 года назад

      @@alfonsobeltranpacheco3560 Muchas gracias por contestar... Saludos!!! 👍

  • @RONALDDD__
    @RONALDDD__ 2 года назад +1

    Sería saber cómo podrías importar nuestro trabajo de figma a una web

  • @Dayiz91
    @Dayiz91 3 года назад

    Espero con todo el corazón algún día puedas incorporar figma en tu curso de udemy porque yo empecé con Photoshop pero resulta que dejo de ser “útil” me hubiera gustado que lo hubieras dejado en conjunto con XD y que agregues figma también.

    • @FalconMasters
      @FalconMasters  3 года назад +1

      Hola Dayanna, mi curso de diseño web lo actualice hace ya varios meses a figma.
      Es la tercera actualizacion que recibe esa sección. Primero estaba en photoshop, luego lo cambie a adobe xd y ahora a figma.

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

    Cómo puedo descargar eso

  • @yairgarizabalo9821
    @yairgarizabalo9821 3 года назад

    Carlos gracias.

  • @solarcdj5802
    @solarcdj5802 3 года назад

    Cómo se puede programar está página sin saber programar y enviarla como una página a un celular

  • @matiashau5985
    @matiashau5985 3 года назад +1

    Oie Falcon, haces un tutorial de Chart.js porfa, dale dale

  • @igor.miranda
    @igor.miranda 3 года назад

    Gracias Carlos.. consulta, que es mejor Figma o Adobe XD ? ó que tanta diferencia hay entre los dos? saludos y excelente video.

    • @soyjenricardo
      @soyjenricardo 3 года назад

      Personalmente pienso que Adobe XD es más pesado, las actualizaciones seguidas son medio molestas, necesitas tener instalado el programa, no funciona en el navegador, ni en Mac.

    • @amongustoxico1356
      @amongustoxico1356 3 года назад

      Adobe XD se queda ejecutando cosa raras en segundo plano, es muy pesado y come mucha ram, en mi opinión figmas es mejor.

  • @luciano6659
    @luciano6659 3 года назад +1

    Estoy empezando a aprender como diseñar las paginas web y eso, me gusta mas programarlas y basicamente lo estoy aprendiendo por obligacion jajaja.
    Recomiendas alguna fuente para aprender sobre diseño en Figma o simplemente buscar sistemas de diseño e ir practicando con ellos y modificandolos?

    • @carloschirinospe
      @carloschirinospe 3 года назад

      Yo te recomiendo para aprender diseño, básicamente ver principios del diseño: color, tipografía, composición, balance, etc. Desarrollas más rápido esto practicando. Mira a tu alrededor y verás que en tu día a día te enfrentas a problemas. Pregúntate ¿cómo puedo resolver este problema mediante el diseño UI?

  • @MartinLopez-lp5nu
    @MartinLopez-lp5nu 2 года назад +1

    sos craaa

  • @joserafaelsoli8333
    @joserafaelsoli8333 3 года назад +1

    Cuando los maquetaremos con html y css

  • @MiguelAngel-mf3yu
    @MiguelAngel-mf3yu Год назад

    como se si uno es gratis o de pago ?

  • @PaulaGareis
    @PaulaGareis 2 года назад

    Excelente vídeo! Nueva en esto! En la community de figma se encuentran más plantillas como esta? Alguien tiene algún nombre para sugerir en la búsqueda? gracias de antemano.

  • @joseledezma5647
    @joseledezma5647 7 месяцев назад +1

    hola amigo el landify no me sale gratis

    • @joaquinigic
      @joaquinigic 6 месяцев назад +2

      lamentablemente ya no esta gratis :(

  • @matiashau5985
    @matiashau5985 3 года назад +2

    Nosotros podemos aprovecharnos de ellos
    2:48

  • @Dayiz91
    @Dayiz91 3 года назад

    ¿Tendrás un video de cómo hacer un sistema de diseño o una guía de estilos?

  • @solutechcore
    @solutechcore 2 года назад

    Excelente videoooo

  • @chopediaz8922
    @chopediaz8922 3 года назад +2

    Te quiero mucho.

  • @_Apep_
    @_Apep_ 3 года назад

    Excelente video, una duda ... Imaginemos que terminas tu diseño con la herramienta FIGMA ... ¿las imagenes, fuentes, colores, etc se pueden tener disponibles para que las usen los desarrolladores?

  • @na81cho
    @na81cho Год назад

    Y después como se descarga el HTML¿

  • @ontico2329
    @ontico2329 3 года назад

    Cómo se vincula Figma con wordpress?

    • @FalconMasters
      @FalconMasters  3 года назад

      Son dos cosas muy diferentes. No tienen nada que ver.
      Figma es un programa de diseño, mientras que wordpress es una plataforma para crear sitios online.

    • @ontico2329
      @ontico2329 3 года назад

      Muchas gracias, excelente dato.

  • @smarttoolspanama6776
    @smarttoolspanama6776 3 года назад

    y luego se descarga el html o ?

    • @jonathansiesquen8027
      @jonathansiesquen8027 3 года назад

      Es solo un boceto. La codificación html y ccs la haces tú.