Figma: ¡crea diseños responsivos!

1. 1 : introducción: Oye, en este curso va a ser súper rápido. Vamos a ver cómo hacer diseños responsivos dentro de sigma. Por lo que estaremos usando restricciones con el fin de hacer un par de diseños responsivos. Por lo que al mismo tiempo estás aprendiendo la herramienta y aprendiendo las habilidades necesarias para que sea diseños responsivos dentro del fema. Y así también es bueno para tu portafolio. Por lo que te animo a unirte a la clase creo que va a ser súper interesante y divertido. Por cierto, soy Bruno UX, diseñador con 20 años de experiencia. Ahora estoy diseñando enfoque de big data. Y así los animo a que se unan a este curso y nos vemos en la primera lección. 2. 2: diseño Responsive en figma: Oye, así que empecemos y vamos a empezar a renunciar a esta página de aterrizaje responsiva que he creado aquí, S3, AI, es un artificio vendiendo billones de cebos web. En realidad, no copié todas las, todas las cosas, pero traté de replicar estos tres artículos aquí, una especie de blog, barra de noticias. Y además, traté de replicarlo. Muchos. Estos lo acabo de inventar sólo por el bien de la página web. En, como se puede ver aquí, tenemos estas tres pantallas. Se d Entonces, como vamos a ver ahora, no tardó demasiado tiempo en hacer estos diseños basados en estos, en su escritorio uno. Y que pudiéramos hacerlo más rápido porque habíamos aplicado, como se puede ver, las restricciones de arena para construir esto para construir estas interfaces. Por lo que más tarde fue súper fácil, sí, hacer estos ajustes. Y fue un poco súper rápido. Entonces empecemos con esto y empecemos a diseñar esta página web en esta en curso sólo para nombrarla sesga aquí. Y yo sólo voy a insertar el marco. Recuerda, haz sí, pechuga F o a. Y entonces solo puedes entrar preset aquí. Y yo, en este caso, voy a usar el MacBook Pro es el que solía usar para mis diseños. Entonces es un buen punto de partida. Aquí tengo algunas rejillas de diseño preconfiguradas. En este caso, voy a usar bootstrap five x X L layout. Puedes ver cómo crear estos diseños en mi otro tutorial sobre rejillas de diseño, donde aprenderás a crear Bootstrap. Para Bootstrap, cinco diseños también. Aprenderás a crear unas cuadrículas perfectas de pixeles, de acuerdo, así que es solo alguna cuadrícula para, para comenzar mi diseño aquí. No es una, no es gran cosa. Entonces para qué hice esto para crearlo, crear un rectángulo, para crear un rectangle.js ven aquí y presiona rectángulo o dos. Sí, los senos son clave. Atajo y estás bien para ir. Y lo que hice es lo que hacemos aquí es usar el plugin minus-plus. Entonces, vamos a encontrarlos. Un espacio y el espacio siguen. Tan ampliamente aquí en el espacio, sí, tenemos 40 aquí. Por lo que se sienta perfectamente como queremos. Lo que suelo hacer también es hacer otro rectángulo sobre DS1. Lo que suelo hacer sus botas, un campo en especie de color azulado y luego arrastrado por verbosidad a algún lugar que me guste. Para que pueda ponerle texto encima, vale, para que veas, puedes decir la diferencia aplicando este tipo de máscara. A mí me gusta hacer es de esta manera. A lo mejor hay otra forma o en otro campo y luego mezclar y todo. Pero me gusta hacerlo de esta manera. Está bien. Y vamos a insertar nuestro he hecho cargar el logo antes. No tienes que hacerlo. Puedes poner el nivel que quieras. Por lo que realmente no necesitas ponerlos como logo de secta en él. Vamos a tener material auditivo. Sí, éste supongo. Hagamos click afuera. Y como estos negros ocultos, lo hice ir aquí a ajustes de imagen y luego subir esta postura. Bump de arriba hacia abajo, pon los reflejos arriba, los silos arriba. Y bueno, como que en su mayoría he comido blanco, que es lo que queremos aquí por el nombre. Entonces, ¿phi S3 AI? Sí. Esto es un poco aburrido en este momento. Se va, tenemos que poner las cosas un poco arriba ahora mismo. Entonces supongo centrado ahí. Y sólo voy a traer mi menú aquí. Los artículos. No quiero traer todo, todas las cosas porque quiero mostrarte cómo lo hago. Para que puedas aplicarlo en tus rostros. El arte, como se puede ver, capa de texto regular, por lo que no hay complicaciones aquí. Yo sólo voy a agrupar esto en un grupo llamado logo. Entonces lo tenemos ahí. Y, y lo que voy a hacer es usar otro plugin que uso mucho. Se llama cuantificador, como se puede ver aquí. Y calificas como genial para encontrar iconos. Recuerda usar por lo general el mismo tipo de conjunto de iconos. Por lo tanto, no cambies entre diferentes conjuntos de iconos. Nosotros. Elige un conjunto de iconos y luego aplícalo. Pero para este particular, sólo voy a, necesitamos como una búsqueda, como un ícono de búsqueda. Entonces creo que esta es una buena. Yo creo que sí. Sí. Kicking port o arrástrelo y justin agruparlo por lo que sólo tenemos el icono aquí. Y cambiemos el color a blanco. Entonces tenemos esto, y como vemos aquí en nuestro, tenemos este botón con el haznos empezar. Veamos la altura 48. Entonces estamos en un, un ancho de ocho píxeles. Entonces vamos a dibujar un rectángulo con píxeles de Fourier. Voy a añadir sonido y radio de frontera aquí, como digamos diez. Y vamos a aplicar sobre un trazo, trazo de un píxel y quitar el fondo. Y entonces sólo voy a copiar. Y este texto aquí, y se va a decir, qué fue, el excepcionalmente empezar. Muy bien, así que esto es bastante directo aquí. Vamos a convertir esto en un botón Auto Layout. Entonces es así será en especie de receptivo al escritorio que ponemos en él. Entonces para eso, solo puedes hacer clic en, hacer clic derecho y AF auto-layout o recomiendo aprender el circuito es tamizar un y está haciendo cosas raras aquí. Entonces no queremos eso. No sé qué está pasando. Entonces déjame solo poner esto. Ahora era la configuración de capas. Entonces recuerda, es una buena práctica poner el rectángulo y en el, arriba, en las capas, poner el texto. Y ahora, como pueden ver, tenemos como botón de altura de 48 píxeles y podemos ajustar aquí el bobbing. Entonces ya que estamos trabajando con pena de ocho píxeles de alguna manera, entonces vamos a votar como 32, ¿de acuerdo? Entonces sólo lo ponemos aquí, y quiero poner estos elementos 232 pixeles a, para que aparezcan estas mediciones. Aquí. Simplemente mama debería encenderse, en Mac u opción on, en Mac y todo para invertir en BC. Está bien. Y otra cosa lo voy a hacer abasto aquí. Y yo auto-diseño a. Entonces haga clic derecho y agregue otro diseño automático. De lo que hace. En este caso, es que puedo controlar el espaciado del margen y el relleno y el espaciado entre elementos, por lo que los mantenemos consistentes. De acuerdo, para esto, lo voy a dejar en 32 también. Y, y ahora tenemos que volver a ponerlo aquí, 32. Ok. No vamos a hacer nada más en este momento que digan que esto sería bueno tenerlo en 32 y estos 232. Recuerda que puedes moverte, puedes moverte con tinta. Si presionas las teclas de flecha, se moverá un píxel a la izquierda, a la derecha, arriba y abajo. Y al presionar turno, se moverá en incrementos de diez. Entonces yo, usualmente lo hago de esa manera. De acuerdo, entonces tenemos nuestra configuración de menú. Y ahora vamos a traer aquí de nuevo nuestro layout para que podamos hacer algo, no sé, tipo de diseño un stylus. Entonces esto va a tener como 16. Entonces es, seguimos en la cuadrícula de píxeles. Voy a crear aquí en tomar seis columnas para el título. No recuerdo el título en realidad. Entonces sólo voy a copiarlo. Y este tipo de letra, hey tenía usos castillo de livery en exhibición es un libre es un tipo de letra libre. Es una fuente libre. Se puede, sólo se puede usar de, sólo se puede hablar. Escuchar sigma porque está hecho, es de Google. De acuerdo, así que aquí lo que queremos se dice esto no en el ancho exterior sino en auto altura, ¿de acuerdo? Entonces, y el ancho se va a quedar aquí. Si seguimos escribiéndolo, se baja. Pero, pero, así el ancho es fijo, pero la altura es de tres. ¿ De acuerdo? Y ahora tenemos algo de texto aquí. Yo también voy a copiar. Y para esto, sólo voy a dejarlo. Comienzan como cinco columnas. Podríamos ir con seis columnas si queremos. Bueno, esto absolutamente va a morir de las columnas de C, pero esto, voy a dejarlo en cinco. Recuerda, pensarían que se trata de trabajar con Layout es que puedes posicionar elementos con toda la seguridad. Vas a alinear artículos. Yo estoy, no estoy alineado en mi menú aquí. Simplemente estoy dejando estos 32 bobbing o espaciado alrededor de estos elementos porque quiero ir esto completo, completo, ancho completo, pantalla completa. Cuando aumentas el ancho de la ventana, quiero ir todo el camino. Pero esta parte quiero quedarme para apegarme al duelo. Entonces si esto aumenta, la foto aumentará, pero esto se quedará en el mismo lugar. De acuerdo, eso es lo que queremos hacer. Y de nuevo, si miramos el error en nuestro diseño, tenemos aquí otro botón se llama o más, que es lo mismo que empezar. Entonces para esto, solo voy a copiar este botón afuera. Whoo. Sólo voy a duplicarlo manteniendo presionado la tecla alt o la tecla Opción y traerlo aquí. Y lo bueno del diseño automático, y se puede ver aquí que estos dos tipos de torres o icono de pausa, lo que significa es que tiene el auto-layout están activados. Entonces, ¿cuál era el texto? Conoce más. Entonces cuando cambiemos el, el texto va a ser sensible a nuestros textos siempre se van a aumentar o disminuir dependiendo del texto. Entonces como puedes ver, escribimos un aquí. Estos Neymar, va más grande, crece más grande. Entonces para esto, realmente me gusta aplicar auto-layout a, para aplicar como un espaciado consistente para esto, voy a usar 32 como hemos usado en nuestro menú. Y se puede ver a veces este tipo de comportamiento extraño aparece para eso solo se selecciona el elemento. Y aquí dentro puedes alinear los elementos dentro del autodiseño. Disposición automática, puedes alinear las cosas. Sí. Podríamos alinear el esto aquí o incluso cambiar el orden como puedes ver. Por lo que es una buena práctica alinear todos los elementos a la izquierda si lo quieres de esta manera. Y lo que suelo hacer también es poner esto en este auto-layout. Sí, arrastrando aquí, se puede ver que si se selecciona este azul y en realidad no es tan malo. Entonces lo voy a dejar dentro de este auto-layout, vale, así que solo voy a renombrar esto como botón. Y estos tiene título. Por lo que después sabemos lo que tenemos aquí. Y a esto se le va a llamar menú. Y este va a ser el botón. Ok? Entonces podemos mantener las cosas como en orden o bien? De acuerdo, entonces tenemos nuestra primera parte en comparación con esto. Y ahora vamos a crear estos elementos aquí. Entonces para eso, no voy a crearlo tipo de, voy a crear una copia algunas partes. Entonces ahora si vemos, si redimensionamos esto, podemos ver que algo más. Entonces es bueno y podemos hacer que nuestro columbus sea más grande. Yo sólo voy a copiar este texto. Este texto que estoy usando aquí se llama regular intergranular a 16 píxeles, y VCs inter bolt a 52 píxeles. Y los elementos del menú son intergranulares 14 píxeles. Puedes jugar alrededor o puedes elegir un tipo de letra, se siente bien contigo. Esto es sólo un título, nada de fantasía. Y veamos cómo se hace esto. Es decir, veamos la estructura de esto. De acuerdo, entonces tenemos una foto, tenemos una especie de borde gris aquí, que en realidad voy a copiar solo para vencer a este color, estos colores. Y tenemos estas fecha, luego el título, luego un poquito de espalda y una flecha aquí. De acuerdo, entonces volvamos. Yo sólo voy a copiar aquí como referencia. No voy a ponerlo aquí. Yo quiero mostrarte cómo lo hago. Entonces para esto, ya que tenemos tres elementos que queremos tomar para, para nuestro artículo. Entonces esta será la distribución de que esto es lo que me gusta trabajar con nosotros con rejillas porque es súper fácil posicionar elementos, mantener consistencia a través de diferentes páginas y todo. Entonces si no estás acostumbrado a trabajar con el diseño, realmente te recomiendo que lo hagas bien. Entonces lo que voy a hacer aquí es volver a usar el plugin, el plug-in. En este caso voy sólo a arrancar. Militares. Sería Militar y sí, tenemos nuestros cuatro. Está bien. Pero sólo voy a cambiarlo por este helicóptero. Y sólo voy a copiar el texto porque puede ser una tarea un poco tediosa. Simplemente los voy a poner de esta manera. Para el batido, se puede ver aquí la facilidad de configuración en negrita 16, intervalo 22, e intervalo. Entonces para esto, para la pila, bien, entonces para este ícono, acabo de regresar a mi loft, plug-in economy phi y sets para flecha. ¿ Verdad? Y creo que usé este, pero no importa. Sí. En cambio, el que te sienta bien y será genial. Como se puede ver. Cuantifica inserciones como un marco y luego inserta tipo de grupo. Por lo que usualmente desagruparía estos marcos para que desaparezca. Y tengo la flecha. Entonces pongamos la flecha y en el escritorio, hagamos esto un poco más grande, algo alrededor de eso. Y teníamos antes este tipo de rectángulo para estos lo que hago es solo crear, Sí. Y cada vez que lo envío a la parte posterior, quita el inserto y un trazo. Yo sólo voy a ir a estar con el recolector de color. Voy a copiar esto excepto gris, y que es un gris sutil. Y lo que hago es usualmente ponerlo un poco más alto por lo que está escondido antes de la foto. Para que pudieras ponerlo así. Pero vas a tener como estas gran celda grande aquí que está un poco sucia. Entonces supongo que lo puso atrás. Y casi tenemos nuestro deseado aquí, pero quiero hacer algunas cosas antes. Estábamos dejando como 32 pixeles a la izquierda. Entonces en estos elementos aquí y entre estos elementos también. Entonces quiero mantenerlo consistente y hojear como 32-bits nosotros aquí para, aquí tenemos 32, como se puede ver ahora, 32, aquí tenemos 32. Y ahora aquí quiero tener otros 52. Entonces es bueno o. Y aquí queremos como 32 pixeles para. Entonces solo voy a alinear estos, alinearlo al medio, lo cual es bueno. Y aquí queremos tener como 3032 va a ser una especie de dos dietas. Entonces digamos 34. Bueno, podemos, podemos recordar que se puede poner aquí como Samsung o sí, oprimir menos n va a, ahora deberíamos tener 32, así que estamos bien para ir. Entonces tenemos nuestro primer auto o nuevo o así vamos a crear un componente de esto. Y esto va a ser noticia, ¿de acuerdo? Entonces sólo voy a llamarlo noticia. Y sólo voy a traer de nuevo nuestro layout y duplicarlo. ¿ De acuerdo? Por lo que ya hemos hecho nuestro diseño. Ah, que hay esta batalla que necesitamos crear. Pero aquí en este diseño receptivo, se puede ver que los elementos se están moviendo para aquellos están escalando. El, el, estos elementos son realmente, son realmente sensibles a lo mismo que el menú. Y, pero si lo hacemos aquí en nuestro nuevo diseño, solo quita eso. Y eso lo hacemos aquí. Podemos ver que están pasando algunas cosas que no queremos que sucedan. Por lo que estas fotos no se escapa del menú. Es, estamos consiguiendo que se pierda de alguna manera. Bueno, el menú, se está comportando bien. De lo que los elementos aquí abajo, podemos ver que no son el escalado adecuadamente. Entonces arreglemos eso. De acuerdo, entonces no voy a cambiar estos cuatro. Oh, bueno, yo voy a cambiarlos todavía. Realmente rápido. Abrimos de nuevo y un splash plug-in, e incentremos algunas fotos aleatorias. Está bien. Entonces lo tenemos aquí. Déjenme que no queremos toda esta luz aquí. Entonces lo que necesitamos, es entender estas restricciones, panel. Panel de restricciones es lo que va a hacer que tu diseño sea receptivo o se comporte de la manera que quieras, ¿de acuerdo? Entonces para este flujo en particular, lo que queremos que sea esto a la izquierda. Entonces queremos mantener estos ciernes, dijimos antes de 32 pixeles y lo mismo. Nosotros queremos en la parte superior para esto, solo lo dejas así. Giramos este panel. Podemos ver que se puede fijar a la izquierda, a la derecha, izquierda y derecha, centro o escala para este caso en particular, lo queremos así. Para el menú, lo que queremos es en lugar de izquierda, no queremos tomar esta enorme cantidad de espacio aquí. Lo que queremos es llevarlo a la derecha. Por lo que queremos mantener este espacio. Aquí. Queremos mantener este espacio en la derecha y en la parte superior. Entonces sólo lo ponemos a la derecha, en la parte superior, el texto, este texto. Nosotros queremos lo mismo. Queremos estar a la izquierda para mantener este espaciado aquí y mantener a la parte superior. ¿ De acuerdo? Y lo mismo se aplica a estos datos, y lo mismo se aplica aquí. Por esto. Si lo llevo a la izquierda y a la parte superior, esto no va a ser receptivo. Entonces en este caso en particular, lo que queremos hacer, es ser necesidad a SK. ¿ De acuerdo? Entonces veamos qué pasa ahora. Como se puede ver, es una especie de comportarse bien. Estos no están moviendo este escalado de ARN correctamente. El primero es un escalado como esperábamos, pero los demás no. Entonces tenemos que arreglar eso. Permítanme volver a poner esto a ciento ciento, diez, ciento cuarenta. Entonces fue nuestro oriental. Entonces veamos el menú y el resto de los elementos, cómo se comportan. El resto de los elementos se están comportando. ¿ Está bien? Entonces en lugar de poner aquí a escala, lo que queremos hacer es de izquierda y derecha. Entonces va a tomar lo mismo, va a llevar el mismo espaciado aquí que aquí. Aquí lo que queremos es poner nuestros elementos de nuestro auto ligados a la izquierda y a la derecha y a la parte superior. Está bien. Podríamos poner aquí como una báscula. Pero la escala va a hacer estos elementos. Déjame comprobar si esto está bien. No es uno, no lo es. Sí, pero algo ha pasado aquí. Entonces déjame duplicar esto otra vez. Y algo importante. Es que no aplicamos nada aquí en las restricciones. Y las restricciones. ¿ Cuándo lo haces tú, cuando cambias la, la restricción superior, el padre, digamos el padre, si estás en un grupo, imagínate esto como un grupo. Si cambias aquí, el centro o escala o estos elementos, van a escoger, ¿qué escoges la primera vez? Entonces es una especie de cosa complicada porque si aplicas las restricciones antes de estos pequeños elementos, antes de hacer tu maestro, que las restricciones de los padres es más adelante va a ser como una cascada. Por lo que es mejor aplicar primero las restricciones al grupo o al componente y luego ir a los elementos internos y aplicar sus, sus restricciones. ¿ De acuerdo? Entonces para, para, para esto, lo que queremos es en lugar de una escala, no queremos escalarla. Nosotros sólo queremos que respete. Se necesita este espaciado aquí y este espaciado aquí y respetarlo. De acuerdo, entonces, así que lo mismo. Lo que podemos hacer aquí. Podemos ver es que estos blancos, ha sido consistente y el espaciado entre columnas está siendo consistente con. Entonces esto es, esto es lo que queremos en nuestro diseño. Y para eso, en lugar de escalar, lo cual va a hacer que estemos pensemos así o algo así. Queremos que estos espacios en blanco entre elementos sean consistentes. Entonces para eso, ¿qué hiciste? 2s es izquierda y derecha. Entonces el contenido no escala, solo muévete. Y así ahora vamos a ir por elemento por elemento aplicando restricciones. ¿ Está bien? Por lo que no queremos este elemento a una escala. No queremos hacer esto, vale, cuando lo hagamos más grande o Spore. Más pequeño. Entonces lo que queremos esto, esto, en este caso particular, queremos fijarlo a la derecha porque queremos mantener estos espacios en blanco consistentes y el espacio inferior también consistente. Por lo que aplicamos al fondo. Entonces es cuando movemos estos R0 va a ser un palo a la derecha y al fondo va, el espaciado va a ser consistente. ¿ Está bien? Lo mismo aplica a los anuncios. Queremos mantenerlo a la izquierda y lo siento al boro. Entonces este espacio en blanco va a ser consistente a lo mismo aplica aquí al título que queríamos bin a la izquierda también, mantener estos abordaje para visitar ese espacio y a la parte superior. Y para esta fecha, exactamente de la misma manera. Queremos fijarlo a la izquierda y a la parte superior. Está bien. Estos los queríamos fijados a la cima. Pero queremos ir a la izquierda y a la derecha. Queremos que aumente y disminuya a medida que ustedes, como podemos ver aquí. Y lo importante aquí, tengo este aldehído bien, listo. Entonces cuando nosotros, cuando nosotros, cuando intentamos lo sensible aquí, podemos ver que esto no está cambiando. ¿ De acuerdo? Por lo que necesitamos hacer algo con esto. Y esto es giro a los zurdos para adoptar, cometí un error aquí, pero lo que queremos es mantener este ritmo, basándonos en la derecha y en la izquierda. Entonces para este en particular, hay que llevarlo a la izquierda y a la derecha. Lo mismo que hicimos aquí. De acuerdo, entonces ahora si hacemos esto, como pueden ver, el texto es sensible. Entonces así es como lo creas. Y vamos a crear una tableta diseñada para esto. Yo sólo voy a plantear este. La mata y borra el contenido. Bueno, así que vamos a ver cómo hago sus diseños responsivos aquí. Lo que hago, es solo arrastrar y soltar todo el contenido aquí. Y sí, algunos. Y lo que hago es recoger estos tres y traerlo aquí. Ok. Entonces, solo aplique esto y aplique aquello. Y tú solo, y ves que casi están ahí. Obviamente tienes que hacer algunos cambios aquí para derribar estos textos porque son demasiado grandes para este responsive como harías si estuvieras haciendo esto en HTML Assisi, CSS, pondrías como una consulta maníaco o algo así. Entonces, para que lo mejor sería un más pequeño, ¿de acuerdo? Entonces esa es una parte de ello. Y aquí se aplica lo mismo. Quieres hacer algunos cambios. Si lo hace, Meredith es la forma en que funciona no es posible hacer que todo tipo de super super responsive. Es decir, sí, la imagen, la imagen, como se puede ver, ha sido receptiva. Ahora tú, qué puedes hacer aquí si quieres que lo cambie a recortar. Y puedes moverte alrededor de la imagen si quieres posicionarla mejor. Pero como pueden ver, esto se toma como, no sé, un minuto. Por lo que minis para crear un diseño responsive, el menú, lo que sucede en la versión de tablet es que no encaja. Entonces para estos, lo que hice es simplemente venir a mi amado plug-in E cuantificar e insertar como un icono de menú. Este parece bueno porque cuesta un poco de redondeo. Y sí, ven aquí. Como hemos visto, desagruparlo de nuevo, cambia el color a blanco. Y queremos ser como 32 pixeles, como tenemos antes. 32 píxeles aquí y allá. Y en lugar de una escala, queremos posicionarnos a la derecha. Y adoptar. Porque recuerda que queremos que el espacio sea consistente. Y ahora última parte. Y, bueno, recuerda que si quieres hacer como un, otro tipo de diseño aquí, no sé qué pasó con esto. Esto debe estar anclado a la izquierda y derecha y arriba. Entonces cuando ahora haga esto, nuevo, es totalmente receptivo. Y lo que podemos hacerlo si queremos, es traer la versión de tablet y luego hacerlos versión móvil. Entonces para eso, veamos qué he seleccionado para el teléfono. Fue fue iPhone ocho plus, así que es estos ancho 414. Entonces volvemos aquí. Y qué queremos esto, solo ponlo así. 114. Y todo va a ser la parte que tiene eso. Ser receptivos, son receptivos. Está bien. Pero recuerda, ahora tenemos este tipo de diseño raro aquí. Entonces solo voy a ir con otro diseño mínimo para sí, eso es mucho mejor. En fin, como esta no es una página de Facebook, no quiero que sea tan apretada. Entonces solo voy a cambiar un poco el diseño para mí. Voy a desprender esta pestaña y voy a dejar el margen a 32 píxeles. De acuerdo, entonces ahora tenemos nuestros elementos se adapta a la gran cosa que va a chocar esto un poco más alto para que realmente puedas ver lo que está pasando en esta parte. Entonces para este que voy a hacer es solo i y todo a los 32 pixel de acuerdo tenemos al margen, lo siento. Y entonces solo empieza a hacer que estos elementos sean un poco más pequeños. ¿ De acuerdo? Entonces y esto, solo voy a hacerlo como súper débil, por lo que caben todos los elementos. Yo sólo voy a quitar estos elementos y volver a copiar este porque tiene como un pequeño texto. Y ahora lo que podemos hacer es sí, hacerlo más grande. Y y duplicarlo de nuevo. Y aquí tenemos algunos problemas con el escritorio es una especie de ir por ahí. Acabas de poner esto, trae tu n en el asteroide a tu cuadrícula de diseño y estás bien para ir o tal vez quieres cambiar esto a un minúsculo porque es demasiado grande. Para que puedas ponerlo alrededor para ti, algo así. Y estos, puedes dejarlo en 16. Por lo que ahora tenemos nuestro diseño responsive bien moldeado aquí. Otra cosa que realmente me gusta hacer, Es aplicar el auto-layout a todo porque no tengo que estar pensando aquí, que es el espaciado donde quiera. Entonces si aplicas un layout al aire libre aquí, puedo controlar que pongo 32 y todos los elementos de separación va a ser 32. Ok? Entonces esto es todo, es como hiciste un diseño responsive dentro de fema. Y cómo usar en combinación auto-layout para separar elementos y mantener distancias consistentes y también. Cómo hacer que estos elementos responsivos son. Otra cosa que quiero mostrarles es que ahora desde que estuvimos estos elementos al fondo, podemos, estos elementos es un poco receptivo a porque podemos hacer que el clasificador de elementos y todo va a estar encendido, en su lugar. Entonces déjame solo hacer esto un poco más corto. Entonces recuerda eso, que las restricciones funcionan, funcionan de esa manera. Y la otra cosa que quería mostrarte, es, es lo que pasó. Si pongo algunas restricciones con una escala, que es la que no vimos. ¿ De acuerdo? Entonces recuerda, digamos que la aplicamos a esta flecha en lugar de derecha e inferior. Aplicamos como escape. Ok. Por lo que se puede ver aquí que desde que hicimos estos, este componente es más pequeño, las flechas se están escapando. Entonces eso es, por eso, eso es lo que es para la restricción de escalado. Pero no recomiendo usarlo en este tipo de elementos. Entonces esto el giro a la derecha otra vez. Y guardas la flecha sin distorsión en cada situación. Entonces eso es todo. Espero que encuentres que lo interesante, te recomiendo que replices estos diseños o cualquier otro que tengas en mente tratando de, pondré en práctica con las tarjetas y con estos menú y un error. Entonces sigue adelante, sigue probando cosas. De acuerdo, entonces espero que hayan disfrutado de la lección y nos veamos en sus felicitaciones, me despido. Video. Nos vemos más tarde. 3. 3 felicidades: Oye, felicitaciones, lo hiciste aquí. Espero que haya sido divertido diseñar estos diseño responsive. Creo que puedes hacer tus propios diseños aplicando lo que has aprendido. Por lo que puedes ponerlo en tu portafolio es un impulso. Por lo que espero al mismo tiempo que hayan aprendido las habilidades necesarias para hacer todo, todos estos diseño y aprender sobre este costo capacitaciones y todo. Y a veces lo hemos visto en este curso. Entonces espero que te guste. Y si lo hizo, por favor deje una reseña para que más personas puedan encontrar el curso. Y si te interesa más contenido como este, entonces solo puedes seguirme para que te actualices cuando suba un nuevo video y nos cosas, ¿verdad? Entonces muchas gracias por unirte a mí y verte en los próximos cursos.