Diseño de UX/UI receptivo en Figma: diseño automático, restricciones y puntos de ruptura (última versión de 2023)

1. Video de promoción: diseño automático te vuelve loco, asustado por lo que sucederá con tu diseño en el navegador, 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, el diseño automático y los puntos de interrupción más importantes, pero raramente discutidos para su diseño de interfaz de usuario. La combinación de esas herramientas le permitirá volver a probar y documentar diseños y componentes en línea con la configuración real del código. Comenzaremos con el diseño automático Todopoderoso y realmente envolveremos nuestra cabeza alrededor de la configuración de componentes verdaderamente receptivos. Empecemos desde cero y trabajemos hasta cambiar el tamaño y el poder del anidamiento sin fin para crear configuraciones más complejas e incluso páginas enteras con diseño automático. Como siempre, te mostraré unos pequeños tesoros escondidos y algunos consejos y trucos en el camino. Luego veremos las restricciones y cómo es un salvavidas cuando se trata de combinar el diseño automático en cuadrículas. Una vez que nos aseguramos de entender completamente nuestras herramientas receptivas y Figma, entonces aprenderemos sobre los puntos de interrupción, cómo funcionan realmente bajo el capó en CSS y cómo podemos configurar nuestro diseño en Figma. En consecuencia. Esto nos permitirá probar nuestras páginas y componentes responsive contra condiciones reales y poner nuestra documentación a otro nivel, que seguramente sus desarrolladores apreciarán. Con el archivo de material del curso, puedes trabajar a mi lado, volcó dos 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 principiante avanzado, realmente quieres repasar tus habilidades. Este es un curso de Moon learning dot IO. 2. 1 Nuevo Diseño de interfaz de usuario de Figma AUTO LAYOUT NEW SKILLSHARE OLD: Tenga en cuenta que tengo disponible una versión actualizada de este curso. Entonces, si ya estás accediendo a la nueva interfaz de usuario de Figma, entonces asegúrate de saltar a la nueva versión Para encontrarlo solo salta a mi perfil, o también puedes echarle un vistazo en la descripción a continuación. Entonces solo para ser claros, esta es la interfaz de usuario anterior de Figma. La nueva interfaz de usuario de Figma debería verse así. El cambio principal que notarás es la barra de herramientas está ahora en la parte inferior en lugar de en la parte superior. 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 también puedes tomar el último curso, que tiene una estructura un poco diferente, videos actualizados y está usando la última interfaz de usuario. 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 la FIMA es muy dinámica. 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 que es 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. Acerca de este curso: Configurar sus diseños con componentes y páginas receptivos en mente es imprescindible para cualquier diseñador de interfaz de usuario hoy en día, las pruebas receptivas y Figma pueden ahorrar tiempo y nervios en ambos lados y mejorar colaboración con el desarrollo principalmente, Figma nos brinda herramientas bastante increíbles para configurar un diseño receptivo. Tenemos las restricciones todopoderosas de diseño automático, así como las cuadrículas. Es muy importante que entiendas todas estas características en detalle. Podría terminar usando principalmente el diseño automático, pero notará que para una prueba rápida, apegándose a una configuración de cuadrícula irregular, hay formas muy poderosas de combinar las tres. Entonces en la primera parte de este curso, realmente quiero sumergirme profundamente en cada una de esas herramientas, realmente desde el principio hasta técnicas más avanzadas. Entonces, las restricciones pueden parecerle realmente básicas para empezar. Pero el poder se desata realmente una vez que continuamos con el diseño automático más avanzado y luego volvemos a combinar restricciones en ellos. Entonces este curso se trata realmente de mostrarte lo que es posible y cuál podría ser la mejor solución para ciertas configuraciones. No hay manera correcta o incorrecta. Realmente se trata de lo que intentas construir. Entonces, después de revisar nuestras herramientas en la primera parte del curso, podemos configurar páginas y componentes receptivos bastante dulces . Sin embargo, seguimos estancados con un tema. El mismo diseño no funcionará desde móviles hasta escritorios más grandes con una configuración, solo funcionará dentro de un rango específico. Y esto es realmente un tema a menudo descuidado a la hora de aprender diseño responsivo, porque lo que necesitamos es establecer un punto de quiebre. Esta no es una característica automática en Figma. Así que esto es realmente algo que nosotros, como diseñadores de interfaz de usuario, necesitamos entender y configurarnos en línea con el código. Entonces pasaremos por esto en detalle y entenderemos realmente cuáles son esos puntos de interrupción, cómo los encontramos y cómo podemos configurarlos y traducirlos a Figma. Esto nos permitirá probar y documentar nuestros componentes y páginas con los números reales. De esta manera, tendrás una idea bastante buena sobre lo real. Y realmente puedes levantar una conversación entre diseño y desarrollo a otro nivel y enfocarte en los detalles. Entonces, en pocas palabras, desenredemos este lío receptivo y hagamos que todo sea agradable y claro. 4. Material del curso: Quizás quieras trabajar a mi lado, así que preparé algunos archivos para que descargues en el curso que estás tomando, simplemente navega hasta proyecto y recursos. Y ahí encontrarás toda la información y el enlace donde podrás descargar el material. En esta página, encontrarás una variedad de descargas. Simplemente puede elegir la causa que está tomando actualmente y luego simplemente haga clic en Descargar. Y automáticamente descargará el archivo por ti. Para importar los archivos solo tienes que descargarlos. Es importante que tengas una cuenta Figma. Dentro de tu cuenta de Figma, navega ya sea a borradores o ve a un proyecto dentro de un equipo. Haga clic en el botón Importar y podrá elegir qué archivo desea cargar. Podría tomar un momento ya que son bastante grandes, pero una vez que los hayas importado, estarán en tu cuenta y no necesitas repetir este proceso. Dentro del archivo. Encuentras material para trabajar a mi lado en los videos, pero también agregué algunas instrucciones para que siempre puedas volver en tu propio tiempo y probar y practicar. Estoy trabajando con fuentes de Google para la mayoría de mis diseños. Entonces, si estás trabajando con la app Figma, entonces no necesitas hacer nada o fuentes de Google se precargan automáticamente. Si quieres trabajar con Figma en el navegador, entonces solo necesitas buscar la fuente que te está mostrando como faltante por ejemplo Poppins, uso mucho. Y luego puedes descargar directamente esta fuente, instalarla en tu computadora y ya estás listo para comenzar. 5. !!! POR FAVOR MIRE!!! Nueva interfaz de usuario de Figma en beta: Heads Figma ha actualizado su interfaz de usuario, y es posible que veas un nuevo diseño en lugar del antiguo Esta actualización es actualmente beta cerrada, por lo que aún no todos tienen acceso. Actualizaré las artes y reflejaré la nueva interfaz una vez que esté disponible para todos. Los cambios son en su mayoría visuales. Todas las características y herramientas siguen ahí, solo en lugares ligeramente diferentes o con una nueva L. Por ejemplo, la barra de herramientas superior se ha movido hacia abajo. El panel lateral izquierdo, en cambio, se ha mantenido en su mayoría sin cambios. Ahora puedes cambiar el nombre de tu archivo aquí. Aún puedes ver todas tus páginas, capas y recursos. En el lado derecho, notarás algunos cambios cuando hagas clic en un diseño, pero todas las funciones aún están disponibles. Si eres un principiante y encuentras confusa la nueva interfaz, puedes hacer clic en el signo de interrogación en la parte inferior derecha y volver temporalmente a la interfaz de usuario anterior. Esto no influye en tu diseño. De esta manera podrás seguir junto con los videos del curso usando la interfaz de usuario antigua mucho más fácil hasta que estés listo para hacer la transición a la nueva. La FIMA está implementando gradualmente esta actualización. Si aún no tienes acceso, también puedes solicitarlo a FIMA, pero no hay garantía, algunos de ustedes tal vez solo tengan que ser un poco pacientes Es posible que el administrador de tu equipo también tenga que habilitar la actualización por ti, así que asegúrate de verificar esto también. Figma actualiza frecuentemente el software, así que espera cambios y prepárate para adaptarte Las características pueden moverse como este botón de biblioteca aquí ha estado en todos los lugares posibles en los últimos años. Pero no te preocupes, nunca se perderá nada y te acostumbrarás a usar FIMA de una manera mucho más flexible Tiene un enfoque realmente genial en la usabilidad. Entonces no se trata de aprender algo de memoria, sino de entender el software como un todo. 6. Actualizaciones de diseño automático 23 de junio: En junio de 2023, durante la conferencia de conflicto Figma, lanzaron algunos cambios en el diseño automático Asegúrese de descargar el archivo de ejercicio Figma actualizado. Esta es la mejor manera de obtener una buena visión general de qué partes son nuevas y dónde simplemente se movieron un poco las cosas. No te preocupes, todo realmente funciona como antes de algunas cosas o se movieron ligeramente al menú y se lanzaron dos nuevas funciones. Así que déjame pasarte por ellos. Se movió el espacio entre ellos. Durante el curso, me referiré a una característica llamada espacio entre. Lo que esto hace es si tenemos algo así y queremos adaptar el espacio aquí dentro no sólo por un valor, sino empujarlo automáticamente siempre al otro lado. Entonces esto solía estar en el menú avanzado. Ahora encuentra espacio entre si va en la barra de Espaciado simplemente haciendo clic en auto. Entonces puedes ver que ahora si estamos redimensionando esto, esto es lo que estamos obteniendo. Si recién estás comenzando con diseño automático y todo esto es un poco confuso, entonces no te preocupes, si descargas el archivo de ejercicio, entonces tan pronto como lleguemos a esta parte, tengo el cambio en la posición en el menú claramente etiquetado para ti. Las alternativas a esto, que es simplemente haciendo clic en el asa en pantalla y escribiendo auto o cualquier valor fijo siguen siendo las mismas El otro atajo, esto es hacer clic en el menú de alineación y alternar esta función con X también permanece igual que antes Ancho mínimo y máximo. Min y max es una característica completamente nueva. Entonces esto significa que si estamos redimensionando una tarjeta como esta, ahora podemos, a través de nuestros campos de ancho y alto, establecer un valor mínimo y máximo simplemente usando el desplegable, ahora podemos establecer un mínimo así como un máximo. Y entonces esto se vería reflejado en cuanto cambiemos el tamaño de nuestra tarjeta No tengo video completo sobre esto donde hayamos recorrido esto poco a poco y también echemos un vistazo a cómo podemos agregar variables a esta función. El siguiente arriba es wrap. Esto significa que ahora con el diseño automático, podemos envolver elementos. A la siguiente línea. Vamos a repasar este ejemplo poco a poco. Cómo configurar esas tarjetas. Primero fueron los valores Min y max. Y luego agregamos wrap. Envolver se agrega al menú de diseño automático en la dirección. Entonces lo encontrarás a continuación, Vertical, horizontal. Y ahora la nueva función de envoltura. Además de esto Figma libera variables que podemos usar para el relleno en el diseño automático Ahora podemos simplemente seleccionar nuestros elementos de diseño automático. Y luego a través del relleno, podemos usar esos valores de espaciado que configuramos y asegurarnos de que siempre tenemos el mismo valor establecido en nuestro diseño. También podemos usarlos para el espacio entre simplemente aplicar la variable y luego también puede elegir sus valores establecidos. Las variables son un tema muy amplio. Son muy potentes y puedes hacer mucho más que simplemente agregar, rellenar y Espaciar con ellos si te interesan las variables, tengo todo un curso de buceo profundo separado sobre este tema. Se puede ver que el diseño automático prácticamente se quedó igual que antes, pero se convirtió en este poco más poderoso 7. RESTRICCION: 01 ¿Qué son las restricciones en la Figma?: ¿Cuáles son las restricciones en Figma? Las restricciones definen cómo responden las capas cuando se redimensiona el marco padre. Esto nos permite controlar cómo diseñar looks a través de diferentes tamaños de pantalla y dispositivos. Cuando selecciona un objeto en un marco, puede ver las pequeñas líneas azules punteadas que apuntan al borde de su marco padre. Esas son las limitaciones. Por defecto. Siempre están puestos arriba y a la izquierda. También puede ver los ajustes en su panel Propiedades del lado derecho bajo restricciones. Restricciones un conjunto para posicionamiento horizontal así como posicionamiento vertical. Puede establecer las restricciones ya sea a través menú desplegable o simplemente haciendo clic en el icono. Sostenga la punta pequeña Comando para seleccionar ambos lados. Puede aplicar restricciones a cualquier grupo de capas o marco anidado, siempre que se asiente dentro de un marco. Las restricciones solo funcionan dentro de marcos. Con la excepción de los marcos de diseño automático, no se pueden agregar restricciones a los marcos de diseño automático excepto elemento de posiciones absolutas dentro de ellos. También tenga en cuenta cómo las restricciones siempre responden al marco padre. Este no debe ser necesariamente el marco principal. Entonces el marco que estás usando para representar tu pantalla, ya que también puedes anidar marcos y Figma. El marco padre es básicamente el siguiente fotograma hasta los objetos dentro de un cuarto hijos. 8. RESTRICCION: 02 Trabaja con restricciones horizontales y verticales: Echemos un vistazo más de cerca a los diferentes tipos de restricciones disponibles. En el desplegable, podemos ver las siguientes opciones. Restricciones horizontales, izquierda, derecha, izquierda y derecha, centro. Y escala. Para vertical, superior, inferior, superior e inferior, centro y escala. Vamos a repasarlos poco a poco. Aquí configuro un ejemplo de una pantalla de teléfono. Se puede ver cuando cambio el tamaño del marco padre, todo está configurado por defecto para estar configurado en la parte superior e izquierda. De ahí que no pasó nada. Ahora, digamos que quiero que este menú de aquí quede del lado derecho. Simplemente voy a cambiar la restricción horizontal, ¿verdad? Y se puede ver como la pequeña línea punteada azul ahora se ajusta a la derecha. Vamos a cambiar el tamaño y puedes ver que está funcionando genial. Ahora, los diseños no sólo cambian horizontalmente, sino también verticalmente. Como pueden ver, aquí estoy perdiendo mi botón más. Entonces voy a poner las restricciones al fondo y a la derecha para arreglar esto. Bien, entonces tenemos a la izquierda, derecha, arriba, abajo alacena, cosas bastante sencillas. Simplemente lo fija a ese lado del marco padre. Ahora bien, si queremos posicionar elementos como nuestro contenido en el medio, podemos usar izquierda y derecha, centro o escala. Izquierda y derecha toma la distancia desde el tamaño del objeto hasta el marco padre y lo mantiene exactamente en el mismo tamaño al cambiar el tamaño. La escala, por otro lado, definirá el tamaño y la posición de la capa como porcentaje de las dimensiones de los marcos. Y mantendrá las proporciones, pero no el número exacto al cambiar el tamaño del centro, podrías haber adivinado que solo mantiene el objeto en el centro relativo donde lo colocaste en el marco en su tamaño original. Esto funcionaría exactamente igual para la alineación horizontal o vertical. Volvamos a nuestro ejercicio. Entonces voy a agregar unas restricciones izquierda y derecha a mis imágenes aquí. Y le voy a mandar el error al fondo. Voy a agregar un centro y un fondo porque puedes mezclar restricciones horizontales y verticales tal como las necesitas. Mi texto aquí, solo voy a dejarle la configuración predeterminada de izquierda y superior. Pero también quiero agregar restricciones a mi barra de estado. Aquí. Voy a agregar izquierda y derecha al marco de la barra de estado. Y luego solo necesito asegurarme de que a los niños, es decir, el tiempo y la batería, los elementos dentro, voy a agregar diferentes restricciones. Entonces mi estado de batería, quiero estar bien y arriba. Ahora bien, si cambio el tamaño, se puede ver que todo funciona a la perfección. Propina. Cuando trabaje con diseños móviles, use el menú de marco preestablecido para saltar entre tamaños populares que Figma es bastante seguro para usted. A veces es posible que desee cambiar el tamaño un marco e ignorar las restricciones. No hay problema. Simplemente mantenga presionado el comando o en Control de Windows y cambie el tamaño. 9. RESTRICCION: 03 Pinzas y rejillas: Hay un poco de magia que puedes hacer con restricciones y cuadrículas. Las restricciones en sí mismas son bastante sencillas, especialmente cuando tienes un elemento sentado en tu diseño. Pero si agregamos más de un elemento a una fila, se vuelve complicado. Mi único elemento aquí se establece a la izquierda, ¿verdad? Si hago lo mismo con los demás, se puede ver por la línea punteada azul que toma en cuenta el borde del marco padre y no el otro elemento hijo. Si cambiamos el tamaño, esto sucedería. Podríamos montar algunos complicados trabajos alrededor con marcos, pero eso no va a ser muy desordenado. Si lo configuro a escala. Sí, eso mantendrá los elementos en su lugar. Pero como aprendimos, escala define el tamaño y la posición de la capa como un porcentaje de la dimensión de los marcos. Para algunos diseños, esto podría ser lo que buscas. Sin embargo, si lo estás, quieres usar un tamaño específico para tus márgenes y distancias entre elementos, entonces puedes usar un pequeño truco con cuadrículas. Voy a añadir una cuadrícula a mi marco. Está configurado para estirar y voy a editar 24 margen y además tener una canaleta de 24. Puedes cambiar esos números. Necesitas Solo asegúrate de que esté listo para estirarse. Ahora voy a cambiar mis restricciones de nuevo a izquierda y derecha para esos elementos, notar como la línea punteada de mi botón aquí abajo, se establece a la derecha y la parte inferior no apunta al borde del padre enmarcar más, pero a la columna de mi grilla. Si cambio las restricciones, se puede ver que ahora toma la columna más cercana como su contenedor padre. Esto es lo mismo para mis imágenes aquí. Están tomando esas columnas como contenedor padre. Están sentados con izquierda y derecha. Entonces, si cambio el tamaño de todo, se sienta muy bien en la cuadrícula. Por supuesto, puede activar y desactivar la cuadrícula. Puedes usar el menú del lado derecho o simplemente usar el atajo Control y g. En este ejemplo, mi cuadrícula está establecida para estirar. Si lo cambio a centro, se convertirá en una rejilla fija con cierto tamaño de contenedor fijo en el medio. Las restricciones izquierda y derecha ya no responden a esto. Tendrías que cambiar tus restricciones al centro si quieres usar esa cuadrícula. Por cierto, esta técnica también funcionaría para filas. Y por si no lo sabes, puedes aplicar múltiples Cruzadas a un cuadro y Figma. Entonces podrías agregar filas, dos columnas y usarlas. Sin embargo, como tengo contenido dinámico y por lo general no quiero limitar la altura, realmente no uso mucho Rosetta y simplemente me quedo en cuadrículas cuando las necesito. 10. RESTRICCION: 05 Fija la posición al desplazarse: Es posible que hayas notado que dentro de nuestro cuadro de restricciones, tenemos una caja adicional. Podemos activar un cuarto de posición fija al desplazarnos. Entonces, como dice el nombre, esto mantendrá nuestros elementos en su lugar al desplazarse. Seguirá respetando todas las limitaciones también. No obstante, para que esto funcione, primero necesitamos configurar algunas cosas. En primer lugar, tu contenido debe extenderse más allá de tu marco. En el menú de marcos, encontrarás el campo de contenido del clip para mostrar y ocultar contenido fuera de tu marco. Después, asegúrese de seleccionar los marcos anidados o componentes que le gustaría fijar en su lugar y activar la posición fija. Esta es en realidad una función de creación de prototipos. Entonces necesitamos configurar algunas cosas en un menú de creación de prototipos. Seleccione el mainframe, importante, el mainframe, no el elemento que acaba de arreglar. Y luego salta al menú de creación de prototipos que encuentras en la parte superior derecha de tu pantalla. Activa el desplazamiento. En mi caso, activo el desplazamiento vertical. Por cierto, también puedes elegir un dispositivo aquí. Solo asegúrate de que el tamaño de tu fotograma y el tamaño del dispositivo y la coincidencia para evitar escalado no deseado. Ahora simplemente presiona el botón de reproducción en la parte superior derecha de tu pantalla y verás que todo garabatea muy bien y tus elementos fijos permanecen en su lugar. Esto es realmente genial para las navegaciones superiores e inferiores o los botones flotantes. Con la creación de prototipos, que es otro tema y Figma, se pueden agregar muchas más interacciones también se pueden agregar muchas más interacciones y comportamiento a esto. Por ahora, esta es una gran manera de simplemente desplazarse por sus diseños y también hacer algunas primeras pruebas. Por cierto, también puedes descargar la app Figma a tu teléfono y previsualizar en vivo tu diseño en el dispositivo real. Esto es súper simple y simplemente refleja tu pantalla directamente a tu teléfono. Asegúrate de que tu dispositivo físico que estás usando para previsualizar y tu tamaño de fotograma en Figma sean los mismos. 11. RESTRICCION: 06 ilustraciones divertidas con restricciones: Sólo un poco de diversión en este lado. Hay restricciones para hacer que un diseño responda a diferentes tamaños de pantalla. Y también puedes usar los tamaños de pantalla para crear algunos efectos. Aquí creé una cuadrícula de fondo y luego edité la topografía, que está sentada en cinco grados como puedes ver aquí. Y luego creé un poco de ilustración, en mi caso es un pequeño monstruo aquí que está sentado a través de seis columnas. Es simplemente un cuadrado con esquinas redondeadas. Y luego le agregué boca. Y se puede ver que configuré esto en pedazos ya que algunos de ellos están puestos a la izquierda. Este se establece a la izquierda, a la derecha. Y también mis ojos aquí, por ejemplo, están puestos al centro. Si ahora cambio el tamaño, se puede ver que esto cambia. Mira con los diferentes tamaños de pantalla. Así que realmente puedes jugar con esto y probar algunas cosas divertidas. Entonces puedes probar lo que sucedería en la pantalla del móvil. Entonces aquí usaría los mismos elementos pero los cambiaría un poco. Así que siéntete libre de jugar con este ejemplo. 12. LIMITACIONES: 07 limitaciones: Hay alguna limitación a la hora de trabajar con restricciones. Las restricciones funcionan muy bien siempre y cuando estemos lidiando con una configuración bastante sencilla. Una vez que agregues algo más de complejidad a elementos como más contenido, notarás que te encuentras con un problema. El contenido se superpondrá ya que el relleno y los márgenes no se mantienen. Por cierto, este es un tema Figma en CSS, Esos márgenes y relleno aún se mantendrían. Sin embargo, ¿cómo podemos configurar un diseño más realista en Figma? Aquí es donde entra en juego el diseño automático. diseño automático le permite crear diseños que crecen y se encogen con el cambio de contenido. Entonces, durante la siguiente parte de este curso, vamos a tener una mirada en profundidad al auto-layout. Vamos a ver cómo configurar componentes de maquetación automática e incluso páginas enteras. Y también vamos a echar un vistazo donde tiene sentido combinar Auto Layout, Grids y restricciones. Si en este punto estás poco confundido acerca de cuándo usar las restricciones de diseño automático y cuándo combinarlas, entonces no te preocupes, vamos a repasarlo paso a paso. Y también te voy a dar una visión general sobre cuándo uno u otro tiene sentido y dónde radica la fuerza y limitación de cada enfoque. En general, el diseño automático es un poco más complicado de entender al principio, pero es increíblemente poderoso y definitivamente una característica que debes entender como diseñador de interfaz de usuario. 13. LAYOUT: 01 ¿Qué es el diseño automático?: Lo que en realidad es Auto Layout. El diseño automático le permite crear marcos dinámicos y componentes que responden al tamaño de su contenido. De esta manera, puede trabajar con contenido cambiante, como diferentes longitudes de texto, pero siempre mantener intactos su diseño y espaciado. Puede usar el diseño automático en los elementos más pequeños de sus diseños, como botones, hasta componentes anidados más grandes y complejos. E incluso puedes crear páginas enteras con auto-layout. Diseño automático y que solo ajusta el tamaño horizontal o verticalmente, pero también le permite agregar relleno conjunto así como espacio entre elementos que permanecerán en su lugar incluso al cambiar contenido o agregar elementos. Dulce. Puede alinear y distribuir elementos dentro del contenedor padre con diseño automático y elegir de qué manera desea que cambien el tamaño. Con unos simples clics, realmente puedes crear magia con el diseño automático. Pero tengo que ser honesto contigo al principio, es un poco confuso y parece que estás creando un diseño con chicle que es realmente normal y te vas a acostumbrar. Así que, de veras, tengan mucho cuidado conmigo y pasemos por esto paso a paso. 14. DISEÑO AUTO: 02 Configuración de un marco de diseño automático: Vamos a configurar nuestro primer marco de diseño automático. Empecemos con el ejemplo más sencillo, un botón. Esto es básicamente un marco de diseño automático que contiene solo una capa. Pero vamos paso a paso. Dibujó un marco y luego agrega algo de texto con el marco seleccionado. Ahora haga clic en el signo más junto al diseño automático desde el panel de propiedades. Observe cómo el marco cambió a un marco de diseño automático. Se puede ver un nuevo símbolo en el panel de capas. Vamos a agregar un poco de estilo. Voy a agregar un relleno de color para el fondo, algunas esquinas redondeadas. Y voy a ajustar un poco el texto. Ahora puedo ajustar el contenido del botón y se puede ver que se mantienen todos mis ajustes. Básicamente, hay tres formas en las que puede configurar un marco de diseño automático. Primero, como acabamos de hacer presionando el botón de diseño automático en el panel de propiedades. En segundo lugar, puede elegir el acceso directo Mayús y a, o simplemente puede hacer clic derecho y seleccionar Diseño automático. Así como agregas el diseño automático a un marco, también puedes eliminarlo. Puedes usar un panel Propiedades y simplemente hacer clic en Menos. Puede usar el método abreviado mantener, desplazar y a, o puede hacer clic con el botón derecho y seleccionar, Eliminar diseño automático. 15. DISEÑO AUTO: 03 ¿Dónde puedo aplicar la diseño automático?: Entonces, ¿dónde puedo aplicar el diseño automático? Puede aplicar el diseño automático a un marco o a una selección de objetos. Esto incluye marcos con contenido existente, grupos u otras selecciones de capas y todos los objetos, componentes y conjuntos de componentes, marcos nuevos o vacíos. Texto o formas. Aquí hay dos capas que crearán un marco a su alrededor, pero vamos a echar un vistazo a esto en un minuto. Repasémoslos con más detalle. Entonces aquí tengo un marco con contenido, y simplemente lo seleccionaré y luego agregaré auto-layout. Como puedes ver, esto recogerá el acolchado y el posicionamiento y lo ordenará un poco si es necesario. Posteriormente podremos ajustar siempre esos ajustes. Si aplico auto-layout al grupo como tengo aquí, entonces el grupo se convertirá en un frame o para ser más específico y auto layout frame. Como pueden ver si eliminaría el auto-layout ahora nos quedamos con un marco. El grupo se ha ido, pero eso está completamente bien porque en Figma, estamos configurando nuestro diseño generalmente con marcos anidados. De todos modos. También puedes agregar auto-layout dos componentes, y esto es súper práctico y vas a usar esto mucho. Si agrego auto-layout a mi componente que configuré aquí, parece que no pasó nada ya que el color y los símbolos permanecen igual. Sin embargo, puedo ver por aquí en el lado derecho, panel Propiedades, el diseño automático fue Editar. Además, en cuanto cambio o agrego contenido, puedo ver que se aplicó el diseño automático. También puedes aplicar el diseño automático o tu varianza, ya que básicamente son solo componentes. Solo tenga en cuenta aplicar el diseño automático directamente a su varianza y no al grupo que los rodea, porque eso fue simplemente crear un marco de diseño automático de toda su varianza. También puedo aplicar diseño automático a marcos vacíos. Si hago eso, como pueden ver aquí, parece que no pasó nada. Pero en cuanto agrego contenido, puedo ver que se aplican las reglas de diseño automático. Se puede aplicar el diseño automático de una sola capa como textos. Sin embargo, notará que si selecciona una etiqueta, no habrá ninguna opción en su panel Propiedades del lado derecho para configurar el diseño automático. Esto se debe a que el diseño automático solo funciona en marcos. Sin embargo, si seleccionas el texto y luego usas el atajo Mayús a, creará un marco alrededor de tu texto. Se puede ver esto mucho cuando gente crea un botón rápido, porque ahora puedo cambiar el color de fondo y puedo agregar algo de radio. 16. DISEÑO AUTO: 04 el menú de diseño automático: Echemos un vistazo a todo lo que podemos tratar con el menú Diseño automático. Una vez que un marco se convierte en un marco de diseño automático, habrá un conjunto adicional de propiedades en la sección de diseño automático en su panel de propiedades del lado derecho. Vamos a entender lo que hace cada uno de ellos. Dirección. Los marcos de diseño automático pueden tener dos direcciones, horizontal o vertical. Observe cómo el icono en el panel de capas cambia en consecuencia. No puedes tener ambos, pero no podías anidar diferentes direcciones de diseño automático una dentro de la otra. Más sobre esto más adelante. Espacio entre. Esto crea, como indica el nombre, el espacio entre los elementos dentro del marco de diseño automático. Observe cómo el espacio es horizontal o vertical, dependiendo de la dirección que elija. Simplemente puede escribir cualquier número aquí o usar las teclas arriba y abajo para ajustar la distancia. Propina. Si presionas Mayús mientras usas las teclas arriba y abajo para ajustar el espaciado. Saltarán en el monto de empujón establecido. Entonces en mi caso esto es ocho porque estoy usando un sistema de espaciado de ocho puntos. Puedes cambiar tu cantidad de empujón simplemente abriendo el menú figma en el lado izquierdo. Escribe Nudge y luego establece el valor que buscas. Además del menú, también puedes usar los mangos de control en el campus. Simplemente arrástralos para ajustar el espaciado. Si haces clic en el mango, puedes establecer un valor específico. Si no desea que los elementos estén espaciados sino apilados, simplemente use un valor negativo. Acolchado. Además del espacio entre los artículos, también se puede establecer el relleno alrededor de ellos. Lo mismo aquí, puedes usar el menú donde estás dando una caja para horizontal y otra para relleno vertical. Pero también puedes ampliar el menú y establecer valores individuales. O puedes adaptar el relleno directamente sobre el lienzo arrastrando los propios manejadores de control de Canvas. Propina. Si quieres cambiar horizontal o vertical al mismo tiempo, mantén presionada la tecla Alt y arrastra. Si desea cambiar los cuatro lados por igual, simplemente presione Mayús Alt y arrastre más puntas. También puede mantener pulsada Comando y hacer clic en ingresar su cuadro de relleno en el menú. Luego obtendrá la notación CSS, alineación. Con el menú de alineación, puede cambiar el posicionamiento de los niños dentro de su marco de diseño automático. 17. DISEÑO AUTO: 05 ajustes avanzados: Echemos un vistazo al menú Diseño automático avanzado. Entonces esto es un poco oculto pero muy poderoso. Haga clic en los tres pequeños puntos en el menú Diseño automático para mostrar el menú avanzado. Repasemos cada una de ellas con más detalle. Empecemos con el modo de espaciado. Se puede elegir entre lleno y espacio entre prácticas para el ajuste. Si cambias el tamaño del marco, podrás ver que se mantiene el espacio establecido entre tus ojos Támesis. El espacio entre, por otro lado, utilizará todo el espacio disponible y creará espacios iguales entre los elementos hijos directos. Y esto se adaptará automáticamente al redimensionar el marco. Lo bueno de esto es que puedes agrupar elementos juntos. Puedes usar un marco anidado de grupo o idealmente otro marco de diseño automático anidado como lo hice aquí, mi ejemplo, porque el marco de diseño automático solo toma en cuenta a los hijos más cercanos, se considerará a esos dos niños. Ahora bien, esto es muy útil para alinear grupos de dos lados diferentes del marco padre, como una navegación. Siempre puedo agregar más elementos más adelante y solo van a ir en línea con las reglas de diseño automático establecidas. Propina. Probablemente vas a usar mucho esta función. Entonces hay dos grandes atajos que conocer. Puede hacer clic en el cuadro de alineación y luego con x alternar entre el espacio entre el impacto. También puede hacer clic en el asa de control Canvas y poner un valor fijo para embalado y simplemente escribir auto para el espacio entre. Nuestra siguiente característica es trazo, incluir y excluir. Los trazos no se calculan para la hora de distribuir el espacio, lo que puede hacer que se superpongan y provoquen confusión a la hora de desarrollar. Entonces aquí puedes configurar tu ictus. Antes de mirar el apilamiento de Canvas, recordemos que tengo espacio entre en mi diseño automático y si lo configuro un valor negativo, los elementos se apilarán. Al hacer clic en Apilamiento de lona, simplemente puedo cambiar el orden. Tenga en cuenta que las tarimas de lona no cambian la posición real en el panel de capas. No habrá ningún cambio. Si desea cambiar la posición real de un elemento, seleccione el elemento y moverlo a disposición automática con las teclas arriba-abajo izquierda-derecha. El último es una alineación de línea base de texto. Así que aquí tengo mis artículos, pero todos son de diferentes tamaños y quiero que se establezcan todos en una bonita línea de base. Así que selecciona el marco de diseño automático y luego obtienes una pequeña vista previa. Si haces clic, puedes ver eso muy bien alineado. Depende un poco de lo que busques, si esto tiene sentido en tu diseño o no. 18. DISEÑO AUTO: 06 Tamaño del diseño automático: Hablemos de redimensionamiento y diseño automático. Esta es la parte más poderosa del diseño automático, pero también la que podrías necesitar un momento para entender. Anteriormente, esta característica tenía su propia cajita debajo del menú Diseño automático. Ahora lo encuentras en una sección de marco. Así que por debajo de la anchura y la altura. El cambio de tamaño básicamente establece cómo se comportará el elemento horizontal y verticalmente cuando haya un cambio en el contenido o el tamaño. Tenemos tres opciones de cambio de tamaño, ancho fijo, la altura, contenido abrazo, muy lindo y contenedor lleno. Y puedes mezclarlos. Entonces podrías tener uno para altura y otro para ancho. Primero entendamos nuestra configuración un poco más de detalle. Entonces, primero veamos fijo. Entonces aquí voy a tener que auto-maquetar marcos, uno con una forma dentro y otro con texto. Así que vamos a establecer la forma en altura fija y ancho fijo. Y también voy a poner el texto a altura fija. Y como pueden ver, ya me da abrazado por una razón aquí por vertical, pero por ahora lo estoy ajustando a altura fija. Entonces, si ahora redimensiono el contenedor padre, puedes ver que no pasa nada porque obviamente el objeto está configurado en fijo y lo mismo será el caso con el texto. Para que pueda tener el texto fijo y ancho sin ningún problema. Pero como notas, me dio un abrazo por defecto a la hora de esconderme. El motivo es que si copio aquí este texto y agrego más texto, se puede ver que sí lo copia, pero ya no va a sentarse en un cuadro de texto. Entonces otros elementos no van a responder a ello y no queremos esto. Veamos qué pasa si cambio esto para abrazar. Estoy seleccionando el mismo texto y ahora estoy cambiando la altura de nuevo para abrazar contenido. Y verás que esta caja ahora se abraza al texto. Entonces usa todos los textos existentes y luego agrega el espaciado y el relleno alrededor. Al usar abrazar con texto, es muy importante que también revises tu configuración de texto. Esto siempre debe establecerse en altura automática, o si está trabajando con un diseño horizontal en ancho automático. Ahora bien, ¿qué pasaría si cambio el ancho para abrazar también los contenidos? Vamos a probar eso. Bueno, eso no va a tener mucho sentido en este caso porque simplemente va a distribuir todo a Auto Width, entonces la caja se ha ido a ajustar. Entonces no quiero eso en este caso. Pero por ejemplo, si estoy configurando un botón, ese es un gran ejemplo en el que usaría el contenido del hub horizontal y verticalmente. Entonces, como puedes ver, no hay una solución única en realmente depende de lo que estés construyendo y luego mezclando correctamente los ajustes de redimensionamiento horizontal y vertical. Ahora bien, si revisé mi marco por aquí, la forma en el medio, ni siquiera me sale la opción de contenido Hug. La razón es que esto es simplemente una forma, por lo que no puede contener nada para ser abrazado. Ahora, si selecciono el marco, puedo configurarlo para abrazar el contenido. Pero no parece que haya pasado mucho. Si, sin embargo, cambio mi relleno aquí, notarás que se adaptará. Tan pronto como cambiaría el tamaño manualmente. Echa un vistazo a mi configuración de cambio de tamaño. Esto saltará de nuevo a fijo. Entonces si luego vuelvo a abrazar, volverá a respetar mi remar. Veamos nuestro último, un contenedor lleno. Ahora, si selecciono este marco padre, no hay opción de cumplir contenedor. Esto se debe a que simplemente no hay contenedor para mirar hacia arriba. Así que tomemos aquí el elemento hijo y pongamos esto para llenar contenedor y sentir contenedor. Ahora bien, si estoy redimensionando a los padres, puedes ver que mantendrá el relleno y usará todo el espacio disponible del tamaño dado. Usemos lo mismo para nuestro ejemplo de textos. Así que voy a poner esto en phil container, y voy a agregar esto como un contenedor lleno también, aunque, como se puede adivinar, no es la mejor solución. Entonces, si cambio el tamaño del contenedor, esto es realmente genial y va a usar todo el espacio disponible y respetar mi relleno. Sin embargo, en la altura, notarás que estoy creando espacio vacío con texto. Por lo general, podrías usar llenar contenedor mucho horizontalmente, pero generalmente nos apegamos a abrazar contenido cuando se trata de configuraciones verticales. Es muy importante que empieces a jugar un poco con esos ajustes y entiendas lo que están haciendo. Pero lo mejor es jugar con ellos en un ejemplo real. Así que construyamos un auto juntos. 19. DISEÑO AUTO: 07 Crea una tarjeta de respuesta con tamaño de diseño automático: Apliquemos nuestra nueva configuración de cambio de tamaño aprendida para desechar. En primer lugar, seleccionaré el marco padre de la tarjeta y aplicaré el diseño automático. Como puedes ver, Figma ya intenta adivinar cuál sería la mejor configuración de cambio de tamaño. Entonces en este caso, abrazo, abrazo. Y esto es realmente genial porque por ejemplo si duplico este contenido y agrego más, puedes ver que esto es realmente un trabajo muy bien. Sin embargo, si estoy redimensionando, entonces esto no es realmente lo que busco. Así que vamos a repasar cada elemento paso a paso. Mi imagen, me gustaría cambiar el tamaño con el marco padre. Entonces configuraré esto para llenar contenedor. Entonces veamos qué pasaría. Sí, eso está funcionando bien. Voy a poner mi titular aquí para llenar contenedor también. Y ahora echa un vistazo a lo que pasa si cambio los textos de copia para que se sientan contenedor. Y fíjate que ahora mismo este es el único tamaño fijo. Entonces esto claramente no es lo que buscamos y esto está sucediendo porque este no es un tamaño que defina el ancho de mi tarjeta, porque mi tarjeta, el contenedor padre, se envía a abrazar, abrazar. Entonces eso simplemente se dice eso a ancho fijo por ahora. Y ahora también podemos tener contenedor lleno aquí. Y si cambiamos el tamaño de nuestra tarjeta, eso es trabajar de la manera que pretendíamos. Recuerda que al trabajar con textos, tenemos que asegurarnos de que nuestra configuración de texto siempre esté establecida para ocultarse automáticamente en un botón donde estemos en hug, hug. Esto será ancho automático, pero cualquier etiqueta que pueda ser más larga que una línea siempre va a ser tiene que ser configurado para ocultar automáticamente. Este tiene que ser auto hide. Y esto de aquí tiene que ser auto hide. Y como dije, Figma se volvió muy buena detectando esto y ya configurando esto para ti. Pero si alguna vez te encuentras con algún problema en el que el texto no se esté comportando el que el texto no se esté realmente con el diseño automático. Asegúrese de verificar esos ajustes. Y debido a que tenemos el ancho automático y lo tenemos configurado para abrazar verticalmente, solo podemos agregar más contenido. Permítanme copiar esto y agregar más contenido aquí. Y se puede ver que eso funciona a la perfección. Y aunque ahora cambie el tamaño, esto va a funcionar bien. Entonces veamos nuestro último elemento en nuestra tarjeta Botón Hecho y esto está configurado para abrazar, abrazar. Y eso es simplemente perfecto porque abrazo, abrazo significa que horizontalmente, siempre va a usar este relleno y verticalmente también va a respetar ese relleno y nuestro botón solo va para ser una línea. Entonces, si agrego más contenido aquí, eso solo se va a adaptar muy bien. , si desea un botón de ancho completo Sin embargo, si desea un botón de ancho completo, lo configuraría para llenar contenedor. Y entonces puedes aquí con el centro de alineación, el contenido con el marco padre. Por supuesto, aún puedes adaptar todo el espaciado y relleno. Y también puedes tomar artículos dentro y fuera del diseño automático. Y así, tienes una tarjeta responsive que se adapta completamente a cualquier contenido. 20. LAYOUT: 08 componentes e instancias de diseño automático: Como aprendimos, el auto-layout, también trabajó con componentes y esto es realmente útil. Así que aquí tengo mi tarjeta responsive. Lo que quiero hacer ahora es seleccionar esta tarjeta y crear un componente. También tiene mucho sentido que este botón de aquí sea un componente propio ya que probablemente usaré instancias en diferentes lugares. No puedo crear un componente dentro de un componente. Entonces lo que voy a hacer es sacar este botón, crear un componente, crear una instancia de este botón, y ponerlo de nuevo en mi componente principal. Ahora lo bueno de esto es que si selecciono mi instancia del botón aquí, puedes ver que hereda todos los ajustes de auto-layout y redimensionar los ajustes. Entonces, por ejemplo, si en el componente principal cambiaría el ancho a fijo. Se puede ver que la instancia hereda la configuración. Vamos a ponerlo de nuevo para abrazar el contenido. En Figma, se le da la opción anular la configuración de diseño automático en sus instancias. Entonces por ejemplo I. Podría establecer este botón para llenar contenedor. Sin embargo, te recomiendo encarecidamente que mantengas todas las configuraciones de diseño automático intactas todas las configuraciones de diseño automático y realmente solo cambies, por ejemplo el contenido del botón. Si quieres tener una variación, por ejemplo, un botón de ancho completo o algo con un comportamiento diferente, te recomiendo que configures otra variante. Bien, genial. Ahora vamos a crear una instancia de toda la tarjeta. Puedo o simplemente hacer una copia de mi componente principal o puedo usar mi menú aquí, recursos, y luego simplemente escribir tarjeta y encontrarás el componente que buscas. Y voy a tener una copia aquí. También podrías usar el panel de activos. Ahora puedo usar esas instancias en mi diseño para poder adaptar el contenido. Solo agreguemos un poco más de texto aquí. Solo agreguemos más titular. Esto. Yo me voy a quedar igual. Y luego para las imágenes, voy a usar un plugin. Entonces voy a enchufar y luego voy a ponerme splash, ejecutarlo. Así que con Unsplash, puedes buscar una imagen específica o simplemente usar cualquiera de las categorías preestablecidas. Entonces voy a ir por el interior por ahora, seleccionar la forma. Y luego simplemente puedes seleccionar cualquiera de las imágenes y ésta llenará la forma. Por supuesto, también puedes usar tus propias imágenes y simplemente importarlas a Figma. Entonces mi tarjeta en sí, está funcionando muy bien a la hora de cambiar el tamaño. No obstante, lo que quiero es que tuviera esas cartas juntas, quiero que también respeten la distancia. Entonces esto es cuando entra el anidamiento, simplemente selecciona ambos carros y luego haz clic en Diseño automático y creas otro marco de diseño automático alrededor de esas dos tarjetas. Vamos a entender esto. Este nuevo marco que he creado. Si echamos un vistazo en el menú Capas, puedes ver que este ahora es el marco padre para esas dos instancias de tarjeta de diseño automático. Y aquí es donde ocurre mucha confusión. Así que tenga en cuenta que estas tarjetas aún heredan todos los ajustes de diseño automático del componente principal. Entonces, si agarro alguna de estas tarjetas y la redimensiono manualmente, puedes ver que todo esto sigue en su lugar. Sin embargo, si selecciono el marco padre y lo redimensiono, entonces no pasa nada. ¿Por qué es eso? La razón de esto es que esta tarjeta simplemente mira dentro. Entonces todo lo que dije en esta tarjeta de diseño automático funciona con esta sola tarjeta. La tarjeta no sabe dónde se van a usar las instancias en grupos más grandes. Es por eso que necesito establecer otra opción de cambio de tamaño para cada una de estas tarjetas y decirle cómo quiero que se comporte con un nuevo marco padre. Entonces lo que voy a hacer es seleccionar el marco padre, presionar Enter. Este es un acceso directo para seleccionar todos los elementos secundarios de un marco. Y ahora puedo establecer el cambio de tamaño para todos ellos a la vez. Y yo iré por el contenedor Phil. Si ahora redimensiono el marco padre, puedes ver que están respetando el ancho. Entonces, al seleccionar el marco padre, ahora puedo cambiar el espacio entre. Y también podría agregar algo de relleno. Y eso siempre corresponderá al marco padre, no a los elementos hijos que están dentro. Si quisiera hacer cambios aquí, usaría componente de dominio. 21. DISEÑO AUTO: 09 Marcos de diseño automático de anidación: Construyamos una navegación receptiva con diseño automático anidado. Entonces aquí tengo mis diferentes artículos para colocar dentro de la navegación. Y aquí configuré un marco que va a sostener mi navegación. Entonces, lo primero que voy a hacer es convertir mi artículo aquí en un marco de diseño automático. Y también voy a convertirlo en un componente. Y voy a hacer lo mismo con mi botón. Y sólo para tener un diseño limpio, también voy a convertir mi logo y mi avatar en componentes. Voy a agarrar este artículo aquí. Voy a crear tres instancias y llamarlas blog sobre y contactar. Ahora voy a agregar una instancia de mis botones, así como una instancia de mi avatar. Y estoy renombrando el botón para suscribirme. Entonces ahora voy a seleccionarlos todos y convertirlos presionando Shift a en un marco de diseño automático. Y voy a colocar el marco dentro de mi navegación. Así que déjame ordenar esto un poco. Voy a cambiar el espaciado a múltiplo de ocho. Entonces 16, a lo mejor es un poco pequeño, 24. Y voy a echar un vistazo, qué va a quedar bien. Podría enviarlo aquí o también podría usar el texto línea base alineación cuello. Eso no va a funcionar con mi avatar. Voy a dejarlo y solo usar mi herramienta Alineación aquí. No solo crearé una instancia de mi logotipo y también colocaré esto dentro de mi marco de navegación. Entonces ahora lo único que falta es que seleccione mi marco de navegación, que ahora es mi nuevo marco padre. Y voy a convertir esto en un marco de diseño automático ahora voy a ordenar cualquiera de mis acolchados y espaciados. Entonces quiero que esto sea un múltiplo de ocho también para ir con mi sistema de espaciado de ocho puntos. ¿Y esta posición está en el centro? Sólo voy a posicionar todo esto en el centro. Ahora bien, si cambio el tamaño, esto, sin embargo no va a funcionar. Ahora tu pensamiento inicial podría ser usar el menú de cambio de tamaño. No obstante, hay una manera mucho mejor. Recuerda que nos estamos ocupando de la distribución. Así que usemos nuestro menú avanzado. Luego cambia de empacado a espacio entre. Ahora está consumiendo todo el espacio disponible cuando cambio el tamaño. Lo bueno de esto también es que si me llevo elementos o si agrego elementos, esto todavía va a funcionar. Incluso puedo anidar esto más. Así pude elegir todos mis elementos de enlace. Y voy a hacer esto por aquí en el panel de capas porque muestra una estructura un poco mejor. Ahora podría presionar Shift a y crear otro fotograma. Sólo voy a llamar a esto enlaces. Así que ahora podría distribuirlo una distancia dentro de esos. Y también puedo cambiar la distancia entre este fotograma anidado. También podría sacar este grupo anidado y hacer que edite elementos propios. Entonces de esta manera volveríamos a tener tres elementos hijos. Y ahora mi espacio entre un todavía trabajando pero distribuyendo entre tres niños. Tenga en cuenta que con el diseño automático, generalmente no hay una sola forma de construir esto. Hay varias formas en las que podrías lograr este resultado. ejemplo, puede establecer todo su espaciado aquí en sus componentes principales. Entonces en tus átomos, no hay bien o mal. Sin embargo, considere que un poco de relleno aquí y un poco de espaciado aquí probablemente será bastante confuso. Entonces te recomiendo que te apegues a una técnica y solo discutas a tu equipo lo que mejor te funciona. 22. DISEÑO AUTO: 10 posicionamiento absoluto: Podemos posicionar absolutamente otros elementos dentro de los marcos de diseño automático. ¿Qué significa eso? Entonces aquí tengo un marco de diseño automático. Quiero arrastrar esta nueva pegatina aquí, y quería sentarme 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. Entonces lo que puedo hacer ahora es colocarlo dentro del marco, seleccionarlo. Y luego en mi menú del marco de los lados de la derecha, la parte superior está el pequeño botón oculto llamado posición absoluta. Si hago clic en esto, entonces lo sacaré del flujo de diseño automático. Ahora puedo colocarlo libremente dentro de mi marco. 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 auto-layout, por lo tanto recites no aplica. No obstante, voy a ver ahora que aparecen de nuevo restricciones para los elementos posicionados absolutos. Entonces voy a arreglar esto a la derecha y a la parte superior. Ahora como he redimensionado, va a pegarse al lado derecho del marco tal como quería. Por cierto, si quieres agregar algo así como una burbuja de alerta que va más allá del marco, también puedes hacerlo. Agrégalo al marco, póngalo en posicionamiento absoluto. Y entonces tal vez tengas que posicionarlo un poco con tus teclas de flecha para que no salga del marco. Y entonces lo que necesitas hacer es seleccionar un marco padre y desmarcar Clip content. Ahora lo podrás ver. Y siempre se moverá con tu marco. 23. DISEÑO AUTO: 11 configuraciones de diseño automático: Entendamos configuraciones de diseño automático más complejas. Aquí configuro diferentes opciones para tarjeta. Agreguemos el diseño automático a todos ellos para familiarizarnos un poco más con el proceso. Como notarás, la clave es comenzar realmente en el elemento más pequeño y luego trabajar tu camino hacia arriba. Empecemos con nuestro primer diseño. Si simplemente aplicara diseño automático a todo el marco padre, entonces eso funcionará. No obstante, tendría la misma distancia entre todos los elementos hijos y no quiero eso. Déjame abrir el menú Capas para que veas esto un poco mejor. Voy a crear marcos de auto-layout anidados aquí para darle más estructura. Entonces toda mi sección de introducción, la sublínea del titular y la fecha, voy a seleccionar esa pulsación Mayús a. y voy a crear un marco de auto-layout anidado. Se puede ver que aquí el espaciado se establece en cero. Entonces, si aumentaría eso, obtendré más distancia. Ahora ya puedo tomar el marco padre, agregar auto-layout, y verás que ahora está funcionando. Este es un marco anidado. Ahora se puede ver que el espaciado sólo se aplica a los elementos secundarios directos. Ahora está establecido en 14 y podría aumentarlo o disminuirlo. Quiero ponerla en 16 para tener un múltiplo de ocho. Auto-layout recogí todo mi relleno a la izquierda, derecha, arriba e inferior automáticamente. Y también es conjuntos con 14. Voy a presionar Comando y dando clic en mis opciones de relleno. Recuerda que este es el atajo para la notación CSS. Agrego 16, y de esta manera puedo cambiar todo el relleno alrededor a 16 con un solo clic. Todo lo que necesito hacer ahora es establecer las opciones de cambio de tamaño para el marco S. Hasta el momento, no pasa nada. Selecciono la imagen y la dejo en fija, fija. Después selecciono mi marco anidado. Y ahora es por eso que hay que tener cuidado. Si envío este para llenar contenedor, selecciono el elemento hijo. Verás que esto todavía está configurado en fijo. Por lo que es importante seleccionar el padre, presionar Enter, luego obtienes el elemento hijo viejo a vez y luego lo configuras para llenar contenedor. Así que estoy configurando los elementos secundarios así como este contenedor padre ahora que es su propio nuevo diseño automático para llenar el contenido. Estoy configurando mi texto de copia para que se sienta contenido. Y me aseguraré de que esté configurado en máximos de auto. Mi enlace puedo decir para abrazar, abrazar como lo estoy tratando un poco como un botón. Y ahora verás que todo está funcionando simplemente genial. Abordemos nuestro segundo diseño. Entonces aquí necesitamos combinar horizontal con auto-layout vertical. Pensemos en la estructura antes de comenzar. Entonces esto básicamente es lo que configuramos antes. Aquí tendremos un marco anidado. Luego creamos un marco alrededor de la sección derecha. Y luego tenemos este marco padre con un marco de diseño automático horizontal. Vamos a hacerlo. Entonces voy a seleccionar mis titulares aquí de nuevo, mi intro y voy a presionar Shift a, y esto se convierte en un marco de diseño automático. Por supuesto, debes nombrarlo siempre. Llamemos a esto titulares. Después estoy seleccionando mis textos copiados y mi enlace, y estoy presionando Shift a nuevamente. Y también puedo nombrar a este lado derecho o derecho. Ahora estoy seleccionando el marco de mis padres. Y como pueden ver ahora, aquí sólo tengo los dos elementos hijos. Entonces se va a aplicar el layout horizontal. Echemos un vistazo a este diseño también. Y se puede ver que esto se establece automáticamente en horizontal. Así como Figma recoge el acolchado y el espaciado y también recoge las direcciones. Así que limpiemos esto y también agreguemos nuestro redimensionamiento de inmediato. Entonces estoy configurando esto aquí para abrazar el contenido. Estoy configurando mi texto para que se sienta contenedor y me aseguro de que sea altura automática. Y ahora estoy teniendo mi último elemento, que es un marco de auto-layout anidado. Primero hay que entrar, seleccionar todos los elementos secundarios con N para configurarlos para llenar contenedor. Y luego estoy seleccionando de nuevo al padre y también configuro esto a contenedor lleno. Ahora bien, ¿por qué sucede esto? Esto está sucediendo porque el marco padre está configurado para abrazar. Simplemente puedo cambiar el tamaño de esto. Establezca esto para llenar el contenedor. Y ahora va a ser correcto otra vez. Tengo mi lado derecho todo listo. Mi imagen aquí. Quería irme a un fijo otra vez. Lo que podría hacer es cambiar la posición si quisiera en el centro o algo con alineación. Y ahora veamos qué pasa si lo redimensiono y esto está funcionando. Simplemente genial. Quizás te preguntes qué pasaría si configuro esto para llenar contenedor también, entonces compartirían este espacio. Así que también podrías tener algo como esto. Pero en mi caso, quiero mantenerlo fijo. Vamos a configurar nuestro diseño aquí de nuevo, tengo una mezcla de disposición horizontal. Entonces este de aquí será mi marco anidado horizontal y Auto Layout Vertical. Así como un elemento poco posicionado absoluto en la esquina superior derecha. Primero seleccionemos nuestros titulares como de costumbre, cambiemos un para crear un marco de diseño automático, por cierto, siempre podemos usar el menú. Es exactamente lo mismo. Después selecciono la imagen y mi nuevo fotograma anidado, y presiono Mayús a otra vez. Y ahora solo tengo elementos secundarios verticales en mi marco padre con la misma distancia. Entonces selecciono mi marco padre y lo convierto en un marco de diseño automático. Entonces esto no se parece a lo que busco porque este elemento aquí ahora se ve como un elemento hijo. Voy a sacar esto del marco por ahora y ocuparme de eso después. Bien, entonces primero echemos un vistazo a lo que pasó aquí. Se me quitó los rellenos. Voy a añadir eso. Voy a presionar Comando y dando clic en mis campos de relleno y voy a establecer esto en 16 por todas partes. Así que eso vuelve a lo que quiero. Ahora voy a hacer lo habitual y seleccionar aquí el elemento hijo de mi marco anidado, contenedor lleno. Mi marco anidado también quería llenar el contenedor. Mi imagen como de costumbre, me voy en un fijo y estoy configurando esto para llenar contenedor. Y ahora tomemos este de aquí. Veamos qué pasa. Sí, se queda con el contenedor porque el padre está listo para abrazar, pero ya tiene suficiente contenido para abrazar. Y así vamos a cambiar el tamaño ahora veamos si eso está funcionando. Eso está funcionando bien. Lo único que no me gusta es este acolchado de aquí. También es un poco se establece en, se establece en tres. Eso es demasiado pequeño. Vamos a ponerla en ocho. Perfecto. Y ahora voy a tratar con mi elemento posicionado absoluto. Entonces voy a tomar esto y arrastrarlo. Se va a ver de nuevo como un elemento hijo hasta que active la posición absoluta. Ahora se ha sacado del flujo de diseño automático. Ahora puedo colocarlo donde quiera en mi marco. Y recuerden, puedo agregar restricciones. Entonces ahora si cambio el tamaño, eso está funcionando, simplemente un gran pequeño error sucediendo aquí. Veamos que este marco anidado no he dicho que sienta contenedor. Cambiemos esto. Ahora. Todo es como yo quiero que sea. De nuevo, puedes escuchar si seleccionas este fotograma, posiciona la imagen para que la puedas tener en la parte superior, o me gusta bastante aquí en el centro. Eso depende de ti. Aquí, sin duda es mi maquetación más compleja. Echemos un vistazo a lo que está pasando. Entonces tengo dos secciones principales. Aquí hay barra inferior y contenido principal. El contenido principal se vuelve a dividir en disposición horizontal. Entonces estoy teniendo este lado y mi imagen. Empecemos con los contenidos principales. Así que vamos a seleccionar todo el texto en el lado derecho desplazamos a, y lo convertimos en un marco de diseño automático. Ahora mantengo eso seleccionado, selecciono mi imagen, presiono Mayús de nuevo. Y ahora tengo mi parte superior. Voy a llamar a esto no es el mejor Significado. Entonces voy a echar un vistazo a lo que está pasando aquí abajo con mi barra inferior. Entonces echemos un vistazo. Si solo convirtiéramos todo esto en auto-layout, pensaría que todos esos que estoy tratando de elementos, no queremos esto, así que tenemos que hacer bastante anidar aquí. Entonces empiezo con mis avatares aquí, los selecciono todos, presiono Mayús a, y se puede ver que lo que sucede es que lo posiciona muy bien uno al lado del otro. No quiero esto, pero puedo apilarlos simplemente arrastrándolos o también podrías agregar espaciado negativo. Puedes hacer eso a tu gusto. Creo que fue algo así. Ahora, se puede ver que este no es este que solía estar en la cima. Entonces lo que puedo hacer es tomar el menú avanzado e ir a Apilamiento de lona. Primero en la parte superior. Perfecto. Bien, Entonces estos dos parecen estar a la izquierda con su propia distancia. Entonces, seleccionemos esos dos. Presione Mayús a, conviértelos en un marco de diseño automático. Y entonces aquí podría incluso adaptar el espacio. Sólo voy a poner esto a 24 y tener mis múltiplos de ocho, bonitos y ordenados. Ahora puedo seleccionar esos dos fotogramas anidados que creé, y crearé otro marco de diseño automático alrededor de ellos. Ahora puedo posicionarlos para que estén bien, todos en el medio, por ejemplo y voy a tener que mirar qué voy a hacer con este bar de aquí. Entonces yo diría que este bar, podría dejar en su propio elemento, su propio elemento hijo. Pero déjame ver, tal vez más tarde agregué a uno de mis marcos anidados. Bien, entonces ahora tengo esto aquí arriba. Yo tengo, voy a llamar a esta barra inferior. Y voy a tener la línea. Déjame poner eso en la posición que quiero que estén. Entonces ahora tomo mi contenedor padre y lo convierto en un marco de diseño automático. Eso se ve bien. Y ahora vamos a establecer el comportamiento de redimensionamiento. Entonces aquí selecciono de nuevo este marco, presione Enter Todos los elementos secundarios para llenar contenedor. Y estoy configurando esto aquí para volver a llenar contenedor, mi imagen, lo dejo arreglado, arreglado. Y estos contenedores para la parte superior, también estoy configurando para llenar un contenedor. Veamos el contenedor principal establecido a hoc. Voy a poner eso en arreglado ahora mismo para que no cambie el tamaño. Ahora voy a echar un vistazo a mi barra inferior. Estas imágenes aquí. Los dejo en contenido fijo y hunk. Eso está todo bien. Aquí. Cómo contenido que se ve bien, su contenido, genial. El marco padre también tiene contenido. Y ahora lo que hago aquí es ponerle esto a un espacio entre ellos. Y entonces solo necesito lidiar con mi línea aquí que voy a configurar para llenar contenedor también. Bien, echemos un vistazo si eso funciona. Entonces mi parte superior y mi línea está funcionando, pero me olvidé de poner toda la barra aquí para llenar un contenedor. Volvamos a cambiar el tamaño. Fantástico, eso está funcionando. Entonces, como puedes ver, siempre y cuando tengas un enfoque estratégico para el auto-layout, en realidad no es tan difícil. Solo piénsalo en pequeñas partes que te peguen y no en un diseño grande y abrumador. Me gusta usar el enfoque de que primero configuré mi marco anidado. Entonces primero pienso en la estructura, después dije el redimensionamiento. Y luego al final, como lo que todavía tendría que hacer aquí es asegurarme de que todo sea que todo sea un múltiplo de ocho y respete mi sistema de espaciado de puntos de ayuda. Y claro que también tenía necesidad de echar un vistazo a los elementos monásticos hijos para asegurarse de que todo esté en línea con mi sistema de espaciado. 24. ¡NUEVO! PLANIFICACIÓN AUTOMÁTICA: variables para espaciado y acolchado: Usando variables para relleno y espaciado y Figma. Primero echemos un vistazo a la colección que vamos a utilizar para nuestro espaciado. Haga clic en el fondo gris del lienzo, y luego verá las variables locales. Haga clic en el signo variable local, y verá sus colecciones. Puedes cambiar de cualquier colección que ya hayas creado y también puedes crear nuevas colecciones aquí. Ya creé esas variables para ti. Pero si quieres crear más, simplemente haz clic en crear variables. Entonces para el espaciado, usarías una serie de variables, y puedes crear cualquier otra variable que te gustaría. También puedes agregar variables entre ellas, simplemente arrastrando las variables que creaste alrededor de tu colección Pero eliminemos este de aquí. Puede hacer esto haciendo clic derecho y luego simplemente haciendo clic en eliminar variable. Como pueden ver, estoy usando múltiplos de ocho para mi sistema de espaciado. También tenga en cuenta que puede hacer clic en la variable de edición, y luego podría definir dónde desea que se use esta variable de espaciado. Por ahora, vamos a cerrar nuestra colección, y apliquemos este espaciado y relleno a nuestra tarjeta. Esto solo funcionará en la configuración de elementos con diseño automático. Seleccionemos nuestra tarjeta, puedes ver que actualmente en el elemento padre aquí, no se establece ningún espaciado. Podría elegir una variable simplemente haciendo clic en ese campo en el símbolo de la variable y luego eligiendo una variable de mi menú desplegable. Sin embargo, esto agregaría espacio alrededor de mi tarjeta. Ahora bien, en realidad no quiero esto. Quiero este espaciado aquí dentro de mi tarjeta. Esta parte aquí para tener el relleno agregado. Voy a seleccionar este marco de diseño automático anidado. Entonces puedes ver que esto ya es un múltiplo de ocho, pero quiero usar mi variable, así me aseguro de que todo esté alineado a lo largo de mi diseño. Nuevamente, selecciono el campo. Veo aparecer la variable C. Haga clic en él. Ahora puedo elegir mi bloque de espaciado M. Lo elegiré aquí también, y también puedo usarlo para espaciado. Recuerden, podemos usar, que sería el espacio entre ellos. Pero estoy eligiendo una variable, y de nuevo voy por la ocho, que ya configuré manualmente antes. Si configuramos esto como un componente y ahora sacamos una instancia, entonces puedes ver que si selecciono este layout anidado en mi instancia, las variables se heredan del componente principal Si cambio el tamaño, entonces todo permanecerá en su lugar, y mis variables establecerán el espaciado y el relleno para este componente Si cambiara el valor de una variable, así que tomemos mi bloque de espaciado y aumentemos el número, entonces seguiría cualquier lugar donde utilicé esta variable en mi diseño. 25. VARIABLES: Tenga en cuenta que las variables son un tema realmente, muy grande y poderoso. Se introdujeron a finales de junio de 2023. Si no estás familiarizado con las variables, entonces tengo una inmersión profunda completamente separada sobre ese tema. 26. ¡NUEVO! PLANIFICACIÓN AUTOMÁTICA: establece un ancho mínimo y máximo: Configurando un ancho mínimo y máximo con Figma. Aquí no tengo autos de diseño automático. Ahora, puedo cambiar el tamaño de esta tarjeta, pero en algún momento va a ser demasiado estrecha. En algún momento va a ser demasiado grande. Entonces lo que quería hacer es que quiero establecer un ancho mínimo como por aquí. Y un ancho máximo. Empecemos con un ancho mínimo. Sólo voy a cambiar el tamaño hasta el punto en que creo que aquí es donde todavía se ve bien Entonces será alrededor de algo así como 240. Entonces puedo ir por aquí y en el ancho veo un pequeño error. Ahora me sale este desplegable y puedo escoger el ancho mínimo del anuncio. Y simplemente voy a escribir mi número aquí que quiera y puedo cambiarlo en cualquier momento. Ahora veamos qué pasa si ahora redimensiono. Se puede ver que todavía puedo ir tan grande. Pero si voy más pequeño, puedes ver que una vez que llego a este umbral, luego dos líneas rojas, una PM, y me están deteniendo en cambiar el tamaño más. Lo mismo para un ancho máximo. Creo que voy a poner esto por aquí, tal vez 450. Entonces el mismo procedimiento con un desplegable, agregar un max-width, voy a ir Y nuevamente, siempre puedo cambiar eso a cualquier otro valor. Entonces ahora si cambio el tamaño, puedes ver que puedo jalarlo más, pero puedo cambiar el tamaño entre esos dos conjuntos de Min y max. Y puedes usarlos ambos juntos. O simplemente puede usar Min o max si desea eliminar que simplemente seleccionar su componente. Y verás que Min y max se establece aquí si también pasas el cursor sobre esto Y puedes ver aquí, eliminar Min y max. También podrías configurar variables y luego usarlas como tus valores Min y Max. Entonces echemos un vistazo. Si saltamos a nuestro diseño, configuré una colección con un Min y un ancho máximo de 250.450 Sin embargo, si simplemente selecciono la tarjeta, entonces voy a aplicar variable y digamos agregar el min-width Entonces esto se agregaría como el min-width, como el ancho principal de toda esta tarjeta Entonces esto no tendría nada que ver con Min o max. Simplemente me gustaría, si lo redimensiono, como tirar la variable que he establecido aquí, lo que tendría que hacer es primero entrar en agregar min-width, luego obtengo un Y desde aquí ya puedo aplicar mi min-width. Y luego hago lo mismo para max-width. Obtengo un nuevo campo y ahora aplico mi variable para el ancho máximo en. Ahora bien, si cambio el tamaño, entonces esto es lo que busco Ahora puedo convertir esto en un componente, sacar una instancia, y verás que esta instancia seguirá el conjunto Min y max del componente principal. Por cierto, usamos tanto menos sin embargo, ten en cuenta que también puedes establecer Min y max a la altura 27. ¡NUEVO! DISEÑO AUTOMÁTICO: envuelve de diseño automático: Envoltura de diseño automático. la izquierda aquí tengo dos componentes, una tarjeta básica y una tarjeta de boletín. Y a la derecha, tengo un marco padre. Y dentro de ese marco de padres, tengo instancias de estas tarjetas. Ahora bien, este marco padre aquí se puede ver configurado como diseño automático. Y desde junio de 2023, no solo tenemos diseño automático Horizontal y Vertical configurado el diseño automático Horizontal y Vertical si también tenemos wrap. Entonces veamos qué pasa ahora ya que tengo esto configurado a Horizontal. Y se puede ver que sí cambia el tamaño. Pero en algún momento, esto tendría que saltar a la nueva fila. Aquí, puedo usar wrap. Hola proporcione, solo agregue este wrap, entonces no va a pasar nada porque mis componentes todavía están configurados con diseño automático y no saben en qué momento quiero que se rompan. Podríamos cambiarlos de contenedor Phil a un ancho fijo. Entonces ahora tienen un ancho fijo, si cambio el tamaño aún se romperá a la nueva línea Pero podría querer esto un poco más de fluidos. Quiero que esto sea fluido y en cierto punto, saltó a la siguiente línea. Entonces lo que puedo hacer es establecer un Min y un ancho máximo. Entonces voy a agregar esto a mi componente principal. Solo agreguemos un ancho mínimo de 250, y agreguemos un ancho máximo también de 450 No es un boletín. Sólo voy a añadir un ancho Min por ahora y ver cómo se ve eso porque me gusta bastante eso para estirar. Lo que tengo que hacer, necesito seleccionar al padre. Si pulso Enter, entonces selecciono todas las instancias a la vez. Y ahora lo pongo de nuevo para llenar contenedor. Actualmente heredar minmax sigue siendo un poco buggy. Entonces lo que voy a hacer es ir a seleccionar todas las instancias nuevamente y asegurarme de restablecer los tamaños. Realmente solo necesitas restablecer los tamaños si estás experimentando algún problema. De lo contrario, este es el resultado que deberías estar obteniendo. Así que ahora, a medida que las instancias alcancen su tamaño mínimo, van a reubicarse en la 28. ¡NUEVO! Cómo configurar una página de diseño de automóviles: Vamos a configurar una página completa con diseño automático. Aquí configuré una página básica. Tiene una navegación, así como tres instancias de tarjetas de diseño automático. Todo ya está configurado un diseño automático, por lo que mi navegación ya está configurado al espacio entre y responsive. Mis tarjetas también se configuran con diseño automático. No obstante, si cambio el tamaño de mi marco padre, no van a reaccionar Si simplemente convierto el marco padre en un marco de diseño automático, eso no va a funcionar porque entonces todos se van a distribuir verticalmente. Necesito agregar algo de estructura anidando diseño automático. Primero. Voy a seleccionar las tres tarjetas, y voy a crear un marco de diseño automático alrededor de ellas. espacio entre ahora es básicamente mi canaleta que puedo ajustar Ahora puedo usar el marco de mis padres y agregar diseño automático. Básicamente, piensa en tu diseño como diferentes secciones a las que estás uniendo con el diseño automático final en un marco padre. Ahora voy a agregar el redimensionamiento. Y lo que me gusta hacer es ir desde los elementos secundarios más bajos son desde el centro básicamente hasta el marco padre. Ahora voy a seleccionar mi grupo de tarjetas y voy a presionar Enter. Al presionar Enter, estoy seleccionando a todos los niños dentro de este marco de diseño automático. Y ahora voy a cambiar el redimensionamiento de todos esos elementos secundarios para llenar contenedor horizontalmente. Entonces si vuelvo a seleccionar el grupo de tarjetas Establecer marco aparente, puedo probar esto y puedo ver que eso funciona muy bien. Entonces el contenido de este grupo de autos está respondiendo. Pero si cambio el tamaño del marco padre que el costo Web en sí, aún no sabe qué hacer Algunos también tienen que configurar todo el grupo para llenar contenedor. Entonces, vamos a entender esto de nuevo. Este grupo está configurado para llenar contenedor y los niños mayores dentro de este grupo también están establecidos para llenar contenedor. Esas son dos cosas distintas. Voy a configurar la navegación para llenar contenedor también. Y ahora estoy redimensionando al padre. Y se puede ver que esto está funcionando. Ahora que podría el marco de diseño automático está funcionando. Puedo configurar y limpiar un poco al espaciado. El espaciado aquí sería la distancia entre mis diferentes secciones y el margen que podría establecer con Relleno horizontal. Creo que voy a ir por el top cero. Y solo quiero agregar un poco de espacio en la parte inferior para que mi diseño respire. Actualización Figma introdujo variables. Así que también podría usar esas variables para establecer mis valores de espaciado. Ahora quiero volver a mencionar que también podría haber agregado este relleno a mi grupo de tarjetas realmente depende de usted. Lo importante es ser congruentes. También depende mucho de lo que estés construyendo. Por ejemplo, esto está funcionando porque mi navegación, no va por todo el ancho. Digamos que esta navegación tenía un color de fondo, entonces esta seguramente no sería la solución ideal. Entonces si quiero que trabajemos y todavía quiero mantener el 48 de margen que tengo aquí en el marco padre ahora para izquierda y derecha, primero necesito quitarle esto a los padres. Entonces voy a poner esto a cero. Y voy a poner esto a cero aquí. Entonces ahora todo es de ancho completo. Ahora voy a agregar el 48 de nuevo en la navegación. Voy a seleccionar todo el grupo de tarjetas y también agregar 48. Ahora cambiemos el tamaño para ver si todo está funcionando. Y esto está funcionando bien y ahora estoy teniendo una navegación de ancho completo En cuanto tengas una idea clara de tus secciones y tu configuración de redimensionamiento y lo que quieres lograr Literalmente se trata de jugar con tu diseño. Pruébalo, duplica tarjetas y artículos seguidos, y también llévate algunos. Y aún puedes cambiar el redimensionamiento así como tus márgenes individualmente. También tratando de agregar algo de texto, asegúrese de anidar siempre al agregar nuevos grupos. E incluso podrías agregar secciones enteras como por ejemplo, una sección de introducción Asegúrese de mantener los márgenes consistentes. Entonces aquí volvería a agregar 48. Y luego solo juega con la configuración de fondo , márgenes y Espaciado. Así que no configures una página completa y luego intenta agregar el diseño automático en todas partes Primero, comienza con los componentes más pequeños, tus navegaciones, tu tarjeta, todas tus diferentes secciones se abren camino hasta que al final, creas el marco padre Esto lo mantendrá fácil y escalable. Empujemos esto un poco más y recordemos a nuestros ayudantes de los que ya aprendimos Empecemos con el texto aquí. Entonces en este momento o bien tenemos la opción entre llenar contenedor y luego se redimensionará con los padres Pero entonces podría llegar a ser demasiado grande en algún momento. Si cambiamos eso y cambiamos el tamaño, entonces tenemos un tamaño fijo, pero entonces nuestro texto no responde sin embargo, podría usar Maya max-width para Entonces voy a usar max-width y voy a poner esto alrededor Y luego solo necesito asegurarme de que configuré esto para llenar contenedor. Comprobemos si el ancho máximo aún está en su lugar. Sí. Y ahora podemos ver que todo se queda muy bien en su lugar y si voy más pequeño de lo que se tomará con el nuevo tallaje. Ahora agreguemos algunas tarjetas más. Entonces quiero agregar todos estos aquí y allá solo una sola tarjetas que son Misma instancia que las demás. Yo solo ya agregué algo de contenido, así que vamos a ponerlos aquí y ya se puede ver que ahora esto es lo que hacen. Quiero que se envuelvan en la siguiente línea. Así que sabemos que podríamos usar nuestra función de envoltura aquí y el diseño automático. Entonces puse eso en el marco padre. Pero ahora mismo no pasa nada porque estas tarjetas no tienen un ancho fijo o mínimo. Entonces lo que voy a hacer es seleccionar a uno de los padres. Golpeé Enter y ahora tengo todos los elementos hijos seleccionados. Entonces todas las cartas. Y ahora puedo agregar un min-width, y solo voy a escribir eso a mano También podría usar variables para esto. Así que tenga un ancho mínimo de 250, y también podría establecer un ancho máximo. Sólo hagamos eso de, digamos 450. Así que vamos a mover esto un poco hacia arriba y vamos a cambiar el tamaño. Y entonces se puede ver esto como trabajando ahí. Vas a conseguir esto aquí que no siempre distribuye por igual. Lo que podrías hacer es que podrías agregar como una tarjeta fantasma aquí si quisieras tenerlos todos iguales y luego podrías poner esto a cero. También puede configurar un componente al que podría llamar fantasma o SAP espacial. Pero en realidad, voy a dejarlo en el estado natural así como esto. Entonces ahora solo queremos agregar nuestra ficha de comida. Y fíjate que quiero que este set de comida cambie de tamaño, pero quiero que los términos y condiciones estén pegados a la derecha Voy a seleccionar este marco. Y luego recuerda, podemos escribir o elegir también aquí. O podemos hacer clic dentro de nuestra alineación y simplemente presionar X para alternar entre auto y el espacio entre. Entonces ahora simplemente voy a agregar este de aquí. Vamos a limpiar esto. Quiero esto fuera de mi grupo de tarjetas. Si estás haciendo un desastre, solo regresa. Ahora voy a arrastrar esto de nuevo y esto es lo que busco. Así que vamos a echar un buen vistazo. Si esto está funcionando, seleccionemos esta barra y asegurémonos de que esté lista para llenar. Sí. Y ahora todo debería estar funcionando para que veas que mi texto está en su lugar. Mis tarjetas están cambiando el tamaño muy bien y mi pie también responde a cualquier cambio de tamaño, realmente usando todas las características de diseño automático en este pequeño ejemplo, esto podría ser un poco abrumador. No te preocupes, solo toma un elemento a la vez paso a paso 29. DISEÑO AUTO: 13 La misma altura para todos los niños: Configuración, la misma altura para todos los elementos con diseño automático es en realidad bastante simple. Aquí tengo cuatro tarjetas de auto-maquetación diferentes y se puede ver que ya están todas configuradas en respuesta. Debido a la diferente longitud del contenido, tienen diferentes alturas. La mayoría de las veces esto va a estar bien, pero puede haber casos en los que quieras que todas estas tarjetas tengan la misma altura. Si pusiéramos a Cannes en altura fija, los carros, sin embargo, ya no reaccionarán a cambiar de contenido y cambiar de tamaño. Así que en realidad no queremos eso. Lo que realmente queremos es dictar la tarjeta con más contenido, la altura para todas las demás. Y hay un pequeño truco que puedes usar para que esto funcione. En primer lugar, necesitamos crear un marco padre alrededor de esto. Así que seleccionamos todos nuestros elementos hijos, presionamos Mayús a y creamos un marco de diseño automático alrededor de ellos. Voy a llamar a este padre de familia. Voy a darle a estos padres y color de fondo, y voy a agregar algo de relleno. Ahora lo que voy a hacer es seleccionar el padre, presionar Enter para seleccionar todos mis elementos hijos. Y ahora voy a ponerlos para que sientan contenedor verticalmente y llenen contenedor horizontalmente. Mi contenedor padre, ahora necesito haber configurado a fijo y abrazar. Y ahora se puede ver que todo se distribuye muy bien incluso al cambiar de tamaño. Si cambiáramos el contenido, eso también se adaptaría automáticamente. Por lo que siempre estará adaptándose a la tarjeta con más contenido. clave de la presente es que los elementos se establecen para llenar la altura y el padre se establece para abrazar. Si quieres que algunos de los elementos se peguen al fondo, simplemente selecciona la tarjeta, ve al menú Avanzado, y cambia al espacio entre que funcione tanto horizontal como verticalmente. 30. DISEÑO AUTO: 14 técnicas de apilado: Dentro de tu diseño, probablemente tendrás secciones donde tengas varias cartas o elementos similares que quieras apilar. Mi ejemplo, mis tarjetas podrían distribuirse en filas o en columnas. Empecemos con mi primer ejemplo aquí. Todas mis tarjetas ya están configuradas como marcos de diseño automático receptivos. Entonces lo que voy a hacer es seleccionar todas las cartas seguidas. Y esto puede ser tantos como quieras. Y luego crea un marco de diseño automático anidado. Entonces presiono Shift. Eso lo haré por todas mis filas. Ahora seleccionaré el marco padre y también aplicaré el diseño automático aquí ya sea presionando Mayús a o a través del menú. Ahora, todo lo que necesito hacer es establecer mi cambio de tamaño. Selecciono mi marco, presiono enter. Ahora me salen las filas. Ya voy a ponerlos para llenar contenedor. Presiono Enter de nuevo, y ahora consigo que todos los elementos hijos son todos la tarjeta dentro y los configuro para llenar contenedor también. Ahora bien, si cambio el tamaño del marco padre, todas mis tarjetas están distribuyendo muy bien. Además, si cambiara el contenido, entonces eso se adaptará automáticamente. Y podría, por ejemplo, agregar más cartas a una fila. Entonces distribuirían por igual en esa fila. Entonces no necesito tener cantidades iguales en todas las filas. Si quisiera que mis tarjetas tuvieran la misma altura, también podría hacerlo. Presione Enter, presione Enter nuevamente para llegar realmente a los elementos hijos y establecer la altura para llenar el contenedor. Mi segundo ejemplo, en lugar de crear filas, quiero crear columnas. Entonces selecciono todas las tarjetas en una columna. Y presiono shift a para crear un marco de diseño automático a su alrededor. Voy a hacer exactamente lo mismo con mi segunda columna. No seleccionar el marco de mis padres. Y lo convito en un marco de diseño automático también. Sólo voy a ordenar un poco. Entonces aquí, vamos a tener la distancia a 40 para ambos. Y quiero el espacio entre también a los 40. Entonces si ahora solo necesito establecer mi redimensionamiento ahora así que presiono enter, entonces obtengo mis columnas y les dije que llenaran contenedor. Pulse Intro de nuevo. Ahora recibe todos mis elementos hijos, todas mis tarjetas, y las configuro para que llenen el contenedor también. Si estoy redimensionando ahora, entonces mi diseño responderá a columnas. Y es lo mismo aquí. Simplemente podría agregar tarjetas individuales a todas sus columnas. También podrías agregar columnas enteras a tu diseño. En mi ejemplo, tengo todo listo para llenar contenedor. Pero lo que también podría hacer es seleccionar una columna y ponerla en ancho fijo. Ahora tendría una columna fija y todas las demás siendo receptivas. Así que realmente puedes jugar con esto. 31. DISEÑO AUTO: 15 limitaciones del diseño del automóvil y su solución: El diseño automático es increíble, pero también viene con una limitación. Investiguemos y déjame mostrarte también un poco de solución alternativa. Así que aquí tengo un marco de diseño automático que contiene tarjetas de diseño automático. Y estas tarjetas están todas arregladas para llenar un contenedor. Si cambio el tamaño, verás que eso funciona perfectamente. Entonces en estos ejemplos, siempre tuvimos una distribución igual de las tres cartas. Si no quiero esto, lo que podría hacer es seleccionar una tarjeta y cambiarla a ancho fijo. Si hago eso, entonces esta tarjeta se quedará el ancho que le di y todas las demás quedarán fluidas. Y eso es más o menos dos opciones que me dan con auto-layout. Entonces, lo que no funcionará con el diseño automático es que voy a tener una distribución como esta, por ejemplo, que estoy usando hasta 40 por ciento para un elemento y luego distribuyo el resto en un 20 por ciento. Déjame mostrarte lo que este ejemplo simplificado. Entonces aquí tengo un marco de diseño automático que contiene dos imágenes de diferente ancho. Actualmente están establecidos en ancho fijo. Si lo cambio para llenar contenedor, se puede ver que enseguida las imágenes saltarán a un nuevo igual tamaño. No importa cuántas imágenes haya en tu fila. Siempre tendrán el mismo ancho si se configuran para llenar contenedor. Entonces digamos, no quiero esto, quiero que este vuelva a su tamaño original. Entonces mira qué pasa cuando lo redimensiono. En mi menú Cambiar tamaño. Ahora ha cambiado de Phil a arreglado automáticamente. Entonces, si cambio el tamaño del marco padre, entonces usará todo el ancho. Sin embargo, una imagen permanecerá fija y la otra utilizará el espacio restante. Así que no hay manera de mantener las proporciones con el diseño automático. Lo que podría hacer si quisiera una distribución como esta es tomar de auto-layout de mi marco padre. Y ahora voy a aplicar una grilla. Voy a columnas y voy a añadir un poco de margen. Y ahora puedo configurarlos para que quepan en las columnas. Y se puede ver que ahora tengo una distribución desigual de 2.3. Si ahora los pongo a izquierda y derecha y cambio el tamaño del marco padre, entonces mantendrán esas proporciones. Por supuesto, podemos desconectarnos la grilla y obtener este efecto realmente agradable. Volvamos a nuestro ejemplo original. Entonces, lo que hice aquí es que me quité diseño automático del marco principal principal y apliqué una cuadrícula. Observe que todos los demás elementos como mi tarjeta y mi navegación, esto todavía está configurado con diseño automático al igual que antes. Entonces el auto-layout funciona dentro de esos elementos, pero alrededor de ellos, ahora aplicé mis restricciones y las puse todas a izquierda, derecha, para responder a la grilla. Entonces, si cambio el tamaño de la cuadrícula ahora, entonces dentro del diseño automático de la tarjeta esto para funcionar. Sin embargo, los elementos se comportarán con la cuadrícula. Debido a que estoy usando la grilla, ahora puedo cambiar la cantidad de columnas que ocupan. presente cambiar la distribución en mi diseño a mi gusto. Y esto seguiría funcionando. Por supuesto, desactiva la grilla. Y obtienes un layout como este con distribución desigual. Desafortunadamente, esta podría no ser una solución perfecta tampoco. Al igual que con el contenido creciente, es posible que no pueda mantener el espaciado horizontal al eliminar el diseño automático. Esto es, sin embargo, el tema Figma. Esto no será un problema con CSS más adelante. 32. DISEÑO AUTO: 16 limitaciones y comparación de diseño automático: Recapitulemos y comparemos el diseño automático y las restricciones para entender cuándo usar qué. Auto-layout, sin duda es característica más potente y probablemente vas a usar eso un poco más también. Tenemos direcciones, tenemos espaciado entre elementos, relleno horizontal y vertical que podemos establecer, podemos alinear con auto-layout. Y, por supuesto, tenemos nuestro menú Resize más la superpotencia de anidar diferentes auto-layout y combinar todas esas características con restricciones, podemos establecer restricciones horizontales y verticales. Y también podemos establecer unos elementos fijos. Tenga en cuenta que si desea establecer elementos fijos en un prototipo, debe usar restricciones. No tendrá esta opción con el diseño automático. En proyectos más grandes, probablemente separarás los prototipos en un tamaño fijo de tu diseño responsive en otro archivo. En fin, así que eso no es realmente un problema. Recapitulemos los beneficios y limitaciones de ambos a la hora de configurar elementos como secciones o páginas enteras. Así que el diseño automático es perfecto. Si tienes una distribución igual. No va a funcionar bien con distribuciones desiguales porque si dijiste todos tus elementos hijos para llenar contenedor, siempre obtendrán automáticamente el mismo tamaño. Entonces eso no va a funcionar. Si quieres trabajar con uno o más elementos siendo fijos y el otro es fluido. Eso no es problema en el diseño automático y funcionará bien. Configuración de sus componentes. En el diseño automático es generalmente una muy buena idea y funcionará la mayor parte del tiempo. Tan solo grado. Aquí realmente estamos hablando desde cualquier cosa, desde un botón y hasta elementos complejos más anidados como tarjetas, navegaciones bajadas. Todo eso debe ser configurado en auto-layout. Luego podrá usar esos componentes de diseño automático receptivos, ya sea dentro de una configuración de diseño automático completa o dentro de un diseño con cuadrículas y restricciones. Entonces todos estos pequeños elementos aquí seguirían siendo auto-layout, sin embargo, sentarse dentro de una cuadrícula y usar restricciones. Entonces echemos un vistazo a eso. La distribución igualitaria funcionará bien. Como se puede ver. Podrías usar cualquiera de los dos enfoques. En este caso, probablemente querrás optar el enfoque de diseño automático si es posible, porque la única desventaja que obtienes con las cuadrículas y las restricciones es que no se mantendrá el espaciado horizontal. Esto es un Figma y no un problema de CSS. Si desea utilizar una distribución desigual y trabajar con capacidad de respuesta. Y esta es realmente una razón para ir con restricciones y cuadrículas. Recuerda que los componentes antiguos que vas a colocar en la red seguirán siendo responsivos. La única limitación que vas a tener es el relleno horizontal con contenido creciente que no se va a mantener. Si desea combinar fijo y fluido, aún podría usar rejillas y restricciones simplemente anidando un marco con una cuadrícula. Sin embargo, podría ser una solución un poco hacky. Realmente depende de lo que estés construyendo dentro de tus componentes, a menos que tengas una muy buena razón. Por qué no uses restricciones solo porque como puedes ver, no se mantendrá el margen. Entonces, en cuanto cambies el tamaño, las cosas se toparán entre sí. Nuevamente, esto es un Figma y no un problema de CSS. Entonces, como puedes ver, realmente se trata de lo que intentas lograr. Depende de tu equipo que cuando tengas la configuración, estés decidiendo asegurarte de hablar con tu equipo de desarrollo. Y recuerda que Figma es sólo una herramienta para demostrar lo que estás tratando de construir. No estás construyendo el producto final y está bien si necesitas documentar y tener una conversación sobre algunos de esos elementos. 33. DISEÑO AUTO: 17 imágenes de ratio de aspecto fijo: Es posible que hayas notado que actualmente no hay forma de mantener la relación de aspecto de las imágenes en Figma. ¿Qué significa eso? Eso quiere decir que la altura y la anchura de esta imagen cuando redimensione, no van a ser escaladas proporcionalmente. Eso podría funcionar con algunas imágenes, pero a veces es posible que solo quieras mantener ese tamaño. Hay un pequeño truco que puedes usar. Vaya a la sección de la comunidad y escriba la relación de aspecto. Obtendrá una visión general de varios archivos. Personalmente me gusta usar este, pero probablemente la mayoría de ellos funcionarán bien. Haga doble clic y luego haga clic en, obtenga una copia. El archivo ahora se duplicará en su cuenta Figma. Dentro del archivo, encuentras una gran explicación. Entonces, si realmente quieres entender cómo está funcionando todo esto, se explica todo en detalle aquí. Si quieres ser perezoso, solo toma la relación de aspecto que buscas. Entonces en mi caso esto es de 16 por nueve. Y luego lo copio, salto de nuevo a mi archivo. Y sólo voy a pegarlo aquí por ahora. Entonces, si cambiaría la imagen y agregaría esta como solo hacerla un poco más pequeña para que encaje. Agrega esto aquí, vamos a quitarme el café o en realidad dejémoslo para que veas la diferencia. Después lo configuré para llenar contenedor también. Y ahora como estoy redimensionando, puedes ver que esto mantiene la relación de aspecto y esta no. Entonces lo que quiero hacer, simplemente quiero agregar esta imagen dentro de aquí. Vamos a sacar esto. Y ahora primero asegurémonos de que esto tenga la relación de aspecto correcta que quiero. Entonces como estoy trabajando con 16 a nueve, vamos a cortarlo aquí y luego ponerle 160, y luego asegurarnos de que esto esté establecido en 90. Genial. También podrías dibujar un marco establecido 16 por nueve y luego simplemente agregar la imagen en la parte superior. Ahora lo que tengo que hacer, necesito exportar esto. Voy a exportarlo en tres veces su tamaño, JPEG y exportar esto. Genial. Así que ahora voy a seleccionar la imagen aquí, y en realidad voy a eliminar esta superposición. Entonces esta es la imagen real. Y voy a ir a elegir imagen. Y voy a seleccionar la imagen que acabo de exportar. Y ahora esto está sentado dentro de esta configuración y puedes ver que esta es una configuración bastante compleja. Si ahora cambio el tamaño, esto va a mantener la relación de aspecto. 34. BREAKPOINTS: 01 Un diseño no funcionará para todos los tamaños: Un diseño no funcionará para todos los tamaños. ¿Qué quiero decir con eso? Bien, entonces ahora configuramos nuestras páginas receptivas y componentes. Sin embargo, seguimos estancados con un tema. El mismo diseño no funcionará desde móviles hasta escritorios más grandes. Con un solo paso. Sólo funcionará dentro de un rango específico. ¿Cómo podemos lidiar con eso? Lo que tenemos que hacer es establecer diferentes rangos para nuestro diseño. Esto es en lo que entran los puntos de interrupción. Un punto de interrupción define un cierto punto donde el diseño puede adaptarse. Entonces, aunque todavía usamos el comportamiento receptivo entre esos puntos de interrupción, reconsideramos un diseño general una vez que ingresamos a un nuevo rango. Entonces en mi ejemplo aquí, podía ver que hasta el punto de ruptura a, tengo mi configuración móvil, así que esta es mi configuración predeterminada. Y luego desde el punto de ruptura a, estoy cambiando la navegación y estoy cambiando un poco el diseño general. Esto funciona hasta el punto de ruptura B. Lo que soy entonces otra vez, usando los mismos elementos, adaptando delay out para trabajar en el nuevo tamaño de pantalla. Eso no quiere decir que todo tenga que adaptarse en cierto punto de interrupción. Como pueden ver, mi navegación aquí permanece igual. Mientras que los oficiales de Figma excelentes características para lidiar con el diseño receptivo, a saber, las restricciones de diseño automático y cuadrículas Actualmente no nos da ninguna automatización para configurar puntos de interrupción. Entonces tenemos que configurarlo nosotros mismos. 35. BREAKPOINTS: 02 ¡Piensa en la adaptación de componentes individuales, no páginas enteras!: Es importante pensar en componentes adaptando no páginas enteras. Realmente no se trata de configurar una nueva página completa por punto de interrupción. Recuerde, trabajamos con un enfoque de diseño basado en componentes. Entonces realmente se trata de considerar en qué punto de interrupción se adapta un componente. Y hay diferentes formas en que esto podría suceder. A veces necesitas cambiar todo el componente, por ejemplo, en una pantalla más pequeña, es posible que tengas una navegación en el menú de hamburguesas, que cambiará a una barra de navegación con enlaces en pantallas más grandes. Elementos como cartas o secciones de héroes pueden necesitar una configuración completamente diferente para pantallas cada vez más grandes. Incluso podría decidir agregar o eliminar ciertos elementos para pantallas más pequeñas o más grandes por completo. Sin embargo, en muchos casos, es eficiente simplemente adaptar el espacio y el elemento que ocupa. Esta podría ser la misma tarjeta utilizada en todas las pantallas. Sin embargo, distribuiríamos de manera diferente, por lo que diferentes cantidades de tarjetas por fila. Y también podríamos especificar el ancho. Esto podría hacerse en porcentaje o una cierta cantidad de columnas de cuadrícula. Realmente depende de cómo se configuren tus páginas. Y por supuesto, los elementos generales como los márgenes y los rebordes podrían adaptarse así como el tamaño del texto. Entonces puedes ver que realmente se trata de considerar cada elemento y cada punto de interrupción individualmente. Generalmente queremos cambiar lo menos posible y tanto como sea necesario. Mantenlo simple. 36. BREAKPOINTS: 03 puntos de puntos de puntos de CSS: Antes de configurar nuestros puntos de interrupción en Figma, primero entendamos cómo funcionan en CSS. En CSS, los puntos de interrupción se implementan con las llamadas media queries. Una media query básicamente dice Pagar navegador, comprobar el ancho. Y si es mayor o menor que x, entonces muestra aquí el diseño o los cambios que definí para ti. Puede configurar tantas consultas de medios como desee o necesite. Pero encontrarás que la mayoría de los diseños usan alrededor de tres a cinco. Es posible que hayas oído hablar del término móvil primero. Entonces, en resumen, lo que eso significa es que configuras primero el diseño más pequeño, puedes pensar en esto como tu configuración base para toda la página. Entonces solo si quieres adaptar algo, por ejemplo en mi caso, mi titular en el móvil, esto podría ser un 32 o a RAM. Y quiero que sea más grande, así que es 64 o cuatro RAM en una pantalla más grande. Entonces anularía esta configuración. Todo lo demás se mantendrá en su lugar. Entonces usaría el mismo peso de fuente, la misma altura de línea, y así sucesivamente. Sólo si lo cancelo en la siguiente consulta de medios, entonces se sobrescribe. Entonces, como pueden ver, esta es la razón por la que no necesitamos configurar un diseño completo y documentado en cada nuevo punto de interrupción. Tenemos que documentar la base que tenemos y luego cualquier cambio que ocurra a partir de ahí. Esto tampoco significa necesariamente que todos tus diseños estén configurados en dispositivos móviles. Y luego después se echa un vistazo a lo que va a pasar. Porque si tu grupo objetivo principal es un tamaño de pantalla más grande, entonces por todos los medios diseñado para ese primero y Figma. Sin embargo, cuando se trata de documentar, posible que desee discutir esto con su equipo de desarrollo y probablemente primero documentar todos sus ajustes base y luego solo ver qué cambiaría. 37. BREAKPOINTS: 04 ¿Qué puntos de ruptura debo usar?: ¿Qué puntos de interrupción deberías usar? Si vas a trabajar con un proyecto existente, entonces todo esto probablemente esté documentado en la guía de estilo. En las empresas más grandes, probablemente tendrán su propia página de guía de estilo. Entonces aquí hay un ejemplo desde hace décadas y esto es público. Pueden visitar esto en el diseño de puntos de césped de década. Y es absolutamente fantástico. Entonces irías aquí a lo digital. Y entonces puedes ver más abajo aquí, elegirías pautas y diseño. Puedes ver en qué producto estás trabajando. Entonces en nuestro caso, eso será lineamientos web. Y luego puedes ver toda la documentación aquí. Puedes ver que en su caso están usando un sistema de cuadrícula y estás obteniendo información más antigua. Y más abajo, encuentro información sobre los puntos de interrupción que están usando. También es posible que te digan que están usando un sistema existente y solo usan una configuración predeterminada. Entonces, en ese caso, probablemente se te dará un enlace a la documentación. Y luego dentro de esa documentación, normalmente encuentras los puntos de interrupción. Entonces aquí por ejemplo esto es Bootstrap y puedes ver que estos son los diferentes puntos de interrupción y podrías usar estos valores. Aquí hay otro ejemplo para Tailwind, y puedes ver que la documentación variará, pero siempre será similar. Así que en cuanto sepas lo que estás buscando, podrás ver que estos son los diferentes puntos de interrupción utilizados. Y también se puede ver que todos son bastante similares. Si todavía no hay absolutamente ninguna información y solo puedes ir con lo que quieras ir. Entonces te recomiendo que uses sistemas populares como tailwind o bootstrap y simplemente escojas sus puntos de interrupción. Eso no significa que necesites usar el sistema después o cualquier otro componente o configuración. Absolutamente no con simplemente tomar los puntos de interrupción por ahora en la configuración de nuestro diseño de figma. Como ya vimos, los puntos de interrupción no son idénticos sino muy similares en la mayoría de los sistemas. Esto se debe a que el grupo tantas pantallas como sea posible por rango. A veces encuentras esto simplificado como móvil, tableta, laptop y computadora de escritorio. En realidad no es tan sencillo porque los tamaños de pantalla me silencian dinámico, así que no confíes en esto. Realmente se trata de atrapar mayoría de los tamaños de pantalla dentro de esos diferentes grupos. Entonces alguien que toda esta investigación para mí ya. Por eso personalmente me gusta simplemente tomar los puntos de interrupción existentes. Pero si te estás preguntando, si puedes simplemente configurar el tuyo propio, sí, teóricamente, también podrías definir tus propios puntos de interrupción. Cualquier valor funcionaría. También podría alterar los puntos de interrupción del sistema existente. Yo alguna vez habría tenido un poco de cuidado con ello. Más bien apegarse a lo que me dan y concentrarme en mi diseño. 38. BREAKPOINTS: 05 Configuración de puntos de ruptura en Figma: Entonces estamos amando los puntos de ruptura están listos, pero no tenemos puntos de interrupción en Figma. ¿Qué podemos hacer? Bueno, podemos montar el nuestro propio. Entonces aquí están los puntos de quiebre que obtuve de mi equipo. Lo que voy a hacer ahora es crear una representación visual de los puntos de interrupción dados en Figma. De esta manera puedo ver los diferentes rangos con los que estoy tratando. Entonces básicamente cómo lo hago, empiezo por aquí, puedes ver mi tamaño base que está aquí será mi configuración predeterminada. Y como punto más pequeño, estoy usando 320, que es d viejo iPhone como E. Así que este es viejo y bastante pequeño, realmente debería ser uno de los tamaños más pequeños alrededor. Y entonces esto es todo mi defecto y eso sube hasta que me pega. Se puede ver aquí S, que es 506, 76. Entonces esto es lo que esto entra en acción, y esta es ahora mi gama S. Y todo esto va a estar funcionando hasta que tuve 768 y así sucesivamente. Entonces el último aquí sería mi extra grande, que comienza a los 1200. Entonces este es el ancho mínimo, 1,200. Entonces aquí comienza en 1,200 y luego cualquier cosa más allá de eso estaría en el rango de Excel. Entonces nuestro único para configurar esto una vez para mi proyecto, y ahora lo convierto en un componente y ahora puedo usar instancias para probar. A veces me gusta agregar algunas guías para una visión general más fácil, pero eso realmente depende de ti. Y entonces lo que hago es copiar sobre los elementos que pretendo configurar como componentes y ahora puedo probarlos aquí. Así que por lo general configuro todo en auto-layout ya. Y ahora puedo ver hasta qué tamaño están funcionando las cosas. Y cuando necesito adaptarme. En este entorno de prueba, puedo probar componentes individuales. Puedo probar toda la sección. Entonces como como algo funciona en una fila. O también puedo probar páginas enteras. Normalmente tengo una página propia preparada para todo esto y a eso lo llamo pruebas receptivas. Esto es realmente un patio de recreo para mí. Y una vez que tengo una idea clara sobre lo que está funcionando y lo que hay que adaptar en qué punto de interrupción, entonces puedo comenzar a documentar. 39. BREAKPOINTS: 06 Prueba componentes receptivos: Déjame mostrarte un ejemplo de cómo pruebo un componente real. Vamos a tomar como ejemplo la navegación. Entonces ahora mismo estoy en mi página de diseño, y así es como me gusta configurar mis proyectos. Esto podría ser completamente diferente para tu equipo. A mí me gusta tener una sección que se llame desarrollo. Entonces aquí es donde viven todos mis diseños. Y luego tengo una página donde se documentan todos mis estilos y componentes. Entonces tengo otra sección, la prueba de respuesta. Aquí es donde vamos a jugar con nuestro componente. Y tengo otro llamado parques infantiles. Entonces aquí es donde solo puedo probar diferentes diseños y probar cosas. Y tengo uno llamado gestión de archivos. Entonces aquí agrego cosas como puedes ver mis puntos de interrupción, titulares e información más antigua. Eso no es realmente parte del diseño. Entonces podría diseñar página aquí. Normalmente tengo que tamaños de pantalla, así que uno para móvil y otro para escritorio. Y me gusta apegarme a las mismas tallas. Entonces tendré este de aquí, set edge 375, y mi escritorio configurado en 1,440. Es posible que tengas diferentes tamaños. Eso está bien. No obstante, me gusta mantenerlos del mismo tamaño ya que esto es como mi referencia que diseño en un posterior hacer mis prototipos. Y luego en mis pruebas de respuesta y en mis componentes, voy a asegurarme de que todos los demás tamaños también funcionarán. Como pueden ver, configuré una navegación para mi móvil con un menú de hamburguesas. Y sé que en pantallas más grandes quiero tener algo con enlaces o navegación diferente. Entonces, lo que necesito averiguar ahora y documentar es lo que va a pasar entre esos tamaños e incluso más allá del tamaño, probablemente agradable simplemente cópielos y péguelos en mi configuración de pruebas receptivas. Y ya configuré esos elementos con auto-layout, bien podrías hacerlo aquí en las pruebas, no importa. Lo importante es que tengas un elemento responsive a la hora de probar. Entonces ahora puedes ver que ahora puedo comenzar a probar a qué tamaño van a trabajar. Entonces puedes ver que el móvil de aquí no es un gran problema porque eso va a funcionar prácticamente en cualquier parte. Pero este de aquí en algún momento va a toparse con el logo. Además quiero mantener un poco de espacio porque podría agregar más enlaces. Así podría escapar lo que S no va a funcionar. Em, podría salirme con la mía, pero no ideal. Pero de L en adelante parece una apuesta segura. Probablemente probaré esto con algunos puntos de menú más en un anuncio a mi documentación, cuántos enlaces puedes tener aquí. Pero voy a dejar eso por ahora. Lo que me gusta hacer una vez que conozco los tamaños, dibujo un pequeño rectángulo. ¿Y es realmente solo para mí, para mi propia orientación? Y voy a marcar esto con un color que he llamado ayudante. Ahora sé que este de aquí empieza a patear en l. Y hasta ahora tengo mi menú, mi menú móvil corriendo de exceso, en realidad comienza aquí desde el exceso hasta n. Así que está cubriendo esos tres breakpoints y luego solo aquí cambiar hits y de L y M en adelante, estoy usando un diseño diferente. 40. BREAKPOINTS: 07 Documenta componentes receptivos: Entonces, una vez que probé mis componentes, ahora necesito documentarlos. Entonces aquí tengo mis hallazgos y ahora estoy saltando a estilos y componentes. Y se puede ver que ya configuré la navegación para usted. Entonces echemos un vistazo a esto con más detalle. Aquí es realmente donde guardo todos los componentes maestros y realmente estoy empezando por los más pequeños a los átomos. Entonces puedes ver esto aquí está el de logo y tengo los diferentes íconos para abrir y cerrar los enlaces, todo aquí. Y entonces se puede ver que aquí tengo moléculas mayas, así que estas se combinan. Y este es básicamente el componente maestro receptivo que usaré instancias en todo mi diseño. Entonces estos son los dos que acabamos de probarlo y tal vez se pregunten por qué hace el tercero, voy a explicar eso en un segundo. Así que vamos a desplazarnos hacia abajo y luego se puede ver que aquí abajo es en realidad donde voy a tener una sección adicional llamada comportamiento responsivo. Y es por ello que documento lo que acabamos de probar. Entonces aquí simplemente agregué una instancia de mi componente. Y también se puede ver que agregué una miga de pan y luego dije que esto va a funcionar a través del exceso de punto de interrupción. También puedes moverlo, puedes ver cómo se comporta. Y entonces tenemos más abajo, tenemos nuestro más grande. Y como puedes ver, este diseño funciona con una grilla. Entonces agregué la grilla así muestro cómo se asienta en la grilla. Ahora quizás te estés preguntando, por qué tenemos otro para S M. La razón de esto es que déjame saltar aquí y puedes ver que también tengo una documentación de cómo funciona mi grilla. Y mi grilla cambia de margen en S M. Así que la más pequeña tiene margen de 24. Después voy por 40 y después voy por 80. Así que déjame saltar de nuevo en mi documentación aquí. Y ahora puedes ver aquí arriba con mis componentes principales, puedes ver que este de aquí está configurado con 24. Entonces este se configura con un margen de 40. Y este de aquí se configura con un margen de ATP. En CSS. Esto entrará en acción automáticamente, pero así, es más fácil para mí reutilizarlos en mi diseño Figma. Entonces esto será lo mismo para la tipografía. Tendría que revisar mi hoja de estilo tipográfico. Y aquí se puede ver que tengo mi defecto, así que mi configuración de móvil primero, y necesito verificar si algo se adapta. Entonces por ejemplo mi H1, eso se adaptaría a la talla S. Y luego otra vez en la talla L. Para mi navegación, no hay cambio, así que no necesito preocuparme por esto. Entonces crearé un componente separado, por ejemplo, si estoy usando H1 en una sección de héroe, creo uno para móviles primero que uno para el tamaño como en adelante y el tamaño L. Esto no es nada que necesites en CSS más adelante ya que entra automáticamente si es solo el cambio de tamaño. No obstante, me gusta bastante hacerlo así cuando se trabaja en Figma. Entonces es muy claro y siempre estoy diseñando con la configuración real. Entonces sí, así es como me gusta probar y documentar todos mis componentes. Y esto no es una regla establecida, esto es sólo algo que me gustó hacer. Por lo tanto, también puede encontrar formas ligeramente diferentes de documentar esto dependiendo de su sistema. Así que vamos a echar otra mirada. Obviamente también cada componente es un poco diferente. Entonces aquí pueden ver que este es un componente con el que me salgo con la suya, pero estoy documentando cómo se asienta en el diseño en diferentes puntos de interrupción. Y también puedo combinar puntos de interrupción como ven aquí. Así que realmente traté de simplificar esto lo más posible. Y aquí se puede ver que estoy usando un componente para móvil y después estoy teniendo otro componente. Y nuevamente, eso puede sentar de manera muy diferente en mi diseño, sin embargo siempre tengo el mismo componente. Un pequeño consejo. Si estás probando cosas seguidas como tarjetas, entonces no quieres configurar un componente completo para cada una de estas filas. Solo quieres configurar este carrito y documentado. Pero sabes que vas a tener márgenes cambiantes en tu diseño. Entonces lo que puedes hacer es simplemente crear ese marco en el fondo. Y entonces puedes usar restricciones. Entonces aquí configuré esto con 40 margen a cada lado. O también puedes convertir esto en un diseño automático y luego solo asegúrate de tener el margen 40 establecido aquí. De esta manera, puedes probar una sola tarjeta en los diferentes tamaños de pantalla, pero solo necesitas documentar una tarjeta. Y es lo mismo si estás teniendo algo con un ancho fijo que se sienta en el medio. Entonces en esta tarjeta, esto es como una especie de ventana modal. Y lo que estoy haciendo es simplemente poner esto con restricciones al centro. Y así solo puedo decir, mira hasta qué tamaño de pantalla va a funcionar esto. 41. BREAKPOINTS: 08 variantes sensibles: Quiero mostrarte un pequeño hack que estoy usando para organizar mis componentes responsive. En primer lugar, me aseguro de que tengo todos los átomos, así que todos los elementos individuales que estoy usando como sus propios componentes, entonces tendré instancias por ejemplo de este logotipo y del icono dentro de mi navegaciones dentro de mis componentes aquí. También se puede ver que en realidad no se trata de componentes individuales, sino que creé un conjunto de componentes con varianza para cada uno de los diferentes tamaños. Aquí dentro. Se puede ver que nombré este rayos de navegación y radiografías aquí está mi signo de que son este componente tiene más varianza para diferentes puntos de interrupción. La varianza se nombra después de los puntos de ruptura que están sirviendo. Entonces esta es exceso, esta es navegación S y M, y esta es navegación l y x l. La estoy guardando así porque tal vez en algún momento posterior podría dividir esto en dos. Entonces entonces le cambiaría el nombre en navegación L y simplemente crearía otro para navegación XL. También podría llamar a esta navegación por defecto. Entonces, si solo tuviera esta navegación para toda mi página, entonces la llamaremos navegación por defecto. Y sólo si en un momento posterior lo sobrescribiría, lo llamaría navegación y luego S, M o L en adelante o lo que sea. No importa cómo exactamente lo nomines, solo necesita ser muy claro para cualquiera que lo mire que se está refiriendo a sus puntos de interrupción. Por eso es tan importante agregar también esta información sobre el sistema de cuadrícula, sobre los puntos de interrupción, sobre los márgenes y los rebordes que estés usando a tu documentación también. Y esta también tiene que ser la documentación visual, no sólo la documentación técnica. Así que bien podría haberlos configurado como componentes individuales que también funcionarían. Pero por qué me gusta variante es porque ahora puedo agregar una propiedad llamada Breakpoint. Y veamos cómo se ve eso en mi diseño. Entonces en mi diseño, ahora tengo mi navegación aquí. Y se puede ver que esta es la señal de que hay más puntos de ruptura disponibles y se llama puntos de interrupción. Y con un desplegable, podría elegir cualquier otro punto de interrupción. Digamos que configuraría diseño móvil o un iPad, por ejemplo, ahora puedo buscar navegación a través de mis recursos. Acabo de agarrar mi navegación y ahora se puede ver que esto siempre me está dando el más pequeño. Así que siempre me está dando el valor por defecto es como lo configuré. Y ahora sin embargo, me incita que tenga más puntos de quiebre. Y luego iré por los puntos de interrupción que funcione con este ancho. Y puedo configurarlo, puedo establecer restricciones izquierda y derecha. Así que convierte esto en un marco de diseño automático. Y luego puedes ver que nuestro siempre tiene el componente adecuado para el tamaño correcto con todos los ajustes correctos. Entonces me parece un enfoque muy pulcro, pero se asegura de que si quieres usar esto, si quieres convertirlos en variantes, para discutir esto con tu equipo, si tiene sentido en el sistema que están usando. ejemplo, si tienes un equipo trabajando solo en el móvil y un equipo solo trabajando en escritorios más grandes o en una tableta, entonces será un poco molesto para ellos que siempre tengan que cambiar. Entonces realmente depende estructura de tu equipo y también de cómo se configura tu sistema de diseño. 42. ¡NUEVO! BREAKPOINTS: punto de interrupción sensible con variables: Aprendamos a configurar páginas receptivas respetando los puntos de interrupción con variables y variantes Entonces esto es lo que buscamos. Tenemos diferentes pantallas que representan los rangos para nuestros puntos de interrupción Y dentro de esos diferentes rangos, vamos a tirar de las variantes correctas, así como reorganizar dinámicamente el diseño Al cambiar el tamaño. Señaló un momento en el que estoy grabando esto, Variables acaba de salir en una beta aún abierta. Por lo que es muy probable que algunos de estos puedan estar cambiando en un futuro cercano. Tomemos esto paso a paso. Entonces vamos a empezar con esto. Solo tenemos un conjunto de componentes con tres variantes para un punto de interrupción de navegación diferente, 12.3 Y tenemos este componente de tarjeta. Entonces ya configuré una colección. Puedes tomar una captura de pantalla de esto y luego configurarlo paso a paso tú mismo si quieres. Primero voy a mostrarte una forma sencilla de hacer esto. Y luego un poco más avanzado donde realmente podemos cambiar el tamaño de nuestros marcos Así que no vamos a usarlos todos para ambos. Primero que nada, comencemos con el ancho de pantalla. Entonces lo que quiero hacer es atar esos marcos a un cierto ancho de pantalla. Y esto quiere decir que al atarlos al ancho de pantalla, puedo atarlos a los diferentes modos en cualquier cosa que coloque en esos fotogramas pueda heredar entonces Así que seleccionemos nuestro primer fotograma. Y luego en el ancho, voy a dar click en el signo de variables. Y voy a echar un vistazo mi colección y simplemente elegir ancho de pantalla. Ahora voy a seleccionar los otros dos, y también los voy a atar al ancho de la pantalla. Pero por ahora solo me va a dar este pequeño ancho de pantalla. Vamos a hacer eso. Y luego te voy a mostrar cómo podemos saltar a los diferentes modos. Entonces ahora los tenemos conectados a la variable. Ahora seleccionemos el primero y vayamos a Capa. Y luego elegiremos la colección y queremos pequeños. Nada cambiará porque ese es el tamaño predeterminado. Pero si hacemos lo mismo para mediano y luego lo mismo para grande, ahora se puede ver que están recogiendo los tamaños del modo. Volvamos a saltar a nuestra colección. Echa un vistazo. Entonces tenemos pequeño 390, mediano, 834 y agrandar éste Si te estás preguntando por los tamaños, todo lo que hice fue que tomé algunos tamaños preestablecidos del menú y solo los agregué ahí. Entonces lo que hice es que elegí iPhone 14 y se puede ver que 390. Y luego solo fui por una tableta y luego escogí al azar una computadora de escritorio. Puedes elegir cualquier otra talla. No es relevante Cuáles están usando. Lo siguiente voy a agarrar una instancia de mi variable. Y volvamos a nuestra colección y veamos qué configuré aquí. Para que veas configuro mi navegación y anote no importa el nombre de la variable. Podría llamarlo de cualquier manera. Entonces no lo estoy llamando igual como decían mis componentes. Pero lo que sí importa son las variables que quiero usar y aquí necesito tener el nombre exacto como mis variables en el conjunto de componentes. Entonces, si hago clic en esto, se puede ver el exceso de navegación. Entonces el siguiente es S y L, y así sucesivamente. Y nuevamente, puedes nombrarlos después del sistema que estás usando en tu equipo. Solo asegúrate de que como sea que los llames, tu referencia esto cuando los tires para los diferentes modos. Bien, así que vamos a seleccionar esta instancia. Y luego a través del menú de instancias, se puede ver para pasar el cursor sobre él, me sale esta pequeña variable Puedo asignar una variable. Y ahora puedo encontrar mi navegación variable. Y voy a poner esto en la instancia. Lo configuras en la instancia actualmente no está dentro de tu conjunto de componentes. Agreguemos esto aquí, y voy a configurar esto para llenar el contenedor. Oh, sí, nos olvidamos configurar realmente nuestros marcos como diseño automático. Simplemente seleccione sus marcos y conviértelos en marcos de diseño automático. Ahora podemos seleccionar nuestra instancia de la navegación nuevamente y llenar contenedor. Y ahora va a sentarse muy bien aquí. También voy a seleccionar mis marcos y sólo voy a darles un color de fondo de diapositivas para que lo veas mejor. Ahora viene la parte fácil. Si mueve su instancia a través de los diferentes marcos, va a heredar el modo que dijo en el marco padre Y por lo tanto se ha ido a recoger la variante correcta que configuraste en tu colección. Así que vamos a poner uno en cada marco. Simplemente voy a copiar eso, seleccionar todos los marcos y pegar Puede que tengas algo de relleno natural por aquí. Simplemente puede seleccionar su marco y luego establecer todo a cero. Agreguemos también la tarjeta. Entonces yo estoy haciendo lo mismo. Estoy agregando una instancia. Hasta el momento aún no tengo variantes. Entonces lo que quiero hacer es crear un grupo. Entonces quiero tener algunas instancias en un solo grupo. Vamos a seleccionar este hit Shift a, y estoy creando un marco de diseño automático, que voy a llamar grupo de tarjetas. Y puedo ajustar el tamaño y aquí también puedo usar mis variables. Y ahora voy a agregar esto aquí dentro. Ahora bien, lo que no me gusta es que el relleno no esté funcionando realmente. Podría centrar esto con alineación, pero quiero un relleno fijo. Entonces voy a agregar eso alrededor de este grupo. Quiero usar el mismo relleno que uso aquí arriba en mi navegación. Y en realidad, eso es diferente para cada una de mis varianzas. Si saltamos a esos, puedes ver que estoy usando variables para establecer este relleno. Y ahora lo que hice en mi colección aquí puedes ver que configuré una variable llamada margin y estoy aliasing Simplemente borremos esto aquí y ya pueden ver que podría establecer esto manualmente en 24, pero si cambiaría cambiarlo aquí, entonces no sería recogido. Entonces lo que puedo hacer es que puedo alias este clic en este pequeño icono, o simplemente hacer clic derecho para alias. Y ahora estoy escogiendo ese espaciado que estoy usando también en mi navegación. Y ahora voy a agregar esto a mi grupo de tarjetas. Seleccionemos esto y luego hago clic en mi relleno izquierdo y derecho. Y ahora no elijo de mi espaciado, estoy escogiendo de mi margen aquí, 24. Y luego para configurarlo para llenar contenedor, presiona Enter para obtener todos los elementos secundarios y también configurarlos para llenar contenedor. Genial, Ahora vamos a moverlos por aquí. En realidad, quiero agregar algo de margen a la parte superior. Entonces aquí también podría usar mi espaciado o mis márgenes. Creo que de hecho podría usar mi montaña desde aquí. Pongamos este a cero para mantenerlo todo ordenado. Y ahora lo que voy a hacer es simplemente voy a arrastrar sobre una copia de este grupo de cartas a mi tamaño mediano Ahora, no lo quiero así. Quiero que estén envolviendo. Así que podría usar envoltura de diseño automático. Ya puedo configurar esto aquí, así que nada cambiaría. Y ahora vamos a configurarlo aquí. Y se puede ver que ahora saltarán a su posición. Esto, sin embargo, solo funcionará si en su componente principal o en su instancia individualmente, configura un ancho mínimo Para que pueda ver se establece un Ancho mínimo de 250, max-ancho de 450 Y por lo tanto se están reacomodando. Así que hagámoslo para nuestro último fotograma así como simplemente ordenemos el último relleno aquí. Y ahora estoy deteniendo esto. Entonces esto es realmente genial para mostrar un diseño estático y echar un vistazo a diferentes puntos de interrupción y puedes usarlo absolutamente así Sin embargo, hay una cosa que podría molestar un poco. Si estás seleccionando esto y estás redimensionando, echa un vistazo aquí a mi variable, echa un vistazo aquí a mi variable, y en cuanto cambie el tamaño, va a tirar la variable y tendría que configurarlo de nuevo Tampoco me dice dónde empiezan y terminan mis puntos de interrupción Pero si echamos un vistazo a nuestra colección, entonces se puede ver que aquí abajo, configuré dos variables más. Uno llamado breakpoint max y walk llamado breakpoint Min. Y estos puntos de interrupción simplemente representan mis puntos de interrupción que voy a usar en CSS más adelante Entonces con el valor mínimo, básicamente estoy diciendo que aquí es donde empieza mi tamaño mediano y luego sube hasta aquí Entonces apliquemos esto. Primero tomemos nuestra pequeña pantalla. Y ahora voy a agregar un min-width. Y luego necesito presionar de nuevo en esta era, aplicar una variable y luego encontrar tu punto de interrupción Min. Y luego también voy a agregar un max-width. Lo mismo ocurre con la variable y encuentra tu punto de interrupción max. Voy a hacer lo mismo con los otros marcos. Voy a seleccionar el fotograma en mi variable min de punto de interrupción, mi variable máxima de punto de interrupción Sólo voy a acelerar esto para ti un poco, y lo mismo para nuestro último fotograma. Y fíjate como ya recogen el modo correcto. Esto se debe a que ya configuré el modo de antemano. Si no tiene eso, entonces se asegura de seleccionar el marco y cambiar el modo a través de las capas. En realidad ni siquiera necesitaría un tamaño máximo para mi pantalla más grande, pero solo voy a agregarlo para tener todo completo. Bien, vamos a echar un vistazo. Entonces, si selecciono esto y ahora redimensiono, se puede ver que va a parar en cierto punto Y también va a parar cuando llegue a un ancho máximo. Ahora bien, si me voy pequeño, se puede ver que esto no sienta muy bien. Siempre asegúrate de ordenar tu alineación. Y ahora podemos probar lo mismo para nuestra pantalla más grande. Nuevamente, podemos ordenar nuestra alineación. En este será nuestro pequeño. Ahora bien, si estamos trabajando con esta configuración, entonces en realidad ya no necesitamos este tamaño fijo aquí, así que podríamos eliminar esto. Ahora digamos que en realidad queremos otro Diseño para uno de los puntos de interrupción Entonces queremos que nuestro auto cambie de disposición. Tengo mi tarjeta original aquí y tengo una nueva llamada tarjeta Horizontal, y voy a llamar a esta tarjeta Vertical. Seleccionemos ambos y podremos combinarlos como variantes. Y ahora voy a llamar a esta tarjeta. Y también puedes nombrar la propiedad a tu gusto. Veamos nuestra colección. Para que veas que tenemos tarjeta y tenemos tarjeta Vertical y tarjeta vertical tirada para pequeños y medianos. Y entonces tarjeta horizontal es la variante para grande. Entonces lo importante de nuevo es que este debe ser el nombre exacto. Así que también puedes copiar esto y pegarlo aquí. A veces se pone un poco de buggy. Volvamos a nuestros diseños. Ahora, lo que notarás es que si seleccionas tus tarjetas, presionas Enter para obtener las instancias infantiles. Y ahora puedes ver que esto aún no está conectado, así que necesitamos conectarlos todos a nuestra tarjeta. Lo mismo hacemos aquí. Selecciona un grupo, pulsa Enter y ahora conéctalos a nuestra tarjeta. Y hagamos lo mismo aquí. Pulsa Enter, y ahora deberíamos ver un cambio aquí. Y vamos por la tarjeta, así que cambia a nuestro diseño Horizontal. Entonces podemos simplemente sobrescribir tus imágenes y textos. Y así, tienes un diseño totalmente receptivo, respetando tus puntos de interrupción 43. BREAKPOINTS: 09 puntos de puntos y una rejilla: Si estás trabajando con la cuadrícula responsiva y Figma, entonces esto también podría cambiar los diferentes puntos de interrupción. Entonces hay dos cosas que debes hacer. Haz una representación visual y documenta realmente una cuadrícula que te dan para usar. Entonces aquí, e.g se puede ver que esta es mi grilla para exceso, luego para S M, y luego para el punto de interrupción L en adelante, estoy teniendo otro cambio. Este es simplemente el margen que está cambiando aquí. Entonces estoy documentando todo esto y estoy entonces eso es lo segundo que debes hacer, guardar esos estilos de cuadrículas. En mi resumen de estilos, puedes ver que tengo acceso a grid mobile que S y M y L en Excel. Y de esta manera siempre puedo aplicar esto correctamente a un nuevo marco. Esto suena como un montón de ida y vuelta cuando se trabaja con diferentes tamaños de pantalla. Pero recuerden, generalmente solo estaban diseñando para móviles y luego para escritorio. Así que por ahora solo estamos usando esas dos cuadrículas. Y luego después. ¿Todas las pruebas? Sí, en todas estas pruebas aquí, si estás trabajando con una grilla, debes asegurarte de que a partir de los diferentes puntos de interrupción en adelante, pruebes con una grilla correcta. Otra forma de hacer esto aún más claro es nombrar tus estilos después los puntos de ruptura y también agregar los números reales de los puntos de interrupción o el rango. Este vi agregar una calcomanía en el sistema de diseño. Están usando esto y creo que es muy, muy claro para todos porque de esta manera, si tengo un marco, puedo verificar el tamaño y el ancho. Y luego desde el menú desplegable de estilos para mis cuadrículas, simplemente puedo elegir la deuda de la cuadrícula que se aplica a ese tamaño de pantalla. Realmente, muy agradable y ordenado. 44. BREAKPOINTS: 10 No olvides tu tipografía: No te olvides de tu tipografía cuando pruebes componentes responsivos. Esta es una situación un poco de gallina y huevo. ¿Qué viene primero? ¿Empiezas configurando tu escala de tipos y luego la aplicas a componentes responsivos?, o primero pruebas que eres componentes receptivos y luego decides en qué punto de interrupción querrás tu tipografía para estar cambiando. Bueno, eso realmente depende de tu proyecto. Si ya estás trabajando con una escala de tipos existente, entonces debes respetar eso. Pero si solo estás configurando, entonces sí, por supuesto, podrías jugar con tus componentes y con toda la configuración de tu página y en más tarde, solo asegúrate documentar y de que están teniendo una configuración ordenada. Y sí, se ve tan bonito y sencillo una vez que está terminado, en realidad es mucho intentarlo y probar y comprometer. Y no quiere decir que no necesite agregar otra talla aquí o allá en algún momento. Vamos a correr rápidamente por esto en caso de que no hayas visto esto antes. Así que aquí está mi configuración móvil primero. Entonces aquí se puede ver eso para los titulares. Entonces tengo 123, luego mis etiquetas de cuerpo, botón Links. Y podrías configurar esto para tantos o tan poco como necesites. He definido el pesado para dimensionar la altura de la línea y el espaciado. Y entonces voy a tener un pequeño ejemplo aquí. Y esto se guarda entonces como un estilo. Si yo, de cualquier punto de ruptura en adelante quisiera cambiar este tamaño, por ejemplo en mi caso para H1, entonces documentaría esto aquí. Esto también podría ser solo un cambio en el escondite de línea o cualquier otra cosa. Existen diferentes enfoques para las escalas de tipo responsivo. Entonces podrías usar el enfoque de ratio. Incluso podrías trabajar con pinza o con Calc. Este es realmente solo un ejemplo muy sencillo que quiero usar por ahora. Se puede ver que todos estos se guardan como estilos. Y luego los nombré de tal manera que puedo dentro de mi H1, por ejemplo puedo ver que tengo un estilo base, luego tengo uno para pantalla m en adelante y uno para pantalla L en adelante. Si por ejemplo, eche un vistazo a los textos del cuerpo que tiene aquí, donde no tenemos ningún cambio en los estilos para los puntos de interrupción que siempre queda 16 y la misma altura de línea. Entonces se puede ver que simplemente le di una base y él, simplemente puedo elegir entre secundaria y primaria, que es la diferencia entre regular y negrita. Entonces, ¿qué significaría eso para mis pruebas? Y vamos a saltar por aquí. Y entonces puedes ver aquí estoy teniendo diferentes tarjetas y para el titular usan un H2. Entonces tengo mi estilo aplicado aquí en H2 y puedo ver que en L hay un cambio. Entonces hasta aquí, todo eso está funcionando bien. Entonces voy a bajar aquí y me estoy encontrando aquí que esto es lo que pasa de L en adelante. Entonces aquí estoy tomando el titular y luego ahora necesito cambiar eso a algo un poco fuera con line-height, podría necesitar corregir lo que tendría que hacer. Ahora bien, si estoy saltando a mi documentación es que necesito tomar esta tarjeta. También necesito tomar esta tarjeta. Entonces necesito ahora configurar dos tarjetas diferentes. De nuevo, esto es realmente una cosa Figma. Todavía estaría documentado así. Yo tendría esta tarjeta. Yo tendría esta tarjeta. Y luego también voy a documentar cómo se sientan en los diferentes puntos de quiebre así. Aquí hay tres y aquí voy a tener que recordar el pequeño truco que te mostré con el uso de variantes. Así que podría simplemente nombrar esta tarjeta por defecto. Y esta tarjeta, voy a nombrar L. Entonces estoy seleccionando ambos y creo un conjunto de componentes. Y nombré a este componente dicho tarjeta rayos. Ahora bien, si estoy trabajando con instancias, saquemos una instancia. Ahora puedo ver como aquí la propiedad a la que le he dado el nombre. Así que volvamos a entrar aquí. Vamos a nombrar a esta propiedad puntos de interrupción. Y ahora si elijo esta instancia, puedo elegir entre la tarjeta por defecto y la L Card, que el único cambio aquí sería la diferencia en el estilo para mi titular. 45. BREAKPOINTS: 11 Más sobre tipografía y rejillas sensibles: Esta clase es realmente una inmersión profunda en el diseño receptivo con Figma. Así que realmente se trata de restricciones de diseño automático y lo que toca las cuadrículas. Y estamos tocando tipografía receptiva. Pero no vamos a entrar en tanta profundidad general y no hay temas. Si quieres saber un poco más sobre eso, te recomiendo que eches un vistazo a otros dos de mis cursos. Los encontrarás todos aquí en Skillshare y simplemente escribe el aprendizaje de la luna. Y luego verás todos mis cursos. Y una de ellas que recomiendo es rejillas y diseño responsive. Así que aquí realmente estamos viendo diferentes configuraciones, diferentes tipos de cuadrículas. Y también estamos viendo HTML y CSS reales. Para que puedas jugar con algo real y entender realmente cómo funcionan esas consultas de medios y realmente jugar con lo real, lo cual es una diferencia total. El otro curso que recomiendo es topografía en diseño UX UI. Y aquí estamos hablando de, por ejemplo, configurar escalas de topografía receptivas. ¿Cuáles son las diferentes técnicas y cómo podemos lidiar con la capacidad de respuesta a diferentes niveles? ¿Y cómo podemos comunicarlo con nuestro equipo de desarrollo? Por lo que estos dos cursos son realmente recomendables para ampliar sus conocimientos, no solo en Figma, sino solo una comprensión general de esos temas en el diseño de UX UI. 46. BREAKPOINTS: 12 plugin: También hay un gran complemento que puedes usar ir a Plugins y luego escribir puntos de interrupción. Ahora, ejecuta el plugin. Obtendrás esta pequeña ventana donde podrás agregar tus puntos de interrupción reales. Solo estoy usando algunos puntos de interrupción aleatorios por ahora. Lo importante es que todos tus marcos ya están configurados de manera receptiva. Idealmente con diseño automático. Ahora, elige los marcos, así los vincula básicamente con un rango correspondiente a los puntos de interrupción. Y si ahora redimensionas la ventana que el plugin creó para ti, podrás ver una bonita representación responsive de tu diseño. Es realmente, realmente genial, pero también ten en cuenta, esto es más para mostrar como una página de inicio o algo así o una característica especial. Porque convierte todo en componentes y tiene algunas partes complicadas, pero sin embargo, realmente, realmente genial plug-in para jugar. 47. Adiós y algunas cosas gratuitas: 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.