Creo que cuando aprendes algo por primera vez o quieres refrescar conocimientos es muy dificil encontrar a alguien que lo haga dinámico y lo explique bien. Muchas Gracias Xavi por los videos son muy top!!! Super recomendable para aprender y no perderte nada :)!
Hola Miranda! Cuanto me alegro que te sirva tanto de ayuda para refrescar tu conocimiento o ver cosas nuevas! Esa es mi intención, y sabiendo el resultado da mucho ánimo para seguir publicando cosas. Gracias a ti y un saludo 👋
Xavier eres lo más, me rompí la cabeza buscando información para mejorar mi aplicación móvil que estoy desarrollando en la Certificación Google como proyecto y dí contigo, no sabes cuanto aprendi. Gracias de verdad!!✨Ahora pasaré a el curso dos nos vemos
Que bueno esto que comentas!! y saber que a pesar de que estés estudiando cursos, mi contenido te ayude a mejorar. Espero poder servirte de mucha más ayuda con los videos de mi canal! Saludos! 👋🏽😁
Qué bien explica, maestro! Lloverán follows and likes, crack. Excelente curso.
4 місяці тому
Bueno.... La verdad es que este segundo video es invaluable. Creo que ni en el canal mismo de Figma tienen un contenido como este. Te felicito en verdad, se que no debe ser facil preparar este tipo de videos.
Que bueno!! Gracias por tu valoración. Un gran feedback que motiva enormemente. Debo decir que en efecto, no es fácil, pero con ganas y motivación al final sale! Saludos 👋
Gracias por este curso 🤟. Ahora entiendo el Tema de los "Tokens", al final no dejan de ser las variables que colocas en CSS Nativo con la Pseudo-clase :root . Estoy estudiando Front-end y UX/UI, e información como esta es muy valiosa. Salud2 y suscrito 👋
Gracias a ti Fabrizio! exacto, es muy similar a lo que comentas de CSS, y ahora con los condicionales lógicos que puedes aplicar en los prototipos, tal y como muestro en el tercer capítulo, es muy similar a la lógica de Javascript por ejemplo. Y por cierto, buen curso el tuyo de Front-end y UX/UI. Dale caña!! 👍🏼
No sabes como se agradece que hagas teoria-practica al mismo tiempo pero bien hecho ! Va lo suficientemente "lento" para entender y los suficientemente rapido para no aburrirse ! No me habia tocado aprender de esta forma jamas y que deleite es aprender asi ! Las lecciones pasan rapido pero sin sentir que estan vacias, esta lo que debe de estar y lo que no no esta y uno lo va deduciendo y va viendo rapido la magia del programa y las posibilidades infinitas que da y eso da motivacion para seguir aprendiendo! Sigue asi amigo con el tiempo estoy segurisimo que esos subs van a llegar por lo pronto aqui tienes uno mas ! Muchas gracias!
Hola Juan! Tu comentario si que es de agradecer. Observar que estos tutoriales pueden servir de ayuda y además puedes tener una buena experiencia durante el aprendizaje motiva enormemente!! Espero que los próximos puedan ser también de tu agrado! Un saludo y muchas gracias!! 👋🏽
Si! Interesante propuesta la que comentas. Buscaré el modo para hacerlo a ver si puedo introducirlo en algún tutorial que ya tengo programado para hacer. Gracias!! 👍
Hola! Muchas gracias! En cuanto a tu duda, si que hay ejercicios tanto el el video 2 como en el 3 que es necesario el figma profesional. Dime qué aspectos crees que te pueden interesar para ver si puedo hacer un video con algo parecido en cuanto a contenido pero con la version Free
excelente todo Xavi, me gusta como esta editado el video, por capitulos etc, también me gusta que cosa que tocas, dices que es y para que servirá y por supuesto tu contenido invalorable, super recomendable el curso de Mokkapp
Excelente contenido, me ha servido mucho, todo muy claro! lo único con lo que tuve problemas fue con el texto, al escribir el 0 me deja el típico espacio que no supe quitar, por lo que los padding me quedaban descuadrados, a que se debe?
Hola. Excelente los videos. Muy claros e interesantes. Tengo una pregunta. Los recursos como por ejemplo CSS Tailwind, ¿se pueden utilizar para un proyecto empresarial o comercial real? ¿Hay temas de costos o de copyright?. Muchas gracias.
Hola! Tailwind CSS es un framework de CSS de código abierto que te permite diseñar y programar webs. Revísalo en la web oficial lo que quieras hacer: tailwindcss.com/
Buenas! Gracias por la informacion! Cómo recomiendas armar las variables para tener tamaños para mobile y tamaños para desktop? tanto para la tipografia como para los botones
Hola Santiago! Para poder aplicar variables a los componentes en versión Desktop, mobile o tablet.. Lo que haría es crear una nueva colección en Local Variables, la puedes nombrar como "Device" por ejemplo. Ahí creas la variable size-Button, luego dos o tres modos (uno para cada dispositivo que quieras visualizar) y en cada modo estableces un valor numérico. Si por ejemplo al button le aplicas esa variable para el padding, el width, etc... ese valor se verá modificado cuando le cambies de modo. Creo que es esto, lo que preguntas. Sino dime. Un saludo!
@@mokkapp Lo que no me queda claro es si se puede hacer lo mismo para texto y cómo aplicarlo, ya que intenté crear una variable tipo "string" pero cuando la aplico en algun texto simplemente cambia el contenido por el numero de la variable, que en realidad deberia ser el tamaño de la tipografia. Mi intencion es tener distintos tamaños de h1, h2, etc, para cada dispositivo
Hola! Para la tipografía todavía no es posible.. es algo que Figma todavía no ha implementado. En ese caso debes aplicar estilos. A ver si para la actualización que tendrán en junio ya es posible hacerlo. Un saludo!!
¡Buenas! Os comento; vengo hace algunos meses colaborando como diseñador web con un programador (cabe aclarar que me lance al mundillo sin tener idea de la teoria). Ahora que me voy metiendo aun mas en este mundo, comienzo a encontrarme con nuevos conceptos, sobre todo al tomar la decision de pasarme a Figma, tal es el caso de ''Sistemas de Diseño'', nunca lo habia escuchado. Ahora bien, me surge una duda, este Sistema de Diseño que se creo en el Tutorial, es el Sistema ''Base'', ¿Verdad? Cada vez que se comience un nuevo proyecto debo hacer todo el proceso nuevamente, es decir, modificar todos los colores, tipografias, etc que el Proyecto me requiera. ¿Estoy en lo correcto? ¡Gracias, Saludos!
Hola! Si, el concepto de sistemas de diseño son aquellos elementos (color, tipografía, etc) que hace posible un diseño consistente y coherente. En este video explico como es posible empezar desde cero y poco a poco ir generando un sistema más amplio. En cuanto al iniciar un proyecto nuevo, si, lo ideal es empezar desde cero con la identidad de la marca o el producto. pero en la comunidad tienes bases de sistema de diseño o plugin que te pueden ayudar a crearlo. igualmente en este video tienes más info sobre la creación de sistemas de diseño: ua-cam.com/video/Nnl8r5PMJeE/v-deo.html
Hola! Ambos te sirven del mismo modo. Ya que los puedes publicar como librería junto con componentes por ejemplo. Yo recomiendo variables ( aunque de tipografía todavía no hay) ya que las actualizaciones de Figma tiran más hacia ese tipo.
Mmm… tal y como muestro en el vídeo me temo que de momento no. También debo decirte que las variables están en fase beta.. quizás para la actualización que se preve en junio haya algún cambio y todos podamos aprovechar de crear más de un modo… 🤞🏼
Hola! A día de hoy Figma todavía no lo tiene disponible, es posible que tengan desafíos técnicos que todavía no lo permite. Sería una buena opción tenerlos disponibles, la verdad. Una solución alternativa es crear una máscara alfa con una capa coloreada encima de otra capa coloreada, pero esto es bastante laborioso... De momento tenemos que seguir utilizando estilos para ello. En cuanto vea una actualización acerca de esto, os lo hago saber! Un saludo!
* Solo procedimientos, no explica conceptos. * Va hablando de una cosa mientras hace otra y luego no explica. Se olvida que detras de la pantalla hay una persona siguiendolo, brinca de una etapa a otra, sin mas. * Mucho conocimiento, muy poco didactico. * Utiliza ejemplos que no estan al alcance de la personna que lo sigue. A pesar de todo he disfrutado los videos. Espero con ansias mas. Se ve que sabe un monton, pero tiene que afinar la manera y la velocidad de explicar. Mantener coherencia y orden. Si no la persona que intenta seguirlo se frustra y abandona el video. Muchas gracias por los videos. Te doy feedback para que MEJORES, no con animos de desilusionarte o mal intecionados.
Creo que cuando aprendes algo por primera vez o quieres refrescar conocimientos es muy dificil encontrar a alguien que lo haga dinámico y lo explique bien. Muchas Gracias Xavi por los videos son muy top!!! Super recomendable para aprender y no perderte nada :)!
Hola Miranda! Cuanto me alegro que te sirva tanto de ayuda para refrescar tu conocimiento o ver cosas nuevas! Esa es mi intención, y sabiendo el resultado da mucho ánimo para seguir publicando cosas. Gracias a ti y un saludo 👋
El mejor video que he visto sobre este tema!!!! Idolo, muchas gracias...
Cuanto me alegro! Gracias a ti!! Un saludo 👋
Gracias por tu contenido!
Explicas cada paso claramente, de verdad ayudas mucho a la comunidad 🙌🏼
Gracias a ti por el comentario! Me alegro mucho que os sirva de ayuda! 😊
Empezando con el video, vamos a ver.
Es el mejor video que he visto sobre este tema; muchas gracias!
Muchas gracias! 😊
Xavier eres lo más, me rompí la cabeza buscando información para mejorar mi aplicación móvil que estoy desarrollando en la Certificación Google como proyecto y dí contigo, no sabes cuanto aprendi. Gracias de verdad!!✨Ahora pasaré a el curso dos nos vemos
Que bueno esto que comentas!! y saber que a pesar de que estés estudiando cursos, mi contenido te ayude a mejorar. Espero poder servirte de mucha más ayuda con los videos de mi canal! Saludos! 👋🏽😁
Qué bien explica, maestro! Lloverán follows and likes, crack. Excelente curso.
Bueno....
La verdad es que este segundo video es invaluable. Creo que ni en el canal mismo de Figma tienen un contenido como este.
Te felicito en verdad, se que no debe ser facil preparar este tipo de videos.
Que bueno!! Gracias por tu valoración. Un gran feedback que motiva enormemente. Debo decir que en efecto, no es fácil, pero con ganas y motivación al final sale! Saludos 👋
Genial el nuevo contenido de Figma y lo mejor que lo explicas todo claro, te agradezco toda esta info me a ayudado mucho!
Gracias a ti!! Un placer compartir contenido que sirva de ayuda! 😊
Buenísimo este segundo video. Gracias!
Gracias a ti!
Gracias por este curso 🤟. Ahora entiendo el Tema de los "Tokens", al final no dejan de ser las variables que colocas en CSS Nativo con la Pseudo-clase :root . Estoy estudiando Front-end y UX/UI, e información como esta es muy valiosa. Salud2 y suscrito 👋
Gracias a ti Fabrizio! exacto, es muy similar a lo que comentas de CSS, y ahora con los condicionales lógicos que puedes aplicar en los prototipos, tal y como muestro en el tercer capítulo, es muy similar a la lógica de Javascript por ejemplo. Y por cierto, buen curso el tuyo de Front-end y UX/UI. Dale caña!! 👍🏼
No sabes como se agradece que hagas teoria-practica al mismo tiempo pero bien hecho ! Va lo suficientemente "lento" para entender y los suficientemente rapido para no aburrirse ! No me habia tocado aprender de esta forma jamas y que deleite es aprender asi ! Las lecciones pasan rapido pero sin sentir que estan vacias, esta lo que debe de estar y lo que no no esta y uno lo va deduciendo y va viendo rapido la magia del programa y las posibilidades infinitas que da y eso da motivacion para seguir aprendiendo! Sigue asi amigo con el tiempo estoy segurisimo que esos subs van a llegar por lo pronto aqui tienes uno mas ! Muchas gracias!
Hola Juan! Tu comentario si que es de agradecer. Observar que estos tutoriales pueden servir de ayuda y además puedes tener una buena experiencia durante el aprendizaje motiva enormemente!! Espero que los próximos puedan ser también de tu agrado! Un saludo y muchas gracias!! 👋🏽
bro gracias, la tarde mejor ocupada
Gracias a ti! Me alegro que hayas pasado este buen rato que dices. Un saludo 👋
Genial el video. Muchas gracias!!
Gracias a ti! Un saludo 👋
Estoy viendo tu video, Gracias por enseañar esto de Tailwind, me gustaria hicieras en el futuro como exportar correctentw el css o el t
Si! Interesante propuesta la que comentas. Buscaré el modo para hacerlo a ver si puedo introducirlo en algún tutorial que ya tengo programado para hacer. Gracias!! 👍
excelente forma de enseñar! se necesita Figma Pro para completar el curso?
Hola! Muchas gracias! En cuanto a tu duda, si que hay ejercicios tanto el el video 2 como en el 3 que es necesario el figma profesional. Dime qué aspectos crees que te pueden interesar para ver si puedo hacer un video con algo parecido en cuanto a contenido pero con la version Free
excelente todo Xavi, me gusta como esta editado el video, por capitulos etc, también me gusta que cosa que tocas, dices que es y para que servirá y por supuesto tu contenido invalorable, super recomendable el curso de Mokkapp
Gracias por tu valoración Ariel! Me alegro que te haya parecido interesante! Un saludo! 👍🏼
Excelente contenido, me ha servido mucho, todo muy claro! lo único con lo que tuve problemas fue con el texto, al escribir el 0 me deja el típico espacio que no supe quitar, por lo que los padding me quedaban descuadrados, a que se debe?
Hola! ¿en qué componente o diseño que usas texto te refieres?
Hola. Excelente los videos. Muy claros e interesantes. Tengo una pregunta. Los recursos como por ejemplo CSS Tailwind, ¿se pueden utilizar para un proyecto empresarial o comercial real? ¿Hay temas de costos o de copyright?. Muchas gracias.
Hola! Tailwind CSS es un framework de CSS de código abierto que te permite diseñar y programar webs. Revísalo en la web oficial lo que quieras hacer: tailwindcss.com/
Buenas! Gracias por la informacion! Cómo recomiendas armar las variables para tener tamaños para mobile y tamaños para desktop? tanto para la tipografia como para los botones
Hola Santiago! Para poder aplicar variables a los componentes en versión Desktop, mobile o tablet.. Lo que haría es crear una nueva colección en Local Variables, la puedes nombrar como "Device" por ejemplo.
Ahí creas la variable size-Button, luego dos o tres modos (uno para cada dispositivo que quieras visualizar) y en cada modo estableces un valor numérico.
Si por ejemplo al button le aplicas esa variable para el padding, el width, etc... ese valor se verá modificado cuando le cambies de modo.
Creo que es esto, lo que preguntas. Sino dime. Un saludo!
@@mokkapp Si, muchas gracias!!!
@@mokkapp Lo que no me queda claro es si se puede hacer lo mismo para texto y cómo aplicarlo, ya que intenté crear una variable tipo "string" pero cuando la aplico en algun texto simplemente cambia el contenido por el numero de la variable, que en realidad deberia ser el tamaño de la tipografia. Mi intencion es tener distintos tamaños de h1, h2, etc, para cada dispositivo
Hola! Para la tipografía todavía no es posible.. es algo que Figma todavía no ha implementado. En ese caso debes aplicar estilos. A ver si para la actualización que tendrán en junio ya es posible hacerlo. Un saludo!!
Ah ok! con razon no encontraba la manera. Muchas gracias!@@mokkapp
Que chingaos.. tomaré este curso, tomé uno hace casi dos años en Coderhouse y ya se me olvidó 😵 😊
Hola! Creo que verás bastantes cambios ya que Figma ha evolucionado bastante en el último año. Espero que te sirva de ayuda! 🙂
¡Buenas! Os comento; vengo hace algunos meses colaborando como diseñador web con un programador (cabe aclarar que me lance al mundillo sin tener idea de la teoria). Ahora que me voy metiendo aun mas en este mundo, comienzo a encontrarme con nuevos conceptos, sobre todo al tomar la decision de pasarme a Figma, tal es el caso de ''Sistemas de Diseño'', nunca lo habia escuchado.
Ahora bien, me surge una duda, este Sistema de Diseño que se creo en el Tutorial, es el Sistema ''Base'', ¿Verdad? Cada vez que se comience un nuevo proyecto debo hacer todo el proceso nuevamente, es decir, modificar todos los colores, tipografias, etc que el Proyecto me requiera. ¿Estoy en lo correcto?
¡Gracias, Saludos!
Hola! Si, el concepto de sistemas de diseño son aquellos elementos (color, tipografía, etc) que hace posible un diseño consistente y coherente. En este video explico como es posible empezar desde cero y poco a poco ir generando un sistema más amplio.
En cuanto al iniciar un proyecto nuevo, si, lo ideal es empezar desde cero con la identidad de la marca o el producto. pero en la comunidad tienes bases de sistema de diseño o plugin que te pueden ayudar a crearlo. igualmente en este video tienes más info sobre la creación de sistemas de diseño: ua-cam.com/video/Nnl8r5PMJeE/v-deo.html
@@mokkapp Gracias por la respuesta, estoy aprendiendo super rápido con el curso 💪🏻
cuando construyo un sistema de diseño que alimentará a otros proyectos/archivos es mejor crear variables? o está bien si solo creo estilos?
Hola! Ambos te sirven del mismo modo. Ya que los puedes publicar como librería junto con componentes por ejemplo. Yo recomiendo variables ( aunque de tipografía todavía no hay) ya que las actualizaciones de Figma tiran más hacia ese tipo.
¿Habrá otra manera de establecer el dark mode si tengo el plan gratuito? 😫
Mmm… tal y como muestro en el vídeo me temo que de momento no. También debo decirte que las variables están en fase beta.. quizás para la actualización que se preve en junio haya algún cambio y todos podamos aprovechar de crear más de un modo… 🤞🏼
Consulta, como hago para añadir degradados, lo he intentando pero al ponerle el nombre, automaticamente me pone un color solido
Hola! A día de hoy Figma todavía no lo tiene disponible, es posible que tengan desafíos técnicos que todavía no lo permite. Sería una buena opción tenerlos disponibles, la verdad.
Una solución alternativa es crear una máscara alfa con una capa coloreada encima de otra capa coloreada, pero esto es bastante laborioso... De momento tenemos que seguir utilizando estilos para ello. En cuanto vea una actualización acerca de esto, os lo hago saber! Un saludo!
El p**** amo
😎🤟🏽
* Solo procedimientos, no explica conceptos.
* Va hablando de una cosa mientras hace otra y luego no explica. Se olvida que detras de la pantalla hay una persona siguiendolo, brinca de una etapa a otra, sin mas.
* Mucho conocimiento, muy poco didactico.
* Utiliza ejemplos que no estan al alcance de la personna que lo sigue.
A pesar de todo he disfrutado los videos. Espero con ansias mas.
Se ve que sabe un monton, pero tiene que afinar la manera y la velocidad de explicar. Mantener coherencia y orden. Si no la persona que intenta seguirlo se frustra y abandona el video.
Muchas gracias por los videos.
Te doy feedback para que MEJORES, no con animos de desilusionarte o mal intecionados.
Gracias por el Feedback! siempre tengo en cuentas todas las valoraciones per mejorar. Un saludo!
Llegué hasta el modo oscuro, no tengo la versión de pago
Mira a ver si puedes aplicar para obtener la versión gratuita mediante el "Figma for education": www.figma.com/education/