Vi tantos videos y este es el único que entendí muchas gracias :), podrías hacer uno aplicando autolayout a cosas más completas como una sección que tenga cards, título y botón por ejemplo? muchísimas gracias
Al principio me he liado solo queriendo aprender a utilizar esta feature por mi cuenta, pero con tu explicación no me ha quedado duda alguna. Eres una crack!
¡Muchas gracias por el tuto Cris! He empezado con cosas de plataformas y dashboards en el trabajo (vengo de gráfico), llegué a tu blog de casualidad y este tuto me ha arreglado la semana ¡Gracias again!
¡Me alegra que con este vídeo hayas podido entender bien el Auto Layout! La verdad es que es un poco complicado, pero una vez lo dominas ganas mucho tiempo.
Excelente! Corto y conciso. Justo lo que necesitaba, luego los videos de figma en inglés aún me hacía un lío con el resizing y sus múltiples opciones. Me queda alguna duda, y es que como no se podía apreciar las variables de padding para los ejemplos, tengo la duda de hasta dónde crece la caja con el fill container. Es decir, se expande lo máximo posible hasta la altura del frame "Container" menos su padding? No se si me explico :/. Minuto al que me refiero: 5:21. Gracias!
¡Hola Carvelliana! Me alegra que el vídeo te haya ido bien :) "Fill container" hace que el contenedor se expanda ocupando todo el espacio disponible que tiene, teniendo siempre en cuenta el resto de elementos que tiene alrededor. Escribí un artículo también, por si te ayuda a verlo más claro: www.uifrommars.com/auto-layout-figma/
¿Te refieres a los componentes interactivos? Si es así, escribí un artículo (que también tiene un vídeo dentro) con ello: www.uifrommars.com/componentes-interactivos-figma/
El tutorial me pareció increíble. Muchas gracias. Sin embargo, me gustaría ver una adaptación para el nuevo autolayout 2023, ya que hay cosas diferentes y no me funciona igual :(
muy buen tutorial, pero justo en el resize de la imagen si se necesita que guarde proporciones como por ejemplo 5:3 o 16:9 no consigo que se redimensione de manera correcta...
Disculpa la demora en la respuesta, Ines. Fíjate en que el "resizing" sea el adecuado. A menudo hay que ir probando diferentes combinaciones para que encaje la adecuada T_T
¡estupendo vídeo! Una preguntita, al final, cuando copias y pegas el bloque de texto, el fondo de la card se te va alargando hacia abajo adaptándose. Cuando yo lo he hecho, el fondo de la card se queda del mismo tamaño que la pinté. He visto el video punto a punto 3 veces y no logro saber por qué. ¡Mil gracias!
Nice! Pregunta. El padding en realidad no es de los elementos, sino del contenedor, ¿verdad? Y la otra pregunta. Cuando cambiaste el layout a vertical no entendí por qué estando el icono como primer elemento, se pintaba último. ¡Gracias por compartir estas cosas! :D
Ambos. Se puede añadir padding en los cuatro lados del contenedor (y que sea además diferente en cada lado) y el espaciado entre los propios elementos. Y sobre lo del orden, en el diseño aparece al revés de como están ordenadas las capas. Según arrastres la capa y cambies su orden, se cambia en el diseño. Gracias por el comentario ^^
@@uiFromMars Gracias a vos por responder. La verdad que está muy bueno, es como la propiedad flex para los que maquetamos, incluso la alineación horizontal para separar elementos (space-between) se llama como la misma propiedad que usamos en Flexbox. Está muy bien! Saludos!
Tenerlo con Auto Layout te ayudará a poder usarlo mejor en tu día a día, ya que el componente siempre se adaptará a los diferentes casos de uso sin tener que hacer "detach".
De todos los videos que he visto, los tuyos son los mejores!
Alucinante explicación. No conocía esta función de Figma. Muchísimas gracias!!
Vi un curso online donde explicaban el auto layout y luego vi tu curso, y te entendí mucho más a ti, así que gracias
Muchas gracias, me ha servido de mucho!!!
Excelente explicación! he visto varios videos de lo mismo y éste es el que mejor lo explica, muchas gracias!
Gracias, Gabriela :) Qué bien que te haya sido útil!
Gracias, muy claro la explicación de auto layout
Gracias por el comentario, Julieth! :)
Muy buen tutorial, sencillo, claro, y sin detenerse en instrucciones básicas que hay que saltarse. Muchas gracias!
¡Gracias Claudio! Me alegra que te haya sido útil :)
qué claridad y oro en la información. ¡Gracias!
¡Gracias, Josz!
Llevaba como tres tutoriales y no entendía nada. Con ustedes lo he entendido todo, ¡Muchas gracias!
Me alegra que te haya sido útil para entenderlo, Daniela :)
Gracias! Sin duda me has animado a seguir aprendiendo y a aplicarlo
Madre mía que bien explicas todo, mil millones de gracias por tus vídeos!!! Muy fan!!!
Ay, gracias por tu comentario, Sara :D
Vi tantos videos y este es el único que entendí muchas gracias :), podrías hacer uno aplicando autolayout a cosas más completas como una sección que tenga cards, título y botón por ejemplo? muchísimas gracias
Gracias Cris por tus videos, me están ayudando mucho con mis trabajos!
Ay, me alegra mucho leer esto @manmass! :)
ayyy muchas gracias, muy practico y super entendible
¡Gracias por el comentario, Lujan! 🙌
Excelente video, conciso y práctico. Muchas gracias
me ayudo muchísimo muchas gracias cariños desde chile!
Me ha encantado! Muchas gracias!
Gracias a ti :D
EXCELENTEEE !!!
Hiper útil !!! Muchísimas gracias Cris !!
De nada, Alan ^_^ Qué bien que te haya parecido útil!
Al principio me he liado solo queriendo aprender a utilizar esta feature por mi cuenta, pero con tu explicación no me ha quedado duda alguna. Eres una crack!
¡Gracias Juanse! ^^
Muchas gracias! Muy claro y sin rodeos =)
Gracias, Marta :D
Perfectamente explicado gracias
Excelente!! Se entiende perfectamente con el ejemplo de la card.
¡Genial! Gracias por el comentario Antonio :)
¡Muchas gracias por el tuto Cris! He empezado con cosas de plataformas y dashboards en el trabajo (vengo de gráfico), llegué a tu blog de casualidad y este tuto me ha arreglado la semana ¡Gracias again!
¡Hey! Me alegra que te haya sido útil el tutorial :) La verdad es que Auto Layout es un poco complicado, peeeeero tiene mucho potencial!
Brutal me ha servido de mucho, muchísimas gracias
¡Genial! Me alegra que te haya servido, Alba! ^^
Muy claro tus ejemplos. Muchas gracias! Me sirvió para mi proyecto.🙂
¡Gracias! Me alegra que te haya sido útil para tu proyecto ^^
Muy sencillo de entender y muy potente, muchas gracias por el tutorial :D
Muchísimas gracias :) Por fin lo entendí.
¡Me alegra que con este vídeo hayas podido entender bien el Auto Layout! La verdad es que es un poco complicado, pero una vez lo dominas ganas mucho tiempo.
¡Genial explicación!
¡Gracias por el feedback! ^^
Buenísimos todos tus tutoriales gracias 🙏🏻 si me estaba tomando el pelo un card con los constraints aquí ya me queda un poco más claro
¡Qué bien! :)
muy buen video! se entendio todo perfecto!!!
MUY BUENA EXPLICACIÓN, MUCHAS GRACIAS!
Gracias a ti, Helen :)
Clarísima la explicación. ¡Gracias!
¡Hey! Gracias a ti, me alegra que te haya sido útil 😇
Muchas gracias!
Excelente explicación, ojala poder ver pronto más contenido; Gracias saludos! :D
¡Hola Jhonatan! La verdad, espero poder volver a subir vídeos pronto, han sido unos meses un poco complicados T_T
Muchas gracias, esta perfectamente explicado!
¡Gracias Lucas!
genial, lo explicas muy bien , gracias,
¡Gracias, Karin! Me alegra que haya quedado más o menos claro ☺️
Muchas gracias :) Muy buen video
¡Gracias a ti por pasarte, IrelaMasterice! 🤘
Gracias por tan buena explicación :D
Esclarecedor. Mil gracias
Buenísimo!!! Mil gracias por compartir esto, se entiende genial :)
¡Gracias Dipti! Me alegra que te haya servido 🤘
excelente! gracias
Super bien explicado, y práctico me encantó GRACIAS :D
Me alegra que te haya servido, Jorge Iván!
es un gran aporte el que has hecho aquí, espero que siga creciendo tu canal éxitos!!
Veo que el background que tenías se convierte en el frame y ya no es un elemento por separado
Excelente! Corto y conciso. Justo lo que necesitaba, luego los videos de figma en inglés aún me hacía un lío con el resizing y sus múltiples opciones. Me queda alguna duda, y es que como no se podía apreciar las variables de padding para los ejemplos, tengo la duda de hasta dónde crece la caja con el fill container. Es decir, se expande lo máximo posible hasta la altura del frame "Container" menos su padding? No se si me explico :/. Minuto al que me refiero: 5:21. Gracias!
¡Hola Carvelliana! Me alegra que el vídeo te haya ido bien :) "Fill container" hace que el contenedor se expanda ocupando todo el espacio disponible que tiene, teniendo siempre en cuenta el resto de elementos que tiene alrededor.
Escribí un artículo también, por si te ayuda a verlo más claro:
www.uifrommars.com/auto-layout-figma/
Excelente video, muy practicó y directo 💙
¡Gracias! 🚀
buenísimo video, bien explicado y con ejemplos reales. Gracias!
Podrías hacer uno de los componentes, hasta el día de hoy me complica utilizarlos :(
¿Te refieres a los componentes interactivos? Si es así, escribí un artículo (que también tiene un vídeo dentro) con ello:
www.uifrommars.com/componentes-interactivos-figma/
Saludos de argentina
Demasiado claro el video!!!!!! :D!!!
Me alegra que te haya ayudado, Belén! ^^
Geniales tus videos!! muy concretos. Me encantaría ver uno sobre cómo hacer un handoff en figma. Gracias Astronauta🚀
Lo apunto para un próximo vídeo, Karen ^^
muy bueno
nice, ojala pronto hagan un curso de diseño web en figma, buen video :D
Me lo pensaré ^_^
Excelente explicación, además eres muy hermosa jejjee, tienes un nuevo suscriptor.
Aw, gracias ☺️
me enamoré😅
El tutorial me pareció increíble. Muchas gracias. Sin embargo, me gustaría ver una adaptación para el nuevo autolayout 2023, ya que hay cosas diferentes y no me funciona igual :(
Lo tengo pendiente 🙏🏼
Genial!
muy buen tutorial, pero justo en el resize de la imagen si se necesita que guarde proporciones como por ejemplo 5:3 o 16:9 no consigo que se redimensione de manera correcta...
Disculpa la demora en la respuesta, Ines. Fíjate en que el "resizing" sea el adecuado. A menudo hay que ir probando diferentes combinaciones para que encaje la adecuada T_T
¡estupendo vídeo! Una preguntita, al final, cuando copias y pegas el bloque de texto, el fondo de la card se te va alargando hacia abajo adaptándose. Cuando yo lo he hecho, el fondo de la card se queda del mismo tamaño que la pinté. He visto el video punto a punto 3 veces y no logro saber por qué. ¡Mil gracias!
Eso es porque no tienes un autolayout con todos los elementos, lo por el 06:35
Nice! Pregunta. El padding en realidad no es de los elementos, sino del contenedor, ¿verdad? Y la otra pregunta. Cuando cambiaste el layout a vertical no entendí por qué estando el icono como primer elemento, se pintaba último. ¡Gracias por compartir estas cosas! :D
Ambos. Se puede añadir padding en los cuatro lados del contenedor (y que sea además diferente en cada lado) y el espaciado entre los propios elementos.
Y sobre lo del orden, en el diseño aparece al revés de como están ordenadas las capas. Según arrastres la capa y cambies su orden, se cambia en el diseño.
Gracias por el comentario ^^
@@uiFromMars Gracias a vos por responder. La verdad que está muy bueno, es como la propiedad flex para los que maquetamos, incluso la alineación horizontal para separar elementos (space-between) se llama como la misma propiedad que usamos en Flexbox. Está muy bien! Saludos!
como hacer un overlap??
¡Hola Nestor! En este contexto, ¿a qué te refieres con overlap?
@@uiFromMars Hola!! sobre posición de capas dentro del autolayout
Qué tan recondable es: si ya configure todo mi DS con constrains, que Justo no se rompen porque están bien hechos, meter todo a autolayout ???
Tenerlo con Auto Layout te ayudará a poder usarlo mejor en tu día a día, ya que el componente siempre se adaptará a los diferentes casos de uso sin tener que hacer "detach".
Genial! Pregunta... Puedo exportar un diseño con auto layout y enviarlo desde mi Gmail? Cuál sería el formato?
¡Hola, Griselda! Lo único que podrías hacer es compartir el enlace del documento de Figma y enviarlo por correo desde Gmail.
Hola, hay opciones como las de Resizing que no encuentro, será que estoy usando otra versión? como puedo asegurarme estar usando la misma tuya?
Hola, Joselth! Es posible que la versión que tengas sea más nueva que la de este vídeo. Trataré de actualizarlo lo más pronto posible :)
Como haces pata habilitar la opción de Resize?
¡Hola, Selena! Fíjate en si ese elemento que quieres redimensionar está dentro de un frame o si tiene Auto Layout aplicado.
No veo la opción de Resizing, supongo que ya no esta.
Puede ser. Tengo pendiente rehacer este vídeo con la última actualización 😇