Diseño Responsivo con Auto Layout en Figma

En el minuto 2.34 al aplicar el 'Auto layout' no se menciona que se están presionando las teclas **Chift + A**. Pensé que se habían cortado esa parte pero afortunadamente me di cuenta al ver las teclas que el profesor está presionando en la pantalla.

En mi caso Ctrl + Shift + A funciona como seleccion invertido, tuve que utilizar Ctrl + Alt + Shit + A para utilizar el Suggest auto layout

Auto Layout, Frame y Layer son conceptos fundamentales en Figma que ayudan en la organización y diseño de interfaces. - **Auto Layout**: Es una herramienta que permite que los elementos se adapten automáticamente al tamaño de su contenido y al contenedor. Facilita la creación de diseños responsivos que cambian de tamaño de acuerdo a la información que contienen. - **Frame**: Es un contenedor que agrupa elementos y puede tener propiedades de Auto Layout. Los Frames pueden ser estáticos o dinámicos, dependiendo de cómo configures su contenido. - **Layer**: Se refiere a cada elemento individual dentro de un Frame. Las Layers pueden ser cualquier tipo de objeto, como formas, textos o imágenes, y se organizan jerárquicamente dentro de un Frame. Comprender estas diferencias es clave para dominar el diseño en Figma.

Recomiendo ingresar al link en el apartado de Lecturas recomendadas. Te permite ir probando distitnos ejercicios para asimilar aun mas toda la información, Que buen curso! El mejor que hice en platzi .

Consulta el esta usando Mac de Apple, y para los mortales que usamos Windows, ¿es igual la misma tecla Shift y demás o cambia? 👀

* ¿ Qué significa auto layout ?: es como convertimos nuestros diseños y objetos diferentes, en cajas inteligentes que responde a los diferentes tamaños y aplicaciones que le queremos dar a la interfaz como tal * Ejemplos de aplicación es mi archivo de trabajo: * Al ser un Frame normal se comporta como cualquier objeto de vector que hay que acondicionarlo según tamaño * Pero cuando tenemos un Frame de auto layout, este va a entender según el largo de texto a qué tamaño se tiene que adaptar, así que este ya se entiende mucho más inteligente como un botón que se comporta a necesidad del texto *  Vamos a crear esto desde 0: tal cual como cuando uno diseña o crea un botón, se hace desde Figma con buen diseño y acabado de fondo, bordes y texto. La personalización ayuda a mi diseño general de mi proyecto. * acabamos de entender cómo crear un auto-layout desde cero, pero vamos a ver cómo la magia del auto-layout va mucho más allá Figma * Vamos a ver que hay muchos botones que están alineados aleatoriamente en nuestro espacio de trabajo, el auto-layout tiene una propiedad muy linda y es que te permite organizar diferentes cosas que tengan una alineación * Entonces en esta ocasión si seleccionó todos esos botones y presiono shift + a él va a entender que yo quiero organizarlos de cierta manera, entonces le voy a dar un pathing entre ellos * Y tú me vas a decir si esa es la organización ideal, en este caso no escogí una alineación ni vertical ni horizontal, si no es cogido de esta que se llama Wrap * Y Wrap lo que implicas que dependiendo de largo del contenedor, los diferentes objetos pueden colapsar de manera horizontal o vertical * Y esto muy importante es lo que nos da la web responsive, son las web que funcionan muy bien en dispositivos ya sea pequeño o en dispositivos grandes, * ¿Cómo lo puedo aplicar dentro de mi proyecto?: nos vamos al siguiente Frame donde ya tenemos varios objetos creados como los vimos en la clase anterior, * Incluso alguno de ellos en un auto-layout horizontal * Si yo tomara todos estos elementos y simplemente shift + a Sigma va a intentar aplicar un solo padding para todos los elementos, y me va a generar una distancia igual entre todos mis elementos, aunque tal vez esto no es lo que yo quería así que control + Z * Entonces utilizando un poco de inteligencia artificial podemos encontrar acá un comando que es: control + Shift + a y lo que va a hacer firma y es sugerir un auto-layout casi casi sigo entre todas las cajas, va a intentar ayudarme a entender cuáles son las mejores decisiones que puedo tomar acá * Y para este caso es tomar una caja más pequeña, Dentro de la cual van esas cajas con características que ya existían, Iba a respetar así todas esas decisiones de pádel que yo ya había tomado antes * Y por supuesto hay que darles estas pistas a Figma porque esta sugerencia no la va a tener Clara para siempre o por default * Resumen: Todos los tipos diferentes de **auto layout** van a aparecer diferente en la barra de capas que tenemos a la izquierda, si es horizontal van a aparecer horizontalmente, si es vertical van a aparecer verticalmente. * Si hacemos este wrapped van a aparecer todas alineadas dependiendo de las dimensiones que le ponga * Position: el auto-layout también nos permite ignorarlo con la alineación que me genera la herramienta de posición * Auto layout: auto posición  * Ya entendemos como un autolayout puede abrazar o tener un punto fijo, o afectar el Layout o componentes de los que están adentro.  * Alineación: los rectángulos asumen una posición diferentes depende donde se posicionen, así con múltiples objetos volviéndolos  responsive

No sé por qué pasa esto cuando intento hacer el autolayer. Se descoloca todo, y sino me aparece un cartelito que dice que no me puede sugerir un auto layer... 

y si al hacer un frame sin autolayout y escribir texto este texto se sale del frame en vez de desaparecer dentro de el como en el minuto 1:20? :c