Dominio de Figma: la magia del diseño automático

1. Introducción: De acuerdo, Así que 20 y sabio, hay tres puntos de control importantes que he encontrado en mi carrera como diseñadores de interfaz de usuario hasta ahora. El primero fue la introducción del sketch, un interfaces de usuario adecuadas totalmente dedicadas. Conté que la segunda venía de Figma, otra herramienta de diseño de interfaz de usuario. Y hay una historia completamente diferente sobre cómo me cambié de boceto Figma e yPero el número tres, el tercer punto de control fue la introducción del auto-layout en Figma. Me encanta Auto Layout no sólo porque es conveniente, sino porque es corta mucho equipaje extra del arte central de diseñar una interfaz de usuario. Y hace tanto espacio para la experimentación. Cuando usas el diseño automático, no tienes que preocuparte por alinear y cambiar el tamaño. No tienes que preocuparte por hacer espacio. Cuando tienes que poner algo en medio de tu diseño, no tienes que preocuparte por estirar y aplastar elementos cada vez que tienes que encajar en algo, no tienes que preocuparte por el espaciado consistente cuando estás duplicar cosas como en una lista o algo así, y mucho más que descubrirás a medida que adoptas diseño automático en tu flujo de trabajo o un checkout mi flujo de trabajo más adelante en el curso. Este curso es para cualquier persona que acaba visitar falso my.com y ha creado una nueva cuenta gratuita o no es profesional experimentado y ha estado en la valla sobre el diseño de auto o lo probó una vez y fundó un poco confuso, ya sabes, sólo un poco difícil de envolver la cabeza alrededor de él. Un buen usuario interfaces que, que abstrae la complejidad detrás de la simplicidad y el panel de diseño automático en Figma es un gran ejemplo de eso. Se trata de una tira delgada de unos 100 píxeles de alto, y almacena magia absoluta. En la primera mitad del curso, me verás explicar la necesidad auto-layout y mostrarte que es un uso muy básico. Entonces pasaremos a crear un diseño incremental, incrementalmente complejo. Y en el proceso, también aprenderás sobre componentes, instancias y un poco sobre varianza. Después de haberte dicho todo lo que hay sobre el diseño automático, saltaremos directamente a hábitos, proyectos del mundo real, y luego juntos construiremos componentes de interfaz de usuario relativamente complejos usando auto land, hay una posibilidad de que encuentres las dos primeras lecciones en el curso, que se trata de botones, un poco demasiado básico. Y esas lecciones de las que hablo en grupos y marcos y la diferencia entre ellos y cómo usar el diseño automático es una gran mejora sobre ellos. Si grupos, marcos, y un poco sobre los mismos fundamentos del diseño automático es algo con lo que ya estás familiarizado. Simplemente puedes despreciar las dos primeras lecciones con todo eso fuera del camino, lo único que queda por discutir es el proyecto y la configuración, que estaré haciendo rápidamente en el siguiente video. Entonces nos vemos. 2. Actualización de diseño automático: De acuerdo, Entonces este es un componente de maquetación automática que estarás haciendo más adelante en la clase. Y seleccionaré esto. Y tan pronto como selecciono esto, se puede ver a la derecha no había nada en este momento, pues en cuanto selecciono esto, se pueden ver algunas opciones de maquetación automática que salen. Ahora he tomado algunas capturas de pantalla de la clase, los videos que veremos más adelante abajo la línea con el viejo Antoni fuera UI. Y estaremos usando esta captura de pantalla, esta pequeña interfaz de usuario nueva de diseño automático que aparece para comparar y contrastar entre la actualización y la interfaz de usuario que estaba allí antes. Muy bien, así que empecemos. Lo número uno a notar aquí es que este pequeño alineaciones cuadradas. Ahora vas a estar aprendiendo, como dije antes, más tarde en la clase, lo que significa. Ahora, lo que sucede en la nueva interfaz de usuario es tan pronto como se hace clic en algo que tiene sobre tierra aplicada a ella, se ve directamente esta alineación al cuadrado. Ahora, antes en la interfaz de usuario que estaba ahí antes, tenías que hacer click en esto y luego aparecerían estas opciones. Entonces esa es la diferencia, número uno. Lo segundo que hay que notar es sobre el relleno. Ahora en la interfaz de usuario anterior, solía haber solo una pequeña caja de entrada para agregar relleno y sabrás qué es el relleno, como, dije más tarde en la clase y ahora en la nueva versión, lugar de solo un pequeño tipo de caja de entrada, lo que tienes es una forma un poco simplificada. Tienes tu campo de entrada de relleno horizontal y tu campo de entrada de relleno vertical. Y también puedes dividirlo en paddings independientes. Acolchado para la izquierda, relleno para el bateo superior para derecha y botón, que en realidad ha hecho las cosas un poco más limpias. La otra cosa importante a prestar atención a eso se ha movido. Ahora si selecciono esto, se puede ver es que en esta zona justo por aquí se pueden ver contenidos fijos y abrazados. Todas estas opciones que se denominan restricciones de redimensionamiento, que volverán a aprender más adelante en la clase. Se ha trasladado a aquí. Mientras que en la interfaz de usuario anterior, todas estas opciones en realidad aparecieron por aquí bajo un redimensionamiento pequeño lugar de la interfaz de usuario y ahora se ha trasladado a por aquí. De acuerdo, así que eso es todo lo que son como todas las actualizaciones de la interfaz de usuario. Y ahora puedes seguir adelante con la clase. Y como estoy hablando esto, me olvidé de una cosita. Ahora, antes se utiliza para tener el espacio entre y empacar bajo esta opción, como dije antes, en la nueva, lo puedes encontrar todavía bajo una opción emergente haciendo clic aquí. Y se puede cambiar entre el espacio, entre un impacto. Y ahora sé que todas estas nuevas opciones son, si nunca antes has tratado con auto-layout, todas estas suenan ajenas a ti, pero más tarde en la clase entenderás esas. Y acabo de hacer este pequeño video solo para mostrarte las actualizaciones porque no ha habido ningún cambio central en el diseño automático, solo cambia la interfaz de usuario. Así que espero que estés listo para la clase. Y supongo que te veré en el siguiente video. 3. Proyecto y configuración: Está bien. Es hora de llevarte a través de los archivos que estaremos utilizando en esta clase y además te mostrarás lo que estarás sometiendo a Skillshare Al final de esta clase. Entonces hagámoslo. Dentro de los recursos que descargues, encontrarás dos archivos Figma, terminados y de arranque. Quiero que cargues estos dos archivos en tu Figma. Si tienes instalada la app de escritorio Figma aquí como yo, y puedes descargar la app de escritorio Figma desde aquí. Puedes buscar en la aplicación Google Figma Mac o en la aplicación Figma Windows. Ya sabes, todo es lo mismo en que puedes descargar la app para macOS o Windows desde aquí mismo. Si está utilizando la aplicación de escritorio Figma, puede simplemente hacer clic directamente, hacer doble clic en cualquiera de estos archivos para abrirlo en la aplicación Figma, o puede hacer clic derecho e ir a Abrir con entradas Figma y abrir ambos archivos. Pero si estás usando Figma en el navegador, puedes iniciar sesión en tu cuenta y crear una cuenta de Figma, si no estás al tanto, es muy fácil. Todo lo que tienes que hacer es ir a figma.com y dar click en Regístrate. Y la mejor manera es inscribirte en Google. Y después de solo dos o tres clics, terminarás con algo como esto y toda la interfaz de usuario de Figma. Entonces, cuando estás dentro de la interfaz del navegador, si estás en la interfaz del navegador, puedes simplemente arrastrar ambos archivos al navegador e importará ambos, ya sabes, a tu Figma. Por lo que esperaremos a que terminen de importar, califiquen tanto los archivos han terminado de importar y dentro de su Figma, verá el archivo terminado y el archivo de inicio. Estarás trabajando en el archivo de inicio a lo largo de este curso. Y el archivo terminado es solo para su referencia o por si acaso, digamos que hacemos algo juntos en un video y más tarde en un video diferente, pero necesitaremos lo que creamos antes. Pero por cualquier razón, por cualquier razón en absoluto, no lo creaste junto a mí. Por lo que puedes recogerlo del archivo terminado, pegarlo en el iniciador en un lugar apropiado y continuar con la clase. De acuerdo, Ahora veamos dentro del archivo de inicio para abrirlo y solo haz doble clic en él. lo primero de lo que quiero hablar en este archivo es de esta página llama a mosaicos y colores. Y por cualquier motivo, si no estás viendo esto y asegúrate de expandir las páginas Ver haciendo click justo aquí para que puedas ver todas las páginas. Entonces la página de la que quiero hablar, lo primero de lo que quiero hablar, hablar como azulejos y colores. Ahora para que podamos enfocarnos exclusivamente en el auto-layout y los componentes de UI que hacemos con él y no nos preocupemos por los colores y qué tamaños de fuente usar. Ya las he definido todas para ti en esta página, la página de estilos y colores. Y también puedes mirar en el panel derecho en Figma cuando no se selecciona nada, todos los estilos que he definido para ti. Y si encontrar estilos y colores globales y Figma es bastante simple, creo que ya sabes cómo hacerlo, pero para aquellos de ustedes que no lo hacen, aquí hay un rápido uno de un minuto de cómo hacerlo. Ahora digamos así como estos colores, si hago clic en él y especie de ver un código hexadecimal, veo un nombre personalizado que le he dado a este color, digamos como estos colores, quiero crear un nuevo túnel de colores globales que pueda ser utilizado en cualquier parte de este archivo. Para ello, solo puedo presionar R en mi teclado o clic en la herramienta de rectángulo y dibujar un rectángulo de cualquier tamaño. Y entonces le daré un color aleatorio a este rectángulo, ¿verdad? Entonces vayamos con este color, ¿de acuerdo? Ahora si selecciono este rectángulo, puedes ver que muestra un código hexadecimal de este color, que es 362, 565. Ahora si quiero convertir este color a un estilo global, todo lo que puedo hacer es hacer clic en este ícono justo por aquí que dice azulejo, y luego dar click en este icono más que dice Crear estilo. Y una vez que hagan clic en eso, me pedirá que le dé un nombre y solo lo llamaré colores temp ya que lo estoy usando para demostrarte, para demostrarte el proceso a ti. Y luego voy a dar clic en Crear estilo. Y una vez que he hecho eso, puede ver que el color Tim se vuelve visible y panel de estilos globales a la derecha cuando no se selecciona nada. Y si quiero volver a usar este estilo, es este color de nuevo, todo lo que puedo hacer es hacer clic aquí y luego escoger color temp clasificado a partir de aquí y se puede utilizar y reutilizar. Y si más tarde este sitio para cambiar el valor de color temp haciendo, haciendo esto, haciendo clic en él, luego haciendo clic en Configuración y luego ajustando el color de nuevo. Se verá afectado A lo largo del archivo, dondequiera que se utilice este color. Ahora ese es el proceso para crear un mosaico de curso global. Y como esto fue temporal y ya no lo necesito, lo escogeré de los estilos, ya sabes, asegurarme de que no se seleccione nada y sea visible. Puedes hacer clic en él, hacer clic derecho en él, y luego hacer clic en Eliminar estilo para deshacerte de él. Y de igual manera, y de igual manera, al igual que creamos el estilo de color. Si quieres crear un textil como este que he creado, todo lo tienes que hacer es presionar T en tu teclado, o puedes seleccionar la herramienta Texto y escribir algo al azar. O ya sabes, puedes teclear algo no aleatorio, no me importa. Y luego puedes seguir adelante y darle al estilo de fuente al azar. Y ahora mismo se puede ver como tau es si línea, pero no quiero eso. Voy a seguir adelante y darle un estilo de fuente al azar, lo que yo quiera. Y luego para convertirlo a un estilo a un textil, vuelvo a hacer clic en este ícono, dar click en plus, y luego podré darle cualquier nombre que quiera. Voy a darle textos temp, Es nombre de azulejo y luego puedo seguir adelante y crear un textil y luego será visible y esto se puede reutilizar de nuevo en cualquier parte de todo el archivo. Está bien, así que vamos a deshacernos de él. Y ese fue tu rápido análisis de cómo crear un color, estilo y un textil. Ahora, una vez que hayas seguido y termines la clase, tendrás ahora mismo al inicio de tu archivo de inicio estará vacío. Cada página estarás esencialmente vacía. Por lo que al final de esta clase, dentro de su archivo de inicio, tendrá todos los componentes de la interfaz de usuario que es prisión dentro del archivo terminado. Y como proyecto final, lo que puedes hacer es esto. Puedes crear una nueva página haciendo clic justo aquí y nombrando el proyecto final de la página, bien, y luego todo lo que has hecho, puedes empezar a recolectarlos en tu página final del proyecto. Y lo haces simplemente copiando, presionando Comando o Control C y pegándolo en el proyecto final. Entonces este desplegable es algo que hará en el tercer capítulo después de los botones, ya sabes, acabas de recogerlo aquí presionando Comando C y Comando V. Ahora de igual manera, puedo traer las otras cosas que he hecho. Y luego una vez que hayas reunido todo, tu página final del proyecto se verá algo así. No exactamente así, porque ya lo he usado a mi gusto y puedes arreglarlo de la manera que te guste, pero se verá algo parecido a esto. Y el proyecto final es sólo alguna misión de una captura de pantalla, esta página. Por lo que puedes tomar una captura de pantalla de la misma y presentarla como el proyecto de clase para esta clase. Y también en los comentarios, asegúrate de copiar este enlace haciendo click en Compartir. Y luego puedes seguir adelante y elegir a cualquiera con un enlace puede ver y luego copiar el enlace y enviarlo como comentario a la presentación que estás haciendo a esta clase. Y sí, eso es todo para este video. Eso es todo lo que estaremos haciendo. Y te he mostrado la configuración y también te he mostrado el proyecto que tienes que presentar para esta clase. Y te veré en la primera lección real de esta clase en el siguiente video. Nos vemos entonces. 4. Una lección en los botones - parte 1: Tengo algo para los botones bien diseñados. No eres muy fácil de conseguir ¿verdad? Pero cuando sí los haces bien ajustando las sombras y los contornos y demás. Es simplemente hermoso. Los botones también son un pilar muy fuerte de la identidad de una marca. Mira los botones de Amazon o Facebook o twitter y qué tan instantáneamente reconocibles son. Incluso fuera de contexto, puede mirar un botón y ser como, Sí, esto es Amazon y Facebook. El botón más simple que podemos hacer es solo texto plano. Por lo que o bien presiona T en tu teclado o haz clic en la herramienta Texto para que aparezca la herramienta de texto y haz clic en cualquier lugar del lienzo y luego podrás empezar a escribir. Así que vamos a la derecha, PERO EN un botón. Ahora, recuerda en el video anterior describí los diferentes textiles que ya he definido. Entonces no vamos a pasar tiempo eligiendo fuentes y colores, no en este curso. Ya he hecho todo el trabajo duro por ti si estás interesado en aprender a elegir colores y fuentes. Bueno, para ser honesto, es sólo práctica. Pero si aún quieres que lo enseñe porque te falta en mi voz, bueno, avísame. Está bien, entonces con esto en su lugar, puedes seguir adelante y dar click en un textil, que son las cuatro casitas que ves aquí mismo. Podemos hacer click en él y elegir entre todos los estilos que ya he definido para ti. Por lo que vamos por ahora con etiqueta media. Muy bien, así que este es el estilo de botón. Eligamos un color para el botón. Nuevamente, puedes elegir algo de aquí o usar los colores que ya he definido. Para ti. Tenía un poco de tiempo ahí, pero puedes elegir los estilos de color y elijamos el azul aquí. Está bien, así que ahí está. Ese es el botón más simple que podemos tener. Vamos a arrastrar una copia de este texto hacia fuera. Puedes o bien puedes presionar Opción y arrastrar, ver qué pasa cuando presiono opción que ahora hay dos errores, lo que básicamente significa que si lo arrastras hacia fuera, creará una copia, hará una copia de cada paso del proceso solo para ver cómo estamos evolucionando o botón. Ahora, este texto aquí mismo para parecer un botón, necesita una base. Entonces dibujemos una base. O haga clic en la herramienta Rectángulo desde aquí, o presione R en el teclado para subir la herramienta de rectángulo y déjame arrastrar un rectángulo así como así. Ahora visualmente este rectángulo está sobre los textos de botón. Por eso su cabeza y su perspicacia. Ahora lo que puedo hacer es simplemente arrastrarlo hacia abajo como este lado del bate o usar el comando de atajo de teclado y corchetes para cambiar su orden. Entonces pongámoslo en la parte inferior. Ahí lo tienes. Y lo siguiente que vamos a hacer es redimensionarlo un poco para que se vea más como un botón. Entonces sí, ahí vamos. Eso se ve un poco como un botón, ¿no? Está bien, estamos llegando a alguna parte. Ese es un buen punto de partida. Ahora tenemos que ajustar los colores poco, el moño es un poco feo. Si está de acuerdo. Es decir, objetivamente, he vinculado un texto azul sobre un fondo gris que es como realmente feo. Entonces, solo empecemos a intentar que se vea un poco más bonita. Entonces lo primero que voy a hacer es hacer blanco el texto del botón. Y la forma en que voy a hacer eso es actualmente está puesta azul 0 y puedo presionar en el desplegable, elegir el estilo del vino. Ahí lo tienes. Y para la base, voy a seguir adelante y hacer que la base sea azul. ¿ Qué tal eso? Eso se ve un poco mejor, ¿no? Y lo siguiente, una cosa importante que vamos a hacer es que le vamos a dar una esquina redondeada de seis. ¿ Está bien? Está bien. Y como toque final de pintura, puedes seguir adelante y hacer Gracias. Haga clic en las cuatro casillas aquí para elegir un estilo y haga clic en sombras de botones. Este es el, estas son las sombras que ya he definido para ti para que solo puedas hacer clic en él y es plano en el botón así como así. Y luego lo conseguiré. Eso se parece más a un botón, algo que probablemente puedas usar en producción, pero no silencioso. Aquí hay algunas preocupaciones que tenemos que atender. Entonces sigamos adelante y hagamos eso. Y antes de abordar las preocupaciones, Vamos en primer lugar a asegurarnos de que los nombres de capas o descriptivos, bien, que generamos sea honesto. Olvídate de hacer eso y no queremos ser diseñadores así para E caótico. Está bien, entonces seleccionaré este texto aquí y llamaré a esta etiqueta, para que sea más fácil entenderlo, vale, como etiqueta, y seleccionaré la base, la base rectangular, y cambiaré el nombre si lo adivina. Gracias. Muy bien, genial. Ahora volvamos a las preocupaciones de las que hablaba. Botón y una interfaz de usuario. A lo largo de la interfaz de usuario, se utiliza un botón en múltiples lugares, formularios y tarjetas, y algún tipo de formularios de inscripción y etiquetas de precios, páginas de precios y demás. Que el punto es que simplemente no está usando un solo lugar, se usa en múltiples lugares. Y lo menos que podemos esperar de un botón es ser una sola unidad, que es sólo una cosa y no dos cosas diferentes, una etiqueta y una base. Eso no queremos. Queremos que sea una sola unidad. ¿ Y cómo hacemos que esa sea una sola unidad? Y lo adivinaste, ¿verdad? Mi agruparlos y cómo los agrupamos en Figma es muy sencillo. Arrastramos hacia arriba selecciones como motored las y presionamos cualquiera, o yo estaba a punto de directamente debajo del atajo de teclado. Puedes o bien seguir adelante y hacer clic con el botón derecho en Selección de grupos o simplemente presionar Comando G. Y ahora esta es una sola unidad. ¿ Qué tan guay es eso? ¿Verdad? Se trata de una sola unidad. Y cuando miras en el panel Capas, está este grupo uno y estos dos recitan bajo esto. Entonces lo que podemos hacer ahora es renombrar a este grupo y odiar. Hemos creado nuestro segundo botón. El primero fue este texto y esto como un impuesto y obedece emigrando. Genial es eso, pero todavía hay una manera un poco mejor de hacer este botón Figma, que no requerirá un rectángulo base separado, y eso es mediante el uso de marcos. Está bien, así que sigamos adelante y dibujemos tu copia del grupo de botones que lo recrean. Entonces solo seguiré adelante y presionaré Opción. Puedo sostener Shift para que no vaya a ninguna parte. Simplemente se queda en la fila y arrastraré una copia. Ahora seleccionaré la nueva copia que acabamos arrastrar y dejar ir por aquí donde dice Grupo. Ahora lo que puedo hacer es hacer clic en el desplegable y elegir marco, así como así. De acuerdo, el contenido está en un marco. Ahora, mira la diferencia. Mira la diferencia en los iconos en el panel de capas. Mira cómo se ve un grupo y pierna cómo el botón, que está dentro de un marco que bloguea. Y ahora esa no es la única diferencia. Te contaré más al respecto, pero sí, el botón, los contenidos están en un marco ahora. Y simplemente agrupar las cosas y luego seleccionar, seleccionar fotograma desde el menú desplegable no es la única forma de encuadrar la selección. Lo que obtienes más bien hacer en su lugar es cuando tienes dos cosas juntas, puedes presionar el atajo de teclado, Comando, Opción G, reenmarcarlos juntos o hacer clic con el botón derecho y hacer clic en la selección de fotogramas. Ahora sé que en este punto se bajan y enmarcan el sonido del día y que se comportan muy similares entre sí si no estás al tanto de las diferencias entre ellos, pero solo aguanta, sigue adelante y sabrás la diferencia. Ahora, para empezar, tenemos el contenido de este botón dentro de un marco a diferencia de un grupo. Ahora, para los beneficios de usar un marco en lugar de un grupo numero uno, no necesitamos un rectángulo base. De acuerdo, así que sigamos adelante y eliminemos eso. Met Qué, Qué, ¿Qué pasó? No necesitamos eso porque podemos aplicar todo tipo de propiedades como esquinas redondeadas y colores y sombras para el propio marco. Entonces sigamos adelante y hagamos eso. Entonces recuerda los mismos efectos exactos en los mismos estilos exactos que se aplica a esta base de rectángulo aquí, vamos a seguir adelante y hacer lo mismo con el marco. Entonces para hacer eso, el primero de todo, sigamos adelante y le demos un relleno de azul. Enfriar. Vamos adelante y otra vez, demos las esquinas redondeadas de seis. Vamos a los efectos y añadamos sombras de botones. ¿ Qué tan guay es eso? Ni siquiera necesitamos una base separada porque pudimos agregar colores y efectos al propio marco, lo cual no se puede hacer a un grupo. De acuerdo, ahora, justo como última medida, voy a seguir adelante y asegurarme de que esta etiqueta esté centrada dentro del marco. Entonces si selecciono la etiqueta y hago click en estas alineadas, ves todos estos iconos de alineación puedo hacer click en alinear verticalmente, centro u horizontal extensión alrededor, lo siento. Y luego estoy dando click, luego voy a dar click en alinear verticalmente centro, así como eso. Y la etiqueta se alineará correctamente dentro del marco. Ahora estos dos botones tienen el mismo aspecto y el de la derecha, el que se crea usando marco es ligeramente mejor que el que está a la izquierda que se crea usando grupos. También sabes la razón por la que este es un poco mejor. Muy bien, ahora vamos a seguir adelante y tratar de redimensionarlos y ver qué pasa. Empecemos por cambiar el tamaño del botón de grupo. Ya ves cuando hago eso, vale. Un poco renunció a su apropiadamente pero no tanto. Y eso se puede arreglar muy fácilmente. Entonces voy a seguir adelante y seleccionar la etiqueta, de acuerdo, y luego voy a seguir adelante y estirar a esta esquina y estresores a esta esquina. Y cambiaré el descendiente de alineación del texto, está bien, y ahora cuando lo cambie de tamaño, míralo, cambia de tamaño correctamente, como un botón debería cambiar de tamaño. Genial, Bien. Ahora vamos al botón del marco y déjame tratar redimensionarlo y dices que no pasa nada en absoluto. ¿ De acuerdo? Ahora, frames y Figma viene con la opción de establecer restricciones de tamaño. Se puede seleccionar cualquier cosa dentro de un marco y elegir cómo se comportan cuando se redimensiona el marco. Si selecciono la etiqueta así, observe que panel de restricciones, que panel de restricciones encendido, lo siento, que aparece a la derecha. Y no lo hace, cuando selecciono algo que está dentro del grupo, digo que no está ahí. Pero cuando selecciono algo dentro del marco, hay un panel de restricciones que aparece. Ahora este panel de restricciones va a ser realmente importante. Entonces sigamos adelante y pasemos algún tiempo con esta sección de segmentos UI. Ahora por defecto, dice que cuando se redimensiona el marco, mantenga la etiqueta a la izquierda y en la parte superior. Estas dos líneas punteadas aquí desde la izquierda y desde arriba. Esto significa que cuando se redimensione el fotograma figma, mantendremos estas distancias desde la izquierda y desde la parte superior. Ahora, el comportamiento que queremos es que cuando el marco esté redimensionando, que las etiquetas se queden en el centro, está bien, Ahora hay dos direcciones en las que se puede cambiar el tamaño de cualquier cosa horizontal y verticalmente. Y ahora eso es lo que significan estos iconos aquí. Mira estos, mira estos aquí mismo. Ahora esto es lo que significa que cuando el marco se redimensiona horizontalmente, Muy debe quedarse la etiqueta? Y cuando el marco se redimensiona verticalmente, muy mostró las etiquetas se quedan. Ahora en nuestro caso, ya que esta es una etiqueta dentro del botón, debe permanecer en el centro del botón. Entonces voy a seguir adelante y cambiar el tamaño de este marco de nuevo a este ancho de botón normal. Y voy a volver a seleccionar la etiqueta de botón. Y para el estiramiento horizontal, para el cambio de tamaño horizontal, le diré a Figma que mantenga la etiqueta de botón en el centro. Ahora mira cómo cambiaron las líneas de puntos. Son estos pequeños, son muy, muy, muy tenues. A lo mejor no puedes ver eso, pero hay estas dos líneas con una pequeña cruz lo que indica que la etiqueta de botón siempre se quedará en el centro. Entonces sigamos adelante y comprobemos si funcionó. Daré clic en el botón que se crea usando el marco, redimensionarlo. Cualquier sí, sí obedece a las restricciones de cambio de tamaño que establecemos. Muy bien, genial. Ahora no hay nadie en su sano juicio que redimensionara verticalmente un botón. Pero sólo por el bien de ello, vamos a dar click en la etiqueta. E incluso cuando se redimensiona verticalmente en este momento es top, mira su top, lo que significa que mantendrá eso como sentido, pero eso no es lo que queremos. Nosotros queremos que se centre también. Por lo que seleccionaré el centro para el redimensionamiento tanto horizontal como vertical y miraré lo que pasa es que se quede en el centro. ¿ No es eso hermoso? Si eres completamente nuevo en averiguarlo estas son las cosas que probablemente ya sabías. Pero de todos modos, nada malo con un breve refresco como ahí. Cambiemos el botón de texto y científicos. Cambiemos la etiqueta. Por supuesto, sin botón, la vida real sólo tiene un botón escrito sobre él. Podría ser algo así como, digamos click para comprar o descargar esto y reproducirlo. Verán que el marco del botón no tiene respeto por el contenido que hay dentro de él. ¿ De acuerdo? Y lo que podemos hacer es, ya sabes, siempre que cambiemos la longitud, nuestra recuperación cambió de etiqueta y la longitud cambia. Podemos seguir adelante y de nuevo tú ahora solo para tal vez tirar de los botones estirados un poco y luego podemos hacer esto. Entonces otra vez. Lo siento. Haz oh, bueno, ahí sí. Haz esta línea el centro y luego renuncia de nuevo. Son y si vamos y lo hacemos demasiado pequeño, desaparece. Ya sabes, la cosa es que no podemos anticipar el texto que va a estar dentro del botón, la longitud de la etiqueta que es. Entonces cada vez que se actualiza y lo hicimos para jalar y apretar los botones para que encajaran. No lo hacen. Y escúchame con atención. Los botones no cambian de tamaño automático. Énfasis en ADL. Aquí es exactamente donde entra el diseño automático. De acuerdo, en el siguiente video, vamos a hacer el botón final. Ahora hemos hecho un botón de texto normal, hemos hecho un botón de grupo, hemos hecho un botón de marco. Y sabemos que cómo cada uno de estos es mejor que el otro. Y ahora nos topamos con el problema donde no podemos, no podemos esperar el redimensionamiento enmarcado basado en el contenido. No podemos esperar que cambie el tamaño automáticamente en función del contenido. Y ahora ya tienes la idea a dónde voy con esto. Entonces te veré en el siguiente video donde haremos un botón de auto cambio de tamaño usando la función de auto-layout de sigmas. Muy bien, nos vemos entonces. 5. Una lección en los botones - parte 2: Bienvenido de nuevo a la segunda parte de diseñar botones. Todo es como lo dejaste, tenemos la misma cantidad de botones en la pantalla y agregamos sus mismas posesiones. Simplemente que el anterior líder se puso un poco largo y nada más que diez minutos no es algo que realmente me guste tanto. Por lo que decidí dividir esta lección en dos partes. En la primera parte, creamos un montón de botones. Vimos todas las diferentes formas que hay. Vimos las compensaciones y vimos las ventosas de usar un marco sobre, sobre, sobre grupo. De acuerdo, ahora, Sigamos adelante y empecemos con esta lección. No puedo esperar ahora como lo hemos hecho hasta ahora, vamos a agarrar una copia de este botón de marco ahora mismo voy a seguir adelante y renombrar esta etiqueta de nuevo a botón solo por sólo para, solo para que todo nos alcance. Y porque tenemos botón, botón, extremidad de botón escrito por aquí, y más tarde en el curso tendremos algo como donde puedas poner cualquier texto, lo que sea texanos, cómo la etiqueta que quieras. Pero por ahora dejémoslo en el botón. Está bien, así que sólo voy a crecer y arrastrarlo su lado para que se vean bien y arreglados. Y lo siguiente que voy a hacer es seguir adelante y presionar Opción y arrastrar una copia como lo hacemos nosotros. Ahora. Cuando hago clic en este botón aquí mismo, el que acabo de arrastrar, nota esta pequeña sección aquí llamó a tierra. ¿ Ves eso? Sí. Sí. Correcto. Eso es todo. Oh, lo siento. mí me pongo un poco me llevan un poco. Esto, esta cosita diminuta de solo un par de píxeles de alto es pura magia. De acuerdo, Ahora, ¿estás listo? Voy a arrastrar esto justo esto firmó la autoplay soy sección. ¿ Estás listo? Voy a seguir adelante y basta con dar click en el Plus y boom, eso es todo. Eso es todo. Este marco de botón está ahora dentro de la disposición automática. ¿Cómo sé eso? Eso es diferente? Miraremos, miraremos el icono en las capas. Muy bien, esto es para clase de grupo de marco, y esto es para el diseño automático. Y no sólo eso, no sólo eso mira esto y cuando presiono T y me meto dentro de ella. Y cambiemos el contenido de etiqueta. Vamos a llamarlo descargar ahora. Y wow, ¿qué acaba de pasar? Aguanta, espera, espera. Aguanta y pulsa, oh Dios mío. Dices el botón, el marco del botón, el botón en general, esto cambia automáticamente el tamaño en función del contenido que está dentro de la etiqueta. Y ahora, ¿no es genial? Ahora toda la emoción a un lado, sé si es la primera vez que ves esto pasando, no quieres escucharme, solo quieres jugar con ella y ver cómo funciona esto. Pero pero espera, aguanta un segundo. Lo que quería decir es que no tienes que pasar por todos los pasos por los que tuve que pasar. Terminas creando un botón y haces un in-group, haciendo un enmarcado ahora y después sacaré un layout. No tienes que pasar por todas estas pestañas para crear un marco de diseño automático. Te mostraré en el siguiente video y hablaremos de caídas. Te mostraré cómo ir directamente al autolayout y te mostraré los atajos que, quiero decir, no hay muchos atajos. Es solo una tarea llegar a nuestro auto-layout, y eso te lo mostraré en el siguiente video. Pero antes de eso, vamos a entender todas las diferentes opciones que se presentan aquí cuando se agrega el diseño automático a un marco. Ahora estas dos flechas aquí mismo representan direcciones. No vamos a necesitar eso en este video. Entonces, está bien, pasaremos al siguiente. Está bien. Ahora hablando de cosas de las que no vamos a hablar ni necesitamos en este video. Pero lo siguiente es espaciar entre artículos. Ahora, esto es relleno alrededor de los artículos. Vamos a hablar de esto en un rato. Y este último es alineación y relleno. Vamos a hablar de algunas partes de ella en este video. Muy bien, empecemos con el relleno. Ahora. ¿ Qué es exactamente panning? Imagina enviar algo, un paquete o sabes qué? Más relable, imagina recibir un paquete de Amazon o cualquier sitio web de comercio electrónico en línea para usar. Este no es un video patrocinado. Está bien. Entonces imagina recibir un paquete, algo frágil, como un vaso o un jarrón o mi corazón, si no te gusta el curso, Simplemente no es directamente que lo que es que recibes, simplemente no se lo pone directamente en una caja de cartón, ¿verdad? Hay algún relleno agregado alrededor del artículo real, envolturas de burbujas o esas almohadas de aire o periódico, ¿sabes a qué me refiero? ¿ Verdad? Entonces en el relleno de interfaz de usuario es espacios en blanco alrededor de un elemento. Ese elemento puede ser texto o cualquier elemento de interfaz de usuario en absoluto, como veremos más adelante en el ejemplo de botón. Tengo un vistazo más de cerca a esto. Ahora este botón aquí está básicamente conformado por los textos, es decir, la etiqueta, el fondo azul y el espacio vacío que está presente alrededor de esta etiqueta. Y cuánto espacio hay a cada lado de esta etiqueta se decide por el relleno. Al hacer clic en la opción de etiqueta y mantener en mi teclado, puedo ver la cantidad de espacio en cada una de las cuatro ciencias. Así que arriba, derecha, abajo, izquierda, y el orden superior, luego a la derecha, luego abajo a la izquierda no es importante para que puedas usarlos. Yo estoy en ello. Habitación con problemas o Lauder. Te diré en un segundo por qué importa este orden. Ahora juguemos con los valores de relleno y veamos cómo afecta el botón. De acuerdo, entonces. Si vas justo aquí donde dice auto lámpara, puedes entrar donde dice mixto. Y sólo ingresemos 12 para apenas alrededor de un número que está por debajo de 12. Y esto, y ahora lo que pasa es cuando pongo 12, el relleno, el espacio alrededor de la etiqueta, el espacio en el que estamos, la etiqueta a cada lado, arriba a la derecha, abajo a la izquierda se establece en 12. De acuerdo, ahora probemos algo diferente. En lugar de escribir 12, voy a escribir unos valores separados por comas. Está bien, entonces déjame escribir 12, 13, 14, 15. Y aquí es donde entra en juego el orden, el orden superior derecha, inferior izquierda. Ahora exagerado, 12, 13, 14, 15. Voy a presionar Enter y ahora mira esto. El top es 12, Ryan 30, aburrimiento, este fondo es 14. Está bien, vamos a ver. Y a la izquierda son 15. Entonces esto es todo lo que son arriba a la derecha, abajo a la izquierda. Y se puede escribir un valor separado por comas para ajustar el relleno o el espacio que está a cada lado. De acuerdo, ahora, esto no es un relleno realista los valores tienen, Vamos a seguir adelante y entrar algunos buenos, realistas valores de botón que ya sabes, que equilibra la deuda, crea una especie de equilibrio visual y el botón, entonces lo que voy a hacer es volver a seleccionar el botón en el marco e ir aquí donde se queda y mezclado y mezclado básicamente significa que no tiene el mismo valor en los cuatro lados. Entonces sigamos adelante y pongamos 15, cuatro top 32 para el puesto 15 para Boston coma 0. No olvides añadir las comas. Y 32 por reído. Voy a seguir adelante y presionar Enter y mira esto ahora. Está bien, también puedo seguir adelante y cambiar el texto que está dentro de este botón a, digamos descargar. Descargar parece una etiqueta de botón razonable. Entonces otra vez, mira los valores, 1532, 1532, top clasificado, bottom left. Muy bien, genial. Y eso es todo. Lo que sea que escribas es VIH está dentro del botón como etiqueta, respetará los valores de relleno y el botón, el marco, el redimensionamiento en consecuencia. Ahora, ¿no es genial? Ahora sé que escribir una lista separada por comas de valores de relleno no es algo que a todos les gustaría hacer. Es decir, me gusta tener mis manos en el teclado y puedo tocar tipo. Pero si eres más una persona visual, puedes hacer clic aquí en este pequeño, ese último cuadrado. Puedes hacer clic aquí, entrar y actualizar manualmente los valores de relleno de cada lado. Así. Así es como se ve. Aquí está, aquí está la cosa. Así es como realmente eres Figma una vez que haces como lo hace la gente normal. Pero lo que expliqué antes, los valores separados por comas acabarían de subir una cosa de superusuario. Entonces sí, sí, haces lo que quieras. Puedes entrar y ajustar los valores de relleno desde aquí. Está bien, está bien, genial. Ahora con eso, terminamos con la parte más carnosa de la lección aquí, haré un poco de limpieza ahora y haré botón de diferente tamaño si quieres quedarte por eso. Oye, eres bienvenido. Ahora, este botón que tenemos es un botón de tamaño mediano, ¿de acuerdo? Y recuerda que seleccionamos etiquetas slash medium, lo que significa, que significaba fuente de tamaño mediano para la etiqueta. Entonces, en general, este botón es un botón de tamaño mediano, pero en una interfaz de usuario, no tienes botones de un solo tamaño. En términos generales, habrá un botón grande, un medio, y un botón pequeño. Entonces vamos a seguir adelante y hacerlos. Y además verás lo fácil que es hacer eso con auto layout. De acuerdo, ahora arrastraremos una copia de esto sosteniendo opción así. Lo siguiente que haremos es seleccionar la etiqueta, bien, este texto aquí mismo y cambiar el estilo para etiquetar lanzamiento. Ahora estamos haciendo un botón grande aquí. De acuerdo, esto es medio para hacer un botón grande. ¿ Qué tal si solo escribimos, escribimos medio para este? De acuerdo, y voy a seguir adelante y arrastrarlo aquí, justo aquí. Entonces de nuevo, volviendo a este botón, voy a seleccionar aquí y cambiar el tamaño de fuente, lo que básicamente significa que font-size para medium es de 20, para más grande 24 que ya he definido para ti. Entonces voy a seguir adelante y seleccionar arco de etiqueta y ves que el botón acaba de crecer de tamaño. Hagamos eso una vez más, vale, sin ajustar nada, voy a seguir adelante y seleccionar Li, construir, lanzar y nombrar. El botón creció un poco de tamaño. Ahora, simplemente cambiando el tamaño de la fuente o la etiqueta, no hace que un botón sea grande. También hay que ajustar un poco el relleno para que se vea visualmente, se vea más grande que el botón mediano o el pequeño. Entonces vamos a seguir adelante y ajustar los valores de relleno. Ahora, voy a seguir adelante y entrar aquí. Dos aristas, los valores de relleno y no tratar de Coma Separados Valores porque ya lo he hecho. Y ya sabes, solo para mostrarte eso como funciona. Entonces voy a seguir adelante y darle un 20 en arriba y abajo así y lo puedes ver cambiando. Cambia. Y luego vamos a seguir adelante y darle un 48 a izquierda y derecha, así. De acuerdo, así que voy a seguir adelante y ponerlo aquí y llamar a este botón grande. ¿ Cómo se ve eso? ¿Es un poco más grande? Por supuesto que se ve más grande. De acuerdo, Ahora, el siguiente, al siguiente, necesitamos hacer este pequeño botón. Está bien, así que otra vez, voy a seguir adelante y arrastrar una copia así. Está bien, genial. Y voy a seguir adelante y seleccionar la etiqueta. Seleccionar etiqueta un pequeño. Está bien, Ahora de nuevo, ver solo hacer pequeñas las etiquetas no hace que el botón se vea visualmente pequeño. También tienes que ajustar el relleno. Entonces voy a seguir adelante y seleccionar de nuevo este marco, voy a escribir por aquí donde dice alineación y relleno, ya lo sabes. Y voy a seguir adelante y poner 10 para arriba y abajo. Y voy a seguir adelante y poner 16 para izquierda y derecha. Y este botón ahora es pequeño. Está bien, Ok, ahora vamos a cambiarlos de nuevo a botones para que sea más fácil de ver. Y yo, los voy a poner de lado a lado para que vinieras contrastar la forma. Está bien, ahí vamos. Tenemos tres botones de aspecto muy bonito y todos en diferentes tamaños. ¿ Qué tal eso? ¿Puedo conseguir un alto cinco o 80? Ok. Ahora, ahora, una vez que tengamos el objetivo final que buscamos, podemos seguir adelante y deshacernos de estas cosas porque por supuesto no las vamos a usar. No son importantes. No son tan sofisticados como las montañas de autodisposición. De acuerdo, Ahora el último paso, vamos a seguir adelante y convertir estos botones en componentes. Los componentes son una parte muy útil de Figma. Los componentes son reutilizables. Puedes usarlas en varios lugares diferentes tiene y puedes leer más sobre ellas y conocer más sobre ellas. Y si nunca has oído hablar de TI, componentes, lo que voy a hacer ahora te daremos una idea bastante sólida. Y también a lo largo de este curso obtendrás una idea bastante sólida de cuáles son los componentes. Entonces bien, vamos a seguir adelante y convertirlos en componentes. Devolver un elemento en un componente o algo capa en componente. Lo que haces es seleccionarlo y hacer clic en este ícono justo en la parte superior que dice Crear Componente. Voy a seguir adelante y hacer clic en eso y ver esto ponerse azul. Habrá este ícono agregado a la izquierda y a la derecha por aquí también. Entonces, solo estar al pendiente de eso. Voy a dar click Voy a jugar. ¿ Ves, ves la diferencia? Está bien, Ahí tienes. Ahora esto básicamente significa que esta cosa ahora es un componente. ¿ Está bien? Entonces voy a seguir adelante y hacer eso. Haz lo mismo con el resto de estos dos botones. Entonces voy a entrar y dar click aquí. Al igual que están click aquí, click allá. De acuerdo, Ahora estos son componentes, pero eso no es todo. Lo que voy a hacer ahora es seleccionar y arrastrar y dar click en esto, esto, esto, esto, esta, esta cosita esto está diciendo es que esto también es una tira mágica si me preguntas, pero está bien, vamos a seguir adelante y dar click en combinado como varianza y verás un borde azul realmente creado a su alrededor. Entonces voy a seguir adelante y dar clic en combinado como varianza 1, 2, 3. Ahí vas. Muy bien, genial, hermosa. Esto significa que todo este asunto. ¿ Sabes qué? Déjame sólo mostrarte. Déjame, déjame pasar por unos pasos más y entonces entenderás mejor la varianza y los componentes. ¿De acuerdo? Ahora bien, no voy a saltar por delante de mí mismo y traté de explicar algo abstracto, que es abstracto hasta que lo hayas visto. Entonces voy a seguir adelante y ya ves que hay este desplegable para poder seleccionar cada uno de ellos. Ahora la, cada capa, dice default, ¿de acuerdo? Y, y puedes hacer doble clic en esta capa y cambiar el nombre. Entonces lo que vamos a hacer es cuando se seleccione esto, se ve el botón Iniciar y seleccionarlo para que podamos, podemos crear nuestros propios valores aquí son solo par de valor clave aquí. Por lo que puedo escribir este botón veces x grande. Puedo darle un tamaño de grande, y esto es completamente arbitrario. Eso es algo que estoy eligiendo el nombre de la propiedad, que es tamaño y lo estoy llamando grande. Y yo haré lo mismo por este de aquí, que son los botones medianos. Para que pueda seguir adelante y hacer doble clic y lados derechazos. Mediano. Está bien, genial. Ahora puedo seguir adelante y para el pequeño, hacer lo mismo. Yo puedo, ¿verdad? Tamaño igual a pequeño. Está bien, ahora si estás totalmente hecho, lo único que queda por ver es cómo, por qué hicimos esto y cómo se comportan los componentes y la varianza. ¿ De acuerdo? Ahora, si miras en la parte superior, esta pequeña franja delgada de aquí, dice capas detrás de eso hay esta cosa llamada activos. Por lo que voy a dar click en él y verás componente local y se agrega este botón. Ahora antes de crear el componente, quizás no lo hubieras visto. Es decir, porque no hay componentes, no hemos visto un componente local. Ahora, esto significa que un componente se puede sacar un año y poner cualquier vector en la interfaz de usuario tantas instancias como queramos. De acuerdo, y todos están conectados a esto. ¿ De acuerdo? Ahora mira esto. Ahora mira, mira qué tamaño de creación es igual a tamaño mediano y almacenamiento en frío y tamaño es igual a pequeño, que es ritual básicamente llamado la variante Feature y Figma lo hace. Puedo seleccionar cualquiera de la instancia, ¿de acuerdo? Ves aquí mismo donde dice talla grande, puedo seguir adelante y recoger, digamos medio. Muy bien, entonces el botón ahora es medio, y puedo seguir adelante y seleccionar pequeño, y el botón ahora es pequeño. Ahora esto significa que en cualquier parte de mi interfaz de usuario, si estuviera creando una tarjeta y quisiera el botón, solo podría arrastrarlo hacia fuera y vamos a salvar el día. Era una señal de forma que yo estaba creando. La tarjeta era sobre ciencia, así que sólo puedo escribir, apuntarme y luego, ya sabes, entonces decidí, Vale, no, no, quiero un botón de tamaño mediano ahí. Entonces todo lo que puedo hacer es solo hacer clic en él y elegir medio, y eso es todo y todo funciona. Tan grande y la armonía no es tan hermosa. Y más que eso, ya que todos estos botones, todos estos botones desplegables, nuestras instancias de esta justo aquí, todo este centro de la verdad. Si hago algún cambio aquí, se verá reflejado en todas las instancias. Digamos por ejemplo, que no quería el botón sólo unos días por la línea y decidir, vale, botones azules. Quiero que los botones se vean grises para poder seleccionar Grey 0 y bam, se refleja en cada lugar. ¿ Qué tan guay es eso? Ahora, sólo por el bien de este curso, claro que me gusta el azul, así que voy a seguir adelante y cambiar de nuevo al azul. Entonces seleccionaré todos estos. Acude a esta grilla. Dice Gris 0 y azul ligero y así y todo. Entonces beta y me desharé de todo esto porque no me gusta eso. De acuerdo, así que eso fue todo. En esta lección, aprendimos tanto igual que la segunda parte, y ya estamos más de 10 minutos, pero hay tanto, había tanto aprendido. Empezamos creando botones de texto, y pasamos a crear botones de diseño automático. Y luego pasamos a crear diferentes tamaños de ellos y luego recombinarlos en la varianza para que puedan ser utilizados en diferentes lugares de la interfaz de usuario. Hicimos tanto, lo hiciste tanto, y también estamos orgullosos y ya puedes tomarte un descanso. Y te veré de nuevo en el siguiente video donde estaremos reforzando nuestro juego de auto-layout y creando un componente un poco más complejo. De acuerdo, nos vemos entonces. 6. Hacer un Dropdown de arriba: De acuerdo, Entonces los botones fueron bastante sencillos. Solo utilizamos una o dos características de auto-layout, como cómo crear un marco de diseño automático o cómo agregar el diseño automático a un marco. Y cómo establece el relleno dentro del marco desenvolverá algunas características más de diseño automático en este video. Y rápidamente echemos un vistazo a lo que estaremos haciendo juntos en este video. Entonces lo que tienes que hacer es entrar en dominar Figma ellos magia de Ottaway en terminado y dar clic en los menús desplegables, las páginas desplegables justo debajo de los botones. Y muchas veces, ya sabes, si no te resulta familiar, muy familiar la interfaz de usuario de Figma, a veces las páginas está, está colapsada, así que tienes que hacer clic en este botón aquí mismo, y luego aparece. Y luego puedes hacer click en los desplegables y mirar esto. Mira cómo mira el componente el elemento de interfaz de usuario que estará diseñando juntos en este video es como este es un componente selector que sabes que este es el nombre que le di. Puedes llamarlo lista o puedes llamarlo tarjeta o lo que quieras. Y funciona maravillosamente. Mira, puedo agregar más de esto y luego puedo redimensionarlo correctamente. Mira cómo el botón siempre se queda en la parte inferior. Y si renunciaba a su loci horizontalmente, todo cambia de tamaño bellamente. Por lo que esto será un poco de un paso adelante de todo lo que diseñamos en el último video, que solo eran botones muy normales. Entonces, está bien, volvamos aquí y pongámonos a trabajar. Así que asegúrate de estar dentro del archivo de inicio y luego asegúrate de estar dentro de la página desplegable. Así que haz click en la página desplegable y estará totalmente vacía porque la vamos a llenar con un montón de cosas geniales de interfaz de usuario de diseño automático. De acuerdo, Ahora en el último video, me viste hacer un montón de maniobras para finalmente crear un elemento de diseño automático. El botón que es, y como prometí, no tienes que hacer esas maniobras, así que hay un atajo para eso. Está bien. Y voy a mostrar te lo voy a mostrar ahora mismo. De acuerdo, Entonces lo primero que vamos a hacer es escribir algunos textos en el lienzo. ¿ Y cómo hago eso? Si o hago clic en la herramienta Texto o simplemente presiono D y luego clic en un Canvas en cualquier lugar y empiezo a escribir. Ahora voy a teclear, digamos opción, vale, Ahora, asegúrate de que la opción tenga uno de los textiles que he definido aplicándolo. Por ahora, voy a elegir etiquetado grande para ello para que se vea así. Eso se ve genial. Vale, Ahora para anidar este y ese es este texto dentro y en última instancia en marco, todo lo que tenemos que hacer es asegurarnos de que el texto esté seleccionado y pulsar el atajo Shift más a, OK, Shift más a. Y ahí tienes. Es dentro y marco de diseño automático. ¿Cómo sé eso? Mira, mira, mira libre escrito por aquí. Mira el panel de capas de iconos y mira en el lado derecho donde se activa la tira delgada de auto-diseño, el partido será delgada tira ahora. ¿ Qué tan guay es eso? Ahora vamos a darle al marco que acabamos de crear, un color de fondo, vale, Vamos a escoger un color de los estilos de color. Qué tal gris 0, vale, genial, y cambiaremos el color del texto a blanco. ¿ Y cómo hacemos eso? Simplemente hacemos click en los estilos de color y elegimos el blanco. Justo así. Lo siguiente que queremos hacer es que quisieran y solo el relleno. Ahora si lo estás siguiendo, lo que tienes que hacer es darle 16 píxeles relleno en la parte superior e inferior y 32 en la horizontal. Así que adelante y a ver si puedes hacer eso mientras yo hago lo mismo. Está bien, así que vamos a darle un relleno de 16 arriba y abajo, así como así. Y a izquierda y derecha, le vamos a dar un relleno de 32. A continuación, lo que voy a hacer es darle a este marco un radio de esquina de ocho. Y vamos a presionar un ocho y hacer clic en Entrar y mirar eso. Y la mejor parte de todo esto es mucho hacer tanto. Estamos dando espacios estaban dando colores y esquinas redondeadas y todo esto como una sola unidad. ¿ Qué hermoso es eso? Mira el panel de capas. No hay desorden en absoluto. Es sólo una sola unidad. Y ahora sigamos adelante y comprobemos si está redimensionando correctamente. De acuerdo, así que voy a seguir adelante y estirar horizontalmente. Y sí lo es. Y recuerda, a diferencia de botón donde nos gustaría que la etiqueta se alineara en el centro, queremos que este elemento de la interfaz de usuario tenga texto siempre a la izquierda. No obstante, el marco se estira en redimensionamiento ahora para asegurarse de que está sucediendo. Y por cierto, el figma ya lo ha puesto a la izquierda por defecto, todo lo que necesitas hacer es hacer click en esto, click en la misma plaza donde estás ajustando el relleno. Y recuerda que dice no solo relleno sino alineación, alineación y relleno, lo que significa que también puedes ajustar la alineación. Entonces, por ahora, la alineación es central e izquierda. Hay otras opciones, tres en la parte superior, tres en el medio, y tres en la parte inferior. Entonces por ejemplo, esto es top e left y voy a elegir izquierda y centro. Entonces eso es todo. Y ahora si lo redimensiono horizontalmente, ves que se queda a la izquierda, como si se hubiera elegido aquí en la sección de alineación. Y si lo redimensiono verticalmente, ve que aún queda en el centro como se ha elegido. Y se acaba de decir, se ha dirigido a mantenerse en el centro así y siéntete libre de jugar un poco con la alineación y conseguir un mejor ahorcamiento de ella. Por ejemplo, si estoy seleccionando este marco y cambio la alineación al centro, se comporta como el botón que permanece en el centro. Minutos redimensionar. Entonces otra vez, voy a seguir adelante y seleccionar aquí y ponerlo a la izquierda como queremos. Puedes, ya sabes, como dije, jugar por ahí si la mantengo en la parte superior y la izquierda y redimensiono, se queda en la parte superior y en el lado izquierdo. Sí, eso es realmente genial. De acuerdo, Así que voy a seguir adelante y poner todo a través como estaba, donde la alineación estaba en el medio y a la izquierda. Y lo dejaré ahí. Y sigamos desarrollando nuestro elemento de interfaz de usuario. Ahora hasta el momento, sólo hemos hecho esta parte de todo el componente, esta parte de opción. También necesitamos construir el contenedor y notar que conducirá múltiples de estas opciones, lo que significa reusabilidad, lo que significa que vamos a convertir esto, esto aquí mismo a unos componentes, esta leyendo esta opción dos. Y eso girará la capa de texto y cambiaremos el nombre de la capa de texto, quiero decir, y llamaremos a y LA la etiqueta l. Y de nuevo, voy a seleccionar el marco y a convertirlo en un componente. Ya sabes qué hacer. Da clic en este ícono justo por aquí y bam, es ese componente ahora, lo que significa que puedo entrar en activos y tirar de tantos de Ed como i1, 1, 2, 3. Y si hago el cambio, hago algún cambio a mi componente principal, como cambiar el color de fondo. Se verá reflejado en todas las copias hasta el momento, tan bueno. Ahora te voy a mostrar un flujo de trabajo que te encontrarás usando una y otra vez en tu rutina de diseño de UI. Yo ya, como dije, se puede arrastrar una instancia del panel de activos de este componente así. Y hay otra forma de arrastrar una instancia. Hace mi retención Opción y arrastrando una copia del componente principal. Y antes, como te mostré, si era un rectángulo normal o algo que no es un componente, puedes Opcionar y arrastrar para crear una copia del mismo. Pero si haces la misma opción de acción, arrastra un componente, arrastrarás hacia fuera e instarás y mirarás el panel de capas, que las instancias aparezcan con un cuadrado girado de 45 grados. También se llama la forma, creo que también se llama rombo. Y mira cómo aparece el componente principal, pero cuatro cuadrados apilados así. Está bien, genial. Entonces con estos dos componentes, estas dos instancias del MainComponent fuera, los puedo poner aquí. Y lo siguiente que quiero hacer es ponerlos en una reproducción automática en marco. Y esta es la rutina de la que hablaba a menudo lo que pasa es que tenemos instancias de un componente y queremos arreglarlas juntas, como por ejemplo, en este caso queríamos ponerlas en una lista. Muy bien, así que voy a seleccionar estos dos y presionar Shift a y ver cómo automáticamente se pone dentro de un diseño automático de componentes. Así que selecciónalos a ambos, pulsa Shift a y mira eso. Está dentro de un marco y mira en el panel de capas está dentro de un marco. Entonces voy a seguir adelante y antes que nada, leer este marco a algo como caído. Está bien, bastante guay. Y mira esto. Dado que estas opciones, estas instancias de este componente de opción están dentro de un marco auto, de diseño automático. Lo que puedo hacer es presionar Command D y se agregarán automáticamente y el espaciado entre ellos se mantendría bastante bonito, bastante consistente porque están dentro de un marco de diseño automático. Entonces otra cosa que puedo hacer, lo que me lleva al espaciado entre parte de la tira de autodiseño es que estás saliendo. Simplemente puedes ajustarlo arrastrando y esto cambia. Creo que el nombre es muy así X autoexplicativo. Simplemente espaciaría entre elementos, datos, y firmó el componente. Y para éste, queremos mantenerlo a las 10. Entonces voy a escribir 10 y presionar Entrar y mirar esto, el espaciado entre cada uno de ellos, cada una de las opciones es de 10. ¿ Cómo, cómo, cómo será eso, qué genial es eso? Y lo siguiente que voy a hacer es seleccionar el marco y darle un color de fondo de gris. Entonces ahí lo tienes. Ahora tiene un color de fondo. Y lo siguiente que queremos hacer es darle un relleno de 12 en los cuatro lados. Entonces en lugar de, en lugar de entrar aquí y escribir 12 cuatro veces, lo que puedo hacer es solo, soy demasiado viejos aquí, presione enter y el relleno de 12, habrá agregado en todas las etiquetas. Mira eso. Eso es genial, ¿no? Eso es bastante guay. Y mientras estamos en ello, lo que voy a hacer a continuación es darle una esquina redondeada de 12 píxeles. Por lo que 12 Entrar. Y ahora mira esto. Vamos a lo genial que parece un desplegable de Listas adecuado. Y la mejor parte de esto es que puedo agregar componentes, agregar, perdón, agregar instancias de opción dentro de la lista. Puedo quitarlos y la altura y todo está auto ajustado. Muy bien, bastante bien. Ahora, solo para recordar que este es un marco de diseño automático y las opciones también se crean usando el diseño automático, lo que significa que puedes anidar marcos de diseño automático dentro de marcos de diseño automático, y no tienes idea de lo poderoso que es eso. Veremos algunos ejemplos realmente geniales de este tipo más adelante en el curso. Pero por ahora, note esto, si redimensiono este marco, este marco desplegable horizontalmente, las opciones no cambian de tamaño. ¿ Por qué es eso? Ahora, si selecciono una opción, si selecciono una de las opciones desde dentro del marco de diseño automático, notarás que hay este estrés de cambio de tamaño que aparece justo debajo de esa tira de diseño automático. Si miro las restricciones de cambio de tamaño horizontal, lo que significa que si se redimensiona horizontalmente, dice ancho fijo, que no queremos. Queremos que llene el contenedor que tenga perspicacia. Por lo que voy a dar clic aquí y elegir Rellenar contenedor así como así. Y ahora ves que el marco se estira automáticamente y llena el contenedor. Aquí hay otra opción llamada contenido abrazo, lo que significa que la opción sólo ocupará espacio suficiente para sostener el contenido que hay dentro de él, que no queremos en este escenario. Queremos que llene los contenedores. Entonces sigamos adelante y seleccionemos Contenedor completo, y haremos lo mismo por el resto de estas opciones aquí. Así que selecciónelos todos y adelante y cambie su restricción de cambio de tamaño o las restricciones de cambio de tamaño horizontales para llenar un contenedor. Y mira eso y si lo redimensiono ahora, vale, ahora bellamente cambia de tamaño. Ahora se puede decir, ¿por qué no puedo simplemente decir restricciones de cambio de tamaño en el componente principal aquí del cual estos son básicamente solo instancias de y se hacen. Bueno, ves algunas cosas en instancias sobre rideable, como el color de fondo o por una instancia, por ejemplo, puedo seguir adelante y cambiar el color de fondo de esta instancia y afectará sólo a esta instancia en particular. O puedo seguir adelante y cambiar los detectos que hay dentro, por ejemplo, llamémosle un portátil o como sea, ya sabes, palabras aleatorias. Por lo que estas cosas están sobreescribibles. Y al igual que estos a la restricción de cambio de tamaño también es sobregrabable porque no podemos anticipar el contexto en el que una instancia en particular podría ser utilizada en Figma nos da la opción de elegir el cambio de tamaño, limitando para cada instancia individualmente. Ahora, de nuevo, si sigo adelante y redimensiono el marco, mira lo bellamente que renuncia como debería. Pero ¿qué pasa con el cambio de tamaño vertical? Como saben que la altura de este marco de auto-diseño según lo calculado por los elementos que sostiene y el espacio entre cada uno de los elementos, que hemos establecido justo aquí en el espaciado entre elementos. Y obedece a eso porque mira aquí, si haces click en la última plaza y miras la parte inferior, la parte inferior más parte, dice pacto, lo que significa que calculará y empaca el contenido con fuerza. Y de ahí, si redimensiono verticalmente este marco, ve que los elementos siguen empaquetados, pero puedo cambiar el empaque aquí mismo de empaquetado al espacio entre y mirar lo que sucede. El espacio entre los elementos se establece en auto. Y si redimensiono esto verticalmente hacia abajo, todo solo se extiende a medida que se redimensiona el marco, vuelva a mirar un uso real del espacio entre empacar en un poco. Pero por ahora volvamos todo a medida que trabajamos. De acuerdo, genial, Ya casi terminamos aquí. Lo siguiente que queremos hacer es arrastrar hacia fuera y botón componente desde el panel de activos. Recuerda que este es el componente de botón que se crean en las dos lecciones anteriores. Entonces voy a arrastrarlo y ponerlo justo al lado. Ahora bien, este es un botón de gran tamaño. Nos veríamos mejor a su lado, probablemente un tamaño mediano. Entonces sí, se ven mejor juntos. Y lo siguiente que queremos hacer es poner el botón dentro de este mismo marco. Entonces para hacer eso, todo lo que tengo que hacer es simplemente arrastrarlo así. Y ahí tienes. Y eso lo puedo decir dentro del marco porque cuando arrastro este marco, mira eso, también arrastra por ahí. Ahora este es un escenario muy común mientras se usa el diseño automático. A menudo lo que sucede es cuando pones algo dentro o, ya sabes, haces un cambio y de repente te das cuenta de que el marco no está redimensionando. Esto se debe a que a menudo hacemos algunos cambios que dan como resultado las restricciones de cambio de tamaño para cambiar a ancho fijo y una altura fija. Y siempre que nos encontramos con un escenario como por ejemplo, este momento la altura no se está ajustando adecuadamente. Todo lo que tenemos que hacer es ir aquí, seleccionar eso y dar click en los contenidos del HUD y mirar eso. Simplemente ya está dentro de ella y de nuevo el botón. Lo siguiente que quiero hacer es que los botones estiren todo este ancho. Y de nuevo, ¿cómo nos aseguramos de que lo haga? Volvemos a entrar en restricciones de redimensionamiento. Y ahora mismo dice contenido de abrazo, lo que significa que sólo será lo suficientemente ancho para caber el contenido que hay dentro de él y sí que lo haga llenar el contenedor que está dentro. Lo que tenemos que hacer es ir, ir aquí y las restricciones de cambio de tamaño horizontal y dar clic en Rellena contenedor y mira eso. Se llena todo el asunto. Y tenemos un problema aquí que el botón que el texto dentro del botón no está en el centro. Y supongo que puede que me haya perdido eso. Puede que no haya elegido correctamente el alineamiento. Entonces déjame seguir adelante y ver que en esto, en estos componentes que creé y por supuesto Read, la alineación no está en el centro, así que esperaré, seleccionaré los tres y me aseguraré de que estén todos alineados centralmente. Y si vuelvo a los desplegables, ves que el texto está ahora en el centro para el botón. Se ven estas tonterías de ella. El diseño automático suele suceder. A veces se olvida que hay restricciones, a veces se olvida la alineación, pero son muy fáciles de arreglar. Como me viste hacer justo ahora. Está bien. Ahora, lo único que queda por hacer si tienes si me vas a seguir hasta el archivo terminado, es arreglar todo de una manera que se comporten así. Dices incluso un elemento entero redimensionar verticalmente. El botón se queda en el botón mientras que la lista se mantiene alrededor de él en la parte superior. E incluso cuando redimensiono todo horizontalmente, todo simplemente cambia de tamaño como, como chip. Entonces puedes seguir adelante y tratar de hacer esto, replicando este comportamiento si te estás cayendo o simplemente puedes hacer lo que yo hago, vale, Así que lo primero que tenemos que hacer es que necesitamos separar las listas y los botones en este momento estos opciones, quiero decir, las opciones de ese botón, ahora mismo estas opciones y el botón están en el mismo fotograma. Entonces lo primero que haremos es seleccionar todas las opciones y ponerlas dentro de un marco. ¿ Y cómo hacemos con eso? Acabamos de limpiar todo, asegurarnos de que cada opción esté seleccionada y el botón no esté seleccionado. Una vez seleccionado todo, todas las opciones son algo así. Presiona Shift a. Y lo que esto hará es ponerlo dentro, poner las opciones dentro de su propio marco. Y voy a seleccionar este marco, hacer doble clic sobre él y llamarlo OPT I ON opciones. De acuerdo, entra, genial. Y ahora lo siguiente que quiero hacer es que queremos seleccionar las opciones, este marco aquí mismo, darle algo de relleno. De acuerdo, así que sigamos adelante aquí mismo. Ya sabes dar relleno a un marco de diseño automático. De nuevo, voy a seguir adelante y darle un relleno de 12. Entonces haz click ahí para agregar 12, y eso es todo. ves, ahora mismo se ve un poco revuelto, pero vamos a configurar luego ajustar un poco esto. Lo siguiente que voy a hacer es seleccionar el marco desplegable más exterior y cambiar su color de fondo a, digamos gris a, ok. Y estas opciones enmarcan aquí mismo, voy a seguir adelante y establecer su color de fondo a, digamos uno gris. Está bien, genial. Y mientras estoy en ello, voy a seguir adelante y darle una esquina redondeada de 12. Está bien, genial. Lo único que hay que arreglar en este momento es el cambio de tamaño del marco más exterior. Y como acabamos de ver, a menudo sucede, papá, se dice que la restricción fija. Y todo lo que tenemos que hacer para arreglar que es dar click en él y dar click en HUD condensar. Y ahora mismo dice muy claramente visible que tenemos un marco más exterior. Tenemos un marco incitado que contiene opciones, y tenemos un botón justo por aquí. Ahora, sigamos adelante y cada vez que hagas esto, cada vez que creas un marco, tu marco anidado, Es bueno cambiar el tamaño y comprobar si todo funciona correctamente. Ahora este botón para redimensionar correctamente, pero este marco no lo es. De nuevo, ¿cómo arreglo eso? Al igual que este marco va justo por aquí y así me siento contenedor, bien, genial, Ahora este juego de relleno, pero las opciones no lo son. Entonces voy a seguir adelante y seleccionar todos de nuevo y seguir adelante y cambiar esto para llenar contenedor. Y ahora si cambio el tamaño de esto, se ve todo lo bellamente que los científicos de raza no recuerdan que es muy fácil frustrarse. Entonces los marcos de diseño automático que los marcos anidados no funcionan como los anticipó también. Pero recuerda que lo que tienes que hacer es asegurarte de que las restricciones de cambio de tamaño estén establecidas correctamente. Muy bien, ahora para redimensionar vertical, voy a seleccionar desplegable. Y si miro aquí, dice empacado. Y como dije, y como ya expliqué antes, qué significa Pack deberías poder anticipar lo que va a pasar si lo redimensiono verticalmente. Por supuesto, todo sólo queda empacado. Ahora si sigo adelante y cambio esto al espacio entre, mira lo que pasa ahora. Genial, Esto se queda justo aquí y un espacio entre asegura que todo sólo se propaga, y luego todo el elemento se redimensiona verticalmente. El espacio entre sí se ajusta automáticamente, como dice aquí. Auto. Está bien, esto es genial. Esto es genial. Aprendimos mucho en este video, pesar de que por la pequeña cantidad de opciones que tiene el auto-layout, Hay mucha complejidad en él, y hay muchos componentes hermosos y poderosos que puedes crear a partir de ella, como vimos justo ahora. Y ahora, si estás usando esto como componente o lo sabes, quieres reutilizarlo en cualquier parte del diseño de tu interfaz de usuario. Lo que sugiero que hagas es seguir adelante y convertirlo en un componente para que, para que puedas arrastrar múltiples de estos hacia fuera, sobre, múltiples de éstos hacia fuera y usarlos en cualquier lugar que quieras. Y con eso, con eso, terminamos con este video. Y en el siguiente, vamos a hacer algo realmente genial. Entonces espero que te quedes por ahí y espero que aprendas algo, y te veré pronto. 7. Dos diseños de paneles: En el último video, hicimos este pequeño selector o elemento de interfaz de usuario desplegable, todo usando auto-layout y cambia de tamaño maravillosamente tanto horizontal como verticalmente. Estaremos reutilizando esto en el siguiente ejemplo, en ejemplo de que vamos a estar repasando en este video. Y será sencillo porque ya hemos creado un componente fuera de él y fue presidente en nuestro panel de activos. Podemos sacarlo del panel de activos donde queramos y donde queríamos sacarlo es en la página de los dos paneles, asegúrate antes que nada, si estás siguiendo, lo cual realmente espero que estés, tú están en la magia del archivo de inicio de diseño automático y en la página de dos paneles, entra en activos y saca mi desplegable así. Bastante cool. Lo siguiente que queremos hacer es agregar un montón de texto a este lienzo. Y para hacer eso, solo voy a dar clic en la herramienta Texto, arrastrar un rectángulo como este, y ahora podemos empezar a escribir dentro de esta caja. En primer lugar, vamos a agarrar algún texto de relleno Tengo figma tiene página de Wikipedia se abre. Entonces voy a seguir adelante y agarrar el primer párrafo, comando C, entra en mi cuadro de texto, presiona Comando V. Muy bien, genial, vamos a deshacernos de este corchecito cuadrado que no vamos a necesitar son solo, no es importante si está ahí o no. Entonces solo por mi placer, lo eliminé. Está bien. Entonces una vez que tengamos el texto, lo siguiente que haremos es elegir entre uno de los textiles que he definido. Y para este vamos a elegir cuerpo normal. Entonces sí, genial. Se ve, se ve bastante bien, ¿no? Y cambiemos el color de esto a gris 0. Está bien, genial. Y lo último que vamos a hacer con un texto es hacer click en estos tres puntos aquí, redimensionar y asegurarnos de que la altura automática como se selecciona. Cuando se selecciona la altura automática, si edito el texto, ve la altura de este cuadro y simplemente automáticamente, y si redimensiono esto o se estira horizontalmente incluso entonces la altura de la caja es auto lo ajusta, que es bastante grande, y también se asegura de que el texto esté alineado a la izquierda. Por el momento, tan bueno. Lo que quieres hacer ahora es poner este texto que hemos escrito aquí y este desplegable componentes juntos en un componente grande como este, como tengo en el acabado, terminado la magia del auto-layout terminado archivo bajo un dos paneles página, ya sabes, alguien así y tenerlos juntos en tenerlos redimensionando muy bien así. Y si los redimensionas, verticalmente, cambia de tamaño muy bien de nuevo. Y si me quito algo de aquí, otra vez, todo justo, oops. Quise decir a través de una opción, todo se ajusta correctamente. De acuerdo, Ahora volviendo al archivo de inicio, nuevo, necesitamos ponerlos juntos en un marco. ¿ Cómo hacemos eso? Nuevamente, los seleccionamos ambos y presionamos el atajo Mayús más a. Y ambos están dentro de un solo marco ahora y mira el icono en el panel de capas. Mira los derechos de esta tira de autodiseño. Está presente, lo que significa que el diseño automático se ha aplicado en ambas cosas están anidadas dentro de un marco de diseño automático. Ahora, antes de seguir adelante y hacer más cosas con él y hacer algunos cambios y hacer que este esqueleto de una cosa se vea como la cosa terminada. Hay algo de lo que necesitamos hablar. lo único que aún no hemos discutido del todo en profundidad, y esa es la dirección del auto-layout. Ahora vamos a subir un poco sosteniendo el espacio y arrastrando sobre el lienzo así, ven a un área clara y déjame dibujar dos cuadrados sobre un lienzo, 12, Muy bien, genial. Y asegúrate de que sean de las mismas dimensiones. Está bien, genial. Ahora, pongámoslos juntos en un marco armado en curso. ¿ Cómo haces eso? Seleccionas ambos y presiona Shift a, y ahora están dentro de un cuadro felizmente en. Aquí aparecen un montón de opciones. E incluso dentro del panel de capas, se ve que el icono cambia en ambos rectángulos están dentro de ese marco. Ahora supongo que ya habrías jugado con esto, pero no es ciencia cohete, es bastante simple en realidad, buscando iconos en el panel de capas para este marco de diseño automático, mira cómo los rectángulos en el icono se apilan verticalmente, ¿verdad? Esto muestra la dirección en la que el diseño automático está ordenando los elementos en el marco. Y lo mismo se itera con esta flecha aquí mismo. Mira, se selecciona vertical si cambio la dirección de apilamiento o disposición de esta de los dos rectángulos dentro de este marco a horizontalmente haciendo clic en la flecha aquí, mira todo lo que sucede. Voy a seguir adelante y dar click en dirección horizontal. Otra vez. Ahora están dispuestos horizontalmente, e incluso en el panel de capas, el icono cambió a dos rectángulos apilados horizontalmente. Ahora, eso es todo lo que hay para conocer los fundamentos de todo lo que hay que saber sobre las direcciones. Y esto fue lo último que se requería para me repasara en cuanto a todos los aspectos de la lejana salida. Entonces, dondequiera que estés, volvamos a nuestro componente ahora. Ya que hacen cosas que necesitamos para el componente esté dentro y marco de diseño automático. A partir de aquí, todo se trata de ajustar los ajustes y jugar un poco con las perillas. De acuerdo, empecemos por renombrar esto, este marco uno a dos paneles. Por lo que no mover adultos con tan solo dos paneles. Y vamos a dar algo de relleno en todos los lados de este marco y también darle un color de fondo para el relleno. Vayamos con 24. Entonces de nuevo, si quiero culpar a los, todos los cuatro lados a la vez, voy a dar clic aquí y escribir 24. Y un relleno de 24 unidades o 24 píxeles para aplicar por todos los lados de este pequeño componente. Por el momento, tan bueno. A continuación, vamos a darle un relleno de tres grises así, y vamos a darle un radio de esquina redondeada de 12. Ahora recuerda que los dos elementos están apilados horizontalmente lado a lado como está representado en este ícono aquí, y como se muestra en este ícono de flecha justo por aquí, si lo hago vertical, lo será, se verá bastante diferente así. De acuerdo, Pero volvamos a hacerlo horizontal. Ahora ajustemos el espaciado entre estas dos cosas que están dentro en este momento el espaciado entre ellas es de 103, que es bastante grande. Y, ya sabes, puedo cuadrar sobre ellos y el espaciado aumentará o disminuirá, pero pongamos eso en un número, algo así como 32. ¿De acuerdo? Muy bien, genial. Ahora se ve muy bien dispuesto aquí hasta que, hasta que lo intentemos debería redimensionarlo. Empecemos estirándolo horizontalmente primero, vale, y no, eso no es lo que queremos. Ahora hay dos cosas que podemos hacer aquí. Número uno, podemos decidir que el ancho del desplegable o esta seleccione su componente o como sea el nombre que desee llamarlo, permanezca igual mientras el ancho de los textos se expande al redimensionar. Para eso seleccionaremos el texto, vale, tienes placa final. Preste mucha atención aquí. Seleccionaremos el texto y cambiaremos su tamaño de ancho fijo para llenar el contenedor. Si bien este componente, este, el selecto el desplegable permanece ancho fijo. ¿ De acuerdo? Y ahora veamos cómo se comporta cuando lo redimensionas horizontalmente. Entonces, está bien, Genial. A ver, a ver qué bellamente tres científicos. Entonces todo lo que le dijimos a Figma fue asegurarnos de que sea el tamaño que quede dentro de este marco, el texto lo llene que esté lleno contenedor. Y pase lo que pase, sea cual sea el tamaño de esto como le dijimos a Figma que mantenga este componente de ancho fijo. Y eso es lo que Figma es. Y ahora que lo redimensionamos, el texto fluye mientras éste se mantiene fijo y sus dimensiones. Ahora, por el contrario, podríamos querer que este componente cambie de tamaño y se expanda al cambiar de tamaño mientras el texto sigue siendo ancho fijo para eso, pero vamos a cambiar las restricciones de tamaño, hacer que el texto sea ancho fijo, y hacer que esto el componente desplegable para llenar el contenedor y mirar lo que sucede cuando cambio el tamaño ahora. De acuerdo, ¿qué guay es eso, verdad? Además, podemos querer que ambos escalen con el contenedor o con el marco exterior, en cuyo caso seleccionaremos ambos y cambiaremos ambos de sus restricciones de cambio de tamaño, las restricciones de cambio de tamaño horizontales para llenar contenedor. Y ahora si cambias el tamaño, ambos, ajusten el ancho. Está bien. Está bien. Asiento CSAC. Creo que me quedaré con este selector, este componente, el desplegable, estoy llamando seleccionarla una y otra vez porque solía llamarlo así, pero ya sabes, el nombre no importa aquí. Yo sólo quiero que sepas eso, ¿de acuerdo? Entonces me pregunto que este componente sea de ancho fijo y quiero que esto sea redimensionable, que es contenedor Phil. Y estamos de vuelta en la opción uno. Perfecto. Ahora para el cambio de tamaño vertical, que actualmente no es nada para el re-dimensionamiento vertical, queremos que este componente desplegable, este elemento aquí mismo, estire y llene el contenedor cuando se redimensiona verticalmente. Entonces vamos a seguir adelante y seleccionar esto, ir a la restricción de redimensionamiento vertical y cambiarla de altura fija para llenar un contenedor. Ahora cuando lo redimensiona verticalmente así, dices que cambia de tamaño correctamente. Efectivamente muy grandioso. Tenemos todo preparado. Más o menos una cosa. ¿ De acuerdo? ¿ Y si aumentáramos el contenido en el texto para que el desbordamiento sea ese contenedor. Entonces en lugar de meter un montón de textos, lo que voy a hacer es quitar un par de opciones de aquí. Para que yo pueda hacer eso. Eliminar, borrar, déjame quitar un par de opciones. O lo que puedo hacer es simplemente entrar en el panel Capas y ocultar un par de opciones y redimensionarlo así. Ahora, si sigo adelante y lo estiro hacia abajo, y sigo adelante y lo hago verticalmente también. De acuerdo, ahora ves que el texto está desbordando. Ahora este es un escenario muy común. Esto, esto sucede todo el tiempo con auto-layout, con lo que es, se ha instruido. Por lo que me he dado cuenta de esto cada vez. Yo, voy a seleccionar el panel más exterior, el componente principal aquí, la cosa individual que hicimos y redimensionarlo. Lo que sucede es al cambiar el tamaño de las restricciones que haya aplicado a este marco exterior en particular cambia para fijar tanto por ancho como por alto. Y cada vez que eso sucede, ya sabes, las cosas pueden desbordarse y salir. Y para arreglar eso, lo más simple que se puede hacer es averiguar, vale, si esto se desborda verticalmente, lo único que voy a hacer es ir a la restricción de cambio de tamaño vertical y cambiarla para abrazar contenidos. Y cada vez que hagas eso, cambiará automáticamente el tamaño. Y B, solo alto o alto o lo suficientemente ancho como para caber el contenido que hay en él. Ahora, siempre y cuando se seleccione el contenido de abrazo. Ahora, ahora mira esto. Volveré al punto anterior que hice, que está en volver a dimensionar lo que hace Figma es cambiar la restricción para arreglar. Por lo que ahora mismo mira la vertical dice cómo los contenidos, pero en cuanto voy adelante y lo redimensiona , se remonta a la altura fija, lo cual es muy comprensible. De acuerdo, ahora, siempre y cuando esto diga que mientras esté redimensionando la restricción para todo el fotograma es un contenido HUD. Aunque lo haga, ves que el marco cambia de tamaño correctamente, ¿de acuerdo? Y si sigo adelante y elimino un montón de textos de aquí, así, dices que todo simplemente cambia de tamaño a la perfección. Ahora con esto, terminamos con el elemento de interfaz de usuario que estamos haciendo. Y mira lo limpio que está y lo bien que cambia de tamaño y todo lo que sale. Ahora, hasta el momento, en todo este curso, hemos cubierto casi todo lo relativo al auto-layout, pero acostumbrarse al auto-layout requiere alguna práctica. Entonces en el siguiente conjunto de videos, les voy a presentar los componentes, nuevos componentes que realmente estoy usando en mis proyectos reales de Lord. Y te voy a desafiar para que los hagas. Te voy a dar todo todos los activos que requieren y luego puedes disparar tu tiro o si por favor sólo miren a mí hacerlo. Está bien. Te veré en el próximo. Tengo una calificación de desafío bastante impresionante. 8. Desafío 1: panel de felicidad: Está bien, vamos a ir todo freestyle de aquí en adelante. Ya conoces toda la teoría y pequeños detalles sobre todo fuera. Y no queda nada nuevo que decirte. Pero sé que una cosa es saber algo y otra usarlo en un caso práctico. Entonces de aquí en adelante en el curso, te mostraré, te demostraré algunos componentes que estoy usando en proyectos del mundo real. Y te desafiaré a reconstruir esos por tu cuenta usando Figma auto layout en absoluto. También los estaré construyendo junto con ustedes. Entonces tendrías una referencia y vigilarías, puedes hacer eso. Y esto es lo que realmente estábamos en este video. En este video estamos construyendo lo que acabo de dar el nombre de panel de alabanza. De acuerdo, Entonces en mi nuevo proyecto, que era un sitio web, tengo cosas buenas que la gente ha dicho sobre mi palabra, lista cabeza así. Hay una cosa que alguien dijo. Está bien, Ahí están los elogios entonces quien lo dijo y el nombre del artículo o la pieza de trabajo para la que lo pusieron. Ahora vamos a hacer una versión de este componente en este video. Así que asegúrate de estar dentro de la magia del archivo totter de outs corporales y en el panel de alabanza de pintura desafío cuando panel de alabanza, ahora dentro de esta página encontrarás tres secciones. K, El primero es la anatomía de todo el componente. A, lucir tan hermosa. Es decir, tiene los textiles listados, los valores de relleno listados, y el color está listado, etcétera. Para que cuando estés construyendo este componente por tu cuenta, solo puedas enfocarte en la funcionalidad y no preocuparte por, vale, qué valor de relleno debo dar aquí, y qué color debo elegir aquí, y qué tipo de letra debería usar? Nada de eso. Todo está enumerado justo por aquí, y al final hay un triángulo que he puesto que es la única parte extra que vas a necesitar. El resto de ella sólo va a ser marcos y texto. Entonces sí, ahí está. Ahí lo tienes todo y en el medio tienes el componente terminado con el que puedes jugar. Por ejemplo, puedo aumentar el texto, escribir más texto aquí y escribir más texto por aquí y ver cómo cambia el tamaño. Y entonces puedo estirar y averiguarlo, oh sí, genial. Entonces puedes hacer eso, jugar, investigar un poco, Ver cómo funciona, y luego seguir adelante y en algún lugar de esta misma página, en algún lugar aquí, empezar a trabajar en el componente. Entonces voy a hacer una pausa ahora y puedes empezar a trabajar. Y si no estás de humor, si no estás de humor para hacer eso, puedes simplemente sentarte, relajarte y verme hacerlo. Bueno, vayamos a la forma en que estoy viendo este componente es que en términos generales tiene dos partes. La parte superior es si lo arrastraré y lo ocultaré, la parte inferior así. Entonces esta es la parte superior y luego tiene la parte inferior, el triángulo. Y este poco escrito para en nombre de la parte del artículo. Por lo que la parte inferior en general es un poco más compleja que la parte superior. Entonces, empecemos con la parte superior, que es simple. Ese error común o no realmente un error, pero algo común que hacer antes de fotogramas y reframes fue 0. Se ve un rectángulo. Muy bien, vamos a seguir adelante y presionar la prensa R y conseguir la herramienta de rectángulo y empezar a dibujar un contenedor conocido. Y eso no es lo que vas a hacer. Al igual que a, he explicado previamente en los videos iniciales que sólo necesitamos el contenido y luego podemos agregar un marco a su alrededor. Y un marco puede tener propiedades como Bagram color y sombras y esquinas redondeadas y demás. Empecemos con el contenido aquí. Entonces digamos que este carbono de aquí es correcto, tu tasador. Entonces vamos a presionar T en el teclado y obtener el click textual en un lienzo y empezar a escribir. Entonces escribe aquí tus calificaciones y veamos, ten este azulejo a esto. Este es blanco y el color en este azulejo del texto es perno de cuerpo. Entonces hagámoslo. Entonces voy a seleccionar el texto, elegir el textil a mi cuerpo negrita y cambiar el color a la derecha. Está bien, uno hecho. número 2 es el autor, así que solo voy a seguir adelante y presionar Opción. Arrastre aquí una copia de este texto, haga doble clic sobre él y escriba AUT. Got a UTI es tu autor y tiene un textil de normales corporales. Entonces voy a seleccionar esto y cambiar este azulejo a cuerpo normal. De acuerdo, también hay un guión delante del autor, así que sigamos adelante y hagamos eso. Ups, no eso, sólo esto. Está bien, genial. Entonces ahora que tenemos esto, podemos ponerlos juntos en un marco. Entonces, ¿cómo se pone algo en un marco? Nuevamente, los seleccionas, pulsa Mayús a y D están dentro de un fotograma ahora, que es fotograma cinco. Figma ha dado automáticamente ese principal. Hagamos doble clic en él y renombrarlo a TOP, top y pulse Intro. De acuerdo, Hasta ahora, tan bien. Ahora veamos el relleno que es, que tiene, tiene un relleno de 32 unidades en todas estas alturas. Entonces voy a seleccionar el marco, ir aquí mismo en regalar con 32 y todos los lados. Lo siguiente que voy a hacer es darle un color de fondo, que es azul 0 a como se menciona aquí. Entonces vamos a darle un color de fondo de azul, 0, genial. ¿ Y qué más queda? De acuerdo, sin embargo, el espaciamiento entre tu texto de alabanza aquí y el texto de los tres es ocho. Entonces, ¿cómo nos aseguramos de que sea ocho poco seleccionar este marco, ir al espaciado entre elementos y cambiarlo a ocho de cuatro. Entonces ahora si sigo adelante y hago clic en cualquiera de estos presione Opción y pase el cursor que otros. Se puede ver que el espaciado entre ellos es de ocho. Está bien, genial, bien. Y ahora veamos las esquinas redondeadas. Por lo que esta todas las esquinas redondeadas son de ocho píxeles u ocho unidades. Pero, pero note que en la parte superior, sólo las esquinas superior izquierda y superior derecha tienen radio redondeado, mientras que la inferior derecha y la inferior izquierda no tenían eso. Entonces vamos a seguir adelante y asegurarnos de que eso también sea el caso con lo que estoy creando o cuando estamos creando juntos, si ustedes están siguiendo. Entonces si quieres dar diferente, si solo tienes que seguir adelante y presionar ocho aquí y el radio de esquina redondeada, lo aplicará a las cuatro esquinas. Pero si quisieras dividirlo como si quisiera dar rincones diferentes, radio diferente, puedes seguir adelante y dar click en este ícono aquí mismo dice esquinas independientes. Y cambiemos la parte inferior derecha e inferior izquierda, de acuerdo, a 0. Entonces, ¿cómo sé que esto es de abajo a la izquierda y abajo a la derecha? Estas dos cajas? Bueno, si pasas por encima de ellos, puedes ver eso e incluso en este ícono de aquí, representa con qué esquina estamos tratando. Entonces otra vez, hasta ahora, tan bueno. Tenemos nuestro top hot casi listo. Ellos sólo cogerán que necesitamos para asegurarnos de que cambie de tamaño adecuadamente. Entonces voy a ir, voy a seguir adelante y estirar y ver el ancho o la dimensión de los textos que dentro de él. Entonces de nuevo, todavía hay pequeños, no respondieron al cambio de tamaño. Entonces vamos a seleccionarlos a ambos y cambiar sus restricciones de cambio de tamaño de los contenidos de HUD para llenar contenedor. Y ahora que seguimos adelante y lo redimensionamos, se ve que el ancho del texto también cambia. Entonces aquí mismo, terminamos con esa parte superior. Ahora, pasemos a la parte inferior. Entonces, de nuevo, tenemos este triángulo justo por aquí, que acabo de guardar aquí para ustedes. Entonces voy a seguir adelante y presionar Opción y arrastrar una copia hacia fuera. Lo vamos a necesitar en la cama. Entonces lo voy a dejar aquí. Se llama plano por cierto, y el panel de capas. Entonces otra vez, voy a seguir adelante y dejarlo por aquí. Y si ves en el componente terminado, tenemos el triángulo, tenemos el solapa. Pero también hay, también hay un poco de espaciado entre estos. Ves este espacio en blanco justo por aquí. Se llama, no se llama como tiene altura de 16 aquí y se estira aquí y va por un 16 año. Entonces vamos a seguir adelante y hacer eso. Pero antes que nada, hagamos esta pequeña parte, esta parte real que contiene trabajar para y el nombre del artículo o del curso. Entonces de nuevo, voy a seguir adelante y presionar T y escribir, leer 104, y veamos los textiles para ello. De acuerdo, este es cuerpo semi audaz y tiene un color de blanco. Entonces voy a seguir adelante y hacer eso. Por lo que voy a seleccionar este compró un semi negrita y un color de blanco. De acuerdo, Así que creo que me olvidé de un n por aquí, así que sólo voy a seguir adelante y escribir n. Está bien, entonces voy a seguir adelante y arrastrar una copia de ella y escribir el nombre del artículo es slash course. Entonces sigamos adelante y hagamos eso. Nombre del artículo. Canchas de corte y el textil para ello es cuerpo normalmente. Selecciónelo y dale el textil de lo normal. Está bien, bien. Y el espaciado entre ellos es 0. Entonces de nuevo, para asegurarme de que así sea, voy a seleccionarlos a ambos. Turno fresco a, poniéndolos en un auto yo marco. Adelante y leyendo el marco a, digamos detalles inferiores sobre eso porque esta no es toda la parte inferior, esa es solo la parte de detalles. De acuerdo, Así que lo voy a volver a seleccionar, el marco de los detalles inferiores, veamos que tiene relleno de 24 a izquierda y derecha y 16 en arriba e abajo. ¿ Cómo hacemos eso? Seguimos adelante y pinchamos aquí. Seleccionamos cualquiera de las cuatro casillas aquí y empezamos a escribir los valores de relleno. Por lo que 16 en arriba e abajo en 2004 a derecha, izquierda. ¿ Qué tal eso? Está bien, y tiene un color de fondo de gris 0. Entonces démosle un color de fondo de gris 0. Y ahora necesitamos asegurarnos de que tenga ocho unidades, ocho puntos, ocho píxeles, esquinas redondeadas para la parte inferior izquierda y la inferior derecha y 0 para la parte superior izquierda y superior derecha. Entonces voy a seleccionar esto, seguir adelante y dividirme. Es decir, no realmente dividido sino glifo aquí, lo imagino como volteando radios de diferentes esquinas. Entonces siempre que quieras llamarlo, así que arriba a la derecha es 0 bueno, arriba a la izquierda es 0 bueno. Y la parte inferior derecha debe ser ocho, y la parte inferior izquierda debe ser ocho otra vez. Por lo que voy a hacer clic en él. Y eso se ve muy bien la forma en que se supone. Y entonces otra vez, Vamos a seguir adelante y asegurarnos de que es el texto que está dentro del marco tenga las restricciones de cambio de tamaño, tan contenedores llenos para que llene todo como todo se redimensiona. Entonces sí, bastante bien. Se redimensionan adecuadamente. Ahora terminamos con las partes que vamos a necesitar para la parte inferior, de acuerdo, así que lo siguiente que queremos asegurarnos es que hay este espaciado alrededor de esto, alrededor de esta pequeña parte inferior. ¿ Cómo hacemos eso? Hacemos eso tomando este marco y poniéndolo dentro de otro marco. Ahora si has estado viendo todo el curso hasta ahora, sabes que siempre podemos anidar marcos dentro de marcos. Entonces eso es lo que vamos a hacer aquí. Vamos a seleccionar este marco y nuevamente presionar Shift anidar esto dentro de otro marco de diseño automático. Entonces voy a presionar Shift a. Y ahora este es otro marco de visión y otro auto ion, y voy a llamar a este grabber de fotogramas y w son un PPR. Y de nuevo en el panel de capas para asegurarse de que haya rapero y haya detalles de fondo. Ahora para asegurarte de que solo haya 16 píxeles de relleno a la izquierda y la parte superior donde vas a seguir adelante y seleccionar el marco envoltorio. Vamos a seguir adelante y dar click aquí. Top de regalo, un relleno es de 16, a la izquierda en doblar un fondo 16 y a la derecha a un panning 0. Ahora si vas adelante y miras de cerca esto, ves que hay un 16. Los píxeles son 16 puntos de relleno a la izquierda. Top. Y lo siguiente que vamos a hacer es tomar este triángulo o un piso. Voy a colocarlo junto al marco de envoltura, seleccionarlos a ambos y ponerlos dentro de otro marco de diseño automático. ¿ Cómo hacemos eso? Selecciona los dos de nuevo, pulsa Shift a, mi ahora, crees que el atajo El día del turno se acaba de perforar profundamente en tus cabezas, lo cual es bueno, lo cual es agradable. Entonces otra vez, tenemos creo que los pusieron correctamente. Creo que hice un poco de lío aquí, así que voy a presionar el Comando Z un par de veces y luego otra vez vamos y vamos a seguir adelante y ponerlos en un marco otra vez. Así que selecciona las solapas como el día de turno rojo envoltorio. Y ahora son perspicacia de marco diferente. Y voy a seguir adelante y nombrar este cuadro B O T, T O M, abajo. Está bien. Y lo que este marco necesita como relleno cero, grado y espaciado 0 entre elementos porque solo queremos que esto y el marco rapero se peguen juntos. Y debido al marco envoltorio es sólo espacio vacío. Habrá 16 píxeles de relleno o 16 píxeles de espacio entre ellos. Entonces voy a seleccionar fondo y cambiar. Ya ves lo que pasa cuando hago esto, cuando lo arrastro por ahí. Entonces lo voy a cambiar a 0. Entonces ahí estás. Esta es la parte inferior. Ahora, lo último que hay que hacer es seleccionar arriba e abajo y ponerlos juntos en otro marco de diseño automático. Así que selecciónalos a ambos, pulsa Shift a, y ahora están dentro de un marco. Lo único que necesitamos para asegurarnos es que el espaciado entre ellos es 0. De acuerdo, así, vamos a asegurarnos de que la parte superior tenga una restricción de cambio de tamaño horizontal del contenedor Phil para que lo llene todo. Y ahora si lo redimensiono, ves que la parte inferior no está redimensionando. Así que sigamos de nuevo y asegurémonos de que tenga restricciones de redimensionamiento horizontales del contenedor Phil. Entonces hagámoslo. Está bien, es contenedor lleno. Y esta cosa por aquí, debería ser una anchura y altura fijas, y esto debería ser un contenedor de relleno. Y de nuevo, voy a volver a hacer clic un par de veces a menudo lo que sucede es que los marcos anidados para los elementos anidados tienen un ancho fijo, restricciones horizontales. Entonces aunque hayas configurado como algo así como contenedor folk en la envoltura, no responde. Por lo que tienes que hacer doble clic, entrar y asegurarte de que lo que estés seleccionado, lo que hayas seleccionado tenga restricciones de cambio de tamaño para llenar contenedor. Y ahora si voy y redimensiono y ves que todo simplemente funciona bien. Y si sigo adelante y pongo un montón de texto aquí así, y todo se mueve como se supone que lo haga. Está bien, esto es genial, esto es genial. Acabamos de terminar de crear el componente juntos. Y creo que todo lo que aprendimos hasta ahora en el curso en realidad sólo se convoque juntos en esto. Vimos cómo podemos crear cualquier número de marcos que queramos sobre la marcha. Y eso es genial al final, espero que lo estés, has estado siguiendo esto o solo has estado intentando crear esto por tu cuenta sin verme hacerlo de ninguna manera. Y al final de este video, espero que tengas un buen componente de auto-layout funcional. En el siguiente, practicaremos un poco más. Será un poco, un poco más complejo de lo que hicimos aquí. Un poco más complejo y, ya sabes, tómate un descanso. Ahora pasemos al desafío número 2, tarjeta de juego. 9. Desafío 2: tarjeta de juego: Sarah Jones 1, te aplicas a un montón de cosas que aprendiste y terminaste creando un componente de interfaz de usuario adecuado. Hacemos algunos per say muy tradicionales, pero eso es lo que lo hace especial, ¿no? Y ahora es el momento de un reto también. Y esto es lo que estaremos construyendo y desafiando el número dos. Así que adelante y asegúrate de que estás dentro de masterizar Figma, la magia del archivo de arranque de cerveza de botella y dentro del reto para ganar página de tarjeta. Ahora en esta página vas a encontrar tres marcos diferentes. ¿ En qué nos vamos a centrar? En primer lugar está el medio, que es el componente final. Ahora este componente está arrancado de un proyecto del mundo real. Entonces teniendo eso en cuenta que es, que es parte de un proyecto diferente, todo un proyecto diferente. Este componente no usará los estilos y colores que hemos estado utilizando hasta ahora en el curso. Pero eso no sería un problema en construir y reconstruir este componente porque cada una de las partes del mismo, todos los textiles, botones, y cada otra parte de él como menos muertos justo aquí. Entonces repasemos rápidamente el componente terminado y veamos cómo funciona, ¿de acuerdo? Y eso, aquí no pasa nada fuera de lo común. Es solo que está redimensionando la forma en que se supone que debe cambiar el tamaño. Y también, ¿y también qué? Observe este trazo justo por aquí, derecha, esta línea justo por aquí. Y note cómo se estira y contrae en función del tamaño actual. Eso me gusta bastante. Ahora hay un montón de marcos de diseño automático que está inventando esta tarjeta y haciéndola comportarse como es. Y, ya sabes, antes de que empieces, quiero que veas este reto como armar un auto junto con solo partes. Muy bien, así que aquí están las partes y estamos juntando todo en un componente terminado. Por lo que antes de empezar, lo último que quería llamar su atención es esta opción Copiar Propiedades que está disponible dentro de Figma. Por lo que nota este marco justo por aquí. Tiene color, ya sabes, algún tipo de trazo de color de Bagram en los costados y algunos, algunos también algunos de sombra de gota. Ahora replicar esto es una especie de trabajo de molienda en este momento porque estamos lidiando con marcos de diseño automático. Entonces hay una opción, ya sabes, hay una opción para copiar directamente las propiedades y pegarlas en un marco. Entonces por ejemplo, este es un pequeño cuadrado con todas las propiedades, colores de fondo, trazo, sombra, y todo de este marco grande. Entonces, cuando tengas listo el cuadro final, todo lo que puedes hacer es, digamos que creemos aquí un marco temporal. Entonces presionaré F y lo arrastraré hacia fuera. Y luego voy a seguir adelante y hacer clic en esto y seguir adelante y hacer clic derecho, Copiar y pegar y luego Copiar propiedades. Entonces puedo entrar en este marco y seguir adelante y dar clic en Pegar Propiedades. Y así como eso, no tienes que preocuparte por qué esquinas redondeadas debo conseguir o qué reto y me dan. Simplemente se puede copiar y pegar así. Está bien, entonces con esto, estoy bastante seguro de que he cubierto todo lo que se necesita. Ahora desde aquí, puedes trabajar en ello por tu cuenta si lo deseas, o simplemente puedes mirarme y seguirme mientras reconstruyo esto y no sea que me olvide, del lado derecho del componente final también está la anatomía del componente, el espaciado entre ellos, el color entonces se supone que debes usar en todos los valores que van a necesitar. Entonces me agrega los parques, el final en medio. Vamos a seguir adelante y recrear esto. Y tú comienzas con lo primero que voy a hacer es hacer que el color del lienzo sea un poco más claro. Entonces lo que quiero decir con eso es los colores que van a estar funcionando, trabajando con para este componente de estos como tonos de azul no tienen un gran contraste con el color del lienzo. Entonces esto es lo que quiero decir. Entonces voy a seguir adelante y crear tu pequeño rectángulo sólo para mostrarte a lo que me refiero. Y el color es D2, E, F, F. Así que déjame seguir adelante y darle el color de D2, E, F, F. Y tú dices que no es muy visible en este lienzo. Entonces lo que voy a hacer es con Figma, cuando no se selecciona nada en el panel derecho, tienes la opción de color de fondo y ajustará todo el color del entonces altísimo Canvas. Entonces sí, voy a seguir adelante y asegurarme de que tengas HSL seleccionado y el formato de color, y voy a aumentar el brillo. Entonces tal vez algunos como este, no del todo blancos sino más cercanos al blanco. De acuerdo, Entonces el color es F7, F7, F7. Y siempre puedes restablecerlo a E5, E5.5, que es el color predeterminado para Figma Canvas. De acuerdo, así como empecé, lo primero que haremos es hacer esta cosa en particular, esta fila aquí mismo, porque se repite dos veces. Y la única diferencia es del texto y el icono. Entonces, sí, empecemos con esto y luego construiremos el resto de los elementos a su alrededor. Entonces para construir esto, lo primero que tenemos que hacer es arrastrar hacia fuera esta firma de rango de íconos por aquí. Entonces voy a seguir adelante y arrastrarlo fuera del lienzo. Entonces también, ya que estás, ya sabes, estás trabajando con esto y podrías pensar eso, oh y si meto las cosas y pierdo los elementos y su estado por defecto y las partes, Bueno, no hay problema. Yo sugeriría hacer esto, dar clic en opción de retención de piezas y arrastrar una copia de ella hacia fuera para que se quede ahí como copia de seguridad. De acuerdo, Así que ahora de nuevo, de nuevo en pista, lo primero que tenemos que hacer es arrastrar este ícono hacia fuera. ¿ Qué más necesitamos? Necesitamos dos campos de texto, y en realidad no soy campos de texto con dos tanques. Este hit rate e intento de anunciar su respondió correctamente el subtexto en uno aquí. Así que total tres cosas. De acuerdo, así que aquí vamos. Aquí está el primer texto aquí, el texto que va debajo de él y el texto que va en efectos secundarios. Entonces solo estoy arreglando estos en el espacio así, ¿de acuerdo? Está bien, genial. Y para empezar, sigamos adelante y pinchemos en el percentil y donde paras estos dos textos como ellos juntos y presionamos Shift a para ponerlos en un marco de diseño automático. Y ahora hay dentro de un marco. Y lo que vamos a hacer es nombrar a este marco, digamos contenido. ¿Qué tal eso? Llamémoslo contenido o ya sabes, solo se llamaba info. Está bien. Ahí vas. Este es el marco de información y lo siguiente que vamos a hacer es seleccionar todas estas tres cosas juntas. Ese top 20 por ciento, marco percentil y este ícono y los juntó en un marco de diseño automático. Así que adelante y selecciónelos, Shift a y Figma infiere automáticamente que como están dispuestas horizontalmente, les aplica un diseño de dirección horizontal, al marco que hay dentro. Entonces voy a seguir adelante y nombrar este marco, digamos contenido. Está bien, genial. Entonces el contenido tiene el número, que es este texto justo por aquí. Déjame cambiarlo a Stat. Otra vez. Simplemente lo llamaré pila. Este es el marco de información y este es el marco de iconos. Está bien, genial. Y lo siguiente que vamos a hacer es darle de nuevo a este marco un color de fondo, el mismo color de fondo que se enumera justo por aquí, que es D2 E, F, F. Y para darle a este marco de color de fondo, todo que haces es seleccionarlo así como así. Y mira por aquí donde dice Fill, click en este ícono más y dale un ícono y dale el color v2, e, 0, f, f. Muy bien, ahí vamos. Tiene un, tiene un color de fondo ahora. Y lo siguiente que necesitamos averiguar es, de acuerdo, ¿ cuál es el relleno en todos los lados? Por lo que el relleno en todos los lados de esta fila en particular es de 24. Entonces démosle un relleno de 24 en los cuatro lados. Para hacer eso otra vez, como en el marco, ve justo aquí y escribe 24, ¿de acuerdo? Y también que tiene un radio de esquina redondeada de ocho. Entonces voy a seguir adelante y escribir ocho aquí y hacer clic en Entrar. No lo hice, no lo referí del nazi tal vez porque lo creé. Recuerdo algunos de los valores. De acuerdo, así que ahora dentro de esto, voy a seguir adelante y volver a seleccionar el fotograma de información y asegurarme de que la diferencia entre ellos, el espaciado entre estos dos elementos sea 0 para que estén empaquetados mejor. Está bien, Bonito. Y también el 20 por ciento superior, este texto está flotando en la parte superior. No están alineados centralmente. Por lo que para asegurarse de que estén alineados centralmente, haga clic en esto y elija esto y ahora están alineados en el medio. ¿ De acuerdo? Y ahora sobre el cambio de tamaño, veamos cómo funcionan cuando esta fila se estira horizontalmente. Realmente no pasa nada porque tenemos este ajuste de empacar como empacados. Sigamos adelante y elijamos el espacio entre. Y ahora si cambio el tamaño, lo dices todo, tamaño y se estira adecuadamente. Pero de nuevo, el problema es que quisiéramos que persona de escritorio, lista tailandesa, info, frame e icon se peguen juntos y solo este texto para fluir sale cuando se estira. Entonces, para hacer eso, para asegurarme de que estos permanezcan fijos, voy a seguir adelante y seleccionarlos a ambos. Y de nuevo, pulsa Shift a para ponerlos dentro de un marco de diseño automático. Y voy a llamar a este marco, digamos stat plus icon sobre eso. Voy a llamarlo así. Y vamos a seguir adelante y asegurarnos de que la diferencia entre ellos, el espaciado entre elementos sea algo más pequeño, lo que se menciona justo por aquí. Es decir 16, 16, 16, este espaciado, así que volviendo aquí, así que creo que este marco, cambiando el espaciado entre artículos, haz 16, está lloviendo, así que podrías escuchar algunos corriendo al baño. Siempre refrescante. Genial. Está bien. Ahora, Sí, volver a esto, volver a esto y tratar de ver cómo funciona, está bien, se estira adecuadamente. Dices, esto se queda donde está y el ícono de StatPlus se queda a la izquierda. Y la stat, que es este número, se queda a la derecha y se estira adecuadamente. Lo hicimos y íbamos a necesitar dos de estos. Entonces sabes qué, solo voy a seguir adelante y arrastrarlo aquí para que sea más fácil panear una y otra vez. Entonces vamos a necesitar dos de estos. El primero es el comercio de cabeza y el segundo es el percentil. Entonces voy a seguir adelante y mantener opción y arrastrar una copia fuera de ella. Si estuvieras trabajando en un proyecto del mundo real, lo que harías realmente es crear un componente fuera de él. Pero en este momento, solo estamos aprendiendo sobre el autodiseño. Entonces voy a dejar el pasado. Entonces de nuevo, lo que queremos es que este texto aquí mismo sea tasa de hit, así que atrape IT RAT. Y los textos aquí mismo es percentil, lo cual es genial, y el subtexto para tasa de aciertos se intenta versus responde correctamente. Entonces otra vez, presione T, haga clic aquí y adelante y escríbalo. Intento. Verso dice correctamente. Respondida, Ok, Bonito. Tenemos estas dos bonitas cositas aquí. Y otra vez, ¿sabes qué? Ya que estas son, estas, estas son filas horizontales y para representar algún tipo de estadística para el usuario que está jugando el juego. Entonces voy a seguir adelante y renombrar esto para estampar fila, ¿de acuerdo? Y voy a seguir adelante y hacer lo mismo por esta de aquí, fila de sellos. Muy bien, y ahora tenemos que reemplazar este ícono por aquí. Y para hacer eso, solo voy a seguir adelante y seleccionar este ícono y presionar Comando C. Vuelve aquí. Selecciona esta frase marco Comando V y ya sabes, eso es solo lo arregla justo por aquí. Entonces voy a arrastrarlo y ponerlo ahí, seleccionar este ícono, presionar, Eliminar y bam, se ha ido. Entonces ahí lo tienes. Ya tenemos la stat Ref. Y ahora lo que podemos hacer es seguir adelante y seleccionarlos a ambos y juntarlos a ambos. Y luego marco de diseño automático, presione Shift a y llame a este marco filas estampadas. ¿ De acuerdo? Y lo siguiente que quiero comprobar es que se estire adecuadamente en redimensionamiento horizontal. Entonces para probar que voy a estirar este marco pero no pasa nada. Y nuevamente, para arreglar eso, seleccione el contenido dentro y cambie su restricción de cambio de tamaño, restricciones de cambio de tamaño horizontales para llenar un contenedor. Y ahora si redimensiono todo este marco, todo lo que dentro de él cambia de tamaño correctamente. Genial, terminamos con una parte de esto. Y lo último que hacer con esto es saber cuál es la diferencia entre los valores y o fue un espaciado entre ellos, que es H. Así que voy a seguir adelante y seleccionar el marco de estatuas y cambiar esto, el espaciado entre elementos a ocho . Muy bien, genial. A continuación, voy a hacer algo muy sencillo es crear este botón, estos dos botones pero ellos juntos en un solo marco. Simplemente voy a seguir adelante y ver la diferencia entre ellos. Sigo diciendo la diferencia, pero significa la separación, la brecha entre ellos, que es ocho. Entonces lo que voy a hacer es tomar estos dos botones, shift click para seleccionarlos a ambos y ayuda. De acuerdo, solo los voy a arrastrar aquí así, ¿verdad? Y los vamos a juntar en un marco. Entonces selecciónelos, presione Shift a para que estén en un fotograma. Adelante y nombra ese encuadre CTA o botones de llamada a acción. Y luego los voy a posicionar por aquí. Lo siguiente que voy a hacer es estirar así. Pero entonces de nuevo, se ve el contenido dentro de este marco no está respondiendo a ese estiramiento. Así que selecciónelos a ambos y adelante y cambie su restricción de cambio de tamaño. He hecho esto una y otra vez para llenar contenedor. Ahora mostraron redimensionados adecuadamente. Está bien. Entonces eso está hecho. Entonces ya terminamos con esto y ya terminamos con esto. Ahora, sigamos adelante y hagamos esto. Esta fue una parte tranquila e interesante donde esta línea en particular o este trazo se estira dinámicamente. Por lo que para esta parte necesitamos 12344 cosas diferentes del marco de piezas. Entonces sigamos adelante y agarrarlos. Entonces voy a seguir adelante y necesito este ícono de ojo. Y entonces voy a seguir adelante y necesito este texto. Entonces voy a poner esto ahí. Y entonces voy a seguir adelante y necesito esta cosa, que he llamado recuento de méritos. Entonces vamos a tomar estos juntos y, ya sabes, mi factura, esa pequeña parte. Y una cosa que me olvidé de sacar de los marcos, sacar del panel de partes si este pequeño trazo donde lo por aquí. Entonces voy a seguir adelante y seleccionarlo y sacarlo y colocarlo justo aquí. De acuerdo, así que ahí tienes. Entonces, ¿qué ahora, una vez que tengamos las partes, qué ahora, cuál es el siguiente paso otra vez para juntarlas. Entonces voy a seguir adelante y dejar la cuenta de casados justo aquí. Voy a seguir adelante y dejar esta línea justo por aquí tal como está. Voy a seguir adelante y poner estos dos juntos en un, en un marco de diseño automático. Entonces voy con ellos y sigo adelante y presiono Shift a, así como así. Y voy a seguir adelante y otra vez, llámalo llamémoslo mérito info. Sólo estoy nombrando a las capas. Realmente no importa porque el nombre depende del contexto del proyecto en el que estás trabajando. Entonces no te enfoques en el nombramiento, lo que significan. Es solo para que las capas no sean nombradas marco 93 o forma 72 porque estoy solo muele mis engranajes. Entonces otra vez, una vez que están en un marco, Veamos la separación entre ellos, que es de ocho. Por lo que se hace ir adelante y asegurarse de que ese sea el caso. Entonces otra vez, separación entre artículos, Cambiemos de cinco a ocho y sí, sigamos adelante y cambiemos la alineación a centro o metal porque así debe ser. Todo el camino no importa porque no vamos a estirar esto verticalmente. Está bien, genial. Y ahora cuando tengamos estas tres partes, vamos a seguir adelante y arrastrarlas y seleccionarlas y presionar Shift ocho para que estén dentro de un fotograma. Y de nuevo, voy a seguir adelante y renombrar el cuadro. Hacer algo como el matrimonio. Muy bien, genial. Y lo siguiente que voy a hacer es cambiar su alineación para centrar en ambos ejes, x e y son incluso este funciona realmente no importa porque vamos a seguir adelante y cambiar esto de empaquetado al espacio entre. Entonces sigamos adelante y hagamos eso. Cambia eso al espacio entre y ahora cuando arrastro y estiro esto, puedes ver que funciona como se supone que debe, pero esta línea no está cambiando, su ancho, se está quedando como está y simplemente flotando en el centro. Y para cambiar eso, para cambiar eso, seleccionas la línea o seleccionas cualquier elemento que quisieras comportarte como esta línea en cualquier proyecto en que estés trabajando y cambias su restricción de cambio de tamaño horizontal para llenar contenedor. Y una vez que eso se llena contenedor, el resto de éstos para tener un ancho fijo y una altura fija o contenido caliente o ese dato y estirar con el marco, con el marco contenedor. Y si está estirado y otra vez, ahora si lo redimensiono, ve que la línea se estira como se supone, pero hay este hueco aquí y este hueco aquí que no queremos. Y esto se debe al espaciado entre el valor de los artículos que actualmente se establece en 31. Lo que podemos hacer es ir adelante y escribir 0 y presionar Enter. Y ahora mira esto. Esto Bastante cool, ¿verdad? Está bien, entonces, sí. Y de nuevo, en realidad no queríamos que eso fuera 0, si recuerdo correctamente, queremos que sean 16. Entonces sigamos adelante y hagamos que ese 69. Eso se olvidó totalmente. Entonces, y así a 0 tipo y 16. Y ahí vamos. Y de nuevo vamos a necesitar dos de estos. Entonces voy a mantener Option y arrastrarla hacia fuera. Y voy a hacerlo, antes de ponerlos en un solo fotograma, voy a seguir adelante y hacer los cambios requeridos que están aquí y apostar aquí. Entonces APUESTA. Y lo siguiente que vamos a necesitar es que necesitamos esto o leer, leer elemento y ahora los elementos azules. Así que selecciona este cuadro Comando V y ponlo justo por ahí. Y luego voy a seguir adelante y borrar el azul. Entonces tenemos a estos dos juntos. Nuevamente, voy a seguir adelante y ponerlos en un solo fotograma seleccionando ambos y presionando Shift a, y renombraré el fotograma 2 méritos. De acuerdo, ¿y vamos a ver cuál es la diferencia otra vez? ¿ Cuál es la separación entre ellos? Eso son cuatro. Entonces sigamos adelante y asegurémonos que el espaciado entre elementos sea de cuatro para este marco. Y sí, ahí está. Tenemos otra parte de toda la tarjeta lista y vamos a asegurarnos de que responda a los estiramientos. No voy a volver a leer los pasos. sabes, ya sabes qué hacer para asegurarte de que los contenidos respondan al cambio de tamaño. Entonces ahí lo tienes, lo hemos hecho. Y lo siguiente que queda aquí es poner este ícono, esta altura en el lado izquierdo de los méritos de este marco. Entonces de nuevo, voy a seguir adelante y arrastrar este gran icono desde aquí, ponerlo al lado de este marco, y luego voy a seguir adelante y seleccionarlos a ambos y ponerlos nuevamente en un solo marco de diseño automático pulsando Shift a. Y voy a seguir adelante y totalmente irrelevante lo que llamé a esto por ahora, pero vamos a nombrarlo a nivel de detalle. De acuerdo, sigamos adelante y veamos cómo se redimensiona. Voy a seguir adelante y moverlo aquí. Pero entonces de nuevo, se ve que esto se mueve hacia afuera fuera del marco, mientras que esto se queda dentro. Pero eso no es algo que queremos. Queremos que esta cosa le falle al contenedor y no sea un ancho fijo. Por lo que este es un ancho fijo y este es un contenedor completo. Entonces cuando se redimensiona el contenedor , toda esta cosa, entera, se ve sólo esta parte cambia de tamaño donde el ícono se queda tal como está, y eso es lo que queremos. Entonces así como así, terminamos con 123 partes diferentes del auto. Aquí está la parte final, que es el principiante, ya sabes el título de la tarjeta y este pequeño puntitos. Entonces voy a seguir adelante y seleccionar ambos de aquí del marco de piezas y arrastrarlo hacia fuera. Y lo siguiente que quieres hacer es otra vez, ponerlos juntos en un marco de diseño automático. ¿ Cómo los juntamos? Selecciónelos ambos y presione Shift a. Lo primero que voy a hacer es asegurarme de que esté alineado en el medio y el espaciado no esté empaquetado pero el espacio entre NY es que otra vez, voy a iterar. Si yo, si está empacado y estreso el marco, se queda empacado. Pero si es espacio entre un estiramientos y llena el marco de niño, voy a seguir adelante y renombrar este marco de 81 a bajo nivel. Frío. Y así, tenemos listas todas las partes de la tarjeta. Y antes de seguir adelante y poner todo esto en una sola unidad, déjame seguir adelante y volver al componente final y mirar el comportamiento de la tarjeta cuando se estira verticalmente. De acuerdo, entonces nos vemos otra vez. Toda esta parte, la parte superior se mantiene empacada como siempre, como es el CDA, estos dos botones en realidad siguen la parte inferior de la tarjeta y estiran y flotan al final. Por lo que esto debería dar una idea clara de que el empaque que vamos a usar en toda esta tarjeta es un espacio entre en lugar de empacado. Pero antes vamos a seguir adelante y consolidar todas estas partes juntas, las partes superiores juntas en un solo marco, y no solo un marco porque hay diferentes valores de espaciado entre éstas. Por ejemplo, el espaciado entre este nivel superior y esta parte es de 24, esto indece 40. Entonces de nuevo, vamos a poner esto y esto en un solo marco y poner ese marco y esta estas estatuas enmarcan en un solo marco. De acuerdo, esto es lo que quiero decir. Entonces sigamos adelante y empecemos con esto. Entonces voy a deslizar el nivel de marco y el nivel de detalle para impresionar día turno ponerlos en un solo fotograma y cambiar el espaciado entre elementos a 24. Ese es un marco. Vamos a seguir adelante y llamarlo digamos nivel detalle para estos útiles. ¿ Qué tal eso? ¿ De acuerdo? Y luego voy a seleccionar este nivel de detalle completo y escritores de personal y poner estos dos juntos en un marco. Nuevamente, seleccione ambos, pulse Shift a y cambie el espaciado entre ellos a 40, como se menciona en y no en la anatomía del componente. Y esta parte, voy a seguir adelante y solo llamarlo add top. ¿ De acuerdo? Y ahora puedo seguir adelante y seleccionar top y CTA y juntar estos dos en el marco final. Entonces Shift a, y esto está en el marco, y voy a renombrar esto de marco un T1, T2, otra vez tarjeta, ¿verdad? Este es el último envoltorio final. Y la última envoltura tiene un relleno de 32 en todos los lados. Entonces voy a seleccionar esto e ir al relleno y asegurarme de que sean 32. Está bien, y vamos a darle un color de fondo y bordes y todas esas cosas. Entonces recuerda desde el inicio del video hablé de estilos de copia o propiedades de copia. Eso es presidente en fragmentos. Voy a hacer clic derecho, vaya a Copiar Pegar. Por lo que copiaría propiedades. Voy a seguir adelante y volver a este marco seguir adelante y hacer clic de nuevo y seleccionar Pegar propiedades. Y así como eso, tengo todo el estilo aplicado. De acuerdo, Lo último para asegurarme, como he repetido una y otra vez en el curso como para ver cómo se comporta cuando se redimensiona. Entonces cuando se estira horizontalmente, nuevo, se puede ver que estos no responden. Entonces voy a seguir adelante y asegurarme de que los marcos y todos los marcos anidados tengan restricciones de cambio de tamaño horizontal o contenedor de relleno. Adelante y hagamos que llene el contenedor. Y luego voy a seguir adelante y entrar y hacer este contenedor lleno. Entonces así, haz este contenedor lleno así. De acuerdo, esa soy yo. Adelante. Puedes seguir haciendo doble clic hasta llegar a un marco que se ha fijado a él y seguir adelante y configurar eso para llenar contenedor, selecciona esto y cambia aquello para llenar contenedor. Y ahora si lo redimensiono, dices que cambia de tamaño perfectamente horizontalmente. Pero entonces ¿qué pasa con el cambio de tamaño vertical? Si cambio el tamaño de esta palabra realmente queda empacada. No queremos eso. Damos IV. Vamos a seguir adelante y cambiar este espaciado o empaque por espacio entre. Ahí vas. Y sigamos adelante e intentemos redimensionar y verticalmente. Y se comporta como debería. De acuerdo, y sé que este video estresó más de 20 minutos, pero quería repasar todos los pasos y explicar todos los pasos que está involucrado en la creación de un componente de interfaz de usuario a partir de marcos de diseño automático. Y el punto que quería ilustrar es que simplemente no es que tengas que limitarte a hacer todo en un solo marco. Se puede ver que el número de fotogramas que se usan aquí es, creo que está mucho más allá de 10 y eso está bien. Eso está bien. Eso es todo el asunto funciona. Entonces, ya sabes, intenta usar todos los iframes tanto como puedas. Porque cuando esta tarjeta se va a poner en un real, digamos una página y el ancho de la página no es algo así como 587, pero digo 340, entonces, ya sabes, tamaño y si es correcto en lugar de cambiar el tamaño de cada una sola parte de esto y para encajar en ese espacio particular de la página. O si la página es grande, entonces se puede estirar y se ajusta en gran medida al final del gráfico anterior. Puedes seguir adelante y encajar algo como esto. Entonces eso es genial. Usa más marcos y usa tantos marcos como quieras. Y espero que hayas aprendido mucho hasta ahora en el curso. Y en este punto estamos hechos con quien la mayoría de los ejemplos y con la mayoría de los retos. El último, que es hueso un deslizador, que estará discutiendo en el siguiente video, no es un requisito, pero es un uso loco del auto-layout. Y es bastante inteligente si me estás preguntando alguna, sabes qué, te voy a contar más sobre en el siguiente video. 10. Desafío extra: deslizador de diseño automático: Está bien, todavía estás por aquí, así que voy a hacer que valga la pena tu tiempo. Ya sabes lo que es mágico de estas herramientas como Fatma o cualquier otra herramienta, es que no puedes anticipar las formas en que las personas van a usar las características, en qué permutaciones aplicarán las características y qué cosas novedosas que ellas se le ocurrirá. A veces estas cosas novedosas, estas permutaciones de formas de usar las entidades se denominan como hacks. Y muchas veces estos hacks se convierten en parte de la característica principal, configuran una herramienta por debajo de la línea una vez que la tarea es lo que Rajit, un defensor del diseñador en Figma, hizo con el auto-layout y los deslizadores, inspiró decidí darle una oportunidad y hacer este compuesto deslizador de retroalimentación. Ahora esto es parte de un proyecto real en el que estoy trabajando. Y mira lo que puedo hacer es que puedo ajustar la cantidad que se llena el deslizador usando diseño lógico y tirar del prototipo hacia ser más que simple simple maqueta de baja fidelidad. Usaremos exactamente las mismas técnicas que utilizo aquí con todo esto para crear esta cosita, el deslizador en el que la cantidad que ha sido trineo se puede ajustar usando la opción de espacio entre ítems en la tira de autodiseño a la derecha, así como así. Ahora, he convertido este deslizador en un componente. Se puede decir que mirando el panel de capas y este icono justo por aquí se denota que es un componente. Y todas estas de la derecha son instancias de ese componente y instancias se puede anular un par de cosas como hemos visto, pero la posesión y la dimensión no son una de ellas. Entonces si esto no fuera por el hackeo, y estoy usando hackeo entre cotizaciones de aire. Si esto no fuera usando el HAC para posicionar el perilla, tendrá que desprender la instancia así. Puedes seguir adelante y desconectar instancia, que significa que esta cosa en particular ya no estará conectada al componente principal, tendrá que desconectar la instancia y luego mover las cosas, lo cual es desordenado y feo. No hagas eso. En cambio, usa el auto-layout y ve cómo incluso en la instancia, cada deslizador puede tener una posición única de la perilla y por lo tanto y único Phil, puedo ajustar este deslizador a pleno. Puedo tomar este slider y simplemente moverlo a la izquierda de esa manera. Y también una gran cosa de este componente en particular es que a medida que sigas, si entiendes su arquitectura sin confundirte en ningún momento, será un indicador de que has entendido el auto-layout realmente, muy bien. Está bien, vale, pongámonos al negocio y empecemos a construir. Lleguemos al archivo de inicio. Dominar Figma, la magia del tartamudeo automático. Y dentro de la diapositiva o página de bonificación, aquí encontrarás la versión terminada del slider. Puedes echar un ojo al panel Capas, jugar con él, hacer lo que quieras. Pero en cuanto a mí, estoy más listo para empezar a construir una copia de esto justo aquí. El primero que vamos a necesitar es una base que es simplemente un rectángulo delgado. Esto se ve aquí mismo el rectángulo gris, esa es la base. Entonces dibujemos eso, presione R para que la herramienta de rectángulo arrastre un rectángulo, cualquier forma, cualquier tamaño, lo que sea que lo vamos a ajustar en un tiempo. Lo primero que vamos a hacer es adelgazar. Y quiero decir, tres píxeles de alto. Tan bien, tres al lado del escondite. Y ahí tienes. Y lo siguiente que quiero hacer es darle gorras redondeadas, ¿verdad? Totalmente a su alrededor. Entonces voy a seleccionar el rectángulo, oro o pasar el cursor sobre la parte del rectángulo redondeado, lo siento, esquinas redondeadas parte y simplemente arrastrarlo todo el camino. Y ahora se puede ver que tiene unas tapas redondeadas en ambos extremos. Ahí es donde lo hace esto. Esa es la base. Entonces voy a seleccionarlo, ir al panel Capas y llamarlo base BAC. Y además voy a cambiar el color del mismo a gris, T2 y NMOS. Es sutil y apenas visible, pero espero que se pueda ver que está justo por ahí. Lo siguiente que vamos a necesitar es el rectángulo de relleno. Ese es uno justo aquí, el que falla. Está bien, Entonces para eso, solo voy a seguir adelante y mantener opción y arrastrar una copia de la base hacia fuera. Y lo que voy a hacer es cambiar su color de fondo a azul 0. Y también para el relleno, no queremos ninguna redondez en el lado derecho. Entonces voy a seleccionar esto, ir a la parte de esquinas redondeadas. Simplemente individualmente y cambiar arriba a la derecha. Arriba a la derecha. Sí. Y abajo a la derecha a 0, esta línea hacia abajo para que este n sea como, Hey, tengo este n tiene un corte preciso y el extremo izquierdo tiene esquinas redondeadas. Está bien, genial. Este es el relleno. Entonces voy a seguir adelante y entrar en el panel Capas y tipo II LLC para el relleno. Y eso es todo. Eso es todo por esto. Entonces digo que vamos a necesitar es este perilla justo por aquí, que es sólo un círculo de 16 por 16 píxeles. Así que presiona O y consigue la herramienta ovalada o la herramienta de círculo, mantén pulsado shift y arrastra un círculo 16 por 16, y el color de fondo de azul para que esté bien, fresco. Entra en el panel Capas, nombra perilla KNIME. Y lo siguiente que queremos hacer es poner el relleno y la perilla en un marco automático. Y cómo vuelves a hacer eso, seleccionas a ambos, presiona Shift a Y ahora esto no es realmente lo que queremos. Queremos que su alineación esté en el centro así. Y ahora mismo, tal vez sientas que voy a una buena velocidad y no explicando todo a detalle. Es porque hemos estado discutiendo el auto-layout por más y son que lo sé, ya sabes, y así que solo déjame hacer un crucero. Está bien. Sí. Por lo que ambos están en un marco alcalino con 0 espaciado entre elementos. Y lo siguiente que quería asegurarme es que un perilla tiene restricciones de cambio de tamaño de ancho fijo y una altura fija. Y el rectángulo de relleno tiene una restricción de cambio de tamaño horizontal del contenedor Phil para que cuando se ajuste este marco, ¿ves eso? Sí, Dices que parece que la perilla se está deslizando y el rectángulo se está llenando en el espacio. Entonces la hace ¿vas al panel de Capas? Y siempre me aseguro de señalarlo. Leyendo desde el marco uno debe ser, solo llamémoslo partes porque solo sostenga el marco sostiene y partes importantes del deslizador. De acuerdo, ahora por el trach, ahora quiero que presten mucha atención de aquí en adelante. Lo siguiente que necesitaremos es que necesitaremos un marco. Está bien, así que voy a seguir adelante y seleccionar la parte para que pueda ver que es una dimensión. Voy a presionar F en mi teclado para obtener la herramienta de marco para que cuando arrastre un marco se cree. ¿ De acuerdo? Y voy a seguir adelante y asegurarme de que el marco sea de la misma altura que el marco de piezas justo aquí. Este marco que acabamos de crear, solo dejaremos que tenga un color de fondo blanco por ahora. Lo haremos desaparecer más tarde, pero por ahora, ya sabes, justo aquí, nos aseguraremos de que tengan la misma altura. Otra vez ahí o no. Necesito escalarlo un poco. Entonces ahora tiene 16 píxeles de alto, píxeles de alto, e incluso el marco de partes tiene 16 píxeles de alto. Voy a seguir adelante y seleccionar este marco que acabamos de crear, y voy a llamarlo, no elimines porque esta será una parte importante de todo el artilugio. Está bien. Yo solo estoy blanking digo que tenemos este punto porque estoy tan emocionado que esto tenga algo para averiguarlo por mi cuenta. Bueno, 60 por ciento por mi cuenta, así que estoy emocionado por ello. Bueno, vamos a seleccionar el marco de piezas y el marco que acabamos de crear. Y vamos a seguir adelante y ponerlos en un marco de diseño automático. Por lo tanto, selecciónelos ambos, presione Mayús a, y asegúrese de que el espaciado entre los elementos sea 0. Ahora para las restricciones de cambio de tamaño, para las restricciones de cambio de tamaño, quiero que el marco de piezas, el marco de diseño automático de análisis tenga la restricción de contenedor llena. Y quiero que este marco por aquí tenga ancho fijo. ¿ De acuerdo? Ahora mira esto cuando selecciono el marco, el marco que acabamos de crear y ajustamos el espaciado entre ellos, ves que el espaciado se incrementa y disminuye. Pero como el marco de piezas tiene, las restricciones de cambio de tamaño se llenan contenedor, llena el espacio que queda, por lo que este es fijo, por lo que éste se vea afectado. Este espacio aquí mismo es flexible, eso se está ajustando y lo que sea, lo que sea. Está bien. Este espacio de aquí mismo se está ajustando. Entonces seleccioné el marco equivocado y sólo para que haya espacio justo aquí entre estas dos cosas como ser ajustado y cualquier espacio que quede como llenado por el marco de piezas porque tiene las restricciones de cambio de tamaño. Entonces llena un contenedor, vale, todo debe haber empezado a caer juntos ahora y espero que estén llegando a ese momento aha. Ahora lo siguiente que quería hacer es seleccionar esta ruta de marco por aquí. Realmente no lo necesitamos. Vamos a hacerlo lo más delgado posible. Entonces ve al ancho, ajuste de ancho justo por aquí, y voy a seguir adelante y darle un ancho de 0.05. Preguntado entonces como podamos. Y lo siguiente que vamos a hacer a esto para desaparezca por completo es deshacernos de cualquier relleno que tenga. Entonces ahora este marco por aquí tiene justo esto, este marco de partes en particular. Y si ajuste el espaciado entre elementos de esta RAM, ve que este deslizador se ajusta, lo cual es genial. Y voy a seguir adelante y seleccionar este marco terminando este marco justo en esto. De acuerdo, entonces sabremos en un salvaje por qué llamo a este marco ajustar esto. Ahora aquí mismo, justo aquí, sólo tenemos el deslizador, no tenemos la base. ¿ De acuerdo? Lo siguiente que queremos hacer es tomar el ajuste esto, este marco justo por aquí y esta base y ponerlos juntos en un marco, no un marco óptimamente propio, solo un marco. Entonces lo que voy a hacer es antes que nada, sólo tienes que arrastrar la base y asegurarte de que sea casi el mismo ancho que esa justicia. Y luego voy a seguir adelante y mover el slider una bolsita aumentando el espacio entre artículos. Recuerda que hay un enmarcado justo por aquí y estamos ajustando este espacio justo por aquí. Entonces voy a seguir adelante y ajustar esto y moverlo un poco atrás. Y luego voy a seguir adelante y seleccionar eso y justo este marco y turno y flecha arriba para ajustarlo realmente, solo su posición. Entonces voy a y sigo presionando hasta casi alinearlo con el, con el rectángulo base. Lo siguiente que haremos es seleccionarlos a ambos y presionar el atajo Opción Comando G o hacer clic derecho y seleccionar selección de fotogramas. Y ahora este es todo el marco. Voy a seguir adelante y renombrar esto de fotograma uno a deslizador. Entonces voy a seguir adelante y asegurarme de que todo esté centrado verticalmente. Entonces si tu selecciona algo dentro de un marco, dentro de un marco normal y haz clic en este ícono para centrarlo verticalmente. Lo ajustará en relación a ese marco en particular. Entonces voy a seguir adelante y asegurarme de que todo esté bien centrado y lo vertical. Entonces supongo que lo son. Y ahora que dicho tenemos el slider, tenemos el slider justo aquí, justo aquí, C. Y dentro del slider, si has tocado y mirado alrededor en el archivo final, ya sabes lo que eso dentro del marco del deslizador nosotros tenía eso justo esto que usamos para ajustar, que usamos para ajustar cuánto tiene hendidura el deslizador. Y de igual manera en este marco justo aquí que acabaría de crear, tenemos un ajuste este marco con el que podemos ajustar la posición del perilla. Y eso es genial. Eso es genial. Slider se realiza como comprobación final. Queremos asegurarnos de que se redimensiona adecuadamente. Entonces ahora mismo si estiro el marco, no pasa nada. ¿ Y por qué es eso? Bueno, espero que lo puedas incluir. Hace eso porque los hijos del marco, las cosas dentro de él, no tienen las restricciones de cambio de tamaño adecuadas. Por ejemplo, la base acaba de salir. Queríamos escalar ya que es redimensionar horizontalmente. Y de igual manera para el ajuste este marco, queremos que se escale a, todo el marco se ajusta o redimensiona horizontalmente. Entonces ahora mismo ves cómo funciona bien, muy sensible a los cambios de tamaño. Y también puedo seguir adelante y jugar con él. Justo esto así como eso lo estás diciendo. Y sé cómo es. Sé que es para mí si estaba mirando del otro lado, ya sabes, va a ser como conocer el truco del mago. Y sé que no es tan emocionante, pero Más que nada, aprenderás a explotar las capacidades de autodiseño para crear algo totalmente loco y personalizado. ¿ Y qué tan grande es eso? Lo siguiente que puedes hacer es probablemente convertirte en un componente y usarlo donde quieras de tu proyecto. Genial. 11. Conclusión: Bueno, eso es todo para esta clase. Pasamos de no saber nada sobre el diseño automático en el primer video a hacerla funcionar a nuestros propios caprichos y reunirnos y hacer cosas que realmente está destinado a hacer en el último video. Entonces pasamos por mucho y reaprendemos muchas cosas en el medio. Espero que veas que tan poderosa puede ser la sencilla característica, y espero que si no la estás usando ya, lo harás. Ahora, si te gustó esta clase, puedes seguir adelante y dejar una reseña aquí en Skillshare. Eso significaría mucho disponible en Twitter en Nashville, puedes encontrarme, dispararme un DM o una clase solicita. Todo estoy abierto a eso. Y con esto, espero que te vea pronto en otra clase. Adiós.