Como diseñar una página web bonita y sin saber de diseño | Figma
HTML-код
- Опубликовано: 19 авг 2024
- En este tutorial aprenderás como diseñar sitios web y landing pages bonitas sin tener que saber diseño. Esto gracias a sistemas de diseño en Figma.
🚀 Blog de Diseño Web:
www.falconmaste...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
---
Redes Sociales:
📌 Twitter: / falconmasters
📌 Página de Facebook: / falconmasters
📌 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
@@ihardblackHola si, puedes ver mis cursos desde aquí:
www.desarrolloweb.io/
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
xdxd
Te quiero demasiado amigo. No haces una idea de lo bien que explicas y el valor de estos tutoriales. CRACK.
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
Apoyo la noción
X2
Sería bueno
seria muy bueno
Si te refieres a exportarlo hacia código html y css, lamentablemente no se puede. Al menos hasta donde yo sé. Tendrías que programarlo.
Que bien trabajas el diseño. Es un ecosistema con muchas patas y todas las controlas. Alucinante!
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 👍👍👊
Muchas gracias por el apoyo, lo aprecio mucho :D
Eres el mejor! No se que haría la sociedad sin gente como tú subiendo videos en youtube 👏
Muchas gracias!
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.
Todo un capo el Falcon, todos somos unos Falcon Masters 😎😎👌🏻👌🏻😎
talvez no leas este comentario pero bueno, solo quería decirte que me has ayudado mucho enserio te mando un enorme abrazo :3. saludos
Siempre intento leer todos los comentarios.
Muchas gracias a ti por apoyar mis videos, me da mucho gusto que te sean de ayuda! :D
Tremendo, tengo que presentar un prototipo el sabado (en 2 dias) y esto me aceleró todos los procesos, muchas gracias loco
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.
Gracias Janiel!
Muchas gracias!, haz sido mi mejor maestro de programación
No he visto el video estoy en vacaciones pero se que es de 5 estrellas, lo vere cuando llegue a casa
Como diseñar sin saber diseñar, excelente video
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
Muy interesante y valioso tutorial. Me ahorraste horas interminables delante del ordenador. Muchas gracias.
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
Grande Falcon! Sin dudas figma es mi herramienta favorita de diseño, muy recomendable usarla!
Excelente Carlos por este video, felicidades eres un gran maestro me ayudo este video gracias, saludos desde Venezuela
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.
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
Falconmasters sos un crack me has ayudado mucho
Muy buena. Estoy haciendo desarrollo Web en Google y me parece muy interesante..
"Nos aprovechamos un poco..." me hizo reir!, buen video!
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
Excelente Falcon, super entendible y conciso!!! Espero ver mas tutos de Figma :D
👉👉👉 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??? 🙏🙏🙏
Muchas gracias por enseñar más sobre Figma 😁
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
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.
@@FalconMasters muchas gracias!!!
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!
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.
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
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!
Excelente tutorial, amigo. Un saludo
Enamorada de FalconMasters 😍🧡🧡 Gracias por el contenido.
Gracias!
Ya no existe ese archivo de landify :"( pusieron una versión 2 muy pobre en cuanto a recursos
Yo he estado buscando alternativas pero nada
Muy bueno el video, puedes poner el link del template?, los que yo encuentro no tienen la parte de Blocks. Gracias
Qué buen vídeo, explicas bien. Gracias!
Grande FalconMasters!!!
Genial explicación, gracias!
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.
Muchas gracias! Excelente video.
Muchas gracias amigo, excelente video!
Excelente tutorial, gracias. Quisiera que realice tutorial de como hacer sitio web para cursos online, así como learndash, pero utilizado lenguajes web
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 :)
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
Genial el video , ojala subas mas material asi
Vídeo buenísimo! 👌♥️
Muchas gracias por tu video!!!!
Sería saber cómo podrías importar nuestro trabajo de figma a una web
Grande! Falcón, genio!
Y una vez que tienes el diseño final en figma lo puedes exportar como assets los estilos/imagenes para poder usarlos en web?
y como lo paso a HTML y CSS?
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?
Porque creas los main components a la izquierda si luego haces detach? Cual es la razon? Gracias
Oie Falcon, haces un tutorial de Chart.js porfa, dale dale
esque FalconMastersGOD buen tutorial
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 😅
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.
@@FalconMasters gracias por responder, veré tus otros vídeos y cursos para aprender cómo y nuevamente muchas gracias
Everything works at its best!!
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.
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.
Genial tu vídeo gracias
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
Excelente! Gracias 🤘🏻
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?
Carlos gracias.
Me salvaste la vida.
Hola, los diseños que hagas en figma son responsive? Saludos
Dijiste que esto sirve para una aplicación móvil o hay algún equivalente
Y después de terminar como lo paso a código html y CSS ?
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.
@@creepermanpro es usted muy amable, gracias, tenía dudas.
por que al copiar y pegar no me aprece las letras ni nada se borra la interfaz
Cuando los maquetaremos con html y css
disculpa ¿en qué aplicación tenías el ejemplo? para trabajar desde ahí.
buen video.
Pero, ralentiza? carga bien?
Cómo se puede programar está página sin saber programar y enviarla como una página a un celular
¿Tendrás un video de cómo hacer un sistema de diseño o una guía de estilos?
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?
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?
Como puedo crear un sistema de diseño propio? Espero tu respuesta...
Si quieren exportar un diseño a HTML,CSS directamente, tendrian que usar herramientas como WEbflow.
Pero falto lo mas importante.. como lo llevo a codigo.. o, no es necesario... como lo publico??
FALCON, ME GUSTARÍA QUE HICIERAS UN VIDEO ENSEÑANDO CÓMO HACER UN REPRODUCTOR EN HTML QUE SE PUEDA VER EN VIVO. COMO POR EJEMPLO UN PARTIDO DE FÚTBOL, ¡¡TE LO AGRADECERÍA!!
Te quiero mucho.
Yo igual XD
X3
Excelente videoooo
y como lo pasas a Wordpress?
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.
pero qué buen vídeo 😃😃😃
sos craaa
Te genera despues el html y el css para usarlo?
Ya nada funciona para el 2024 :(
facts
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...!!! 👍
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í.
@@alfonsobeltranpacheco3560 Muchas gracias por contestar... Saludos!!! 👍
Nosotros podemos aprovecharnos de ellos
2:48
Literal
Cómo puedo descargar eso
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?
Hola, si básicamente todo mi curso trata sobre el código y como pasar un diseño a sitio real.
hola amigo el landify no me sale gratis
lamentablemente ya no esta gratis :(
Maestro este video para el diseño esta super bien. pero como llevo este diseño a mi sitio web
Con HTML, CSS y Javascript, tal como enseño en casi todos mis videos del canal.
como se si uno es gratis o de pago ?
Quería saber si este programa te permite diseñar como HTML ?
que programa estas usando ?
Hola, para tener acceso al boton de community es necesario comprar la licencia?
El boton esta abajo, me di cuenta recien
abajo a la izquierda del todo
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?
yo tambien quiero saber eso.
Gracias Carlos.. consulta, que es mejor Figma o Adobe XD ? ó que tanta diferencia hay entre los dos? saludos y excelente video.
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.
Adobe XD se queda ejecutando cosa raras en segundo plano, es muy pesado y come mucha ram, en mi opinión figmas es mejor.
Y después como se descarga el HTML¿