Responsive Design en Figma: diseño, restricciones, puntos de interrupción y modos automáticos de Figma

1. Intoducción: Disposición automática, volviéndole loco. Asustado de lo que va a pasar con el diseño en el navegador. Y entonces esta clase es la adecuada para ti. Aprenderemos todo sobre cómo configurar diseños responsivos y figma. Esto va a ser una inmersión profunda en las restricciones de diseño automático y lo más importante, pero realmente discutió cómo lidiar con los puntos de ruptura, que van desde una configuración tradicional hasta el aprovechamiento de variables y modos T. Comprender y combinar estas herramientas le ayudará a configurar componentes, patrones de diseño y páginas enteras que se alineen con la configuración del código. Comenzaremos con el poderoso diseño automático y realmente envolveremos nuestra cabeza alrededor de la configuración de componentes verdaderamente receptivos. Comenzaremos desde cero y trabajaremos hasta cambiar el tamaño, y el poder de anidar sin fin, creando elementos más complejos e incluso páginas enteras con diseño automático Como siempre, te mostraré tesoros escondidos y algunos consejos y trucos en el camino. C. Luego veremos las restricciones y cómo son salvavidas cuando se trata de combinar el diseño automático en cuadrículas Una vez que nos aseguramos de entender estos fundamentos del diseño responsive en Figma, aprendamos sobre los puntos de quiebre, cómo funcionan realmente bajo el capó en CSS y cómo podemos configurar nuestros diseños de Figma Esto abarcará desde configuraciones más tradicionales hasta funciones avanzadas como usar modo para automatizar los cambios de diseño y escalar la tipografía a través de diferentes Con el archivo de material del curso, puedes trabajar a mi lado o regresar a ejercicios con instrucciones detalladas en tu propio tiempo. Esta clase es adecuada para ti si tienes conocimientos básicos de Figma o si eres un usuario avanzado de Bigma y quieres repasar tus habilidades Este es un curso de Moon learning dot IO. 2. Versión de la interfaz de usuario y material del curso: Heads up Figma ha actualizado su interfaz de usuario y es posible que veas un nuevo diseño en lugar del antiguo Los cambios son en su mayoría visuales. Todas las características y herramientas siguen ahí, solo en lugares ligeramente diferentes o con un nuevo aspecto. En caso de emergencia, siempre puedes volver a la interfaz de usuario anterior, hacer clic en un pequeño signo de interrogación abajo a la derecha, y aquí puedes ver, volver a la interfaz de usuario anterior. Actualmente, no todos obtienen acceso automáticamente a la nueva interfaz de usuario. Figma desafortunadamente está implementando esto de manera bastante aleatoria. Por lo tanto, encontrarás dos versiones de este curso. La versión antigua con la interfaz de usuario antigua en el archivo o este curso aquí mismo en el que te encuentras actualmente, que tiene una estructura un poco diferente, videos actualizados y está usando la última interfaz de usuario. Así que tan pronto como tengas acceso a la última interfaz de usuario, asegúrate de usar la versión actualizada. Por favor, asegúrate de que también obtienes los archivos del curso correctos. Se pueden ver claramente marcados, uno para el curso antiguo, y otro para el nuevo curso. Son diferentes en estructura, por lo que es muy importante que obtengas el archivo correcto, para que puedas seguir a lo largo de todos los videos. Encontrará todos los enlaces finales de información en la descripción a continuación. También tenga en cuenta que FIPMA es muy dinámico. Esta interfaz de usuario, como la vemos hoy, definitivamente cambiará a lo largo del próximo año. Esto probablemente serán pequeños cambios como un desplegable, siendo una casilla de verificación Las pequeñas barras laterales flotantes podrían estar pegadas a un lado. La estructura general seguirá siendo la misma, pero seguro que tendrás una ligera diferencia a la hora de ver los videos. Nada de qué preocuparse, todo debe estar todavía en su lugar y ser claro para que puedas acceder y ser utilizado. 3. LAYOUT: 01 ¿Qué es la disposición automática?: Vamos a hacernos una idea, ¿qué es diseño automático y para qué lo usamos? Con la disposición automática, podemos configurar nuestros diseños en Figma tal manera que correspondan al cambio de tamaño Esto funcionará en cosas como componentes individuales, pero también en grupos de esos componentes. Eso significa que realmente podemos usar el diseño automático para configurar cualquier cosa, desde un botón hasta una página completa. Notarás que a veces cuando aplicas el diseño automático, esto funciona muy bien y es súper fácil. No obstante, en otras ocasiones, simplemente se comportará de la manera más extraña y hay que entender por qué Esto se debe a que el diseño automático no es solo un botón en el que haces clic. Se compone de tres pilares y hay que entender cada uno de ellos en profundidad. El primero es el diseño y posicionamiento, el segundo, el comportamiento de cambio de tamaño y el tercero anidado Vamos a entender cada uno de estos pilares con más detalle y luego unirlos como un todo, dándole total confianza para configurar cualquier cosa con el diseño automático. 4. Actualización: actualización de cuadrícula de diseño automática: Una pequeña actualización ya que Figma acaba agregar una nueva característica al menú de diseño automático Entonces el menú de diseño automático ahora se ve así, bastante similar. La primera parte, esto significa que no tenemos ningún diseño automático aplicado. Entonces tienes estos dos medios aquí, y ese es el diseño automático tal como lo teníamos antes con elementos verticales y horizontales, y esto es lo que vamos a recorrer en las próximas sesiones. Al final aquí, tienes una nueva pequeña característica, y eso te permite crear una cuadrícula de diseño. Entonces te recomiendo que revisas las siguientes lecciones para entender esta primera parte aquí, y quiero darte una introducción rápida a la segunda parte Estaré actualizando y agregando más información sobre la grilla. Entonces básicamente lo que hace la cuadrícula, si seleccionas cualquier fotograma y luego seleccionas la nueva opción de cuadrícula y podrás ver que obtienes estas celdas. También estás recibiendo un menú de cuadrícula. Y si haces clic aquí, entonces puedes alterar esto. También podemos alterar los huecos, o huecos horizontales o verticales, y también podemos agregar algo de relleno para que quede alrededor de nuestra cuadrícula. Ahora agreguemos algunos elementos. Así que simplemente puedes arrastrarlos al lienzo y podrás ver que puedes seleccionar las celdas donde quieres colocarlos. Pueden atravesar celdas y, por supuesto, puedes alterarlo a tu gusto. Agreguemos este aquí también, y podrás moverlos libremente. Por defecto, si seleccionamos uno de ellos, vamos a acercarnos un poco más. Puedes ver que esto está configurado para llenar, pero por supuesto puedes cambiarlo aquí. Si no sabes sobre la configuración de redimensionamiento, sí, entonces no te preocupes, vas a aprender todo sobre ellos durante las próximas sesiones Y si cambiamos el tamaño de nuestro marco, puedes ver que todo esto está redimensionando puedes ver que todo esto está redimensionando muy bien con nuestro marco La parte interesante es que probablemente vas a configurar tus componentes con esta parte aquí, así que el diseño automático estándar, como sabíamos en los ajustes unidimensionales. Y luego vas a agregar esto a tu grilla. Así que simplemente puedes arrastrar eso aquí y puedes anidar diseño automático unidimensional en dos dimensiones. También se podría agregar bidimensional en dos dimensiones, y es entonces cuando se vuelve poderoso. Lo importante es que entiendas todo este menú. Esta parte de aquí es en realidad la complicada, la parte vieja. Así que asegúrate de pasar por las siguientes sesiones, y luego la cuadrícula es aquella en la que puedes simplificar tu diseño general. 5. DISEÑO AUTOMÁTICO: 02 Configuración de marcos de diseño automático: Aprendamos a configurar un marco de diseño automático. Con la maquetación automática nuestros elementos de diseño pueden responder a su contenido. Aquí tengo un botón. Sin auto layout, se puede ver que si cambio el contenido, entonces nada se adaptaría. Ahora bien, si agrego diseño automático, lo que simplemente puedo hacer seleccionando este botón, y luego en el lado derecho en el panel de propiedades, en el diseño, hago clic en el botón de diseño automático. Si ahora cambio el texto, puedes ver que se adapta automáticamente a cualquier contenido que me den. Hagamos lo mismo con mi tarjeta. Yo seleccioné. Agrego diseño automático y ahora convertí esto en un marco de diseño automático. Ya puedes ver si cambio algo del contenido, entonces todo se adaptará, pero aún así mantendrá todo su relleno. Ahora bien, este relleno y espaciado, si vuelve a seleccionar el marco de diseño automático, puede verlo en el panel de propiedades del lado derecho. En el menú aquí, puedes ver que primero obtienes algo llamado la brecha entre los artículos. Entonces estos son todos los artículos infantiles. Entonces los artículos de mi hijo aquí serían mi imagen, mi titular y mi texto. Vamos a conseguir que este vuelva a su estado original. Y entonces si yo cambiara esto, entonces se puede ver que cambia la brecha entre estos elementos. Si mantienes presionada la tecla shift, entonces va a saltar hacia arriba y hacia abajo tu cantidad n. También puedes ajustar cualquier cosa directamente en los cavas o puedes hacer doble clic y luego escribir el valor que buscas Eso funciona igual para tu acolchado. Aquí tienes tu acolchado horizontal y tu vertical. Podrías cambiar esto aquí mismo. En tu panel de propiedades, también puedes simplemente escribir cualquier número que busques, y también podrías ajustarlo en el Lienzo usando los manejadores o simplemente haciendo doble clic y agregando cualquier valor. Con el menú de alineación, ahora puede alinear sus elementos dentro de su marco de diseño automático. Vamos a hacer esta imagen más pequeña para que la veas mejor. Podrías alinear todo a la derecha, todo al centro, o todo a la izquierda. Esto alinea todo el cuadro de texto, no el texto en sí. Si desea alinear el texto, aún necesita usar la configuración de las propiedades de texto. El diseño es muy bueno para adivinar la dirección en la que estás diseñando Pero si alguna vez quieres cambiarlo, entonces podrías usar estos errores aquí arriba, así podrías cambiar de vertical a horizontal. RAP es algo que usaríamos si tenemos más elementos de diseño automático, así elemento anidado uno al lado del otro No es nada que necesites ahora mismo al principio. Puedes mover elementos en o al diseño ya sea simplemente arrastrándolos o puedes usar tus teclas de error en tu teclado para subir y bajar. Verás que en el panel de capas, van a cambiar posición según donde las coloques. También puede eliminar la función de diseño automático en cualquier momento, simplemente seleccione el marco y luego haga clic nuevamente en el botón de diseño automático. Te vas a quedar con solo un marco sencillo. Además del panel de propiedades, también puede usar un atajo Shift y A para crear un marco de diseño automático, y todos shift y A para eliminarlo, o simplemente puede usar clic derecho. El atajo es muy útil, si, por ejemplo, solo tienes algo de texto, entonces no vas a ver la opción de diseño automático en el panel de propiedades, sino que puedes presionar shift y A. Esto lo va a convertir en un marco de diseño automático. Entonces, si agregamos algo de relleno, puedes ver que agregó un marco alrededor de tu texto. Si quitas el diseño automático, y puedes ver que te fuiste con un marco y tu texto dentro. Esta es también la razón por la que se llama marcos de diseño automático porque solo funcionará con un marco. Si lo aplicas algo así como solo un texto, un grupo, siempre lo convertirá en un marco para ti. 6. LAYOUT AUTO: 03 El menú de disposición automática: Echemos un vistazo más de cerca al menú de diseño automático para entenderlo completamente. Así es como se ve actualmente. Es importante entender que Figma es muy dinámico y constantemente iterando y mejorando Entonces, lo que ves en la pantalla ahora mismo podría verse un poco diferente en unos meses. Las funciones y los botones pueden entrar y salir de los submenús y alrededor del panel de propiedades. Entonces hay que acostumbrarse a esto. Es crucial entender las características por sí mismas, ya que te ayudará a saber qué buscar. Te proporcionaré cualquier video actualizado para cambios importantes. Así que ten cuidado con esos. Figma también le permite volver a interfaces anteriores a Haga clic en el signo de interrogación en la parte inferior derecha para cambiar entre las versiones de la interfaz de usuario. Por defecto, verás la versión simplificada del menú. Si recién estás comenzando, es posible que quieras ver algunas etiquetas. Puede agregarlos haciendo clic en el error junto al porcentaje de visualización en la parte superior y seleccionar etiquetas de propiedad. Antes de pasar por el menú, recordemos, diseño automático se compone de tres pilares, disposición y posicionamiento general, comportamiento de redimensionamiento y anidamiento A lo largo del curso, aprenderemos sobre cada uno de estos pilares en detalle, brindándote una comprensión redondeada y estructurada de esta característica, lo que prometo hará tu vida de diseño sea mucho más fácil. A mi disgusto personal, el menú comienza con el redimensionamiento, que es nuestro segundo pilar Veremos esto con más detalle más adelante ya que es una parte más complicado, así que ignora esa por ahora Básicamente te muestra el tamaño de un elemento, en punto, o su comportamiento conjunto. La sección media trata sobre el diseño y posicionamiento automático general, que es lo que generalmente denominamos el menú de diseño automático. Concentrémonos en éste por ahora. Para empezar, tenemos las opciones de dirección, por lo tanto horizontal o vertical, y una tercera opción llamada wrap, que nos permite envolver elementos en una nueva línea de redimensionamiento. Esta también es una característica más avanzada, y vamos a explorar eso con más detalle más adelante. Con la alineación, podemos alinear elementos dentro de un marco. Tenga en cuenta que esto aplica a todos los niños igual. Con Gap, podemos definir la brecha entre los hijos directos. Pequeño consejo en cualquiera de estos campos, si seleccionas los campos, mantén presionada la tecla shift y luego usas tus teclas arriba y abajo, entonces va a saltar en tu cantidad establecida de Ng. En mi caso, esto se establece en ocho. Por defecto generalmente se establece en diez. Puedes cambiarlo, simplemente haz clic en el menú Figma sobre acciones, y luego buscar Ng Y entonces podrías establecer tu gran notch 28. También puedes encontrar un menú de notch a través de la búsqueda de IA. Aquí abajo, tenemos el relleno. Podemos establecer el relleno ya sea superior e inferior juntos o abrir el menú extendido para configuraciones individuales. Un pequeño consejo, si mantienes el comando y haces clic en cualquier campo, puedes usar la notación CSS para arriba, derecha, abajo e izquierda. Cualquier valor de espaciado o relleno que puedas establecer en el menú, también se puede establecer directamente en el lienzo. Te darás cuenta de las pequeñas asas. Puedes arrastrarlos o hacer doble clic y escribir cualquier número. Pequeño consejo para el acolchado. Si desea seleccionar ambos lados, mantenga presionada la vieja. Si desea seleccionar los cuatro, mantenga viejo y turno. El último elemento es el cuadro de contenido del programa o clip. Esto es más un ajuste de diseño general que específico de diseño automático. Determina si quieres mostrar algún elemento que crezca más allá del marco. Esto va a ser bastante relevante para la creación de prototipos. 7. DISEÑO AUTOMÁTICO: 04 La configuración automática: Hay una característica que está un poco oculta, pero la uso todo el tiempo. Quiero que te des cuenta de ello, y se llama auto. Esta característica se llamaba anteriormente espacio entre en Figma y todavía se llama así en Flexbox También podrías escuchar este nombre siendo referido. Entonces básicamente, aquí tenemos nuestro marco con tres elementos hijos. Y si cambio el tamaño, entonces puedes ver que puedo alinear esto ahora está en el medio, puedo alinearlo a la izquierda, pero siempre lo mantendrá espaciado Ahora, en el espaciado con el desplegable, puedo cambiar esto a Auto Con Auto, el espacio se distribuye equitativamente entre los niños. Además del menú desplegable, también puedes simplemente hacer clic en los mangos. Ahora, si escribe algún valor, entonces saltará de nuevo a la configuración original. O si haces doble clic de nuevo y tecleas auto, entonces saltará al espacio entre, o como lo llamamos ahora auto. Mi atajo favorito, simplemente haga clic en el menú de alineación para alternar entre empaquetado y espacio entre, o también puede usar el atajo x mientras está en el menú de alineación. Auto es muy, muy útil cuando queremos crear cosas como una navegación, donde queremos sentar algunos elementos la izquierda y pegar otros a la derecha. Ahora, lo bueno es que si agregamos más elementos, depende de dónde los agreguemos. Entonces ahora esto sería un hijo directo. Entonces ahora tenemos tres elementos hijos. Entonces, si redimensionamos, el espacio disponible se distribuye entre tres Pero si coloco esto dentro de mi marco anidado aquí, entonces vuelvo a mi configuración original Muchas veces, Aalto será solo la solución que estabas buscando. Así que tenlo en mente. 8. DISEÑO AUTOMÁTICO: 05 menú de diseño automático avanzado: D menú de configuración avanzada. Hay un pequeño icono que hemos estado ignorando hasta ahora, que es D configuración avanzada Seleccione cualquier marco de diseño automático. Entonces si hacemos clic en esto, puede ver que tenemos ajustes para trazos, tarima de lona, y una línea base de texto actualmente. Vamos a correr rápidamente a través de la dosis. Voy a comenzar con el primero, que son los trazos, y se puede ver por defecto que está excluido. Si pasamos el cursor sobre nuestro relleno aquí, puedes ver que actualmente tengo 32 acolchados, y puedes ver que tengo mi trazo establecido en 16, así que está ocupando la mitad de mi relleno. Simplemente puedo cambiar aquí, incluir en el diseño, y ahora puedes ver que mi relleno está completamente usado y mi trazo está fuera de esta configuración de marco de diseño automático. Nuestro siguiente arriba es nuestro apilamiento. Echemos un vistazo a éste. Si seleccionamos elementos, entonces es importante entender que el espaciado también puede ser negativo. Con la configuración avanzada, ahora podríamos cambiar el orden de apilamiento, para que podamos tener el último en la parte superior o el primero en la parte superior. Y nuestro último en mirar es nuestro escenario de referencia. Entonces aquí voy a seleccionar este submenú. Entonces mis artículos, puedes ver cómo están configurados, así tengo mis artículos NAF y mi botón Se puede ver que actualmente, están alineados. También puedo alinearlos al centro, pero a veces puede que no se alinee con esta línea de base que estás buscando. Entonces, lo que puedes hacer es seleccionar la alineación a la línea base, y en una pequeña ventana de vista previa, ya la puedes ver, y va a alinearse ligeramente con la línea base. Esto también es algo que quizás quieras usar si estás teniendo un botón con una Con, por ejemplo, y quieres alinear esto con el texto. Entonces estos son ajustes que no vas a usar con demasiada frecuencia, razón por la cual se escondieron en este pequeño submenú 9. DISEÑO AUTOMÁTICO: 06 Configuración de cambio de tamaño: Cambiar el tamaño con diseño automático. Así que hemos aprendido que simplemente podemos convertir cualquier elemento en un marco de diseño automático. Podemos ajustar el espaciado y el dimensionamiento y relleno, y a medida que alteramos el contenido, entonces podemos ver que nuestro marco corresponde. Ahora bien, funciona muy bien así porque si volvemos a echar un vistazo, este es un marco de diseño automático vertical. Pero lo que también queremos haga este marco es que si lo redimensionamos, entonces queremos que nuestro contenido también responda así Para que eso funcione, necesitamos agregar una capa adicional de diseño automático, que se llama cambiar el tamaño de la configuración Puede encontrar la configuración de cambio de tamaño en la parte superior del cuadro de diseño Si tiene el diseño automático aplicado, esto podría ser en el marco padre o en el marco anidado, entonces puede encontrarlo dentro de aquí Pero también cualquier elemento dentro de un marco de diseño automático. Si haces clic en él, entonces vas a obtener el cuadro de diseño con la configuración de cambio de tamaño para este elemento Esta es la parte que nos interesa. Por lo tanto, es muy importante entender que mientras aplicamos el diseño automático al marco padre, el menú de diseño automático determina el comportamiento de todos los elementos secundarios dentro de ese marco. Entonces la alineación para todos estos elementos, el espaciado para todos estos elementos. Ahora bien, si queremos configurar cómo deben comportarse estos elementos individualmente, entonces necesitamos seleccionarlos y establecer su comportamiento de cambio de tamaño, no el comportamiento de cambio de tamaño del marco general. Las opciones actuales que tenemos es un tamaño fijo, llenar el contenedor, o abrazar el contenido. diseño automático se volvió realmente bueno para adivinar qué comportamiento podrías desear Así que en realidad podrías salirte con la tuya con esto. Por ejemplo, esta imagen aquí ya está configurada para llenar el contenedor. Y esto se debe a que Auto layout detectó un margen similar a izquierda y derecha. Pero recomendaría encarecidamente que no confíe en estos ajustes preestablecidos y realmente intente entender una vez cómo configurar el cambio de tamaño adecuado La configuración de cambio de tamaño suele ser la parte gente se confunde más sobre el diseño automático, pero no es tan difícil Realmente es solo entenderlo una vez y practicarlo un poco. La parte crucial es ir paso a paso. Esto no se puede apresurar. Así que vaya poco a poco. Lo primero que vamos a seleccionar es nuestra imagen. Ahora vamos a nuestro menú desplegable y pongamos esto para llenar el contenedor. Eso quiere decir que si redimensionamos el contenedor, va a, bueno, lo que dice, llenarlo, siempre respetando el relleno que dijimos izquierda y derecha Aquí estamos tratando con una configuración horizontal, así que no me preocupo demasiado por la configuración vertical. Aún así, voy a tener este de aquí a una altura fija. Eso quiere decir que mi imagen siempre está fija a esta altura específica. Ahora voy a ir con el siguiente elemento, que es mi texto, y quiero hacer lo mismo. No quiero que esto se arregle a la talla. Quiero que esto sea horizontal para llenar el contenedor. Y voy a hacer lo mismo para mi texto de copia. También quiero esto para llenar el contenedor. Ahora con texto, no quiero fijar la altura porque no sé qué tan alto va a ser esto si agrego más texto o si cambio el tamaño Por eso quiero que esto se abrace. El abrazo es una pequeña característica muy linda. Básicamente, piénsalo como darle un abrazo al contenido vertical. Cuando se trata de copiar texto en diseño automático, y por la presente, me refiero a cualquier cosa que no sea un botón o un enlace, luego asegúrese de que siempre esté configurado en altura automática. Por lo general, el diseño automático lo hace por sí mismo. Y eso ya es prácticamente todo. Cambiemos el tamaño de nuestra caja ahora y podrás ver que todo sigue muy bien Aunque cambie mi texto. Agreguemos un poco más de texto copiado aquí. Puedes ver porque esto está configurado en altura automática y Hug the box se expande automáticamente y el diseño automático responde. Todavía puedo cambiar cosas como mi espaciado y mi dimensionamiento con el menú de diseño automático. Pero si cambio el tamaño, entonces todo se comportará de la manera en que se pretendía La función de diseño automático en Figma es bastante inteligente. Entonces, si yo, por ejemplo, tengo un botón aquí, quiero agregar, y lo convierto en auto layout, entonces puedes ver que no solo recoge automáticamente todo el espaciado, sino que también ya me da un ajuste de redimensionamiento sugerido Ahora, en un botón, Abrazo horizontalmente y Abrazo verticalmente tiene sentido, porque si cambio esto, así que digamos cámbialo para leer más, entonces puedes ver que quiero que esto sea abrazado horizontalmente también Y por cierto, también puedo arrastrar un marco de diseño automático dentro de otro. botón estaría anidado y mantendrá sus ajustes de redimensionamiento Si quisiéramos moverlo, entonces lo que podríamos hacer es usar la alineación. También podríamos cambiar su configuración de redimensionamiento. Por ejemplo, si quisiéramos un botón de tamaño completo, entonces podríamos cambiar esto para llenar contenedor y se sentaría en el medio. Tenga en cuenta que si su texto está pegado a la izquierda, entonces esto probablemente se deba a que la alineación del botón aún está configurada a la izquierda, y puede cambiarlo al centro. 10. DISEÑO AUTOMÁTICO: 07 consejos de cambio de tamaño vertical: Algunos consejos de redimensionamiento vertical que te pueden gustar. En diseños como estos, es posible que desee que todos los autos sirvan a la misma altura. Puede que tengas la tentación de resolver esto manualmente. Sin embargo, esta no va a ser una solución realmente buena porque cuanto estés redimensionando, y esto ya no va a funcionar. Hay una manera mucho más fácil de hacer esto. Lo que necesitas hacer es seleccionar todos los elementos hijos, y por cierto, hay un pequeño atajo agradable, seleccionar el contenedor padre, presionar enter, y luego vas a haber seleccionado todos los hijos directos a la vez. Y ahora vamos a ir a la configuración de redimensionamiento vertical y establecer esto para llenar el contenedor. Y aquí vamos. Ahora, esto siempre va a llenar el contenedor. Esto es muy agradable porque siempre tenemos la tarjeta con más contenido dictando la altura para esto Esto se debe a que el contenedor padre está configurado para abrazar y todos los hijos están establecidos para llenar. Otra cosa que quizás quieras hacer que a veces quieras tener algo como un botón o una barra específica en la parte inferior de tu tarjeta sin importar el tamaño. Ahora también podemos hacer esto con nuestro ajuste horizontal. Todo lo que necesitamos hacer es cambiar de una cantidad fija a auto. Recuerda, tenemos nuestro atajo en el menú de alineación, solo haz doble clic. Siempre se puede ajustar el acolchado individual. Veamos aquí en la parte inferior, podrías simplemente subir un poco, o por supuesto, también en la parte superior. Esto realmente depende de ti cómo quieres configurar esto. Verás ahora como estamos redimensionando, todo se queda en su lugar. Muchas veces usamos nuestro cambio de tamaño horizontal, pero también nos olvidamos un poco del poder del redimensionamiento vertical. Así que asegúrate de considerar esto. 11. DISEÑO AUTOMÁTICO: 08 Ignora el diseño automático: Ignorando el diseño automático. ¿Qué significa eso? Entonces aquí tengo un marco de diseño automático. Quiero arrastrar esta nueva pegatina aquí, y quiero que quede encima de mi imagen. Ahora bien, si simplemente lo arrastro dentro del marco de diseño automático, notarás que no puedo tirarlo encima de la imagen ya que se convierte en parte del diseño automático tan pronto como entra en el marco. Lo que puedo hacer ahora es colocarlo dentro del marco, seleccionarlo, y luego en el panel de propiedades, bajo posición, se encuentra este pequeño icono llamado ignorar diseño automático. En versiones anteriores, a esto se le llamó posición absoluta. Ahora puede arrastrar libremente su elemento alrededor del marco de diseño automático. Little Tip, también hay un atajo, mantenga presionado el control y simplemente arrástrelo dentro de un marco de diseño automático, y luego tendrá que ignorar el diseño automático aplicado automáticamente. Si quieres quitártelo, simplemente haz clic nuevamente en el icono. Sin embargo, como he redimensionado la tarjeta, notarás que ya no responde al ancho. Esto se debe a que ya no forma parte del diseño automático. Por lo tanto, el cambio de tamaño no aplica. Lo que puedo hacer para resolver esto es que puedo seleccionar el elemento en una posición siguiente de buscar el menú de restricciones, y puedo pegarlo a la derecha. Esto solo funciona para elementos que no son de diseño automático. Esto también es genial para crear cosas como burbujas de alerta. Simplemente arrástrelo a su marco de diseño automático, ignore el diseño automático y luego colóquelo donde desee. Ahora, por defecto probablemente va a cortarlo. Asegúrese de seleccionar el marco padre y, en el menú de diseño automático, cambie de contenido de clip a mostrar contenido. Eso quiere decir que va a mostrar todo desbordando tu marco 12. DISEÑO AUTOMÁTICO: 09 componentes y variables de diseño automático: Si estás usando variables y configuras una colección con tus valores de espaciado, entonces puedes usarlas en el diseño automático. Esta es una excelente manera de asegurar la consistencia en todos los diferentes elementos y componentes de su diseño. Para aplicarlos a un marco de diseño automático, simplemente seleccione el marco y luego en su menú de diseño automático donde encuentre sus valores de relleno y espaciado. Si pasas el cursor sobre ellos, ves aparecer un pequeño signo variable Haga clic en él y obtendrá un menú desplegable con todos los valores. Ahora puede elegir el valor a continuación. También puedes usarlo para tu espaciado. Solo tienes que ir a aplicar la variable a través del menú desplegable, y ahora puedes elegir cualquier variable que te gustaría aplicar. Y por supuesto, puedes aplicar la misma variable varias veces a través de diferentes elementos. Siempre puedes cambiar la variable simplemente haciendo clic sobre ella y eligiendo otro valor de la lista o desconectarla haciendo clic en el pequeño clip Si no ves ese clip en algunos campos, entonces presiona la tecla Atrás dos veces. Y recuerde, en la producción, estamos trabajando con un enfoque basado en componentes, por lo que sería una buena práctica convertir cualquier marco de diseño automático que esté usando varias veces en un componente Si ahora sacamos una instancia, puedes ver que la instancia heredará cualquier valor de espaciado que hayas aplicado con variables A medida que estoy alterando el texto en la instancia, estas variables permanecerán en su lugar. Por supuesto, como con cualquier otro componente, esto también funcionaría con cualquier otra variable. Por ejemplo, si estableces una variable de color para tu componente, entonces todas las instancias heredan. 13. DISEÑO AUTOMÁTICO: 10 Configuración de los valores mínimo y máximo: Establecer valores mínimos y máximos. Al cambiar el tamaño de nuestro diseño, veces no queremos ir por debajo o más allá de cierto punto como en esta tarjeta. No quiero que sea más pequeño que esto. Lo que podemos hacer y para que esto funcione, necesitas tener tu elemento configurado como un marco de diseño automático es que en la configuración de redimensionamiento, ahora encontramos este pequeño desplegable, y aquí podemos ir a agregar un ancho mínimo Ahora puedo definirlo con solo escribir un número o usar un pequeño menú desplegable aquí. Podría aplicar una variable si hubiera configurado una de antemano. O simplemente voy a usar set to the current width. Ahora también voy a agregar un ancho máximo, y puedes usar ambos o solo uno de ellos, como sea que lo necesites. De nuevo, voy a dar click en el pequeño desplegable aquí, agregar un ancho máximo, y en este caso, solo voy a escribir el número 500. Ahora puedes ver que si estoy redimensionando, no me va a dejar cambiar el tamaño por debajo o más allá de este punto En este ejemplo, no tendría mucho sentido, pero en caso de que necesitara para otro diseño, por supuesto también puede establecer una altura mínima y máxima. Puedes aplicarlos en un máximo al marco padre, pero también puedes aplicarlos a cualquier elemento dentro de tu marco de diseño automático. Por ejemplo, no quiero que este texto crezca más grande. Voy a seleccionarlo, y voy a agregar un valor máximo, y lo voy a establecer al ancho actual, y ahora anotar cómo este texto todavía está configurado para llenar contenedor. A medida que redimensione, va a crecer muy bien. Sin embargo, va a llegar a cierto umbral y va a dejar de crecer y se va a quedar agradable y legible. 14. LAYOUT AUTO: 11 ajustes de layout automático: Elementos envolventes entre líneas. Aquí tengo un marco de diseño automático que contiene instancias de la tarjeta y un elemento de boletín. Actualmente todos están establecidos en un tamaño fijo. Ahora, hemos aprendido sobre el posicionamiento horizontal y vertical. Pero hay una tercera llamada Ap. Si selecciono Ap en un marco de diseño automático, ahora puedo cambiar el tamaño y los elementos fluirán a la siguiente línea tan pronto como no haya suficiente espacio disponible Con la ayuda del menú de alineación, podemos elegir cómo hacen esto. Entonces podemos centrarlos, ponerlos a la izquierda o a la derecha, o uno de mis favoritos, hacer doble clic, y ahora tenemos este configurado en Auto, y por lo tanto, van a agotar todo el espacio disponible. Ahora bien, esto funcionará con elementos fijos, y podríamos, por ejemplo, poner aquí esta tarjeta para llenar el contenedor. Veamos qué pasa ahora si redimensionamos. Vamos a despegar el auto, y ahora podemos ver como estamos redimensionando y salta a una nueva línea que esta está ocupando todo el ancho. Sin embargo, lo que podemos ver aquí es que esto no funciona correctamente porque solo va a aplaudir esto demasiado. Así que podemos combinar esto muy bien con el ajuste mínimo y máximo. Lo que vamos a hacer es que vamos a establecer esto en el componente principal, así que todas las instancias heredan Voy a seleccionar esto aquí, y ahora voy a usar el menú desplegable y agregar un ancho mínimo y lo voy a establecer al ancho actual, y no voy a establecer un ancho máximo por ahora. Si estoy redimensionando ahora, puedes ver que ahora como salta a la fila superior, va a mantener un tamaño perfecto, pero a medida que entra en la siguiente línea, va a agotar el espacio completo. Y podemos combinar eso tal como necesitábamos. Podríamos hacer lo mismo con esta tarjeta aquí a un valor mínimo, vamos a usar el tamaño actual, y luego un valor máximo, digamos alrededor de este tamaño. Ahora lo que tenemos que hacer es que esto todavía esté establecido en un valor fijo. Seleccionemos todas estas tarjetas y fijémoslas para llenar el contenedor. Ahora, a medida que redimensionamos, puedes ver que están redimensionando muy bien con sus propios ajustes mínimos y máximos. 15. 12 Imágenes con relación de aspecto fija: Ahora configura imágenes de proporción de Apec con Figma. Aquí tengo una tarjeta de diseño automático con una imagen. Ahora solo selecciona el elemento que quieres aplicar la relación de aspecto. Por cierto, esto también funciona para marcos. Y luego justo al lado de tus tallas ves este pequeño candado. Haga clic en él. Y si ahora redimensiona, puede ver que la imagen mantiene muy bien la proporción de aspec Una pequeña decepción, si saltas a modo sordo en este momento, pero ten en cuenta como recién se estrenó, esta es la traducción que vemos Lo que idealmente nos gustaría tener es una relación aspec tal y como la vemos en CSS, pero aún es temprano. 16. DISEÑO AUTOMÁTICO: 13 Aprende sobre el anidamiento y la relación entre padres e hijos: Entendamos el anidamiento y una relación padre-hijo. , para tener la cabeza alrededor del anidamiento en el diseño automático Por cierto, para tener la cabeza alrededor del anidamiento en el diseño automático, así como en el código, es importante comprender la relación padre-hijo Aquí se puede ver un diseño de tarjeta que configuré. Ahora no hay ningún diseño automático aplicado hasta el momento. Se puede ver que esta tarjeta tiene clústeres. Esta intra parte aquí pertenece a la junta, y luego tenemos un texto y un enlace que pertenecen juntos. Ahora bien, si seleccionara esta tarjeta y simplemente aplicara el diseño automático, entonces esto sucedería. Lo que pasó es que el diseño automático agregó la misma cantidad de espaciado entre todos los elementos. La razón de esto es que diseño automático lo ve así. Nuestro marco es el elemento padre, y luego cualquier cosa que encuentre justo debajo en la primera capa de jerarquía son los hijos. Todas las reglas de diseño automático se aplican a todos estos hijos. En este caso, nuestro espaciado. Ahora si seguimos adelante y anidamos esto, ahora tengo aquí un marco anidado de diseño automático, y también anidé esta parte Entonces el diseño automático va a mirar el diseño así. Tenemos el marco de ejemplo de anidamiento que sigue siendo el padre, pero ahora solo tenemos tres elementos hijos Ahora bien, si cambiamos nuestro espaciado, por ejemplo, entonces esto sólo va a afectar a los niños. Todavía tenemos todas nuestras capas, pero ahora son nietos Ellos van a seguir la regla de sus propios padres. Dependiendo de cómo quieras que tu diseño cambie y se comporte, necesitas ajustar este anidamiento Por ejemplo, digamos que quieres una imagen de ancho completo. Lo que tenemos que hacer es deshacernos de nuestro acolchado en ambos lados. No obstante, lo que también queremos es que todavía queremos tener algún margen aquí. Lo que podemos hacer ahora es que podemos seleccionar estos dos, crear otro diseño automático anidado, y ahora podemos aplicar los márgenes izquierda y derecha nuevamente Si queremos deshacernos de la cima, también podemos hacer esto, ponerle esto a cero. Ahora puedes ver que tienes un diseño completamente diferente, que también necesita sus propios roles de anidamiento Por eso es tan importante tener la cabeza alrededor de la anidación, y en realidad se trata solo de practicar Así que el diseño automático realmente no se trata solo de aplicar ese pequeño botón aquí. Se trata de pensar en la estructura general de tu diseño, luego aplicar marcos de diseño automático donde los necesites, y muy importante, todos estos marcos de diseño automático que anidaste, así como todas las capas dentro de ellos, debes pensar cuidadosamente qué comportamiento de cambio de tamaño quieres que tengan Realmente se trata de comprender y combinar los tres pilares del diseño automático. 17. LAYOUT AUTO: 14 Sugerir layout automático: Agreguemos algo de magia que sugiere el diseño automático. Aquí tengo algunos diseños que necesitarían un poco de anidamiento si quiero convertirlos en auto layout El primero bastante sencillo, esta parte sería un diseño automático anidado, luego esta parte, y luego todo esto es un diseño automático vertical La segunda carta un poco más compleja. Esta parte derecha tendría que ser un anidamiento de diseño automático vertical, y luego la propia tarjeta anidamiento de diseño automático horizontal Entonces tenemos una navegación, por lo que esta parte derecha tendría que ser anidada Y yo entre el logo y esta parte anidada derecha, necesitaríamos establecer auto también saber anidar espacio entre Ahora, podemos hacer todo esto a mano o podemos usar un pequeño truco. Empecemos por el primero. Si simplemente seleccionara un marco, aplicara el diseño automático, entonces esto sucedería, no es agradable. Además, si echamos un vistazo al segundo, definitivamente necesitamos un poco de anidación aquí Pero lo que podemos hacer es hacer clic derecho, y luego verá bajo el diseño automático del anuncio, otra opción llamada Sugerir diseño automático. O también podemos usar un atajo Shift Control y A. En el panel de capas, puedes ver que también diseño sugirió anidar para nosotros. Ahora, acabo de llamar a este marco para que podamos agregar un pequeño consejo adicional, que es hacer clic en el menú de IA y simplemente renombrar tus capas. Y luego también vas a obtener algunos buenos nombres de capa para estos elementos anidados Ahora echemos un vistazo si eso funciona. Eso se ve bastante bien si estoy redimensionando aquí. Si hacemos clic dentro de aquí, podemos ver que esto realmente agregó nuestro cambio de tamaño también. Esto está configurado para llenar, y también mi padre aquí está listo para llenar. Si alguna vez quisiera cambiar esto, entonces simplemente puedo eliminar o arrastrar estos elementos alrededor de mi panel de capas y cambiar mi anidamiento Entonces probemos la siguiente, y seleccionemos esta tarjeta, control de turno y A. Voy a usar el atajo. Además, voy a renombrar las capas. Echemos un vistazo. Eso también se ve bastante bien. Todavía puedo hacer ajustes. Digamos que quiero que esta imagen ocupe la mitad del contenedor, entonces simplemente puedo seleccionarlo y cambiar mi redimensionamiento para llenar el contenedor. Así, lo tengo ajustado a la forma en que quiero que se comporte. Nuestro último, echemos un vistazo a la navegación. Control de turnos y A, nuestro atajo, tomemos también el hábito de cambiar el nombre de las capas Esto va a renombrar cualquier cosa que no haya nombrado antes. Estos a los que me llamé antes no lo va a sobrescribir. Echemos un vistazo si eso aplicaba auto por sí mismo. Sí. Perfectamente, podemos ver que en el menú de alineación aquí, se aplicó ese auto. Esto realmente solía ser algo que era súper difícil hacer antes de que tuviéramos esta pequeña característica. Hacer uso de ella. Sin embargo, aún así te animaría fuertemente a que te acostumbras a entender también la anidación manual Porque en algún momento quieres cambiar alrededor de las cosas y necesitas entender por qué las cosas se configuran de cierta manera. Pequeña nota al margen, al momento de grabar esta función, esto es bastante nuevo y considerando lo poderoso e importante que es, esperaría que se mudara pronto de este pequeño submenú de clic derecho a mudara pronto de este pequeño submenú de nuestro menú principal de diseño automático, así que ten cuidado con eso. 18. Diseño automático: 15 algo de magia con mesas: Algo de magia con mesas. El diseño automático también es muy útil cuando quieres construir cosas como una mesa receptiva. Para que puedan ver aquí configuré una fila. Esto es simplemente un marco de diseño automático, y este actualmente está configurado en un ancho fijo, y luego verticalmente para abrazar. Y luego dentro, tengo todas mis diferentes columnas, y están dispuestas para llenar el contenedor y abrazar, y solo la primera, que es un número, puse esto en un tamaño fijo. Porque configuraría esto para que se llene, entonces simplemente ocuparía demasiado espacio. Lo que quiero hacer ahora es que voy a arrastrar una segunda. Voy a quedarme con este primero y en realidad voy a seleccionar el marco padre que Enter. Recuerda que esto selecciona todos los elementos hijos, y solo voy a hacer esos atrevidos. Entonces aquí dentro, quiero rellenar todos los contenidos. Puedes rellenar esto mano o yo solo voy a usar la Figma AI, y por cierto, estoy grabando esto cuando esto acaba de salir, así que probablemente va a verse un poco diferente para cuando veas esto y solo selecciona el fotograma que quieres que contenido se llene y solo voy a contarlo, hacer algo de contenido Ahora sólo voy a arrastrar una copia. Lo que también puedes hacer es una vez que tengas un copy hit comando N D, y eso va a copiar más en la misma distancia. Ahora estoy seleccionando todas mis filas y vuelvo a presionar Mayús A para anidar esto dentro de un marco de diseño automático. Porque lo que puedo hacer ahora es que me va a dar este pequeño mango mágico. Puedo seleccionar el marco y luego ir aquí y hacer clic en Reemplazar contenido para tener esto rellenado. O simplemente puedo arrastrar y abrir los manejadores, puedo crear tantas filas como necesite, y solo va a rellenar ese contenido para mí, lo cual es realmente genial. Ahora sólo voy a conectarlo con mi naming aquí arriba y voy a seleccionar ambos. Se vuelve a desplazar A. Echemos un vistazo si mi diseño automático funciona. Sí, esto funciona perfectamente. En caso de que no funcione, entonces solo asegúrate de seleccionar el marco padre, presionar enter, y mira que todo esto está listo para llenar. Esto debe estar configurado para llenar, y esto también debe establecerse para llenar. Así es como puedes crear una mesa bastante rápido con el diseño automático de Figma y algo de IA 19. DISEÑO AUTOMÁTICO: 16 ejemplos de configuración más avanzados: Practicemos el anidamiento y redimensionamiento más avanzados. Aquí tengo un conjunto de diseños más avanzados, y realmente quiero recorrerlos con más detalle. Quiero mostrarte por un lado, cómo los anidaría a mano, porque creo que es muy importante que entiendas el concepto general de cómo pensar en el diseño automático y el anidamiento Y luego también vamos a ejecutar Figmas forma automática de anidar, y también podemos comparar los resultados Voy a correr por esto bastante rápido. La idea es que veas lo que hago, lo pausas y luego saltes a tu archivo de ejercicios. Realmente se trata de hacer esto usted mismo y acostumbrarlo, porque el diseño automático, especialmente cuando se trata de cambiar el tamaño del comportamiento y anidar, se trata Bien, así que comencemos con nuestra primera tarjeta aquí. Entonces voy a sacar una copia. Y antes que nada, esto es bastante sencillo. Entonces esta de aquí sería una unidad, así que selecciono esta y le pegué a Shift A. Y creo que eso es prácticamente todo. Y voy a seleccionar un marco padre, y puedo presionar Mayús A o usar el menú para aplicar el diseño automático. Entonces echemos un vistazo al comportamiento. Eso ya se ve bastante bien. diseño automático realmente se volvió fantástico al sugerir comportamiento. Puedo echar un vistazo. Esto de aquí para mí es más como un botón, así que probablemente pondré esto a Huck en contenido, pero por lo demás, todo funciona bien Si no lo haría, entonces asegúrate de seleccionar un marco anidado, echar un vistazo si está configurado en fill, usa un atajo enter para obtener todos los hijos, y luego echar un vistazo que también están configurados para llenar Ahora, probemos lo mismo, y solo usemos nuestro original. Rastreo otra copia. Lo que voy a hacer aquí es que ahora voy a hacer click derecho y voy a más opciones, sugerir o diseñar, o simplemente usar el atajo. Y echemos un vistazo, y esto en realidad nos dio exactamente el mismo resultado. Entonces sí, absolutamente nos vendría bien un atajo aquí. Pasemos a nuestra siguiente tarjeta. Esto es un poco más complejo. Entonces tenemos diferentes direcciones. En primer lugar, tenemos esta sección por aquí que es un diseño automático vertical y luego la tarjeta en sí es horizontal. Entonces, antes que nada, voy a seleccionar esos titulares aquí nuevamente, turno y A, y luego todo este turno y A. Ahora puedo agregar diseño automático a toda la tarjeta. Nuevamente, ya sea el atajo o el menú. Echemos un vistazo a cómo este comportamiento. Está funcionando y eso realmente no está recogiendo en estos momentos. Lo que tenemos que hacer, tenemos que decirle todo este primer fotograma para llenar el contenedor. Por cierto, hay un atajo nal. Si solo lo arrastras hasta el final, puedes ver los estos pequeños letreros que aparecen aquí y ahora está configurado automáticamente para llenarlo. Entonces también vamos a hacer esto a estos elementos del gráfico, eso ya está configurado para llenar, pulsa enter, asegúrate de que todo esté listo para llenar. Esto está listo para llenar, y esto aquí, prefiero tener este set para abrazar. Esto no captó. Sólo voy a hacer eso otra vez, y ahora esto está funcionando. Ahora, recuerda, podrías reposicionar esta imagen aquí con el menú de alineación, y si establecerías este relleno también Entonces vamos a conseguir algo así. Eso no es realmente lo que busco. Entonces lo que quiero es en realidad la posición original. Bien, eso se ve genial. Ahora intentemos de nuevo con nuestro auto suggest. Estoy tirando esto aquí abajo, y voy a usar un atajo esta vez, o para sugerir, y echemos un vistazo lo que tenemos. Eso en realidad se ve bastante bien. En este caso, en realidad la mejor solución ya captó en todos los ajustes. De nuevo, solo estoy ordenando pequeñas cosas como prefiero tener este set para abrazar Nada dramático, si no lo haces. Siguiente. Esta tiene una parte superior y luego una parte inferior. Nuevamente, primero estoy seleccionando el turno de titulares A, y luego lo estoy combinando con el turno A. Ahora puedo aplicar el diseño automático a toda la tarjeta. Mira lo que le pasa a este pequeño marcador de aquí arriba. Entonces esto no está funcionando. Realmente no sabe qué hacer con él. Sólo voy a arrastrarlo y en realidad vamos a arreglar el relleno de nuevo. Por alguna razón, esto se fijó para envolver. No queremos esto, queremos que esto sea en realidad un layout horizontal también. Voy a añadir un poco más de margen aquí. Estrechamente este también arriba. Ahora vamos a echar un vistazo. Otra vez, no funciona como se esperaba, así que voy a pasar por ello poco a poco. Quiero que este de aquí llene el contenedor, llene el contenedor, y esta parte aquí también. Realmente se trata de seleccionar o todo poco a poco. Podemos arreglar el espaciado aquí. También podemos establecer este. Sí, como dije, por lo general, si lo sacas hasta el final, debería recoger contenedor fiel automáticamente. A veces no funciona, entonces solo hay que usar un desplegable. Éste, de nuevo, quiero esto para abrazar, así que echemos un vistazo, así que esto está funcionando. Ahora lo que queremos que suceda es que queremos arrastrar esta de vuelta aquí. Recuerda, podemos usar nuestro pequeño diseño mágico de ignorar automático, o también podemos hacerlo automáticamente, mantener presionada la tecla de control, y automáticamente va a tener esa configuración y ahora podemos colocarlo dentro de aquí. No olvides tus limitaciones. Y ahora deberíamos poder cambiar el tamaño de esto. Perfecto. Ahora probemos nuestro auto sugiere. De nuevo, estoy sacando el clic derecho original sugerir diseño automático. Y esto se ve bastante bien. Simplemente ignoremos nuestro pequeño marcador por ahora. Eso se ve bien. No perfecto, pero bastante bueno. Saquemos el marcador y si lo volvemos a arrastrar, podemos usar nuestro diseño de orden de ignorar, colocarlo, igual que antes. No olvides tus limitaciones. Por cierto, si quieres que este marco lo repase, asegúrate de tener configurado el contenido del clip. Ahora vamos a echar un vistazo a cómo se configura esto, llenemos el contenedor, llenemos el contenedor, creamos un pequeño contenedor extra por aquí como lo hicimos antes, y llenemos. Sí, esto en realidad nos está dando una solución bastante buena. Lo único que no me gusta, esto no es empujar hacia abajo. Solo echemos un vistazo a esto aquí, tenemos la fuente del error. Esto necesita ser configurado para abrazar el contenido. Va a responder lo que pase aquí. Todavía no está pasando. Vayamos dentro de aquí también. Abraza el contenido. Y ahora se puede ver que está funcionando. Y es por eso que auto Sugest es fantástico, pero también trata de practicar anidamiento y establecer el comportamiento de redimensionamiento por ti mismo un poco porque estos pequeños errores van a suceder y necesitas entender Sólo vas a entender eso si anidaste y redimensionaste a mano antes Bien, vamos con nuestro último. Éste de aquí. Y echemos un vistazo. Este es un poco más para anidar. En primer lugar, vamos poco a poco. Tenemos esta parte, y estamos anidando esta junto con la imagen Siempre vea lo bien que la dirección ya está recogida por el diseño del agua. Entonces nos vamos a preocupar por esta parte de aquí abajo. Voy a seleccionar primero los pequeños a mosaicos. Vamos a arreglar esto en un minuto. Y estos dos, también necesito resolver. Éste en realidad voy a dejar porque parece que tiene la misma distancia aquí y aquí, por lo que puede ser un elemento hijo propio. Vamos a resolver estos, y se puede ver que están apilados en el orden equivocado, así podemos ir en la configuración avanzada, y podemos simplemente cambiar el apilamiento. Ahora vamos a convertir esos dos en un marco de diseño automático también. Vamos a entrar en él en el medio y mira lo bien que el diseño automático ya notó que tenemos esta gran distancia aquí, y realmente nos está ayudando a pesar de que estamos anidando a mano para configurar auto Entonces, solo agreguemos el diseño automático al marco padre también. Ahora vamos a echar un vistazo a cómo está funcionando nuestro cambio de tamaño. Se ve bastante bien, excepto aquí arriba, echemos un vistazo a lo que pasa aquí, listo para llenar el contenedor. Entonces este de aquí, aquí es donde ocurrió el error. También queremos que esto llene el contenedor, y solo necesitamos volver a conseguir el padre de nuevo, y esto actualmente está configurado en Auto, así que tenemos que quitarle esto, y vamos a agregar un pequeño hueco agradable aquí. Echemos un vistazo ahora, y eso se ve genial. Echemos un vistazo a lo que sugiere Auto nos daría. Tomemos la misma tarjeta, turno, control y A. Se puede ver que anidó Solo cambiemos el tamaño y veamos qué pasó. Eso en realidad me está dando un resultado bastante decente. Justo aquí abajo, se puede ver que esto no recogió, veamos dentro, necesitamos centrar esto para que sea más agradable y luego configurarlo para que llene el contenedor Por si me acabas de ver hacer esto y te agobiaste por completo Eso es normal. Lo que hay que hacer es saltar en estos ejercicios y realmente jugar con ellos y tener la cabeza alrededor de estructurar el anidamiento y el cambio de tamaño Ponte en marcha. 20. LAYOUT AUTO: 17 páginas de layout automático: Creación de páginas completas de diseño automático. Debido al poder del anidamiento y la relación padre hijo, podemos usar el diseño automático comenzando desde el elemento más pequeño como un botón hasta crear nuestros componentes, organizándolos en grupos hasta páginas enteras Ahora, hasta ahora, hemos estado viendo elementos más pequeños, cosas como una tarjeta y una navegación. Esto es por una razón. Generalmente te aconsejaría que aunque empieces a diseñar libremente, lo que absolutamente animo, que en algún momento cuando empieces a ordenar tu archivo eso piensas y organices todo en componentes Y luego asegúrate de configurar primero tu diseño automático dentro de estos componentes. Yo hice esto aquí por ti. Déjame mostrarte, si saco una instancia, ves que hereda todos los ajustes, y puedes ver que esto ya está funcionando muy bien con el diseño automático, lo mismo aquí Siempre puede saltar a su archivo de ejercicios para obtener una mejor apariencia de la configuración. Ahora vamos a crear nuestro marco padre. Golpeé F y solo voy a seleccionar cualquier fotograma preestablecido. Por cierto, también puedes dibujar esto. El tamaño realmente no importa porque vamos a cambiar el tamaño de todos modos Ahora simplemente puedo arrastrar instancias de mis activos. En un proyecto más grande, obviamente encontrarías esos activos en tu panel de activos aquí mismo. Ahora, ya podrías aplicar el diseño automático al marco padre y luego ordenar todo a medida que avanzas. Personalmente prefiero dejarlo así porque me da la libertad de mover realmente mis instancias alrededor de este marco libremente, y siento que solo tengo mucha más libertad a la hora de diseñar así. Pero una vez que tengas una página terminada, ahora podemos convertir esto en un marco de diseño automático, o por cierto, también puedes simplemente dejarla como una página estática, eso también está bien en la mayoría de los casos porque todo tu comportamiento responsive ya está incrustado en tus componentes. Esto es algo que deberías discutir con tu equipo de desarrollo si realmente vale la pena volver a configurar toda la página en el diseño automático. Pero sólo por la práctica, vamos a hacer esto. Ahora, podríamos presionar el diseño automático por aquí y luego resolverlo manualmente, o que es lo que voy a hacer, voy a hacer clic derecho y usar mi diseño automático sugerido. Nuevamente, recuerde el atajo Control, Shift y A. Echemos un vistazo más de cerca. Lo que pasó. Bueno, si cambiamos el tamaño, entonces podemos ver que algunos elementos están funcionando perfectamente bien Por ejemplo, mi navegación y aquí mi interratext y mi pie de página, porque son elementos bastante simples Ahora bien, si echamos un vistazo a mis tarjetas, tuve suerte y esto en realidad fue recogido bastante bien. Me di cuenta de que probablemente quiero que esto se envuelva. Cuando lo coloco aquí en la parte superior. Y eso es realmente muy agradable. Sólo necesito limpiar un poco. En este caso, lo que tengo que hacer es que también quiero decir margen izquierda y derecha, así que voy a configurar esto aquí y un pequeño truco, lo que puedes hacer es que te vendría bien esta es mi brecha. Aquí está mi acolchado. Podrías usar variables para hacer esto. Yo uso esas variables ya en mis componentes. Puedes ver que mi relleno está configurado con variables. Entonces mi navegación, todo esto tiene las mismas variables utilizadas cuando se trata de relleno. Entonces, si quiero cambiar el relleno, podría simplemente configurar también una variable de relleno separada para esto, y luego tengo que cambiarla una vez, y no tengo que preocuparme hacer todo esto manualmente. No tiene que hacerlo, solo un pequeño consejo en el costado. Y de lo contrario, me gusta bastante el aspecto de esto. Podría jugar con estas cartas. Por ejemplo, podría ponerlos al centro, o podría hacer doble clic, y luego distribuirían de manera uniforme. Entonces, si cambiamos el tamaño, se vería así Ahora bien, con este ejemplo, tuvimos bastante suerte en este trabajo bastante bien. Pero vas a notar que con sugerir el diseño automático, a veces no vas a tener tanta suerte y vas a tener un comportamiento extraño tan pronto como tengas elementos que no son tan simples como solo un diseño automático directo que necesita llenarse. Entonces, si vamos a decir que estamos teniendo un poco de desorden aquí y queremos hacerlo de nuevo, entonces lo que siempre puedes hacer es simplemente arrastrar esta parte del diseño automático, y luego puedes resolverlo fuera de tu marco de diseño automático. Entonces, lo que podría hacer, podría tener estas tarjetas, y podría simplemente reconstruir todo esto rápidamente. Sólo deshazte de esto. Selecciónalos. Y ahora podría simplemente arrastrarlos de nuevo al marco de diseño automático. Otro pequeño consejo, si tienes algo que es más grande que tu marco de diseño automático, no vas a ver ese pequeño posicionador mágico que acabamos de tener, presiona comando, y luego vas a forzarlo a colocarlo Se va a configurar para que llene el contenedor. De nuevo, notarás que probablemente tengamos que limpiarlo un poco, volver a colocarlo para llenar el contenedor, pero lo tenemos aquí. Entonces otra vez, voy a agregar mi variable para el padding. Yo tendría la misma configuración, pero tú tienes más control de ella. Es bastante difícil ordenar cosas dentro de una página con todas estas capas en anidación Siempre siéntete libre de arrastrar un elemento, especialmente si tienes composición, hazlo a un lado y arrastrarlo de nuevo para un mejor control. Ahora sólo voy a limpiar esto un poco. Vamos a ejecutar las capas re. Podríamos generar unas imágenes, pero en realidad tengo algunas de otro archivo que quiero usar. Voy a usar uno de mis atajos favoritos con es shift Command N C y eso copia un PNG, y rápidamente los voy a rellenar aquí. Ahora vamos a ir por el último toque. También quiero alterar un poco el contenido. Le voy a decir que haga algunos nombres de taller y sólo un breve intratexto Este es el tipo de comportamiento que obtendrías, y eso está absolutamente bien. Y ahora tenemos nuestras tarjetas en un tamaño fijo. Recuerda, también podrías usar siempre los valores min y max. Eso lo aplicaría al componente principal. Todas las instancias heredarían. Voy a sumar un min. Sólo voy a escoger algunos números aleatorios aquí. Siempre cambia eso después. Voy a usar 300 min y digamos 450 max. Se puede ver que no pasó nada por aquí. Eso se debe a que estas tarjetas todavía están configuradas con un ancho fijo. Selecciona el marco que contiene todas las cartas hit enter, luego obtienes todas las cartas individuales y ahora configuras todas estas cartas para llenar el contenedor. Van a llenar pero no más allá de su valor máximo, y es por ello que RAP en este caso seguiría funcionando. Si quieres deshacerte de esto nuevamente, selecciona este contenedor, presiona Enter nuevamente, vuelve a cambiar a ancho fijo, y en tu componente, elimina min y max. Ahora lo que debes hacer porque básicamente anulaste el ajuste de ancho, seleccionas todas las cartas nuevamente presionando Enter y a través del panel de propiedades, ahora puedes con tres pequeños puntitos, elegir restablecer y restablecer tamaño Ahora tienes de nuevo el tamaño original del componente. 21. DISEÑO AUTOMÁTICO: 18 diseños automáticos y CSS flexbox: Maquetación automática en CSS Flexbox. Ahora bien, probablemente hay algunas cosas que no te gustan del comportamiento cuando llegas a configurar más diseños con diseño automático. Una de las cosas podría ser que si estamos redimensionando, es posible que quieras tener la misma cantidad de tarjetas. Podemos jugar con los valores min y max y configurarlo para llenar contenedor, pero no vas a conseguir esta grilla como sentimiento. La razón de esto es que si echamos un vistazo a nuestro diseño y saltamos al modo def, entonces puedes ver que todo esto está configurado con algo llamado flex Esto se debe a que el diseño automático básicamente representa la caja flexible. Si eres desarrollador, entonces eso tiene mucho sentido. Si eres diseñador, entonces es posible que nunca hayas oído hablar de Flexbox No necesitas saber sobre Flexbox, pero es bastante útil entenderlo un poco porque es la razón por la que el diseño automático se comporta de la manera en que se comporta En CSS, usamos Flexbox para posicionar elementos. Flexbox es un llamado enfoque de diseño unidimensional. Eso quiere decir que va a poner tus elementos uno tras otro. Piénsalo como latidos en una cuerda. Si alteras algún elemento, así que si se hace más pequeño o más grande, entonces esto se ajusta en consecuencia, lo cual es genial para muchas cosas. Pero lo que Flexbox no te deja hacer es poner tus elementos en alguna grilla En CSS, usaríamos algo llamado cuadrícula CSS, que es un enfoque de diseño bidimensional. Nueve Figma, actualmente no tenemos eso. Sí tenemos un enfoque de g rid más rígido en FIMMA, y voy a hablar de eso en un minuto Pero en la vida real o en el navegador real en estos días, probablemente los desarrolladores van a usar CSS rid y tienen muchas más posibilidades para la configuración general de la página que tienes en Figma. Entonces esto es realmente solo una breve descripción muy general. Estos temas de diseño CSS, caja flexible y cuadrícula son obviamente mucho más complejos, y hay muchas subherramientas y cosas que entender a su alrededor. Ahora, como diseñador, no necesitas configurar esto. No necesitas ser un experto en ello, pero te recomiendo encarecidamente que eches un vistazo a la comprensión general del diseño CSS moderno. No tienes que hacerlo, pero te va a dar una enorme ventaja. Así que definitivamente sigue trabajando con el diseño automático en Figma, pero también asegúrate de estar siempre en contacto cercano con tus desarrolladores, hacerlos conscientes de esto, y luego algunas cosas podrían probarse mucho mejor en el navegador cuando se trata del diseño general de tu página Durante este curso, vamos a saltar de nuevo a Figma. No obstante, en su material de trabajo, agregué algunos enlaces si quiere leer más sobre este tema. También tengo una inmersión profunda separada en mole dot IO en el diseño CSS moderno. Encontrará todos los enlaces en su archivo de trabajo. 22. DISEÑO AUTOMÁTICO: 19 componentes de ranura con diseño automático: Creación de componentes de ranura con diseño automático. Lo que es básicamente un componente de ranura es un componente que tienes algún marcador y luego puedes ranurar en diferentes contenidos Esto se usa a menudo en el código. No tenemos una función de ranura como tal, pero podemos construirla con componentes y diseño automático. Aquí tengo una tarjeta de diseño automático y se puede ver que tengo una ranura dentro de aquí. Si acabo de borrar esto, entonces todo lo que hago es crear una instancia a partir de este componente de slot, arrastro dentro de aquí, y me aseguro de que esté configurada para llenar el contenedor y abrazar el contenido. Por alto que sea ese contenido, será abrazado. Ahora puedes ver además de la ranura, tengo otros componentes layout, uno y layout dos que podrían ser ranurados dentro de aquí Todo lo que necesito hacer ahora es crear una instancia del componente de ranura, y ahora puedo hacer doble clic, seleccionar una ranura, y luego por intercambio instantáneo, puedo simplemente ranurar en cualquiera de mis otros diseños Un poco de propina, un poco más avanzado, selecciona una ranura. Ahora vamos a establecer una propiedad. Da click en los tres puntitos. Ir a aplicar propiedad de intercambio de instancia. Crea propiedad, y ya puedes ver aquí obtienes este menú, así que solo voy a llamar a esta ranura. Y aquí abajo, ahora puedes elegir valores preferidos. De mi menú, se puede ver que tengo muchos componentes. Voy a elegir las dos opciones que configuré para esta tarjeta. Ahora bien, si selecciono la instancia, puedes ver que tengo un pequeño desplegable con slot, y solo obtengo las opciones correctas para ser intercambiadas Esto es realmente útil que todo el mundo usa para corregir la configuración. 23. RESTRICCIONES: 01 ¿Qué son las restricciones en Figma?: Restricciones en Figma. En Figma, tenemos otra característica más que nos permite controlar el comportamiento al cambiar el tamaño, se llama restricciones Seleccione cualquier elemento dentro de un marco, y esto debe ser solo un marco simple, no un marco de diseño automático. Ahora verás líneas punteadas azules que apuntan al siguiente fotograma padre. Estas son las limitaciones. También los puedes ver en el menú del lado derecho bajo restricciones. Sin embargo, solo en marcos estándar, no están disponibles en marcos de diseño automático. Por defecto, estas restricciones se establecen en la parte superior e izquierda. Y fíjate como incluso cuando tengas marcos anidados, siempre van a subir al padre más cercano Entonces redimensiono, parece que no pasa nada porque están puestos a izquierda y arriba No obstante, si cambiamos esas restricciones, por ejemplo, pongámoslas a izquierda, derecha, a esta casilla, y luego en este punto rojo de aquí, voy a ponerlas a abajo y derecha. Observa cómo cambian y te muestran a qué lado están anclados Pongamos este de aquí al centro. Puedes usar los menús desplegable, o simplemente puedes usar el ícono y hacer clic en las diferentes direcciones. A medida que los anclamos en sus nuevas direcciones y ahora redimensionamos, puedes ver que esto cambia su comportamiento, y podemos establecerlos horizontalmente, o también podemos establecerlos verticalmente. Fijarlos a un lado o al fondo parece muy obvio Pero a veces nos confundimos un poco cuando hablamos de centro, la llamada izquierda derecha y escala. La diferencia entre ellos es que fijo simplemente tiene un margen fijo izquierdo y derecho. Dondequiera que lo coloques va a mantener esa distancia, escala tiene un margen porcentual para donde sea que la coloques, y el centro simplemente se queda en el centro relativo. Y lo mismo obviamente funciona horizontal y verticalmente. Pequeño consejo, a veces solo quieres cambiar el tamaño del marco padre e ignorar las restricciones En ese caso, mantén presionado el comando, y solo va a ignorar las restricciones mientras lo mantienes presionado. 24. RESTRICCIONES: 02 restricciones y cuadrículas: Restricciones y cuadrículas. En lugar de configurar todo con diseño automático, simplemente podríamos configurar nuestro componente como componentes de diseño automático. Entonces lo que podríamos hacer es usar izquierda y derecha para fijarlos a los lados izquierdo y derecho, y aquí hacemos lo mismo. Incluso podemos agregar elementos como esta pequeña burbuja aquí y ponerla a la parte inferior y derecha. Ahora bien, si estamos redimensionando, entonces estamos obteniendo prácticamente el mismo resultado, pero es mucho más fácil que configurar un marco de diseño automático. Sin embargo, notarás si bien esto funciona muy bien para configuraciones móviles simples con este elemento tan pronto como agregues más elementos, entonces simplemente no va a funcionar Porque el problema aquí es que si estamos usando izquierda-derecha, entonces va a tomar la distancia completa. No sabe de estos otros elementos alrededor. Lo que podríamos hacer es seleccionarlos todos y ponerlos a escala. Pero con esto, funcionaría, pero no mantendríamos una distancia establecida. Así que realmente no podíamos mantener nuestro relleno alineado con, por ejemplo, nuestra navegación. Una gran manera de lidiar con esto es agregar una cuadrícula. Porque echa un vistazo, si estoy agregando mis restricciones izquierda y derecha en una cuadrícula, entonces ahora va a mirar la columna más cercana porque está tomando las columnas como padres. Y por lo tanto, lo que pasaría ahora si seleccionamos todas estas cartas y las colocamos todas a izquierda y derecha es que permanecerían en sus columnas designadas mientras redimensionaban. Ahora, podemos hacer lo mismo con nuestra navegación aquí arriba. Vamos a ponerla a izquierda y derecha. Puedes ver que con solo unos pocos clics, y muy pocas complicaciones, estamos obteniendo una configuración responsive y podemos probar nuestro diseño. Ahora bien, esto es realmente útil solo para una prueba rápida, y también funciona muy bien, si, por ejemplo, estás trabajando con números desiguales. Digamos que no quieres distribuir todo de manera uniforme. Esto no funcionaría con el diseño, pero funciona muy bien con una cuadrícula. Sin embargo, también hay desventajas en esto porque la cuadrícula no respeta ninguno de los acolchados verticales, por lo que no conoce la distancia entre aquí y aquí Si agregas más elementos como texto, entonces las cosas empiezan a fluir entre sí. Pero esto es puramente un problema Figma. Esto no va a ser un problema en código más adelante. Así que todavía me gusta usar cuadrículas para pruebas rápidas. Esto, sin embargo, no es un reemplazo para el diseño automático. Sus componentes siempre se deben configurar con diseño automático, pero a veces es mucho más rápido probarlos rápidamente con una cuadrícula y restricciones. Un pequeño consejo, siempre puedes y desactivar la cuadrícula, ya sea, usa el panel de propiedades del lado derecho y simplemente haz clic en el icono, o también puedes usar el atajo Control y G. Si tienes la cuadrícula desactivada, entonces todas las restricciones seguirán en su lugar 25. RESTRICCIONES: 03 Introducción rápida a las cuadrículas en Figma: Una introducción rápida a las cuadrículas Figma. Déjame mostrarte cómo configurar cuadrículas en Figma, que luego también podrás reutilizar Aquí hay un marco, simplemente haga clic en cualquier marco, y luego verá la configuración de la cuadrícula aquí en el panel de propiedades del lado derecho. Haga clic en más para agregar una cuadrícula. Lo primero que vas a conseguir es esta cuadrícula de ocho píxeles. Ahora no queremos esto. Lo que queremos es hacer clic en ese pequeño liquen y cambiar esto a una cuadrícula de columnas Ahora podemos ajustar nuestras columnas aquí. El número de columnas que queramos, podemos establecer un margen a cada lado, y también podemos ajustar el canalón La forma en que se comporta esta cuadrícula es que en este caso, debido a que está establecida para estirarse, las columnas siempre se ajustarán, por lo que conformarán el espacio disponible, la cantidad de columnas menos el margen y la cuneta También tienes otras opciones. Puedes establecer la cuadrícula a la izquierda y a la derecha, para ser honesto, algo que realmente nunca uso, o puedes configurarla en c. Si la configuras en centro en ese caso, necesitarías definir el ancho de tus columnas, y si redimensionas, entonces el margen es lo que ocuparía el resto del espacio disponible. Ahora bien, la forma en que necesitas configurar tu calificación depende de cualquiera de los sistemas que estés usando. Si estás usando algo como bootstrap, entonces lo vas a encontrar en la documentación. También podrías tener una cuadrícula personalizada, así que aquí puedes ver que esta es la cuadrícula personalizada de decadencia, y puedes ver que te dan la definición Si tienes una guía estelar y estás usando cierta configuración de cuadrícula fija tradicional, echa un vistazo a tu guía de pocilgas y puedes reproducir la cuadrícula en Figma. Ahora bien, si estamos contentos con esta cuadrícula, posible que queramos reutilizar esta en otros marcos. Lo que podemos hacer es simplemente seleccionar el marco y luego debajo de la cuadrícula de diseño, clic en el ícono Little Apply Styles, y luego puedes hacer clic en Plus, y solo voy a llamar a esta prueba por ahora y ya podemos crear un estilo. Si ahora tengo algún otro marco, sólo voy a dibujar otro marco aquí en mi Cvas Ahora puedes ver que si selecciono este marco y me pongo el cursor sobre la cuadrícula de diseño, entonces puedo hacer clic en los estilos y ahora puedo volver usar la cuadrícula que acabo de crear Si quisiera cambiar algo de esa cuadrícula, simplemente hago clic en el área de Canvas gris. Obtengo una visión general de todos mis estilos de cuadrícula, y ahora puedo editar esto aquí. Un pequeño consejo, para que todos en tu equipo sepan qué estilo de cuadrícula usar. Puedes ver aquí que puedes darle cualquier nombre, así que utilizo tallas de camiseta. Pero luego agrego entre paréntesis detrás él para qué tamaño se aplica esta cuadrícula. Entonces digamos que aquí tengo dos fotogramas. Puedo ver que este marco es 390, y ahora puedo simplemente elegir mi estilo de cuadrícula, y sé que este es más pequeño que este tamaño aquí. Y nuevamente, depende totalmente de cómo se defina tu grilla cualquiera que sea el tamaño de los puntos de ruptura que hayas configurado aquí. Si selecciono este más grande aquí igual, solo puedo ir a mis estilos de cuadrícula, y sé que este es más grande. Ves aquí, son mil 500, es más grande que 993, así que esta sería la grilla correcta. Ahora bien, este es el caso si estás usando una cuadrícula general para tus diseños, que es la forma más común de usarlos. Pero también podrías usar sub grid para secciones. Debido a que los aplicas a los marcos, esto es realmente genial en Figma. Simplemente puede configurar cualquier cuadrícula y, por supuesto, luego guardarla como un estilo para un marco que posicione en su marco padre. Y por lo tanto, solo puedes configurar la distribución que necesites para cada una de esas pequeñas subsecciones 26. Puntos de ruptura: 01 introducción de puntos de ruptura de CSS: Al configurar tus diseños con diseño automático, notarás que esto funciona muy bien para cierto rango, pero no va a funcionar para todos los tamaños de pantalla, desde móviles hasta escritorios más grandes. Aquí es donde entran los puntos de quiebre. Son puntos específicos o más bien se producen umbrales o cambios De esta manera, los sitios web pueden ajustar su diseño y estilos para adaptarse a diferentes tamaños de pantalla. Para crear puntos de quiebre en CSS, usamos algo llamado media query. La regla at media query es una forma de aplicar ciertos estilos a la página web solo si se cumplen condiciones específicas. En este caso, la condición es un ancho mínimo de 768 píxeles. Entonces, cualquier cosa dentro de los corchetes solo se aplicará cuando la ventana gráfica tenga un tamaño de 768 o más Echemos un vistazo a esto en CSS. Así que puedes ver aquí tengo un titular y algunos textos copiados así como dos imágenes. En nuestro HML, este es uno H, el titular, el texto de copia es P, y luego aquí tenemos nuestras imágenes con la etiqueta de imagen Ahora bien, en el CSS, puedes ver que configuro el texto para que tenga el tamaño de un RM, luego un poco más grande para el titular, y configuré las imágenes para que ocupen todo el espacio disponible. Estos son mis estilos base. Ahora a medida que me desplace hacia abajo, se puede ver que agregué consulta inmediata. Como acerté 400, vamos a hacer esto más grande aquí abajo. Se puede ver el tamaño, así se puede ver como le pegué 400, entonces esto cambia en la disposición. Lo que sucede aquí es que todo dentro de los paréntesis se active. Tengo un nuevo color de fondo, el H es más grande y las imágenes cambian la ocupación del espacio. Voy aún más grande, se puede ver la segunda media query golpeando. Se puede ver aquí abajo, de nuevo, agregué un color de fondo, así que esto se hace visible, y también cambio el H para que sea aún más grande. 27. PUNTOS DE INTERRUPCIÓN: RESTRICCIONES:02 puntos de interrupción en Figma: ¿Cómo podemos lidiar con los puntos de interrupción y figma? Porque en este momento, no tenemos ninguna característica que se ocupe de esto, tenemos que resolverlo manualmente. Cuando se trata de un diseño receptivo clásico basado en columnas , esto no es demasiado complicado de configurar. Todo lo que hacemos es revisar nuestra gran documentación. Recuerde que esto podría estar documentado en su sistema de diseño o en un marco de trabajo. Con la información dada, podemos configurar el marco con rejillas en Figma con bastante facilidad. Entonces, si un bootstrap, esto se vería algo así si construyéramos todos nuestros puntos de quiebre. Podemos agregar nuestros componentes, y recordar, esos necesitan ser configurados con diseño automático en Figma, y luego podemos hacer que se sientan y se comporten con las columnas usando restricciones No podemos controlar así el espaciado vertical, pero tenemos una idea bastante clara de lo que sucede en general. Ahora, diseñar cada pantalla para todas estas versiones será bastante tedioso Entonces lo que podemos hacer es simplemente elegir algunos tamaños maestros. Normalmente solo elijo un tamaño de móvil y un escritorio W. Pero dependiendo de tu proyecto, posible que también necesites uno intermedio. En la mayoría de los casos, será bastante lógico sobre cómo se adaptarán los demás. Pero como tenemos todo el marco configurado de todos modos, podríamos saltar rápidamente y probar escenarios específicos No necesitamos reconstruir toda la página. Solo podemos probar las secciones de las que estamos un poco inseguros A, un poco tedioso, pero en realidad no demasiado complicado a la hora de configurar diseños responsive en Entonces esto puede parecer una gran ventaja desde el punto de vista del diseño que tienes todo este control. Pero recuerda, al final, el producto no vive en Figma. No se trata de una configuración fácil. Se trata del producto final en el navegador y cómo se comporta y cobra vida allí. Entonces, en estos días, ya no necesitas estrictamente esta grilla de fondo. Al menos no tiene que ser un sistema tan rígido como bootstrap o similar. También puedes definir esto de manera más libre. Es muy importante que primero discutas esto con tu equipo de desarrollo. Ahora, recuerde, cuando configuramos nuestros diseños con diseño automático, entonces aprendimos que esto refleja Flexbox La mayoría de las veces, estos diseños reconfiguran perfectamente por sí mismos, pero a veces también pueden necesitar puntos de ruptura Por ejemplo. Podríamos tener un cambio en el diseño. Entonces, por ejemplo, la disposición general de la cuadrícula podría estar cambiando. Un solo componente podría cambiar. Entonces esto es algo así como una navegación, menú de dos enlaces de Burger, un pie de página podría estar cambiando o una sección de héroe también. Probablemente va a verse bastante diferente en diferentes tamaños, y nuestra hipografía necesita ajuste a través de diferentes visores Entonces, como ya se discutió, nuestro diseño automático, que representa la caja flexible, se reorganiza muy bien. En caso de que queramos cambiar el diseño general, digamos que tenemos una barra lateral que necesitamos eliminar en cierto umbral. Entonces lo que podemos hacer es configurar dos marcos diferentes para esos escenarios. Me gusta agregar algo de información visual que muestre claramente de dónde a dónde estaríamos usando este marco, un pequeño consejo a cualquier marco de diseño automático. También podemos agregar un ancho mínimo o máximo, así podemos evitar que vaya más allá o por debajo de cierto umbral. Esto generalmente se usa en nuestros componentes, pero también podemos usarlo para el marco padre que representa la ventana gráfica. Echa un vistazo a cómo estas tarjetas se reconfiguran cuando cambio el tamaño. Ahora bien, este es el comportamiento de ex box ya estas tarjetas también tienen un valor mínimo y un valor máximo. Si quisiera que estuvieran muy bien alineados, entonces podría configurar esto con CSS grid. Ahora bien, si queremos mostrar un cambio de diseño de cuadrícula CSS, actualmente no podemos probar esto en Figma. Volveríamos a un diseño estático de nuestras páginas, mostrando las diferentes pantallas clave y averiguando transiciones entre ellas junto con el desarrollo en el navegador Siempre podemos agregar más etapas si es necesario para una mejor comunicación. Además, recuerda, no siempre necesitamos ocuparnos de toda la página. Podemos dividirlo en trozos de secciones de diseño y patrones establecidos Cuando se trata de componentes individuales responden a puntos de interrupción individuales, lo que me gusta hacer es crear un conjunto de componentes y luego tener las diferentes versiones como variantes Debido a que nuestros componentes Figma están configurados con diseño automático, podemos probar esto bastante bien y definir nuestro punto de interrupción Entonces como nombrar mi punto de interrupción de propiedad, y los valores, llamo menor que y mayor que o entre ciertos De esta manera, cualquiera que trabaje con una instancia siempre sabe cuál elegir. Existen técnicas más avanzadas utilizando variables y modos. Voy a ir a través de ellos poco a poco. Podríamos usar variables booleanas para nuestra navegación, mostrando y ocultando los elementos dependiendo del marco al que lo arrastre, e incluso podemos intercambiar instancias usando variables y modos Esto, sin embargo, es una configuración bastante avanzada, por lo que usted y su equipo necesitan ser bastante sólidos al trabajar con variables en modo. 28. BREAKPOINTS: 03 modos y tamaños de pantalla: introducción rápida: Déjame darte una visión general de cómo funcionan los modos en Figma y cómo podemos aprovecharlos para crear diferentes tamaños de pantalla. Haga clic en el área gris del lienzo, y verá las variables locales en el panel de propiedades del lado derecho. Haga clic en las variables abiertas y verá sus colecciones de configuración. Entonces como ejemplo, voy a usar esta colección de colores aquí, que puedan ver que tengo una configuración de color diferente, y actualmente, solo se les llama valores. Ahora, justo al lado de esto, tengo un pequeño botón más, y si hago clic aquí, puedo agregar un modo adicional. Se puede llamar a estos modos de cualquier cosa. Voy a llamarlo claro y oscuro en mi caso. Para mi modo oscuro, voy a dejar todos los colores de mi marca como están, y solo voy a cambiar alrededor de mis colores base. Este de aquí es un blanco ahora, y lo que era blanco va a ser negro. Una vez que creamos esas variables, es importante que las unamos a nuestro diseño. Podríamos simplemente seleccionar cualquier color y luego en nuestro menú fil, vemos el icono de variables y estilos, y luego podemos ver todas nuestras variables que creamos y simplemente aplicarlo aquí. Un pequeño consejo, lo que puedes hacer en cambio es seleccionar todo el marco y a través de colores de selección, solo puedes seleccionar a granel todos esos. Esto es súper práctico porque también te ayuda a que no te falte ninguna variable. Muy importante, también asegúrate de que este marco con fondo blanco también necesita ser configurado con una variable de esta colección. Ahora bien, si seleccionamos nuestro artículo, entonces puedes ver junto a la apariencia, hay un pequeño interruptor, y ahora podemos alternar esto entre claro y oscuro. Si cambio al modo oscuro, entonces se aplicarán mis colores de modo oscuro. Por defecto es un conjunto en auto. Podemos hacer lo mismo con nuestro marco, e incluso podríamos alternar páginas enteras. La parte que sin embargo nos interesa es la herencia. En este momento, este marco está configurado en modo oscuro. Mi artículo, me voy en auto. Esto es realmente importante. No lo pongas a ningún otro modo, déjalo en auto. Ahora bien, si lo arrastro a cualquier fotograma, va a heredar el modo establecido en el marco Y así como alteramos entre luz y oscuridad, también podemos usar modos para alterar entre los diferentes tamaños que establecemos. Entonces aquí tengo otra colección que hice. Configuré una variable de tamaño, que voy a usar para este botón texto, color. También voy a usar eso en diferentes modos para este botón. Y también tengo algunos textos, que voy a usar en el botón. Y voy a crear uno adicional, que va a ser un número, y voy a llamar a esa casilla. Y quiero que la caja sea 300 blanca en una pantalla pequeña y 600 blanca en una pantalla grande. Y tenga en cuenta que todo esto está configurado con diseño automático. Y por supuesto podemos convertirlos en componentes así como ellos siempre heredarían cualquier variable que establecemos Ahora necesitamos unir estos diseños a las variables que creamos. Déjame comenzar con el tamaño del botón. Yo uso el tamaño desplegable. Aquí veo la variable, y ahora puedo usar la variable de tamaño que creé. Pequeño consejo, también puedes abarcar variables. Entonces, por ejemplo, aquí, puedo configurar esto. Si hago clic en este pequeño campo de edición aquí, obtengo el alcance, y ahora puedo mostrarlo para todo, o como en este caso, solo quiero mostrar esto para el tamaño de fuente Ahora el tamaño que tengo aquí va a ser el ancho de mi caja. Entonces aquí tengo el alcance, y solo me gustaría mostrar esto para ancho y alto Y puedes ver, dependiendo de la variable que use, obtengo un campo de alcance diferente Terminemos con esto. También queremos nuestro texto. Para el texto en tipografía, tienes aquí este pequeño botón y ahora ves el texto del botón Para el color, aquí necesito eliminar la variable que usé antes, y a través del menú de variables, ahora puedes ver en bibliotecas si te desplazas hacia abajo por la que creamos. Pero aquí podríamos mejorar mi denominación. Para el ancho de caja, simplemente seleccionamos una caja, y luego a través del menú desplegable de ancho, también ves aplicar variables, y ahora obtenemos nuestro ancho de caja. Observe cómo solo aparece la caja porque lo alcanzamos. Ahora todo lo que necesito hacer es establecer el modo para esos fotogramas. Solo volvamos a ver nuestra colección, pequeña y grande. Si selecciono este marco padre, y ves que no tengo forma de cambiar. Esto se debe a que actualmente no hay ningún elemento que tenga una variable en ese marco. Verás tan pronto como haga un seguimiento de cualquier cosa aquí, ahora me sale el interruptor. Voy a decirle a este que sea modo pequeño y mi más grande aquí para que sea el modo grande. Entonces yo arrastro éste adentro, quiero una instancia, se puede ver que esto cambia muy bien dependiendo del modo set, y tengo lo mismo aquí con mi box. Entonces aquí hay un ancho de 300, y tan pronto como salto por aquí, ahora está cambiando al ancho dado. Por lo tanto, las Ms son una excelente manera de ajustar los elementos y componentes de diseño a diferentes tamaños de pantalla. No obstante, ten en cuenta, se ven muy mágicas, pero a veces también son un poco clésimas, y simplemente es más fácil hacerlo a mano. Pero eso necesitas averiguar dependiendo de tu diseño y la configuración de tu equipo. 29. PUNTOS DE INTERRUPCIÓN: 04 vinculación de variantes a modos: Varianza de unión a los modos. Lo que también podemos hacer con los modos es elegir qué variante dentro de un conjunto de componentes queremos usar para un fotograma específico. Aquí tengo una navegación con dos versiones. Quiero que este se use en el móvil y este aquí para pantallas más grandes y lo mismo con las tarjetas. Lo que tenemos que hacer es unir estas diferentes variantes a diferentes modos. Tenemos que comenzar configurando una colección para esto. Estoy configurando una nueva colección con el nombre responsive example. En esta colección, estoy creando una variable de cadena, y la voy a llamar NAF para comenzar con la navegación Ahora el nombre de la variable que estás creando no importa. Lo que es muy importante es el valor. Este valor tiene que ser el nombre exacto de la variante que desea vincular a él. Entonces si hacemos clic aquí, puede ver que esto se llama S, y la otra se llama M, y yo uso la misma convención de nomenclatura en la tarjeta, así que esta es S, y la otra tarjeta se llama M. Aquí voy a decir bind to S, y voy a crear otro modo donde voy a atar a M. Ahora también vamos a renombrar esos modos Voy a llamar a un móvil y a un escritorio. También voy a agregar lo mismo para nuestra tarjeta. Ahora tenemos toda la lógica puesta en nuestra colección, pero también necesitamos decirles a esos elementos que esto está sucediendo. Probablemente esperarías vincular tu variante a esta variable. Sin embargo, esto es un poco extraño. De hecho, vinculamos la instancia a la variable. Selecciona cualquier instancia, y luego en el panel de propiedades del lado derecho, si pasas el cursor sobre tu nombre de instancia, verás un pequeño signo de variable Haga clic en eso y ahora podrá encontrar la variable que acaba de crear, y vamos a vincular esta a nuestra navegación, y vamos a hacer lo mismo con nuestra tarjeta. Ahora bien, si arrastramos nuestra instancia aquí, entonces no pasa mucho. Esto se debe a que el marco padre tampoco conoce el modo todavía. Ahora observe que actualmente Figma está configurado de tal manera que si no tengo ninguna variable establecida en esos fotogramas Si no tengo ningún elemento que tenga una variable en el marco, entonces no se muestra ningún interruptor. Ahora fíjate en cuanto agrego esto, vas a ver cuando selecciones el marco padre, este interruptor aparece aquí. Aquí tenemos nuestro ejemplo responsivo. Esto es móvil. Y aquí aún no vemos el interruptor. Así que vamos a sacar una instancia por aquí también. Y ahora se puede ver el switch porque nos encontramos con este dos una variable. Y ahora podemos cambiar estos dos escritorios. Y puedes ver, así como esta, nuestra nueva versión aparece automáticamente. Entonces, si arrastraría entre esas pantallas, entonces puedes ver que siempre va a elegir la versión correcta para mí. Y ahora que tenemos el modo configurado, esto también debería funcionar automáticamente con nuestra tarjeta. Entonces puedes ver aquí tenemos nuestra tarjeta S, y si la tiramos por aquí, está cambiando automáticamente a la otra versión. Esto sí toma un minuto para darte la cabeza, pero puedes usarlo en tantos lugares diferentes. Intenta experimentar con él. Aquí hay otro pequeño ejemplo, para que veas que no solo está ligado a las diferentes variantes, también puedes agregar color y diferentes tamaños, y luego vas a conseguir algo como esto. 30. Puntos de ruptura: 05 Ocultar y mostrar con booleanos: Ocultar y mostrar elementos con Booleanos. Las variables booleanas son una característica bastante oculta, pero puedes configurar pequeños trucos de magia como este Primero, configuré una colección con dos modos. En mi ejemplo, utilizo uno para una pantalla más pequeña y otra más grande, y luego variables booleanas Uno para un menú de hamburguesas. Quiero mostrar en una pantalla más pequeña y apagarme para una más grande, y al revés para un menú Lnx Ahora configuro mi componente y empaqueo todos los elementos ahí dentro. Entonces el menú Berger así como el menú Enlace. Ahora vamos a conectar todo. Entonces estoy seleccionando al Berger y aquí viene lo raro. Si quieres conectarlo a un valor booleano. En apariencia, tienes que hacer click derecho sobre el yo puedo muy y yo. Pero desafortunadamente, aquí es donde se encuentra en este momento del tiempo. Aquí puedes ver la variable que creaste para el Berger Boolean. Vamos a hacer clic en eso. No va a pasar nada. Eso es lo que esperamos. Ahora, si seleccionamos el menú y hacemos lo mismo, entonces esto va a desaparecer porque por defecto, nos va a mostrar la configuración del primer modo. Lo que podemos hacer ahora, sacar instancias, así que vamos a colocar una instancia aquí, y luego vamos a colocar otra instancia en nuestro marco móvil. Justo antes de hacer eso, déjame mostrarte eso ahora mismo, no tienes interruptor de modo. Y en cuanto agrego un instante que está ligado a una variable, se puede ver que ahora si selecciono un frame padre, podemos ver nuestro switch. Así que cambiemos esta a nuestra versión móvil, y luego cambiemos esta de aquí a nuestra versión más grande. Y eso se puede ver automáticamente, va a encender y apagar los bulones dependiendo de dónde los coloque. Es realmente impresionante usar esta forma de trabajar. No obstante, echemos un vistazo a cómo se configura esto. Solo ten en cuenta que lo único que hace es que va a mostrar y ocultar capas. Existe el peligro de que alguien simplemente no entienda esta forma de trabajar y vuelva a encenderla. También asegúrese de verificar con el desarrollo que esto tiene sentido para todos entiendan este componente. A veces tiene más sentido tener dos variantes, una con el berg y otra con los enlaces, así que todo el mundo sabe qué variaciones hay actualmente en diseño. Pequeña punta en el costado. Puedes ver aquí que hemos dado tallas. Esto es menor que 500 y mayor que 500 en este caso. Lo que podemos hacer es a través del menú desplegable de ancho. Puedo agregar un ancho máximo aquí al pequeño de 500, y voy a hacer lo mismo para el grande. Voy a ir en este caso a un ancho mínimo de 500. Ahora puedo probar esto. Aquí puedes ver que esto funciona realmente bastante bien porque probablemente va a bajar a 320 o algo que está todo bien. Y luego el más grande, sin embargo, si cambio el tamaño, entonces se puede ver que esto no va a funcionar en el diseño, y por lo tanto, esto es realmente genial para probarlo así Sabemos que este de aquí, probablemente necesitamos redefinir a qué tamaño va a saltar este menú de Enlaces 31. Puntos de ruptura: 06 tipografía receptiva con modos: Con la ayuda de los modos, también podemos automatizar tipografía receptiva en diferentes tamaños de pantalla Para que este enfoque funcione, tenemos que combinar estilos de texto con variables y modos. Entonces aquí hay una escala de tipos simplificada que me gustaría usar, y se puede ver que ya creé algunos estilos, así que todos estos aquí ya están creados, y voy a crear una pantalla junto con ustedes. Entonces selecciona el texto, y luego en Tipografía, haz clic en el Aplicar Estilos, más, y vamos a llamar a este Mostrar uno Si hacemos clic en la gran área de fondo, puedes ver que se creó el estilo, y solo puedo arrastrarlo a mi carpeta aquí. Creé llamado ejemplo Tipografía sensible. Ahora bien, en mi diseño, es muy importante que aplique esos estilos. Asegúrate de que cada elemento de texto que uses esté vinculado a un estilo. Si estás usando componentes, entonces solo necesitas hacerlo una vez en tus componentes y todas las instancias heredarán Si quisiéramos que nuestro tamaño de texto se ajustara del tamaño S a M y L, lo que podríamos hacer es simplemente crear otra escala de tipo para M y L y guardarla como estilos separados. Y absolutamente aún puedes configurar tu diseño así. Sin embargo, con la ayuda de variables y modos, puede automatizar estos cambios. En lugar de crear estilos separados, lo que vamos a hacer es dentro de nuestro textil existente. Vamos a usar una variable sobre el tamaño y con modos, podemos decirle a esta variable cómo cambiar dependiendo del modo establecido en el padre sobre el que vamos a arrastrar el diseño. Lo que tenemos que hacer es crear una colección variable. Vamos a dar click en Crear nueva colección, y voy a llamar a esta tipografía Ahora ya sea podemos crear todo esto a mano o poco tip, podemos usar un plug in. Selecciona el marco donde tienes todos tus textiles exhibidos. Entonces echa un vistazo a los plug ins y busca los estilos de texto variablese. Ejecute este enchufe. Ahora puedes elegir las colecciones. Voy a elegir la tipografía, la que acabo de crear. También puede elegir qué partes desea configurar como variables. Haga clic en Crear. Y eso es todo. Ahora bien, si saltamos de nuevo a nuestra colección variable, puedes ver que esta llenó el tamaño de fuente, el peso de la fuente y la familia de fuentes para mí. Si echamos un vistazo a nuestros estilos, entonces podemos ver que si usamos este plug in, lo mejor es que todas las variables ya están conectadas dentro de nuestros estilos, lo cual es realmente útil. Si configuras una colección manualmente, entonces necesitas saltar a tus estilos y también conectar todas las variables manualmente a través del menú desplegable. Realmente importante, de lo contrario, esto no va a funcionar. Entonces ahora tenemos todo esto configurado. Sin embargo, aún no hemos agregado ninguna información sobre cómo debería cambiar el tamaño dependiendo de las pantallas. Entonces lo que tenemos que hacer es volver a nuestra colección y necesitamos agregar algunos modos. Ahora bien, no me gusta el nombre de esto. Va a ser bastante confuso, así que sólo voy a limpiar esto un poco. Así que sólo voy a cambiarles el nombre con tallas de camiseta. Ahora voy a agregar mis modos, y voy a llamar a S. Este es mi predeterminado M y L. También solo voy a reordenarlos simplemente arrastrándolos Ahora voy a cambiar las tallas en M. solo voy a aumentar un poco mi talla, también talla. Estoy haciendo esto solo al azar en un sistema de diseño, eso obviamente pensaría mucho en cómo cambiarían estos tamaños. Ahora solo tenemos que decirle a este que es el mod M y este que es el modo L. Vamos a arrastrar nuestros elementos aquí con nuestro diseño. Voy a configurar esto para S, y este de aquí va a ser y ahora echar un vistazo cómo entran en juego las nuevas tallas. Este de aquí va a ser L. Entonces una vez que tenga ese set, solo eliminemos esto. El modo se va a quedar ahí. Si arrastro algo aquí, la tipografía siempre va a ser correcta Un pequeño consejo. Por supuesto, también puedes usar múltiples modos. Entonces ahora mismo tengo el s set, pero también tengo modo claro y oscuro, así que también podría cambiar este al modo oscuro. Otro pequeño consejo, si usted, por ejemplo, trabaja con un IOS y un diseñador de Android necesita cambiar la familia de fuentes, entonces también puede usar modos y simplemente cambiar la familia de fuentes así. 32. Algunas cosas gratis para despedirte: Bien hecho por terminar este curso, no dude en comunicarse conmigo en Mo ganando Do Tao. Siempre me interesa escuchar tus comentarios. También me harías un gran favor dejar una reseña aquí mismo. Ab te gustó este curso, y también asegúrate de echar un vistazo a Moon learning DoTao Podemos encontrar un montón de material adicional así como cursos. Con la membresía M, puedes acceder a todos mis videos, así que cualquier cosa, desde conceptos básicos de U XUI, mucho sobre FEMA, muchas inmersiones profundas también, y también una sección sobre los fundamentos de CSS N Así que vamos a discutir lo que sucede cuando el diseño de la interfaz de usuario se encuentra con el código, en cuanto a diseño, tipografía, color y cualquier otro tema relevante En Mo learning, también puedes encontrar un enlace gratuito de paywall a todos mis artículos recientes, así como una página de recursos donde trato de mantenerte al día de las últimas cosas geniales suceden en el mundo de UX UI Design Si prefieres un evento de la vida real, echa un vistazo a la sección de talleres y charlas, hablo frecuentemente en conferencias además de dar talleres en línea en torno a las materias de UX UI Design y sol preneurship Asegúrate de suscribirte a mi newsletter para estar al día. Así que nos vemos pronto en Moearn punto IO.