Figma: disposición automática v2 (¡la nueva versión!)

1. Introducción: Hey, bienvenido a un nuevo tutorial sobre el nuevo auto-layout en fema. Fema ha lanzado recientemente en una versión de auto-layout completamente renovada. Entonces vamos a hablar de ello. Porque si has visto mis videos anteriores sobre auto layout, ahora, no tiene nada. Es cualquier cosa en comparación con la versión anterior. Entonces es bueno que empecemos casi de cero. Por lo que estaremos viendo algunas características interesantes con estos nuevos diseños exteriores. Aprenderemos a hacer estos tooltip. Por ejemplo. Ves que puedes hacerlo más grande y puedes posicionar los elementos, ya sabes, lo profundo. Puedes posicionarlo cuando quieras. Lo mismo que haremos en este botón, que es un botón responsive. Aplica la misma metodología que, como ésta. Y estaremos viendo como una nueva característica que el diseño automático alberga este tipo de diseños súper receptivos. Y, y cómo estos se pueden traducir más adelante a especie de cabra perfecta con flexbox. Usando flexbox. Y así estaremos viendo cómo hacer que estos sitios web responsivos, por ejemplo, mitad alta, tipo de copiar estos sitios web de OPO para que veas que es totalmente receptivo. Se pueden ver los elementos en el encabezado, se están moviendo. Y cuando llega un momento en que cambia a tipo de la versión móvil. Y lo puedes ver aquí abajo también con fotos y todo. Todo es una especie de ajuste. Por lo que veremos todas estas cosas durante nuestro tutorial. Entonces si estás interesado en usar estos super cool renovados fitter sobre fema. Ven a un viaje a estos tutorial rápido. 2. Autolayout 2: Oye, gracias por ti en mí, en estos Fostoria. Entonces primero vamos a ver cuál es la diferencia entre el todo auto-layout. Penélope, Si has trabajado con él, si no, solo puedes moverte un poco más lejos y saltarte esta parte si eres nuevo en el diseño automático. Entonces para los todos los trabajadores o auto-layout, tenemos antes un par de plátanos aquí. Si tienes la carga, tienes estos auto-layout con, donde podrías elegir el, si querías la posición del elemento vertical u horizontalmente. Y si querías como sin onda, o si quieres, si am fija ancho y luego agrega el relleno fuera de todos los elementos y el Pauling vertical y de la disposición exterior y la separación entre elementos. Y esto fue para el niño. Para que pudieras posicionar el azulejo a la izquierda, al centro, a la derecha, y otras fichas posicionadas de manera diferente. Ahora bien, esto ha cambiado mucho. Nosotros entonces nuevo plátano auto-layout. Ahora como pueden ver aquí, tenemos el, para la patente, tenemos casi los mismos elementos que tenemos antes. Al igual que si lo quieres vertical u horizontalmente. Esto es así. Y entonces tenemos diag, la separación entre elementos, que es algo similar a esto, como se puede ver, es el mismo ícono, sólo datos crudos. Y este es el micrófono, que es este tubo justi va ambos, estos dos aquí, entonces y después. Entonces ahora solo tenemos uno, pero tenemos estos nuevos, que veremos que puedes elegir entre diferentes plug-ins para cada lado. Para ello, puedes poner un brote diferente de la, para la parte superior y diferente compra para la parte inferior. Entonces ahora es más flexible. Y además, estos elementos, estos ícono nos traerán un popup que nos permitirá posicionar elementos a la izquierda, a la derecha, y así sucesivamente. Tenemos estas nuevas navajas aquí con, que es una especie de trabajar con restricciones. Lo veremos así, pero provocó nuevos elementos, este contenido caliente, honorarios con y todo lo que veremos al respecto. Pero esto es algo nuevo para el padre y para el azulejo. En lugar de tener esto como este tipo de alineación. En los iconos de posicionamiento. Ahora tienes las opciones de cambio de tamaño también. Entonces lo vamos a ver en detalles. Entonces vamos a la para empezar con trabajar con ella. Vamos a empezar con el fondo, que es más simple hacia abajo, hacer que un adulto lo sea. Entonces vamos a encadenar más adelante, vamos a hacer roja la descripción tooltip. Entonces empecemos con el fondo. Entonces para esto, lo que voy a hacer es sí, rectángulo creador y Azzam trazo a ella en vivo, digamos tres píxeles le dan algún radio de borde va a ser bastante directo si ya has trabajado con él. Entonces pongamos aquí como un fondo blanco. Yo sólo voy a copiar y pegar que esto, vale, así que esto sólo unos textos aleatorios. Realmente no importa. Yo sólo voy a sacar estos elementos. Al igual que hacer una copia de la misma. Este es el, nuestros iconos regulares. Si esperas, solo voy a usar este cool blue y lo uso en todos mis tutoriales, se llama iconos de falla. Por lo que lo lanzas y puedes insertar la flecha. Entonces para esto, solo voy a insertar este y crear un componente del mismo para que sea más fácil trabajar. Bueno, crea un componente de la misma. Y sólo posicionarlo por aquí. Está bien. Voy a traer esto otra vez. Más iconos. Voy a elegir este varios en abajo que tenemos aquí. Entonces esto es bastante guay. Y voy a crear como componente va a hacer lo mismo otra vez. ¿ Está bien? De acuerdo, entonces voy a copiarlo y pegarlo para que quede en el marco. Y bueno, tenemos nuestros tres elementos y se puede ver si escribo aquí, no pasa nada es sí, son elementos independientes en este momento. Pero si los selecciono todos, de todos los elementos, ¿de acuerdo? Y puedes ver que no tengo ningún menú de Auto Layout aquí. Entonces lo que hago es venir aquí, clic derecho y pecho como auto-layout, usualmente uso sí, el atajo Shift a, que es para mí más fácil. Entonces vamos a presionar aquí, bomba, y ahora tenemos nuestro auto-layout abajo. Entonces esto va a ser receptivo. Empezamos a hacerlo, pero podemos ver que nuestros elementos no están alineados. Y podemos ver ahora el nuevo panel Propiedades aquí, diseño automático. Se puede ver que los elementos se colocan en el elemento horizontal en la matriz central Soy dirección del eje. Y podemos cambiar eso si queremos este tipo de botón raro. Es, es como una cara casi. Por lo que el diseño automático detecta automáticamente cuando lo crea. ¿ Cuándo lo aplicas? Tratamos de averiguar qué es lo que quieres hacer. Entonces en este caso, es un poco perfecto. Pero vemos que este texto no es propiedad solo. Ok, entonces vamos a probar todas estas cosas aquí. Entonces lo que esto hace aplica la separación entre los elementos. Ok, entonces si quisieras así o si estás trabajando con una cuadrícula de ocho píxeles, solo podrías aplicar como un octavo. O el, si esto es demasiado apretado, puedes simplemente ir con 16, que creo que es bastante bueno. Y como se puede ver aquí, que el relleno alrededor de los artículos está mezclado. De acuerdo, entonces cuando creamos, cuando nuestro try out creó nuestro botón, nuestro arreglado todo nuestro botón. Teníamos como relleno diferente para la parte superior, para la parte inferior cuatro desde la izquierda o desde la derecha. Por lo que decía como mixto. Si ponemos como 0, trataremos de igualar a todos los cuerpos alrededor. Podemos ver que ahora nuestro botón. Obviamente tiene 0 relleno rodean todo el, todo el contenedor. Pero esto es lo que, esto no es lo que queremos. Podríamos aplicar como relleno similar. Imagina que estamos trabajando con la cuadrícula de 16 píxeles, por lo que queremos aplicar como 16. O si estás trabajando con una cuadrícula de cuatro píxeles, puedes ir a 12. Esto me está viendo bastante bien. Pero imagina que quieres poner más relleno en la parte superior. ¿Cómo lo haces? Bueno, puedes hacerlo aquí, separados por comas, pero esto es algo así, esto es algo raro. Hazlo otro panel, nuevo panel que tenemos aquí, su alineación en el relleno. Este es el que queremos usar. Imagina que queremos en los 80 píxeles superiores, esto va a ser enorme, pero imagina que auditas o imagina que quieres más relleno a la izquierda. Entonces para este caso en particular, sumémoslo a la izquierda. Por lo que esto es bastante genial porque ahora puedes controlar los remates de forma independiente. Cosa que antes tenías que ser como hacer trucos, agregar transparentes los espaciados, hacer cosas raras, hacer cosas realmente sucias. Pero ahora con este nuevo auto-layout, es más fácil de hacer que nunca. ¿ De acuerdo? Por lo que queremos aplicar el mismo cuerpo en o, nuestro entorno de los elementos. Y lo que queremos aquí, estos textos, como pueden ver, no es alinear la propiedad. Entonces lo que queremos es alinear nuestros elementos al centro. Y ahora se puede ver que esta materia azul nos permite alinear los elementos internos al centro, al fondo. El asunto comparado con el auto-layout anterior es previamente, podría posicionar este elemento hacia arriba, estos alineados a la parte inferior y estos dos centro. Ahora funciona como un agujero. Entonces si tú, sólo puedes posicionar los elementos arriba, en el centro o abajo todos ellos. No puedes elegir cuál quieres, arriba o abajo, ¿sabes? Por lo que hay trucos para que funcione. Pero yo soy las soluciones. Pero ahora funciona como un todo, OK. Otra cosa interesante aquí es si cambiamos el tamaño de este botón, se puede ver que todos los elementos se están moviendo al mismo tiempo. Están como empacados de la misma manera. ¿ De acuerdo? Aquí es donde se llama empacado aquí. Si digo un espacio entre, se puede ver que los elementos que están espaciando uniformemente. Entonces esto es genial porque, es como si los sitios web funcionaran cuando estás codificando en ellos en HTML y CSS. Esto es lo que hace HTML y CSS. Entonces antes su comportamiento era un poco diferente en cómo funciona un sitio web. Entonces está bien, tenemos nuestro botón. Esto como puedes ver ahora, tenemos como un botón fijo, pero no queremos esto. Lo que queremos es que vuelva a ser receptivo. Entonces para eso en lugar de fijo, se puede ver aquí está diciendo izquierda. Pero Al mismo tiempo en mismo fijo. Entonces, ¿qué queremos esto para hackear contextos, hackear contenidos. Lo que hace es hacer que el, este elemento sensible al contenido que tiene, vale, entonces en este caso particular, creo que es bastante bueno. ¿De acuerdo? Entonces así es como nuestro botón, y este es nuestro primer acercamiento al mismo. De acuerdo, entonces ahora lo que vamos a hacer la tooltip para esto, vamos a hacer casi el mismo tema que hicimos con el, con el fondo. Yo sí, hago esto porque es un poco complicado hacer la propina. De acuerdo, entonces para esto voy a aplicar de nuevo un pixeles. Aquí. Yo sólo voy a aplicar un negro. Yo sólo voy a dibujar un triángulo aquí. Podría dibujarlo, pero con esto, estoy bien. Vamos a rotarlo. Pon esto en suerte. Aplica algún radio de borde para ser más agradable. Digamos cuatro. Whoa, esto es demasiado. A lo mejor 22 es bueno. Y esto es demasiado grande para mis gustos. Entonces vamos a hacer un poco más resplandeciente, de acuerdo, lo mismo. Sólo voy a copiar y pegar este texto fuera de él y colocarlo aquí. De acuerdo, entonces ahora mismo que el botón. Todo es independiente. Entonces para este particular, para esta información de herramientas en particular, queremos hacer como separar dos auto-layout anidado. De acuerdo, entonces lo que queremos que esto cree a estos dos componentes, como auto-layout y luego se unió a la fiesta a este consejo aquí. Entonces voy a presionar el botón derecho y agregar el diseño automático. Entonces ahora responde a las cosas que estamos escribiendo, cual es genial, lo que queremos. Pero ves que lo más profundo no se mueve o si quiero posicionar este t, Si tengo que hacerlo manualmente y esto es algo así, ya sabes, no tan, no tan bueno. Entonces lo que vamos a hacer, es a tu En la fiesta estas profundas. Entonces para eso, seleccionamos nuestro previamente enmarcado es, voy a nombrar a estos cuadro Tooltip y estos Polygon y sólo voy a nombrarlo como propina. Y lo que queremos aquí es que nuestra caja Tooltip y nuestro equipo se unan. Entonces lo que hacemos por esto es un álcali fuera, ¿de acuerdo? Y se puede ver nuestro profundo es especie fuera de ninguna parte. Sí. Podemos posicionarnos en un centro a la derecha y a la izquierda, pero es una especie de porquería. Entonces cuatro días, lo que voy a hacer es crear un marco dentro de esto. ¿ De acuerdo? Voy a crear un marco, insertado marco aquí, y voy a poner el TP dentro del marco. Entonces. Ahora tengo el súper profundo arriba. Yo sólo lo voy a bajar. Y digamos que quiero ponerlo ahí. Dónde hacer el, este truco de marco, porque necesitamos algo de espaciado aquí a la izquierda. Entonces lo que podemos hacer su posición, nuestro elemento, nuestra punta allá, y luego ponerlo aquí. Entonces el marco va a permitir, para ganar algo de espacio aquí y para quitar estos TPP, es decir, es como solapar aquí. Entonces esto es bueno, va a ser nuestro profundo, vale, porque estos son los buenos dientes. De acuerdo, entonces ahora tenemos nuestro profundo con nuestro tooltip, lo siento. Está bien. Y con este tooltip ahora, sí, podemos controlar nuestro, ya sabes, cómo se mueven las profundidades. De acuerdo, así que esto es bonito, esto es bastante guay. Lo mismo que antes. Podemos controlar la separación de la descripción de herramientas. Pero en este caso queríamos como a 0, si hacemos este tipo de cosas raras en el espaciado horizontal, no queremos eso. Queremos ser verticales primer oriente, este elemento, y luego la información de herramientas debajo, debajo de la descripción de herramientas. Por lo que tenemos nuestros dos elementos. Y lo bueno de esto son las cabinas de tooltip, ¿de acuerdo? Dentro de este ancho es sensible con un texto. Entonces hacemos esto. Y entonces sólo queremos posicionar siempre el Tooltip en el centro. Nosotros venimos aquí y luego lo posicionamos aquí. De acuerdo, así que ya tenemos dos cosas. Así que empecemos con un personal un poco más complejo. Aquí, medio juego de cartas, nada también. Estamos en. Pero ven aquí que son completamente receptivos. Las imágenes son sensibles. Los textos son responsivos. Imaginación. Tenemos como un cuadro de texto más alto aquí. Se comporta como el sitio web cuando estás usando flexbox en HTML y CSS. Este es el comportamiento que tienen, N también. Se puede cambiar su comportamiento aquí en los elementos. Si en lugar de poner pocos contenedor, solo digo enormes contenidos. Lo siento Huck, convence. Ves que se comporta como, se comporta como con flexbox. Entonces esto es genial para cuatro. Ve busing tus diseños de fema a HTML y CSS. Ahora es mucho, mucho, mucho, mucho mejor. ¿ De acuerdo? Ahora es más complejo usar el diseño automático, pero lo hace más completo. Entonces vamos a, a replicar esto a cómo hacer este diseño perfectamente receptivo aquí. Ok. Entonces para esto, solo voy a copiar todos los elementos que tengo aquí. Porque no quiero que lo vuelvan a hacer. Entonces déjame dejarlo todo y Desagruparlo todo. Entonces todo está un poco separado. Como pueden ver aquí, tengo todo separado para poder mover todo a su alrededor. Y, y si E1 va a suceder porque todo está separado. Está bien. Entonces imagina que tienes el nombre saboteador, ubicación, esta foto. Con fotografías en este caso, es importante establecer para sentir o dos pies dependiendo qué campo de alimentación funcione bien en este caso. Otra cosa importante es, bueno, voy a dibujar el auto detrás de esto. Entonces manda a atrás. Digamos que esto es blanco. Voy a añadir un poco de fondo aquí para que podamos ver qué está pasando. Así que sólo escoge este fondo, está bien, y luego aplica algún radio de frontera, digamos ocho, vamos a salvarlos. Entonces lo que queremos lograr aquí es que queremos controlar este espaciado aquí podría disfrutar trabajando con un duelo de octavo píxel. Entonces digamos que tengo esto ahí y así ahí y ahí y todo. Entonces lo que suelo empezar a hacerlo agrupando las cosas en auto-layout. Entonces para esto, solo voy a presionar auto-layout y tú dirías, guau, pero esto tal vez sea demasiado ridículo. Simplemente puedes ajustarte con esta herramienta de medición aquí. La persona debe. A mí me gusta que haga con auto layout porque es, es más, me es más fácil al final. Por lo que puedo ir aquí a ocho píxeles. Y para este elemento en particular, voy a añadir otro auto-layout entre estos dos elementos ahora, los textos y, y, y la ubicación y los elementos. Entonces, sí, vamos con el auto-layout. Y por qué hago esto, porque puedo controlar mejor las distancias y ser más consistente entre un espaciado con un espaciado de las cosas. Entonces en este caso, ocho es demasiado apretado, así que sólo lo voy a dejar en 16. Y digo, OK, ahora quiero que esta cosa de auto-layout, este nombre y ubicación esté en el centro. De acuerdo, entonces lo que hacemos para eso es venir aquí y simplemente seleccionar aquí el centro. ¿De acuerdo? Ahora tenemos nuestra foto aquí. Tenemos nuestro título, y somos un poco buenos para ir a solo nosotros, tenemos ruidoso como nuestros elementos m verticales aquí, ¿verdad? Entonces tenemos este componente, esta foto, este título. Entonces solo vamos a presionar aquí hacia fuera el auto-layout para ver qué pasa. Bono. Es perfecto. Es decir, ellos, ha detectado nuestro espaciado más o menos, así que quiero que sea como 24 de espaciado. Podríamos ir más lejos aquí, ¿de acuerdo? Pero para este caso en particular, ya que estoy trabajando con AP, mental de ocho píxeles grid, voy a poner aquí como 424 pixels. Pero veo algo que no me gusta aquí. Yo quiero esto, en lugar de tener 24, quiero que sea más apretado. A lo mejor ocho píxeles de 16 píxeles. ¿ Qué, qué puedes hacer aquí? Muy bien, solo seleccionas estos dos, estos dos elementos, el título y el texto. Y lo que haces es aplicar otro diseño externo. De acuerdo, entonces agregas otro diseño externo para estos dos elementos. Y ahora se puede controlar el espaciado entre estos dos, lo cual es genial para este caso en particular. A ver, 16 es demasiado. Vamos con 88 tal vez es escribir, pero prefiero ocho, Daniel. Entonces veo ahora que aquí incluso, incluso me gusta, pero creo que tenemos más espaciado en el costado que en la otra cosa. Entonces voy a aplicar 32 a nuestro auto. E imagina que quieres más relleno en la parte superior y el volumen. Entonces aquí lo que vamos a hacer, es tanto 4848 por ejemplo. Por lo que tenemos nuestros, nuestros remeros, 32 a la izquierda y 5248 para la parte superior y desarrollar. Esto es bastante guay. De acuerdo, entonces tenemos nuestro primer auto. Yo sólo voy a ponerle nombre tarjeta uno. Y sólo voy a duplicar esta tarjeta. ¿ De acuerdo? Entonces son enormes, pero no importa. Lo importante es que lo consigas. Entonces tenemos nuestras tres cartas aquí. Y como se puede ver, están montados. Bueno, ya hemos visto lo que esto puede hacer. Pero vamos a ver son la restricción y el cambio de tamaño. Esto es bastante interesante. Entonces ahora este elemento, esta tarjeta, está configurado para hackear contenidos. Podríamos, así que responde a dos. Al llegar, se puede ver que aumenta. Está bien. Está configurado para hackear contenidos en el eje horizontal y también en el eje vertical. Si establecemos estos dos fijos, lo que podemos hacer ahora es cambiar el ancho de la, de, de la, este componente de disposición exterior. Pero no está funcionando como se puede ver, cualquier cosa se mueve, cualquier cosa está redimensionando. Entonces, ¿por qué es eso? Debido a que nuestros elementos de estilo, están configurados para ancho de cara. ¿ De acuerdo? Hay algo que no hemos tocado antes, pero ahora lo vamos a tocar. Entonces si quieres que esto sea receptivo. De acuerdo, así que déjame hacer esto. Lo que queremos es establecer los elementos hijo a dos ajustes de configuración diferentes aquí en redimensionar, ok, entonces en lugar de quintas, lo que queremos es ser como llenar el contenedor, ¿de acuerdo? Tenemos como un espacio imaginario aquí, que es un brote. Y lo que queremos esto, si lo hacemos más grande, ese relleno va a ser el mismo. Pero los elementos van a estar redimensionando sus mismos hasta que sientan ese relleno. Entonces para eso lo que vamos a hacer, es, en lugar de ser fijados a nuestro tamaño real, vamos a poner esto para sentir contenedor, ¿de acuerdo? El alto que podemos, podemos fijarlo fijo o establecer para sentir contenedor también. Y este elemento, ves que está configurado para tener contenidos en el ancho y en el lado vertical. En el lado vertical es bueno si ponemos esta vida hackear contenidos. Ok, y éste. Pero esto, lo que queremos aquí es sentirnos contenedor. Entonces cuando nos estiramos, se va a, para mantener ese relleno y cuando lo subamos y lo hagamos más grande, se va a mantener ese buy in para así se va a aumentar. A ver si esto se está moviendo o qué es el, qué está haciendo, ¿de acuerdo? Nuestra imagen está funcionando bien. Es como aumentar y sólo va a borrar este, estos dos, ok. Por lo que se puede ver nuestras imágenes está respondiendo, pero el resto de los elementos no lo están. Entonces, ¿qué está pasando aquí? Porque tenemos aquí este contenedor de campo, así que esto es bueno. Pero tenemos que ir al interior de otro totalmente fuera. Entonces este es el título y la baraja. Entonces sabemos que estamos trabajando. Y ahora si volvemos a hacer doble clic y seleccionamos el título, podemos ver eso. Ahora vemos cuál es el problema, es que nuestro título está ajustado a un ancho fijo. Entonces para eso, lo que queremos es sentir contenedor, para establecer esto para llenar contenedor y esto en lugar de ancho fijo, este es el texto. Ir a llenar contenedor a. Veamos cómo está respondiendo. Ahora nuestro auto y ahora nuestra tarjeta está respondiendo brillantemente es lo que queremos. Bueno, voy a poner esto en lugar de, lo siento, déjame simplemente deshacer esto. Lo que queremos es en lugar de contenedor de combustible, solo voy a arreglar la altura para que no se ponga tan estresado. Por lo que mantiene la altura. Y algo no está funcionando aquí. Entonces lo que queremos está en el sí, esto es bueno. Entonces vimos lo que pasaba aquí. Mi contenedor, mi contenedor principal aquí a la izquierda, en el, en el eje horizontal, está configurado para arreglarlo porque queremos redimensionarlo manualmente. Pero aquí se configuró para estar arriba, no para escalar o no contenidos demasiado calientes. En este caso, queremos hot convencidos de que se han mezclado como las anteriores restricciones de control y precisas y están haciendo aquí algo raro. Pero ahora lo que podemos ver es que nuestro elemento está trabajando. Si tengo más textos aquí, lo duplique, y lo incremento un poco para que podamos ver nuestro auto. Esto está funcionando bastante bien. De acuerdo, entonces lo que voy a hacer es hacer como una tarjeta bastante decente. Y lo que voy a hacer de nuevo es como descartes duplicados. Descarta. Todos ellos están funcionando bastante bien. Está bien, están respondiendo. De acuerdo, entonces lo que quiero ahora, es poner estas tres cartas entre un contenedor y AF, auto-layout a ellos. Por lo que son se comportan como un agujero. De acuerdo, entonces para eso, solo voy a subir el auto-layout. Y ahora se puede ver nosotros, si hacemos esto, pasa cualquier cosa, aunque todos estén dentro de un trazado exterior. Entonces tenemos nuestro auto-layout y ahora vemos que cualquier cosa está sucediendo no está funcionando. Aquí no tenemos nada sensible. Bueno, las cartas mismas son receptivas, como se puede ver sobre que no están actuando como un agujero. Entonces, ¿qué está pasando? A ver. Vemos aquí que tenemos como mezcla en ciernes. Yo sólo voy a ajustar esto a 40. Entonces todo, es algo, es similar. Podemos ver que podemos ajustarlo a esto, ¿de acuerdo? Entonces este es el espacio entre elementos. Entonces lo que queremos es que estos elementos se sientan en todo pico, todo el espacio. Entonces ya no somos uno. Esto, ya ves aquí, si conseguimos estos ciernes más grandes, los elementos están saliendo al aire libre nuestra forma principal. Y así para eso, ¿qué queremos? En lugar de ser respaldados los elementos, lo que queremos es el espacio entre. Por lo que ahora puedes ver esto ahora está configurado en auto. Entonces ahora los elementos van a tomar el, este espacio, este espacio que tenemos tres. Y esto no nos va a permitir, cambiarlo. Podemos simplemente volver a establecer esto en un valor y luego va a ser como 20 píxeles aquí y 20 píxeles allá. Pero si queríamos salir, oh, venimos aquí a empacar en lugar de, pero solo nos pusimos al espacio entre. Y ahora ¿qué va a hacer? Efectivamente se establece el espacio entre los elementos. Pero se ve que los elementos mismos, no son receptivos. ¿Por qué es eso? Veamos qué pasa con el con los azulejos. De acuerdo, vemos cuando seleccionamos el estilo con el que decía encaja, vale, entonces vamos a cambiar esto en todos los elementos, un conjunto, este. Entonces vemos lo que está pasando. Y vamos a cambiar esto para hackear contenidos, ¿de acuerdo? Y podemos ver que está haciendo cosas raras. Entonces vamos a deshacer y luego vamos a poner lo mismo que antes. El contenedor de campo, ¿de acuerdo? Hemos visto que no cambiamos el, esto se establece en un ancho fijo para que puedas ver que podemos redimensionarlo. Y los otros se van a adaptar en altura y anchura a la, a, a, a recoger el espacio disponible. Está bien. Entonces este, sólo voy a deshacer otra vez. Y vamos a ponerlos a todos para que sientan contenedor. De acuerdo, entonces ahora tenemos vida. Están llenando el contenedor y lo que está pasando aquí es que, sí, ahora se están comportando como se supone que deben comportarse. Imagina que quieres más entre estos elementos. Entonces lo único que tienes que hacer es simplemente seguir adelante y bombear, ok. Entonces, como puedes ver, es un poco complicado estar jugando con un espacio entre. Entonces aquí en los elementos psi, pon estos dos contenedores f_0 y puedes jugar con él. Entonces, por ejemplo, podrías querer así en ancho de puño, como algo así. Y esos van a ser receptivos. Entonces éste no va a cambiar cuando yo, cuando lo mueva, pero el resto de ellos van a ser responsivos. Depende del, el efecto que estás buscando. Ok? Entonces si quieres que estas tres cartas sean las mismas, esta es la forma adecuada de hacerlo. Déjame simplemente poner esto en lugar de este ancho para sentir contenedor de nuevo. ¿ De acuerdo? Por lo que se comportan como de manera responsiva. Otra cosa importante aquí a tomar en cuenta es, como pueden ver, si hago este elemento super, super grande, esos elementos, se adhieren aquí. ¿ Y si quisiera que lo hicieran, que construyeran más grandes, que aumentaran los suspiros automáticamente? En lugar de aquí contenido booleano hackear, hacer sí, poner sentir, contenedor de tarifa. Y lo que hace, es, es, esto va a tratar de buscar todos estos n Podemos poner lo mismo aquí en contenedor de Filadelfia. Y, y ahora si acabo de hacer esto, se puede ver que esto es bastante receptivo. Y ya sabes, va a escoger la altura del elemento más grande. ¿ De acuerdo? Entonces depende de ti. ¿ Cómo quieres trabajar? Por lo que hemos visto todo, cómo, cómo hacer como desde un simple botón con solo un simple auto-layout aquí con diseños de outro anidados para nuestra punta y nuestra descripción de herramientas. Y aquí tenemos como una versión más compleja y hemos trabajado con cómo funcionan estas palabras de contenedor fluido, hackear contenidos. Cómo contenido es que si todo uno, que aumenta su tamaño en altura o altura o ancho y ancho, ancho fijo y así, estos pacto y un espacio entre inversiones. Ok, así que saltemos a la última vez y al ejercicio final aquí. 3. 3 responsivo: K. Entonces en esta parte vamos a ver estos, cómo hacer que este diseño responsivo. Vimos en el anterior, en la introducción. Como se puede ver el menú a la hora de punto, se comporta como una versión móvil. Y se puede ver que el texto está adoptando y las imágenes son, se adoptan en y también. El, estas imágenes ahí abajo son una especie de hacer un punto de interrupción tal vez es a un saturado. Pero consigues bien el punto. Lo que estamos tratando de lograr estas metas para lograr aquí. En el mismo punto, me gusta verte, me gustaría, que lo veas aquí. Ya ves que tenemos como un menú responsive también. Y luego rompe bonos. Y luego tenemos nuestro menú de hamburguesas. De acuerdo, oh, nuestro ícono de hamburguesa ahí. Entonces, ¿cómo hacer esto? De acuerdo, así que sólo voy a duplicar esto. Y, y eso va a destruir o todo lo que he hecho aquí más o menos. Está bien. Por lo que ya no tengo ningún auto-layout. Y aquí tengo en un auto-layout, el descanso de los medios, todo. No voy a hacer todo desde cero. Es decir, estos son textos regulares. Estos son todo es especie de impulsos regulares, las plazas, iconos textos. Entonces ya sabes hacer eso. Entonces solo voy a escoger este color para cuatro allá. Y lo que tenemos aquí es el como fondo para el menú e icono y texto regular. Aquí lo puedes ver. Ok, entonces para esto, lo que voy a hacer para que este menú seleccione todos los elementos, no, no el fondo, sólo los ítems. Entonces recuerda que solo puedes arrastrar, seleccionar todo y con la tecla Mayús, luego anula la selección del elemento que quieras. Por lo que ahora ves tenemos todo seleccionado. Y de nuevo, ¿qué queremos este derecho derecho derecho, Añadir auto-layout o turno a. Y tenemos nuestro auto-layout ahí. ¿ De acuerdo? Entonces aquí hemos visto que se puede controlar el espaciado entre los elementos por defecto, voy a establecer estos dos. No lo sé. 72, que es un múltiplo de ocho y me siento bien. Voy a alinear esto al centro. Y se puede ver que el texto está alineado a, en estos auto-layout, ese texto está alineado a un dopante que quería alinear con el centro. De acuerdo, entonces alinémoslo al centro. Y al mismo tiempo, quiero que estos elementos se comporten que cuando lo estamos estirando, ese elemento, todos los elementos un tramo y vayan al centro. No, no, no, no ir a la izquierda, sólo, sólo al centro. Entonces por eso también estoy poniendo esto. Está bien. Entonces voy a tener este trasfondo y añadir otro outlet hacia fuera. Entonces este va a ser el azulejo. De acuerdo, así que lo tenemos. Y ahora tenemos como ocho píxeles entre. Esto no es importante en realidad. Y tenemos como remantes mixtos aquí. Está bien, está bien. 1919 a 211. Está, está bien. Y algo importante que quiero hacer aquí es cuando seleccionamos esto, es, quiero los elementos con. Bueno, esto es, esto no es importante, pero algo importante aquí es en lugar de parte, lo que quiero son los elementos con un espacio entre y realmente no se ve la diferencia aquí. ¿ Y si, ahora hacemos esto? No podemos notar la diferencia ni porque tenemos esta configuración a contenidos calientes. Y si no tienes que hackear, lo que significa es que si aumento esto, esto se va a aumentar. Pero para este caso en particular, lo que queremos es fijar todo este encabezado a fijo, ¿de acuerdo? Para ser fijo y ser fijado a la izquierda. Entonces cuando estemos redimensionando va a ser B a la izquierda y los elementos I V van a ser una estirada. A ver, algo que no está funcionando aquí. ¿ De acuerdo? Entonces ahora en lugar de quintas, tenemos que ponerlo llenar contenedor. Eso es algo con lo que vas a trabajar cuando cambies algo en el bar y luego tienes que cambiarlo en el niño a. Entonces tenemos ahora, vamos a revisar de nuevo. Tenemos como un fijo con cuatro de cabecera, que es algo que queremos. Y nuestro azulejo tiene un contenedor de campo. Por lo que va a mantener el espacio en el, en los tamaños en los diferentes lados. Y veamos cómo funciona esto. Ahora. Ya ves que lo está haciendo. Está bien, pero es mantener este margen aquí y esto, este margen allá, que es un poco fresco lo que queríamos. Pero lo que queremos también, es ir de izquierda y a, y a derecha. Entonces intentemos con izquierda y derecha. Se sigue moviendo a la izquierda. Entonces para este elemento en particular, lo que lo queremos, podría hacer un auto-layout con elemento diesel. Pero para este caso en particular, no lo quiero porque quiero que estos sean responsivos así. Déjame, así que si ven los elementos están tomando este espacio y manteniendo este espacio. Pero eso es algo que entonces estos elementos son como, ya sabes, como a la estima entre ellos. Y para ello, no podemos hacer eso si ponemos esos dos elementos en el mismo auto-layout. Debido a que el diseño automático establece no los remaches auto de para los dos elementos. ¿ De acuerdo? Entonces, entonces en este caso lo que quiero es hacer un grupo de esto en lugar de una salida abierta. Por lo que a esto se le va a llamar cabecera. ¿ De acuerdo? Y veamos cómo se comporta esto. Bueno, esto me está viendo bastante bien, pero eso es algo aquí que le falta. Aquí tengo fix fits mayor ancho. Y en lugar de atrás, quiero poner un espacio entre elementos. Y veamos qué está pasando ahora. Ahora los elementos, como se puede ver, son realmente, realmente, muy sensibles. ¿ De acuerdo? Y algo que hice significa hacer. Algo sucedió aquí es alinear estos elementos con el centro. De acuerdo, entonces tenemos nuestro encabezado y ahora tenemos aquí como un texto. Y se puede ver he puesto este escritorio con un ancho fijo pero con diferentes alturas. Entonces si seguimos escribiendo aquí, nos va a dar otra línea. Pero ves que esto tenía que decir que esto no se está bajando por estos antecedentes. Entonces lo que necesitamos hacer para eso es seleccionar esos dos elementos. Otra vez fuera en auto-layout. Ahora todo está en su lugar. Pero, ¿qué pasa si hago esto? ¿ Otra vez? Nada es receptiva. Temo que sea receptivo si llego. Ahora no lo es. ¿ Por qué es eso? Porque como se puede ver, diseño externo ha cambiado el comportamiento de esto. Entonces quiero ser, tener que ir a tener como un puño con este elemento. Yo lo quiero con un ancho fijo. Ok? Entonces para este elemento, voy a seleccionar y lo voy a vender para venderlo para arreglar ancho. Ya que nuestro auto-layout ya tiene aquí un relleno para la forma la izquierda, vamos, tenemos que hacer algunos ajustes aquí. Entonces déjame solo poner cien cien. Y luego voy sólo a adaptaciones se ajusta manualmente. Está bien. Y esto, y esto, todo ha cambiado de nuevo aquí. Bueno, OK. Entonces esto puede, así que quiero que estos márgenes estén en salida. Entonces algo andaba mal aquí que estaba empujando. El DevOps fue, estaba empujando. Ok. Entonces si hago esta nada responsive todavía, pero ahora si este elemento en lugar de ancho del puño necesita estar en contenedor de campo. Entonces ahora podemos jugar con, con, con este N. Si hacemos esto, nada vuelve a pasar porque tenemos que cambiar esto a. No está funcionando este contenedor de ancho, ¿de acuerdo? Y ahora está funcionando UC, por lo que ambos elementos necesitan estar configurados para llenar contenedor, ¿de acuerdo? Y este elemento a puño ancho y luego todo lo de la izquierda. A veces te va a llevar un poco de ida y vuelta yendo y viniendo aquí a Fisk tenía Cortes lo que tú quieres alinear las cosas a la izquierda, a la derecha, a la izquierda y a la derecha. Ok, entonces para este caso en particular, queremos estar alineados a izquierda y derecha. Entonces cuando recitamos esto, Es, como pueden ver, está funcionando, pero no hicimos esto con nuestro encabezado, así que necesitamos poner a izquierda y derecha. Entonces esas son las papeleras. Y lo que hace es que cuando redimensiones tu marco va a hacer que los elementos se redimensionen desde la izquierda y desde la derecha. Por lo que toma el buy-in que tiene y luego ajustado para esto, vemos que nuestro encabezado está funcionando, nuestro menú está funcionando. Y y, y nota que la notificación está funcionando. Está bien. Entonces sólo voy a añadir el s, Esta foto, un par de píxeles aquí. Y estos son textos sencillos. Lo que suelo hacer es hacer tan bien como un auto layout de ellos. Y te contaré sobre default alinea todo a la izquierda. Y lo que vamos a hacer es entrar aquí y alinearlo al centro, ¿de acuerdo? Y el espaciado, el espaciado entre los elementos donde quiero este ocho píxeles. Y yo sólo voy a llevar esto un poco hasta, digamos 488, son 46. Está bien. Por lo que tenemos nuestra imagen aquí. Simplemente lo voy a ajustar al tamaño y está listo para sentir. Entonces veamos cómo se comporta esta imagen. Cuando nosotros, la IA se comporta bien, vemos que todo se mueve pero nuestra prueba no lo es. Entonces, ¿qué vamos a hacer aquí? Vamos a poner esto en lugar de alineado a la izquierda. Se ve que el texto se queda a la izquierda. Y se convirtió en estos, estos espacio entre aquí y no se está moviendo. Y queríamos trasladarnos al centro. Entonces vamos sólo a entre estos dos, el remitente, ¿de acuerdo? Entonces ahora si lo quitamos, ves que es soberbio. Y es hacer qué, ¿qué queremos? Está bien. Bueno, esto es sólo una foto. Este Dido, nada de fantasía aquí. Algo que quiero hacer, es hacer un auto-layout con estas tres imágenes aquí. Y bien alineado en el centro. Yo sólo me voy a alinear porque he estado moviendo mi IV película Maya valen tanto que. Ya no tiene un ancho normal. De todos modos. Está, está bien. Y estos elementos, quiero hacer un auto-layout con ellos también. Sólo porque siento ganas de seguir practicando cómo posicionar elementos aquí. Y se puede ver, y se puede, esto es genial para controlar su espaciado. Como digo. Sé que me repito mucho, pero estas cosas son importantes y veo demasiada separación aquí. Entonces selecciono estos dos elementos y voy a hacer otro atípico fuera. ¿ Por qué? Porque quiero controlar a ese bayesiano en particular y quiero menos espacio aquí. Y digamos que solo quiero ocho píxeles, vale, así que este espaciado es de ocho y de aquí para allá es de 24. De acuerdo, porque tenemos, lo tenemos en otro auto-layout. Yo también voy a alinear estos elementos al centro. Entonces cuando redimensionamos nuestro cenador es estancias, se queda en el centro. Entonces sólo voy a hacer esto. Y para esto sólo voy a hacer lo mismo. Yo sólo lo voy a llevar al centro. Entonces cuando los arreglamos, cuando redimensionamos nuestro, nuestro, nuestro trabajo, veamos cómo se comporta esto. Todo se está quedando en el centro y esto es, esto va en aumento. Su, su, su altura, que es fresco. Entonces nosotros, lo que queremos aquí también es que este elemento se empieza a redimensionar como, así cuando los hacemos más pequeños. ¿ De acuerdo? Entonces para eso lo que queremos, es, entramos en los azulejos y se ve que tiene encaja con. Por lo que queremos llenar para cambiar esto para sentir contenedor. Está bien. Y el lado de alimentación, queremos que también no sean una altura de cara sino que llenen el contenedor. De acuerdo, entonces tenemos todo en contenedor de campo y contenedor de llenado. ¿ Qué pasa si cambiamos el tamaño de esto? Veamos qué está pasando y no pasa nada. ¿ Por qué es eso? A ver qué está pasando ahí. De acuerdo, en lugar de volver, voy a grande como un espacio entre. Por lo que estos elementos se llevan todo el espaciado. Increíble, ¿de acuerdo? Yo dentro de este elemento. Y ahora vuelves a ver que tenemos el spanning set a auto. Y aquí tenemos nuestro elemento viga al centro, que es fresco. Y, y lo que queremos aquí, es mantener la izquierda y la derecha al final de la página. Entonces en lugar de centro, vamos a poner estos dos a la izquierda y a la derecha. Veamos cómo funciona esto. Vemos que los elementos se están moviendo, lo cual es bueno, pero no se están escapando. Entonces cuando volvemos a seleccionar el elemento, se ve cuándo, cuándo lo haces, cuando gravas algo, próxima vez es una especie de cambio. Entonces para esto, vamos a establecer esto para sentir contenedor en lugar de fijo. Siente contenedor y Finkel Dana, ahora todo está configurado para sentir contenedor. Entonces si cambiamos esto, ahora ves que es plena, plenamente, especie de totalmente responsable. Responsable, lo siento. Está bien. Todo está súper suave ahora y todo va súper bien. Entonces lo que voy a hacer es sí, duplicar esto y hacer una versión móvil del mismo. Entonces para esto, lo que hago es sí, doble cara todos 380 o lo que sea, ese tamaño está perfectamente bien. Está bien. De muchas maneras enamoradas. Como se puede ver, estos textos son demasiado grandes. Bueno, no para ser comprado. Sí, bueno, son dos semanas en realidad. Entonces sólo voy a cambiar algo rápido. Estos 424, esto va a colgar el escritorio va a bajar a 18, y esto va a ser un paso abajo a 14. Entonces tenemos como más. Y voy a alinear estos a un centro. Estos, sólo voy a ajustarlo ahí. Y estos 40 va a estar justo aquí. Entonces tenemos eso. Y para el menú, lo que vamos a hacer, solo abre un poco nuestro, nuestro cómo decirlo, nuestro encabezado. Y sólo voy a eliminar todos estos elementos. Éstos quiere, ¿y qué queremos? Más fácil de insertar. Y sí, uno, estos dos para estar un poco aquí, ya que tenemos este espacio entre aquí es si, si agrego elementos, van a ser, ya sabes, como digamos bar ocho uniformemente. Entonces para este caso en particular, sólo quiero el dentro. Ah, éste no. Quiero iconos de plumas. Y pongamos un menú. Enfriar. Yo sólo voy a agrupar esto. Y sólo voy a plantear esto, ponerlo aquí, agruparlo , y simplemente cambiarlo a blanco. No demasiada complicación aquí. Y yo sólo voy a borrar este bac. ¿ De acuerdo? Entonces, así ya tenemos nuestro encabezado. Y ahora sólo vamos a hacer estos más pequeños. Por lo que todo encaja en C 240. Y estas imágenes, en lugar de, esta es una bonita característica. En lugar de alinearlos en la dirección horizontal, pongámoslo en la dirección vertical con disposición automática. Y podemos hacer esto más grande y luego ampliar esta sección. Podemos incluso hacerlo más amplio dado el todo, dado algo así. Y alineemos todo al centro para que los campos sean mejores. Por lo que tenemos nuestra versión móvil. Dan también. Y déjame simplemente renombrar estos a móviles, pero voy a poner móvil también. Entonces y escritorio también, porque ya tengo los mismos nombres aquí en. Quería mostrarte este plugin. Entonces veamos cómo funciona esto. Bueno, esto no está funcionando. Entonces, entonces lo que queremos aquí, es en lugar de la mitad de los contenidos. Sí, lo hice aquí y auto-layout. En realidad no lo necesitamos. Oh, no. Sí. No lo necesitamos. Sí, hicimos esto. Esto es suficiente. Entonces, ¿qué queremos así de grandes estos textos fuera? Cometí este error de hacer que el asesino diga auto-layout el fondo y la densidad es, esto no es necesario en absoluto. Entonces lo que queremos ahora es en las restricciones, poner su imagen de fondo a la viga, a la izquierda, a la derecha. Entonces cuando lo hacemos más grande, puedes ver las, ya sabes, las imágenes y cada vez más grande. Entonces eso es lo que queremos. Entonces ahora si vamos a ver si funciona. Sí, está funcionando. Pero este equipo no está funcionando en absoluto. Es decir, tengo que aumentar esta suma para otro papá. Y cuando llegamos a más alambre, así que ha llegado un poco aquí abajo. Hay formas de tejer el diseño automático. Nos gustaría hacerlos más eficientes. Es decir, cuando, cuando estos cuando estos componentes, no es tan alto, ese elemento conduce aparece. Y luego el cuándo, cuando, cuando esto baja, esto baja. Pero para este elemento en particular , no lo necesito realmente se acabó. Sí quiero mostrarles que cómo funciona un blogging y cómo hacer una especie de diseñador receptivo aquí en Fiqh. Enloquecido, eso funciona bastante bien. Ahí está este plug-in llamado responsive. Su uso es bastante sencillo. ¿A qué se dedica? ¿ Seleccionas el, los diseños responsivos que tienes y los seleccionas como marcos de entrada. Esos van a ser tu, tu, tus principales diseños, digamos. Y entonces necesitamos un marco sensible. Entonces sólo voy a pintar aquí un marco. Yo sólo lo voy a poner en 111000, ciento cuarenta y novecientos odio. Bueno, el calor va a ser como la versión móvil para que podamos ver qué está pasando. Y este va a ser nuestro diseño receptivo. Y simplemente agregamos su marco que hemos seleccionado el responsive que agregamos en responsive frame bomb. Entonces ya tenemos aquí lo he diseñado, pero esto va a funcionar. A ver. Entonces voy a hacer un poco más grande esta parte. Entonces ahora lo que hacemos esto, podemos ver que todo está cambiando. Ya ves, lo está haciendo, ¿de acuerdo? Y podemos ir hasta su versión móvil y todo se está comportando como se esperaba. Por lo que esta es una forma bastante genial de hacer diseños con respuesta al lag. Por supuesto, tal vez otro punto de ruptura en el medio entre estos dos sería deseable para que el menú de hamburguesas no aparezca tan temprano. Pero, y, y ya sabes, tal vez esto no necesita chicle tan temprano. Tampoco. Pero te dan ADI, ¿verdad? Entonces espero que hayan aprendido todas estas cosas, todas estas cosas sobre las heces. Huck contenidos, el espacio entre elementos y todo eso. Entonces nos vemos en su fase final. 4. 4 salida: Oye, gracias por llegar hasta el final. Espero que hayas disfrutado de estos rápido tutorial. Bueno al final fue un poco Versión estándar de la misma. Pero este nuevo auto-layout falso de Mao tiene muchas opciones y es un poco complicado. Entonces hay que trabajar un poco lo hicimos para aducir a dos realmente, para superarlo realmente. Por lo que les animo a hacer algunos de los ejemplos que aquí vimos. Entonces realmente creo que es una buena práctica hacer estos tooltip y un botón y luego se fue a los autos y trató de hacerlos un responsive y hacer el comportamiento que quieres tener. Y si tienes alguna duda o tu, o tus prototipos son RN funcionando o tus diseños de auto están y funcionando como se esperaba. Gas. Hazme saber en los comentarios y voy a tratar de ayudar. Por lo que muchas gracias. Y sí, si te interesan más cursos como estos o tutoriales como este, solo sígueme e intentaré que lo actualices, para darte actualizado con nuevos tutoriales. Y además, si te interesa ver algo que no tengo en los tutoriales relacionados con 50K Mao o con diseño. Sólo avísame y trataré de hacer un tutorial si, si es tratable. Por lo que muchas gracias por ver este tutorial. Adiós.