Figma para Frontends ¿Un Frontend debe saber diseñar?
HTML-код
- Опубликовано: 30 июл 2024
- Diseño profesional para crear un portafolio excelente 👉 leonidasesteban.com/proyectos/
00:00 - Te damos la bienvenida
00:17 - ¿Qué es Figma?
02:02 - Prototipos en Figma
02:46 - Figma VS Sketch
03:50 - Figma VS Adobe XD
04:47 - Photoshop / Illustrator
05:32 - Crea una cuenta en Figma
06:03 - Descarga tu primer proyecto
08:14 - Documentación
13:34 - Exportar un asset en Figma
16:49 - Conclusiones
17:33 - Inicia con tu primer proyecto
📼 Videos recomendados:
Cómo hacer un portafolio para conseguir trabajo • Cómo tener un portafol...
Crea un gran portafolio con /Proyectos • Crea un gran portafoli...
El nuevo LeonidasEsteban.com • El nuevo LeonidasEsteb...
🤝🏽 Obtén beneficios extras y únete a la comunidad
/ @leonidasesteban
🔵 Sígueme para ver él detrás de cámara y contenido exclusivo:
/ leonidasesteban
/ leonidasesteban
github.com/leonidasesteban 
Наука
Vengo como artista y fotografa a aprender para poder hablar con mi equipo jaja gracias por crear contenido de gran valor!
wow!! Que bonito ver que aunque tengas una profesión diferente al desarrollo tengas interés en este contenido 💪 más habilidades para tu carrera profesional 👏
@@CarlosHParedes Haciendo dirección creativa tienes que poder hablar con tu equipo en su idioma. Saludos!!
@@cameralightsladies4891 me pasa igual en el equipo, editar los cursos y estar siempre en el flujo del desarrollo de productos, al final ese contexto se refleja en el contenido de videos. ✋🏻
Genial Leonidas 💜
Como siempre, un crack Leonidas!!!
Mil gracias, super interesante!
Muchas gracias Leonidas por este contenido es muy valioso, te da una amplia idea de como ir diseñando una pagina para que quede bien a los ojos del usuario, Tus videos soy muy buenos
Amo cada vídeo que veo sobre tus contenidos.
Genial video, Muchas gracias !!1
Gracias por la informacion, sigue asi bro
Justo fue lo que pregunte! , Gracias Leonidas!, Se ve muy buena la herramienta, normalmente uso photoshop para maquetar paginas web pero hare algunos en figma para aprenderla a usar bien además de que se ve mas útil !
Espero pueda servirte mucho este video para continuar creciendo en tu carrera como frontend 😊
Muchas gracias por el aporte Leónidas gran video, una consulta sería muy bueno que hiciera el vídeo completo realizando el sitio web completo en base a la plantilla de figma que mostraste sería muy chido y uno aprendería muchas cosas y muchos esperan eso
Buena campeon... justo me cayo como anillo al dedo buen timing para el curso, Muchas Gracias Compatriota.
Proyectos tiene algún diseño para una todo list y para formularios de registro e inicio de seseión?
Y que herramientas puedo usar para versionar los diseños que se hacen en figma?
Grande leonidas
Excelente video leonidas :D gracias por el conocimiento :D
Gracias Leo!
Excelente explicación del uso correcto de Figma.
Instablaster...
Excelente video. Aprendi Figma en 17 minutos.
Yo tuve que aprender a usar figma sin saber que existia, buen video, me hubiera servido al iniciar
Comunidad necesito un consejo: ¿Qué framework de UI debería aprender para React? Las opciones son: Chakra UI, bootstrap-react.
Me imagino que quieres priorizar, te recomendaria bootstrap, más por que lo e usado que otra cosa, tambien te recomiendo que le des una vuelta a Bulma
Depende de tu conocimiento en react, si apenas estas comenzando boostrap puede ser la opcion por facil, pero si ya eres avanzado en react puedes optar por antd o material ui
Exelente atribucion y productivo estimado ....
Una pregunta... Si mi diseño contiene efectos 3d para app... Podría pasarlo en Andorid studio?
Hola Leonidas, tengo una gran pregunta, en el video nos cuentan que si eres front-end te puedes descargar el icono en SVG. Sin embargo; los front-end del trabajo nos piden, a nosotros los diseñadores, los iconos en Icomoon. Como has solido trabajar tú en Platzi o en otra chamba con los iconos que diseñan los diseñadores?
Loco me encanta el degradado radial que te hiciste en la pared con la luz esa que pusiste! Queda muy "pulished" saludos desde Buenos Aires!
Claro que si Esteban debemos aprender a Diseñar, y yo en mi canal me enfoco en en enseñar UX/UI en Figma y usar todas las tendencias actuales ^^
Hola leonidas ,estoy interesado en suscribirme al anual, pero tengo un par de dudas , en todo esto , uno en que parte empieza a usar javascript? , o alguna llamada de apis? uno mismo se las tiene que ingeniar en cada proyecto de figma o como? porque en el video solo se ve como mejorar de manera profesional la maquetacion , mas nada de Js que es algo fundamental para ser frontend, muchas gracias por tu tiempo y espero respuesta
Tienes diseño, la implementación vienen de tu parte. Es para que practiques lo que ya sabes de cursos o lo que aprendiste empíricamente aquí te explico un poquito más leonidasesteban.com/blog/que-es-proyectos
El vídeo que me faltaba
Maestro que pasa con el live donde estabas maquetando el proyecto de Elisa ?? lo eliminaste ?? no lo veo
Excelent video Leonidas! Con Figma pude reemplazar casi al 100% photoshop, además que mi pc no es tan potente.
Descubrí que al poner a Figma como herramienta complementaria para desarrollo tenía mucha más ventajas que solo quedarme con las enfocadas a otro tipo de diseño, como Photoshop o Illustrator. Cada día usándola un poco al final se vuelve habitual y fácil de navegar.
@@CarlosHParedes Porque fuera del comentario me sale como si Leónidas haya comentado y cuando entro al comentario sale otro usuario
@@luiggymacias5735 🤔 buena pregunta ? 😅
@@CarlosHParedes Pero tú eres Leónidas o no? No entiendo si es un bug de RUclips o que
Excelente video! Yo uso Xd xq mi empresa lo paga junto con PS y AI. Buena idea de Proyectos pero a mi parecer, hay que mejorar la calidad los diseños. Hay cosas dfe mas nivel en Dribbble.
Me gusta mucho Figma para compartir pero a mi me parece mas comodo usar Sketch aun.
Y no hay más comentarios ?
Quería pasó ?
Soy diseñador de profesión, en el camino aprendí a programar y ahora me dedico al front. Mis compañeros que estudiaron informática, ni por interés, ni por habilidades pudieron jamás aprender a diseñar. Todo lo que tenga que ver con html, ui y ux me lo pasan a mí. Así que este doble trabajo me tiene en un puesto clave :)
Felicidades bro!! No se por que tanto rechazo al diseño cuando es tan entretenido jaja, soy programador, pero tengo nociones de diseño, pero Dios he visto programadores que diseñan horrible xD
Yo quisiera tener más creatividad jaja
@@userpiero5359 según mi punto de vista el que tengas noción de diseño es un plus o algo adicional, ya que la realidad como programador eres formado para resolver problemas y tener pensamientos analitos e logicos creado codigo eficiente
@@error404android en un mundo lleno, pero lle o de software malísimo por un ux deficiente, por una interfaz poco atractiva, estás pero 50000% equivocado.
Eres un pro
Gracias por apreciar el contenido Víctor :) hay muchas clases en el canal que también te pueden servir y pronto subo nuevas 😊
Framer X es otra herramienta de esta lista
ya mismo lo bajo master
puedo copiarme los margenes ?
No, aunque podrías tomar la configuración del auto layout, sin embargo es muy malo que confíes en estos estilos a ciegas ;)
una duda amigo entonces figma es una aplicacion solo para calcar o copiar trabajos de otros
o_o what? Figma es la herramienta para crear diseño interactivo
O sea no estas respondiendo la pregunta en sí, estas vendiendo un producto (plantillas, cursos y no se que más) de tu web...
En el video, la respuesta está explícita en si 👍🏻 los contenidos no se encargan sólo de vender, dan contexto y aportan conocimiento específico gratis.
Leonidas. En tu web de proyectos que vendes?...Cursos de figma de como lograr lo que presentas en tus proyectos?....Cursos de Diseño Web? o Vendes los portafolios?...No esta muy clara tu propuesta economica. Me puedes apoyar. Gracias
Lo que puedes encontrar en /proyectos es diseño profesional para iniciar o mejorar tu portafolio como frontend, hoy encuentras archivos para usar Figma y guiar el diseño con código de tus proyectos, también puedes elegir si el proyecto es básico o avanzado según el reto que decidas hacer. Entrar a la comunidad en Discord es un plus de comprar proyectos y así juntos resolvemos dudas, compartimos el proceso de tus proyectos 🙌🏻 la comunidad tiene su propio canal de live coding, música para codear y memes también 😉
Hola Leo, disculpa una pregunta ¿los diseñadores también proporcionan el diseño de como se debe de visualizar en las diferentes pantallas por ejemplo de 320px, de 834? O como podemos saber que márgenes, tamaño de fuentes y en cuántas columnas debemos mostrar los elementos en los diferentes anchos de pantalla? De antemano muchas gracias!
Muy buen contenido! Lastima lo que paso con Platzi!
Quack
Muy bien Leonidas.. te banco a full.. ya le deje mi mensajito a tus ex jefes..!! sigue inspirando personas!!
Uy, porque tan pocas vistas ?
jejeje porque oficialmente sale el lunes
Tu pagina proyectos tiene un error 500
Xd no es mejor
Es una pregunta o es una afirmación ? 😅
Que asco el comportamiento que tuviste con platzi
Que diferencia hay entre la versión online vs escritorio ?