Como diseñar una página web bonita y sin saber de diseño | Figma
Вставка
- Опубліковано 27 жов 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
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.
Eres el mejor! No se que haría la sociedad sin gente como tú subiendo videos en youtube 👏
Muchas gracias!
Todo un capo el Falcon, todos somos unos Falcon Masters 😎😎👌🏻👌🏻😎
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
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
Muy interesante y valioso tutorial. Me ahorraste horas interminables delante del ordenador. Muchas gracias.
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
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.
Excelente Carlos por este video, felicidades eres un gran maestro me ayudo este video gracias, saludos desde Venezuela
No he visto el video estoy en vacaciones pero se que es de 5 estrellas, lo vere cuando llegue a casa
Qué buen video! Muchas gracias! ❤
👉👉👉 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??? 🙏🙏🙏
Falconmasters sos un crack me has ayudado mucho
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!!!
"Nos aprovechamos un poco..." me hizo reir!, buen video!
Grande Falcon! Sin dudas figma es mi herramienta favorita de diseño, muy recomendable usarla!
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!
Genial explicación, 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
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
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.
Muy buena. Estoy haciendo desarrollo Web en Google y me parece muy interesante..
Excelente Falcon, super entendible y conciso!!! Espero ver mas tutos de Figma :D
Enamorada de FalconMasters 😍🧡🧡 Gracias por el contenido.
Gracias!
Muchas gracias por enseñar más sobre Figma 😁
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 tutorial, gracias. Quisiera que realice tutorial de como hacer sitio web para cursos online, así como learndash, pero utilizado lenguajes web
Muy bueno el video, puedes poner el link del template?, los que yo encuentro no tienen la parte de Blocks. 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.
Excelente tutorial, amigo. Un saludo
Muchas gracias! Excelente video.
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 UA-cam
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
Muchas gracias amigo, excelente video!
Qué buen vídeo, explicas bien. Gracias!
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
Muchas gracias por tu video!!!!
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 :(
pq ya no es gratis, mi inteligente
Pudiste? Cómo lo terminaste?
Grande FalconMasters!!!
Genial el video , ojala subas mas material asi
Vídeo buenísimo! 👌♥️
Grande! Falcón, genio!
Everything works at its best!!
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?
Hola, los diseños que hagas en figma son responsive? Saludos
disculpa ¿en qué aplicación tenías el ejemplo? para trabajar desde ahí.
buen video.
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.
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
Y una vez que tienes el diseño final en figma lo puedes exportar como assets los estilos/imagenes para poder usarlos en web?
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
Genial tu vídeo gracias
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.
esque FalconMastersGOD buen tutorial
Excelente! Gracias 🤘🏻
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?
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!!! 👍
Me salvaste la vida.
¿Tendrás un video de cómo hacer un sistema de diseño o una guía de estilos?
Dijiste que esto sirve para una aplicación móvil o hay algún equivalente
Oie Falcon, haces un tutorial de Chart.js porfa, dale dale
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.
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.
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
que programa estas usando ?
Pero, ralentiza? carga bien?
Porque creas los main components a la izquierda si luego haces detach? Cual es la razon? Gracias
Sería saber cómo podrías importar nuestro trabajo de figma a una web
por que al copiar y pegar no me aprece las letras ni nada se borra la interfaz
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.
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.
@@alfonsobeltranpacheco3560 gracias por responder mi duda. Si me parecía que había leído que es solamente Diseño UI/UX.
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.
hola amigo el landify no me sale gratis
lamentablemente ya no esta gratis :(
Excelente videoooo
Si quieren exportar un diseño a HTML,CSS directamente, tendrian que usar herramientas como WEbflow.
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.
@@backend-cataphract es usted muy amable, gracias, tenía dudas.
Cuando los maquetaremos con html y css
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
Te genera despues el html y el css para usarlo?
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.
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!!
Como puedo crear un sistema de diseño propio? Espero tu respuesta...
sos craaa
Este template ya no se encuentra disponible
y como lo paso a HTML y CSS?
Pero falto lo mas importante.. como lo llevo a codigo.. o, no es necesario... como lo publico??
Cómo se puede programar está página sin saber programar y enviarla como una página a un celular
Nosotros podemos aprovecharnos de ellos
2:48
Literal
Te quiero mucho.
Yo igual XD
X3
Que opinas de Adobe XD en comparación con este programa. Me iba a ir por Adobe XD Para empezar y me encuentro con este. Por ello te lo pregunto. Muy interesante el vídeo.
Ambos son muy buenos, y tengo tutoriales y cursos de los 2. A mi me gustaba mas Adobe XD, pero estoy pasándome poco a poco a Figma.
@@FalconMasters Genial, los veré en otra oportunidad y suscrito 😁
Ya nada funciona para el 2024 :(
facts
Cómo puedo descargar eso