Figma para personas ocupadas: domina el diseño automático

1. Te doy la bienvenida a la clase: Figma es bastante impresionante, pero seamos reales Algunas de sus características como diseño automático pueden parecer muy complicadas a veces, ¿verdad? El caso es que, una vez que lo dominas, es un cambio de juego total para tu experiencia Figma. Y esta clase se trata hacer que el diseño automático sea divertido y fácil, sin importar desde dónde empieces. Todo el mundo. Mi nombre es Adi, y soy diseñadora y desarrolladora web con más de diez años de experiencia. Y he hecho muchos cursos y tutoriales sobre los temas de Figma, UI, UX Design, desarrollo web y más Y por lo general, mis cursos son muy detallados. Pero esta es diferente. Este está diseñado específicamente para personas ocupadas que no tienen mucho tiempo de sobra, pero que aún quieren aprender algo valioso. Este curso es conciso, pero lleno de información esencial. Ahora, en mi opinión, diseño automático es la característica más poderosa de Figma Ya sea que estés creando sitios web, aplicaciones o cualquier otro contenido digital. Esto puede acelerar seriamente su flujo de trabajo y hacer que sus diseños sean más flexibles y receptivos. Así que vamos a desglosarlo. Tendremos seis lecciones principales, cada una centrada en un aspecto fundamental del diseño automático. Empezaremos aprendiendo a agregar maquetación automática a tu diseño y a organizar y organizar objetos de manera eficiente. Luego pasaremos a los marcos anidados, que son esenciales para construir diseños complejos En la tercera lección principal, exploraremos algo llamado flujo de diseño, que dicta la dirección y posición de los elementos Vamos a echar un vistazo a cómo funciona el espaciado en el diseño automático y cómo usar los huecos y los remates. Después hablaremos sobre la alineación y las diversas formas de asegurar que los elementos estén perfectamente colocados. Finalmente, profundizaremos en las opciones de cambio de tamaño disponibles que nos permiten crear diseños dinámicos. Ahora, diseñé esta clase para que fuera muy práctica. Entonces cada una de estas seis lecciones principales tiene una parte teórica, que llamo fundamentos, y luego una parte práctica, que llamo aplicación práctica. Y para cada aplicación práctica, voy a recrear un layout a partir de un sitio web real Empiezo con una captura de pantalla de ese layout y algunas especificaciones de diseño que preparé de antemano. Entonces te muestro paso a paso cómo recrearlo usando el diseño automático Además de eso, cada lección principal tiene una tarea. Para ti. Y hay seis asignaciones que puedes hacer. Estos están destinados a ayudarte a practicar lo que has aprendido en cada lección. Al hacerlas, entenderás mucho mejor la teoría. Además, obtendrás una experiencia práctica muy necesaria. Y las tareas son como las aplicaciones prácticas con una gran diferencia. También proporcioné instrucciones escritas que te ayudarán a recrear el diseño que seleccioné Entonces, si eso suena interesante, te veré en clase. 2. Proyecto de assignments y clase: Hola, bienvenidos a la clase, déjame contarte sobre las tareas y el proyecto de la clase. Hay seis asignaciones que puedes hacer. Los puedes encontrar en el archivo Figma vinculado dentro detalles de la clase bajo la pestaña Proyectos y Recursos Ahora, puedes hacer todas las tareas después de terminar de ver la clase o una a la vez. De veras depende de ti. Mi sugerencia, hacer cada tarea después de que sea una lección relacionada. Por ejemplo, vea la lección sobre el espaciado y luego haga la tarea sobre el espaciado. Ahora bien, el proyecto de clase va así. Una vez que hayas completado todas las lecciones y las tareas, tu tarea es seleccionar un diseño que te guste y recrearlo en Figma usando, por supuesto, el diseño automático Así que muy similar a las asignaciones, pero esta vez se llega a escoger el diseño, y no hay especificaciones de diseño preparadas por mí. Tendrás que averiguarlos tú mismo. Para ayudarte con eso. He creado un archivo Figma que puedes encontrar vinculado Está subido a la comunidad aquí en Figma, y se llama proyecto de clase Skillshare Todo lo que tienes que hacer es abrir esto mientras estás conectado a tu cuenta de Figma, y luego hacer clic en este botón aquí que dice Abrir en Figma Y eso va a crear un duplicado para ti en tu cuenta de Figma Ahora, dentro de este archivo, encontrarás la siguiente estructura. Básicamente tenemos una sección aquí con dos marcos, diseño de referencia y recreación. Lo que debes hacer es tomar una captura de pantalla del diseño que quieres recrear, pegarlo en este primer diseño de referencia de marco Entonces tendrás que saber, algo a lo que hacer referencia. Adicionalmente, puedes entrar aquí en la parte inferior y poner un enlace al sitio web del que tomes la captura de pantalla. Esto es totalmente opcional. Por supuesto. Y luego en el segundo fotograma, donde dice una recreación, aquí es donde básicamente recrearás ese diseño Después de que hayas terminado con eso, sigue adelante y selecciona esta sección, que se llama Proyecto de clase Skillshare, y ve a la parte inferior derecha Ya preparé una regla de exportación para ti. Lo exportas como un PNG X, y luego lo publicas como el proyecto de clase en Skillshare Ahora, compartir tu progreso tiene sus ventajas. Primero, puedes ver en qué están trabajando tus compañeros de clase, los diseños que escogieron y qué tan bien los recrearon Segundo, no solo estás aprendiendo teoría. Estás participando activamente con un proyecto. Me encantaría que compartieras tu proyecto de clase con nosotros. Y recuerda, si en algún momento te sientes confundido acerca de un tema determinado o tienes algún tipo de pregunta, por favor publícalas en el área de discusión, y haré todo lo posible para ayudarte. Dicho esto, comencemos con la clase. 3. Actualización de Figma 2025: qué cambió: Oigan, todos, esta es Adi del futuro. Este video extra está aquí para ayudarte a navegar algunos de los cambios por los que ha pasado Figma desde que grabé esta clase por primera vez Hace unos años, Figma se veía un poco diferente, y desde entonces, ha recibido varias actualizaciones tanto de su funcionalidad más notable de su interfaz Entonces, si tu pantalla no se parece bastante a la mía en estas lecciones, no te preocupes. Veamos rápidamente lo que ha cambiado para que puedas seguir adelante sin ninguna confusión. Y solo para ser claros, esta clase sigue siendo completamente relevante hoy en día. Los conceptos centrales no han cambiado, solo la forma en que Figma presenta algunas de sus herramientas Empezaremos con el cambio más notable, y ese es el nuevo UI o el rediseño de la interfaz Esto se llama UI three en el momento de esta grabación. Y una de las cosas que podrías notar de inmediato es que la barra de herramientas ahora se ha movido desde la parte superior donde solía estar a la parte inferior de aquí. Entonces, esencialmente, tenemos las mismas herramientas que teníamos antes, excepto quizá por la sección. Creo que esto se agregó en los últimos años. Todavía tenemos las herramientas de línea principal, polígono, rectángulo a las que estamos acostumbrados Tenemos la herramienta Pluma, herramienta de texto. Tenemos un par de herramientas nuevas aquí, como la anotación y medición Estos se agregaron recientemente. Tenemos algunas herramientas de IA que están disponibles a través de este menú de acción aquí mismo. Y recientemente Figma también presentó Figma draw y también el modo Dev, que está dirigido a desarrolladores, pero esos no son realmente importantes para este video Otro cambio es el hecho de que ahora podemos colapsar estas dos barras laterales haciendo clic aquí mismo en este botón de minimizar la interfaz Esto esencialmente te dará más espacio para jugar. Y puedes volver a hacer clic en ese botón para mostrar la barra lateral izquierda y derecha. Ahora también tenemos la opción contraer capas haciendo clic en este botón aquí. Entonces, si tienes capas abiertas, esa es una forma muy rápida de colapsar todo Y la mayoría de los cambios en realidad ocurrieron en la barra lateral derecha en el inspector. Así que déjame repasar rápidamente algunas de esas contigo. Y verás que la barra lateral derecha ahora se ve un poco diferente que en mis videos. Los controles de alineación están posicionados un poco diferente ahora tenemos algunas opciones aquí que están relacionadas con las variables, que es otra característica que se introdujo en los últimos años. Las operaciones booleanas se movieron en este menú de aquí mismo, y creo que probablemente el mayor cambio se hizo en Auto Layout Entonces el panel Auto Layout ahora se ve así. Era mucho más sencillo en años anteriores, pero ahora su diseño ha cambiado. Tiene algunas características adicionales, como, por ejemplo, este modo de cuadrícula que se introdujo recientemente. Ahora tenemos la capacidad de establecer el ancho y la altura de un elemento específico a los contenidos fijos o abrazados, lo que básicamente cambiará el tamaño ese elemento para que se ajuste a sus elementos hijos contenedor de llenado básicamente lo expandirá para llenar todo el espacio disponible. También tenemos la opción de agregar ancho o alturas mínimo y máximo, y también las variables ahora se incluyen aquí. En su mayoría, algunos de estos elementos se mueven como este selector de alineación aquí, el espacio o la brecha entre elementos ahora se posiciona aquí. Y por cada valor numérico que veas aquí, también tienes la opción de aplicar variables ahora. Hablando de variables, no creo que las haya usado en ninguna de mis clases anteriores porque estas son relativamente nuevas, pero a esas se puede acceder si haces clic afuera o haces clic en cualquier parte de tu lienzo y solo vas a la sección de variables aquí. Y las variables son básicamente una forma de almacenar valores reutilizables como números, colores, incluso texto. Y de todos estos, creo que el cambio principal al que debes prestar más atención es el cambio al Auto Layout, porque creo que es lo más desactualizado. Ahora, es mucho más potente que, digamos, el Auto Layout de 2020 o 2022, pero funciona exactamente de la misma manera, así que no tienes que preocuparte por eso. Así que no te preocupes si tu pantalla se ve diferente a la mía. Las herramientas siguen ahí, y podrás completar el proyecto de clase independientemente. Ahora, volvamos a la clase. 4. Incorporación de la disposición automática a tus diseños: El diseño automático es una propiedad que solo se puede aplicar a los marcos. Entonces no funciona en grupos, no funciona en secciones, solo marcos. Y puedes usarlo para cosas muy simples, como un botón, que cambiará su tamaño de acuerdo con el texto en su interior, o para crear diseños complejos, como este, que está hecho de múltiples marcos de diseño automático, cada uno con diferentes propiedades. Y exploraremos los diversos casos de uso para el diseño automático en las próximas lecciones y realmente aprenderemos sobre su complejidad. Pero por ahora, quiero mostrarte cómo agregarlo a tus diseños. Entonces, en Figma, tenemos un marco simple, y para agregar diseño automático Todo lo que tienes que hacer es ir al inspector hacer clic en el texto de diseño automático aquí o en el botón. Y eso es todo. Para eliminarlo, solo tienes que hacer clic en el botón menos así. Alternativamente, puede hacer clic derecho en un marco y luego ir hasta aquí donde dice agregar diseño automático o usar el atajo de teclado Mayús A así. Y para eliminarlo, harías lo mismo, hacer clic derecho y luego eliminar el diseño automático, o usar el turno antiguo A en ventanas o la opción shift A en una MAC. Ahora, una vez que agregues el diseño automático a un marco, tendrás acceso a un par de opciones diferentes. Aquí es donde se controla la dirección del diseño. Aquí es donde se controla la alineación. Aquí es donde estableces la brecha entre los artículos. Y estas dos cajas son para relleno horizontal y vertical, y no te preocupes, estaremos discutiendo todas estas mucho más detalle en las próximas lecciones. Ahora, una de las cosas más interesantes del diseño automático es la forma en que arreglas o reordenas los elementos dentro del marco Entonces, por ejemplo, si quería mover esta primera casilla hacia la derecha, todo lo que tengo que hacer es usar la tecla de flecha derecha o izquierda, si quiero moverla a la izquierda. Si tuviera un diseño automático vertical. Yo usaría las teclas de flecha arriba y abajo para moverlo o para cambiar su posición. Alternativamente, puedo hacer clic y arrastrar con el mouse y moverlo a donde quiera. Y Figma moverá ese elemento, y va a mantener la misma alineación y el mismo espaciado entre los elementos que puse en el marco padre, lo cual es fantástico Ahora, también puede agregar diseño automático a elementos individuales o grupos de elementos. Y sé que dije que diseño automático solo se puede aplicar a los marcos. Sin embargo, Figma envuelve automáticamente esos elementos en un marco si ya no están contenidos en uno Entonces esto es lo que quiero decir con eso. Tenemos una segunda demo aquí. Si selecciono estos dos elementos, son solo, ya sabes, capas independientes aquí en el panel de capas, y puedo hacer Shift A Eso va a crear un marco. Mira, ahora están envueltos dentro de un marco aquí, y este marco también tiene un diseño automático aplicado a él. ¿Qué tan genial es eso? Esto de aquí mismo es un grupo, como se puede ver en el panel de capas, se llama grupo 87. Ahora bien, si hago el turno A, y déjame en realidad solo mostrarte el contenido aquí, dos cajas. Si hago el turno A con este grupo seleccionado, ese grupo ahora es un marco con, por supuesto, diseño automático. Ahora, tal vez se esté preguntando, ¿cómo agrego un elemento a un marco existente que tiene diseño automático? Bueno, es tan simple como hacer clic y arrastrar. Entonces si quiero agregar esto a este marco, aquí, todo lo que tengo que hacer haga clic en arrastrar, y está adentro. Quiero sacarlo. Haga clic y arrastre fuera del marco. Y Figma cambiará automáticamente el tamaño de ese marco para que coincida con la altura interna de sus hijos, más sobre eso más adelante Alternativamente, puedo, ya sabes, tomar este comando X o Control X, seleccionar el marco y simplemente pegarlo dentro de Comando o Control V. Ahora, echemos un vistazo a una aplicación práctica. Y para esta lección, estamos recreando un diseño de loom.com, y es esta lista de aquí mismo con Básicamente tenemos un ícono de cheque y un trozo de texto. Entonces, en Figma, recreé los elementos del texto. Yo traje el icono. Entonces comencemos por Mover esto aquí arriba, mandar o controlar D para duplicarlo. Tres veces más. Y luego a la izquierda, aparte de la captura de pantalla, también agregué algunas especificaciones de diseño, como el espacio entre cada elemento de la lista, y también el espacio entre el icono y el texto. Entonces hagámoslo. Y solo quiero prefacio esto diciendo que este tipo de diseño será increíblemente fácil de crear con diseño automático si estuviéramos usando todas las campanas y silbatos, como la funcionalidad GAP, la funcionalidad de alineación, aún no estamos ahí Así que vamos a usar solo la cantidad mínima de magia de diseño automático, y haremos el resto manualmente, como la alineación y el espaciado. ¿Bien? Entonces comencemos con la alineación. Primero, seleccionaremos cada icono y texto, y luego los alinearemos, discúlpeme. Como, así, y así solo alinearlos al centro. Y luego voy a seleccionar el texto, mantener pulsado ult u opción y pasar el cursor sobre el icono para obtener la distancia entre ellos. Y luego puedo usar las teclas de flecha derecha o izquierda para mover el texto a la izquierda o a la derecha, un píxel a la vez A los 29 ahora. Necesito estar a los 16, así que voy a hacer uno, dos, tres, y luego desplazarme a la izquierda para moverlo diez pixeles a la vez, y ahora estoy en 16. Hagamos lo mismo aquí. Estoy a los 46, así que voy a hacer turno a la izquierda, a la izquierda, a la izquierda, y ahora estoy a los 16, 30, así que haremos uno, dos, tres, cuatro, Shift, izquierda, y ahora estoy a los 16. Lo mismo aquí. Desplaza a la izquierda, y ahora estoy a los 16. Genial. Ahora, voy a seleccionar cada icono y desplazamiento de texto A. Mayús A, turno A turno A. Ahora tengo cuatro marcos de diseño automático. Seleccione todos ellos, alinéelos a la izquierda, y ahora es simplemente cuestión de establecer ese espacio de 24 píxeles entre ellos. Entonces haremos lo mismo que antes, mantén presionada la opción o ult, cursor sobre el elemento de arriba, y usaremos las teclas de flecha para g en su lugar, así Y así es como agregas maquetación automática a tus diseños. A continuación, tienes una tarea. 5. Assignment: adición de diseños automáticos a tus diseños: Ahora que estás más familiarizado con diseño automático y aprendiste los conceptos básicos, es hora de practicar algo de. Y la tarea para esta lección es bastante sencilla. Estarás recreando un diseño de stripe.com. Entonces, si bajamos hasta la parte inferior en el pie de página del sitio web, recrearás esta lista de empresas con tres enlaces Ahora, hay tres enlaces en el sitio web en vivo. Cuando recibí la captura de pantalla hace poco, había cuatro enlaces, pero eso realmente no importa. Entonces este es el layout que vas a estar recreando. Tienes un título, y luego cuatro enlaces. Y hay un hueco de cuatro píxeles entre todos ellos. Seguí adelante y obtuve los elementos del texto todos preparados para ti. Y además, incluí algunas instrucciones en el lado izquierdo, que puedes usar o elegir para ignorar la elección realmente depende de ti. Simplemente están ahí como una mano amiga. Y solo como un recordatorio rápido, encontrarás el enlace al archivo de asignación en los detalles de la clase. Y eso es todo. Sigue adelante y completa esta tarea, y te veré en la siguiente lección, que trata sobre anidar marcos de diseño automático 6. Anidación de marcos de diseño automático: En Figma, anidar marcos significa colocar uno o más marcos dentro Es muy simple y totalmente compatible con el diseño automático. Entonces déjame mostrarte cómo harías eso. Aquí tenemos dos marcos. Uno es un marco horizontal, uno es un marco vertical y ambos tienen diseño automático. Ahora bien, si quisiera crear un marco mucho más grande que contenga ambos, puedo hacerlo de varias maneras. En primer lugar, y lo más fácil es solo seleccionar estos dos fotogramas y presionar Mayús A. Y eso va a agregarlos ambos a un fotograma, o debería decir, a un nuevo fotograma, que tiene maquetación automática, como pueden ver aquí. Y esto me permite crear diseños mucho más complejos mediante el uso de marcos tanto horizontales como verticales. Otra opción sería simplemente tomar uno de los fotogramas y arrastrarlo dentro de otro. Y puedes hacerlo desde el panel de capas. Entonces si quiero poner este, el marco vertical dentro del marco horizontal, puedo ir al panel de capas aquí, y simplemente puedo hacer clic y arrastrar dentro. Entonces ahora solo tengo un marco que contiene el marco vertical y mis dos elementos. En este caso, el marco con objetos es un marco anidado. Ahora, echemos un vistazo a una aplicación práctica para anidar Y para esta lección, estamos recreando un diseño de get pixel snap.com Entonces, si nos desplazamos hacia abajo, podemos encontrar esta zona aquí mismo donde dice medir distancia, y esto es lo que vamos a estar recreando Ahora, en Figma, traje una captura de pantalla. Yo hice algunas medidas para obtener la brecha entre el título y la descripción entre la descripción y estas características, llamémoslas. Y también la distancia entre cada entidad y entre el icono y el texto de la entidad. Así que ahora, crearemos el primer fotograma que contenga el título y la descripción. Así que vamos a alinear estos a la izquierda, y vamos a establecer una brecha de 14 píxeles entre ellos. Así, selecciona tanto turno A, primer fotograma hecho. Vamos a crear las características. Entonces voy a mover el texto, mover el icono. Selecciona un icono de texto , alinéalos al centro y establecemos una distancia de 24 píxeles entre los dos. Selecciona ambos turno A. Haz lo mismo para el otro. 24 píxeles, seleccione alinear desplazamiento A. Ahora tenemos un fotograma, dos fotogramas, tres fotogramas. Vamos a crear esta parte aquí un marco con las dos características. Entonces vamos a seleccionar ambos o lo sentimos, solo vamos a alinearlos primero a la izquierda. Asegúrate de que tenemos la distancia adecuada entre ellos, y ahora seleccionamos ambos turno A para crear el segundo cuadro grande. Ahora, para unirlo todo, solo seleccionamos ambos fotogramas, los alineamos a la izquierda, y necesitamos establecer esa brecha de 42 píxeles entre ellos. Así que sólo vamos a seleccionar esto y ello hasta llegar a 42 pixeles. Finalmente, seleccionamos ambos, y hacemos Shift A, o haga clic derecho en el diseño automático del anuncio. Hace exactamente lo mismo. Entonces ahora, veamos qué tenemos aquí. Tenemos marco 96. Este es nuestro marco principal. Después dentro, tenemos el marco superior que tiene el título y la descripción. Y luego el marco inferior. Eso tiene las dos características. Y cada característica es un marco en sí mismo, que tiene el icono y el texto. Entonces, ¿cuántos marcos anidados tenemos aquí? Bueno, tenemos el marco 94, entonces una de las características, esa es una. La otra característica, son dos. marco 95 también es un marco anidado, justo porque se encuentra dentro del más grande Así que son tres, y eso son cuatro. Entonces tenemos cuatro marcos anidados dentro de este marco principal. Y así es como anidas los marcos de diseño automático. A continuación, tienes una tarea. 7. Assignment: anidación de marcos de diseño automático: anidación de marcos de diseño automático le permite construir estructuras de diseño más complejas, y eso es exactamente lo que quiero que practique en esta lección Entonces, la tarea para ti es recrear un layout de timely app.com Si vas al mega menú del producto, encontrarás esta primera sección que estoy resaltando aquí mismo, así que eso es lo que estarás recreando Seguí adelante y agregué todos los elementos para ti en Figma, incluyendo el icono y los elementos de texto, y también tienes algunas especificaciones de diseño, así como instrucciones aquí en el lado izquierdo, que puedes elegir usar o ignorar la elección realmente depende de ti Ahora, una vez que termines de recrear este diseño, te veré en la siguiente lección, que trata sobre el flujo de diseño 8. Exploración del flujo de diseño en marcos de diseño automático: flujo de diseño se refiere a la forma en que los elementos se organizan dentro de un marco de diseño automático, y consta de tres cosas. Dirección, posición absoluta y orden de apilamiento de la lona. Empecemos por la dirección. Aquí, tengo un marco con tres elementos, los cuales se colocan uno debajo del otro, comenzando de arriba a abajo. Eso es porque la dirección en mi marco de diseño automático está establecida en vertical. Siempre puedo cambiar esto a horizontal o a rap haciendo clic en los otros botones. Entonces una dirección horizontal se vería algo así donde los elementos se posicionan de izquierda a derecha en una sola fila. El rap es un poco especial porque Figma colocará automáticamente artículos que no caben en filas adicionales Entonces, si estoy redimensionando este marco, y los elementos de la primera fila ya no caben, se mostrarán en la segunda fila o en la tercera fila. Y Figma lo hará automáticamente por mí manteniendo la misma alineación y brecha entre los artículos Entonces, como un resumen rápido, una vertical mostrará los elementos de manera vertical de arriba a abajo, en una columna, independientemente de la altura del elemento padre Entonces, si estoy redimensionando esto, los elementos permanecen en una columna. Hizontal, muestra el elemento de izquierda a derecha en una fila independientemente del tamaño del marco padre, y un ajuste mostrará o moverá elementos en filas adicionales si no encajan cuando estoy redimensionando el marco principal Ahora, pasemos a la posición absoluta. Entonces tengo un marco con dos objetos, y agregué este borde blanco para que puedan ver los límites de ese marco padre. Si tuviera que arrastrar este elemento dentro, el marco cambiará de tamaño para acomodar su contenido Si selecciono este elemento y lo muevo a la izquierda, derecha, arriba y abajo, Figma lo colocará automáticamente en posiciones establecidas dependiendo la alineación y el espacio entre los elementos Entonces no puedo mover este elemento libremente a donde quiera. No obstante, si voy al inspector y hago clic en este botón que dice posición absoluta, van a pasar dos cosas. En primer lugar, el marco apenas se redimensionó para que coincidiera con la w y la altura de los dos elementos originales Básicamente, el marco ni siquiera considera este elemento rosa como parte de él. Y segundo, ahora puedo moverme. Puedo mover libremente este elemento a donde quiera dentro de ese marco. Y si quiero moverlo fuera de los límites del marco, puedo mantener presionada la barra espaciadora. Eso es un protip para ti ahí mismo. Y no va a tomar la capa fuera del marco. Simplemente muévelo solo cambia su posición, básicamente. Esa es la posición absoluta. Por último, vamos a discutir el orden de apilamiento de la lona. Eso es súper fácil de entender. Tengo un marco de diseño automático aquí con tres cajas, y estoy usando una brecha negativa entre elementos más sobre eso más tarde para superponerlos. Entonces, como puedes ver aquí, se colocan uno encima del otro. Y si miramos la posición en la lista de capas, tenemos la casilla uno, dos, tres. Así que la caja tres se sienta encima de todo lo demás. La caja dos se encuentra entre la caja uno y la caja tres, ¿verdad? Visualmente. Ahora bien, si selecciono este marco, y voy al inspector en el panel de diseño automático y hago clic en la configuración avanzada, puedo cambiar el apilamiento de Canvas desde el último en la parte superior, que es el predeterminado a primero en la parte superior. Esto quiere decir que ahora la capa que está primero en el panel de capas, que en mi caso es la caja uno, va a sentarse encima. Y entonces va a ser seguido por los demás. Por lo que ahora la casilla tres se sienta detrás de las otras dos cajas. Ahora, echemos un vistazo a una aplicación práctica. Y para esta lección, estamos recreando un layout de airbnb.com Más específicamente, uno de estos listados, que incluye una imagen, alguna información de texto, algunos iconos, y en algunos casos, una insignia favorita de los invitados. Entonces, de vuelta en Figma, agarré una captura de pantalla de uno de esos listados, y también agregué algunas especificaciones de diseño También traje en la imagen cualquier icono que pudiéramos necesitar, y creé los elementos de texto. Entonces comencemos a recrear este layout. Con el distintivo favorito de los invitados. Este es un marco sencillo al que le agregamos un fondo, un borde con y altura, y también lo hacemos alrededor. Entonces eso es bastante fácil de hacer. Seleccionemos esto. Shift A para crear un marco con él. Vamos a establecer su altura en 26. Vamos a agregar un color de relleno. Y vamos a agregar un borde blanco, un pixel. Y también, hagámoslo redondo, así. A continuación, comencemos con el texto aquí en la parte inferior. Así que tenemos fecha de distancia de mosaico alineada a la izquierda sin hueco entre ellas. Entonces hagámoslo. Título distancia fecha. Vamos a alinearlos a la izquierda, y no dejemos ningún hueco entre ellos. Entonces con estos tres seleccionados, turno A, y ese es nuestro primer fotograma. Y debido a que los artículos se colocaron inicialmente uno encima del otro, Figma es muy inteligente al respecto, y fijó la dirección automáticamente para nosotros a vertical A continuación, tenemos el precio, que se asienta a seis píxeles de los elementos anteriores. Entonces hagámoslo. Alinearemos todo, y lo pondremos en seis píxeles así. Desplaza A para crear otro marco vertical. A continuación, vamos a trabajar en esta calificación aquí. Entonces tenemos estrella, brecha de cuatro píxeles, y el puntaje de calificación. Seleccionemos ambos elementos. Vamos a alinearlos al medio. Coloquemos el icono aquí en cuatro píxeles, así. Y luego seleccionaremos ambos y agregaremos un marco de diseño automático. Así que ahora vamos a mover el texto hacia arriba, y vamos a mover el cuadro horizontal de calificación hacia arriba también, alinear estos con la imagen. Luego seleccionaremos ambos, desplazaremos A para crear un marco horizontal, y luego seleccionaremos este fotograma y la imagen, desplazaremos A para crear un marco vertical. Ahora bien, los dos últimos elementos que necesitamos colocar son la insignia favorita de los invitados y el ícono duro. Se sientan encima de la imagen, 12 píxeles de los bordes. ¿Cómo hacemos esto? Bueno, si agarramos estos elementos y los movemos sobre nuestro bastidor principal, simplemente se colocarán acuerdo a la dirección del marco, en mi caso es vertical. No obstante, puedo seleccionarlos, y puedo ir al inspector y dar click en posición absoluta. Y eso me permitirá mover este elemento libremente dentro del marco de diseño automático. Y con un poco de codazo hacia arriba y hacia abajo. Somos capaces de posicionarlos correctamente, dejando ese hueco de 12 píxeles desde los bordes de la imagen. Entonces ese es nuestro marco terminado. Hemos utilizado varias técnicas aquí, anidando para una, y también creamos marcos verticales de diseño automático, creamos marcos de diseño automático horizontales y también usamos el posicionamiento absoluto en estos dos elementos Y eso es todo para el flujo de diseño. A continuación, tienes una tarea. 9. Assignment: exploración del flujo de diseño en marcos de diseño automático: Muy bien, es hora de que practiques usando el flujo de diseño en Figma. Y tu tarea es recrear un layout a partir de Notion. Este es el sitio web de Notion, y si te desplazas hacia abajo, encontrarás esta sección. Entonces estarás recreando esta caja, junto con la imagen encima de ella. Y de vuelta en Figma, yo, por supuesto, proporcioné una captura de pantalla, algunas especificaciones de diseño, y también las imágenes en bruto, texto, y los iconos, junto con algunas instrucciones que como de costumbre, puedes usar para obtener una mano amiga o despreciar y hacer todo por Así que adelante y haz la tarea, y una vez que hayas terminado, por favor únete a mí en la siguiente lección, que es sobre espaciado. 10. Dominar el espaciado automático del diseño: En el diseño oral, tenemos dos métodos clave para controlar el espaciado. Y esos son gap y padding. Comencemos con la brecha, más específicamente, la brecha entre los elementos, y en un marco de diseño oral, la brecha entre los elementos siempre es igual. Entonces en este ejemplo, tengo 56 píxeles entre el primer y el segundo elemento, y nuevamente, 56 píxeles entre el segundo y el tercero. Y puedo cambiar fácilmente la brecha haciendo clic en los manejadores y arrastrando aquí, o puedo ir al inspector y puedo ingresar un valor manualmente aquí, digamos, 50 También puedo hacer operaciones matemáticas. Entonces puedo hacer 50 veces dos o más dos o menos dos o dividido por dos. Funciona igual. También puedo hacer clic y arrastrar en este mango aquí para cambiar la brecha manualmente. Ahora, en marcos horizontales y verticales, tengo un solo valor para la brecha. Sin embargo, si mi marco está configurado para envolver, tengo valores tanto para horizontal como vertical. Y por defecto, la brecha vertical es la misma que la horizontal. Pero puedo anular eso. Puedo hacer que este sea un valor totalmente diferente, y también puedo cambiarlos desde aquí o desde aquí. Y si quiero volver para que el hueco vertical sea el mismo que el horizontal, simplemente puedo seleccionar este delete, presionar enter, y simplemente volverán a estar vinculados entre sí Ahora, la brecha también puede ser un valor negativo. Entonces cambiemos esto de nuevo a un diseño horizontal, y puedo simplemente arrastrar esto hasta llegar a menos lo que sea, -100 En cuyo caso, mis artículos, mis elementos hijos se superponen. Están apilados uno encima del otro. Y puedo cambiar esa brecha desde el Lienzo o desde el inspector tal como le mostré anteriormente. Ahora, la brecha también se puede establecer en auto. Y esto es lo que hace eso. Entonces, un valor numérico básicamente estableceremos la misma cantidad de espaciado entre los elementos secundarios independientemente del tamaño del marco padre. Pero si configuro esto en auto ya sea yendo aquí en el Inspector, haciendo clic en el menú desplegable y seleccionando Auto, o haciendo clic en los manejadores y escribiendo auto. Hace exactamente lo mismo. Utiliza la mayor distancia posible entre los elementos independientemente del tamaño del marco padre. Entonces puedo redimensionarlo así, y Figma agregará automáticamente la misma distancia entre todos los elementos Se calculará eso sobre la marcha. De verdad, muy genial. Y también hay un atajo de teclado muy práctico para mover entre la brecha automática y la brecha numérica Entonces, si haces clic en el cuadro de alineación aquí y presionas x, eso va a Tuggle entre auto y un valor numérico Ahora, pasemos al relleno. Y el relleno es básicamente el espacio entre los límites de un marco de diseño automático y sus elementos hijos. Y para ilustrar eso, agregué un borde blanco a este marco de diseño automático. Para que puedas ver dónde están sus límites. Y puedes agregar relleno yendo al inspector, puedes usar estas dos cajas. Para agregar relleno horizontal, lo que significa relleno izquierdo y derecho o vertical, lo que significa arriba e abajo. Alternativamente, puedes hacer clic en el cuadro aquí para cambiar el relleno así, o puedes usar los manejadores aquí en el Lienzo, así, o puedes hacer clic e ingresar un valor manualmente. También puedes mantener presionada la opción o la tecla antigua, mientras haces clic en estas asas para cambiar ambos lados opuestos al mismo tiempo. Entonces eso significa arriba e abajo o izquierda y derecha. Si también mantienes presionado el turno, puedes cambiar los cuatro lados al mismo tiempo. En el inspector, también se pueden introducir dos valores aquí. Entonces, por ejemplo, 5030, usaremos 50 padding left, 30, right Lo mismo va para el fondo. Diez, 20, usamos diez en la parte superior, 20 en la parte inferior. Y también puedes hacer clic en Relleno individual, y eso te va a permitir cambiar cada lado individual a tu gusto. Ya que estamos aquí, también puedes mantener presionado el control o comando y hacer clic en cualquiera de estas casillas para cambiar los cuatro lados al mismo tiempo ingresando el mismo valor. Ahora, echemos un vistazo a una aplicación práctica para GAAP y relleno. Y para esta lección, estaremos recreando otra maquetación a partir de un get pixel snap.com Y vamos a recrear esta primera parte de la sección de héroes, que tiene el título, los dos botones, y el texto de devolución de dinero de 30 días Así que de vuelta en Figma, traje una captura de pantalla, y también hice algunas medidas Creé algunas especificaciones de diseño. Y recreé los elementos de texto, y traje el icono que vamos a colocar aquí mismo en el segundo botón Hablando de botones, comencemos ahí porque un botón es uno de los principales casos de uso para el diseño automático. Eso es súper simple de crear, y va a permitir que ese botón se redimensione a medida que cambie el texto dentro Así que vamos a recrear este primer botón que dice a estas alturas Y necesitamos agregarle un fondo , un gradiente lineal. radio del borde cambia el color del texto a blanco, y también vamos a cambiar su relleno. Así que comencemos seleccionando el botón por ahora. Cambie A para agregarlo a un marco de diseño automático. Y aquí vamos a agregar el relleno necesario. O en realidad, ¿sabes qué? No, vamos a agregar el color de relleno. Entonces vamos a agregar un gradiente lineal aquí. Así que déjame acercarme aquí para que veas lo que estamos haciendo un poco mejor. Entonces vamos cambiando el primer color va a ser F E 84 B. Segundo, va a ser FA 4567 Ya que estamos aquí, cambia el color del texto a blanco. Y ahora cambiemos el relleno. Entonces, si miramos las especificaciones muy rápido, tenemos 30 píxeles. Acolchado lateral u horizontal, y acolchado vertical 14. Cambiemos también el radio del borde a ocho píxeles, y nuestro primer botón ya está completo. ¿Qué tan fácil fue eso? Y claro, si voy a cambiar el texto aquí, a estas alturas, o por digamos hoy, puede ver el botón solo un redimensionamiento para que se ajuste al elemento de texto. Pasemos al segundo botón. Esto es muy similar, excepto que tenemos este icono. Entonces sigamos adelante y antes que nada, alineemos estos. Cambia A para agregarlos a un marco de diseño automático, y tenemos un borde para agregar aquí, así que hagamos un borde de dos píxeles. Y agreguemos también el relleno necesario, así que eso es 30 horizontal, 14 vertical. Cambiaremos el radio de la esquina a ocho, y cambiemos la brecha entre los elementos a diez píxeles, así como así. Y ese es nuestro segundo botón completo. Ahora, pasemos al resto de la maquetación. Necesitamos un hueco de 30 píxeles entre estos dos botones. Así que vamos a crear un marco con ambos. Seleccione ambos, cambie A y luego cambie el espacio a 30 fácilmente. Ahora, vamos a establecer un espacio de 40 píxeles entre el texto y los dos botones. Así que los alinearemos aproximadamente a la mitad. Seleccione ambos turno A, y estableceremos la brecha en 30 píxeles. Y por último, necesitamos uy, eso fue 40 pixeles ahí Lo siento. Y por último, necesitamos establecer una brecha de 55 píxeles entre el título y estos otros elementos. Así que selecciona todo, Turno A y 55. Ahí vamos. Esos estaban perfectamente posicionados. Entonces, al usar las técnicas de espaciado así como algunas otras técnicas que hemos aprendido anteriormente, pudimos recrear muy rápidamente este diseño Entonces usamos padding para crear los dos botones, y también usamos la propiedad GAP para establecer el espaciado entre todos los elementos en nuestro layout, así como el espaciado entre el icono y el texto dentro del segundo botón. Y eso es todo para el espaciado. Siguiente Tienes una tarea. 11. Assignment: domina el espaciado automático del diseño: Esta tarea se trata de dominar el espaciado de diseño automático porque trabajarás mucho con los rejas y los GAPS Entonces tu tarea es recrear un layout de cleanshot.com Estamos hablando de esta primera parte del diseño del héroe, que comienza a partir de aquí, y termina con este texto de devolución de dinero de 30 días. Y para ayudarte, he añadido como de costumbre, la captura de pantalla, algunas especificaciones de diseño, y todos los elementos de texto. Y también todos los iconos están preparados para ti junto a algunas instrucciones, aquí en el lado izquierdo, que puedes elegir usar o ignorar. De veras depende de ti. Ahora, adelante y completa esta tarea porque es muy, muy importante. Y una vez que hagas eso, únete a mí en la siguiente lección, donde hablaremos de alineación. 12. Logro de una alineación perfecta: Antes de comenzar, hay una cosa importante que debes entender. Y es decir, no se puede controlar la alineación de los objetos hijos por separado. En su lugar, se establece la alineación en el marco padre. Y esto es lo que quiero decir con eso. Aquí mismo, tenemos tres elementos. Cambie A para agregarlos a un marco de diseño automático. Y si miramos en el inspector, tenemos la caja de alineación. Actualmente, los tres elementos están establecidos para alinearse arriba a la izquierda. Y si tuviera que cambiar el tamaño de este fotograma, y déjame mostrarte el panorama más grande aquí, cambiando la opción de alineación, moveremos los tres elementos en la dirección que quiera, o los alinearemos de la manera que quiera Y puedo alinearlos a los cuatro lados. Entonces arriba, derecha, abajo izquierda, así como arriba a la izquierda, superior media, arriba a la derecha, y así sucesivamente. Entonces si quiero que estén justo en medio de mi un marco padre, tanto horizontal como verticalmente. Simplemente hago clic aquí mismo en el medio. Si los quiero a la izquierda, pero verticalmente en el medio, solo hago eso. Obtienes la foto. Pero la idea es que todos se mueven al mismo tiempo, están agrupados. Están alineados como un grupo, y no puedo cambiar la alineación individualmente. En cualquiera de estos. Entonces no puedo tener este primer elemento alineado arriba a la izquierda y este otro elemento estar alineado arriba a la derecha. No funciona así. Y tienes estas nueve opciones de alineación prácticamente todo el tiempo, independientemente de la dirección en la que esté establecido tu marco. Entonces, aunque esté configurado disposición vertical u horizontal o um, p, tienes la misma dirección nueve entre la que puedes elegir. Solo hay diferencias sutiles, por ejemplo, cuando lo estás configurando en p, aquí tendrás un ícono diferente. Y los elementos, ya sabes, estarán alineados de manera ligeramente diferente porque podrías estar tratando con múltiples filas. Pero la mayoría de las veces tendrás estas nueve opciones. Eso es, por supuesto, hasta que cambies la brecha entre los ítems de número a auto. Entonces, cuando haces eso, cuando cambias a auto, ya no tienes nueve opciones de alineación. Solo tienes tres opciones de alineación. Y dependiendo de la dirección del diseño, estos pueden ser ya sea centro izquierdo o derecho en un diseño vertical, o superior centro o inferior en un diseño horizontal. Y si cambias esto para envolver, entonces, ya sabes, tienes dos huecos, y las opciones de alineación también cambian ahí. Ahora, en cualquier momento, puedes dar click sobre esta casilla y puedes usar las teclas de flecha de tu teclado. Para mover el punto activo, por así decirlo. Entonces actualmente, si presiono a la derecha, va a mover eso a la derecha. Si presiono de izquierda a izquierda, arriba abajo, se obtiene la imagen. También puedes presionar WASD para moverlos a las esquinas. Así. Y antes de pasar a una aplicación práctica, quiero contarles rápidamente sobre otra opción de alineación, que se llama línea base de texto. Entonces, cuando tienes marcos horizontales, cuidadosos, solo horizontales o de diseño, tienes la opción de alinear elementos de texto a su línea base ¿Y qué es una línea de base? Bueno, esencialmente, es esta línea aquí en la que se asienta el texto. Bien. Entonces aquí tengo dos elementos de texto de diferentes tamaños. Y si creo un marco de diseño automático con ellos, puedo elegir alinearlos a la parte superior al centro o a la parte inferior, pero ninguna de estas opciones realmente se ve tan bien. Quisiera alinear sus líneas de base. ¿Bien? Y puede hacerlo fácilmente si va a la configuración avanzada de diseño automático y marca esta casilla aquí mismo. Y eso esencialmente hará esto. Se alineará la línea base del texto uno con la línea base del texto dos. Realmente, muy práctico, y estás a punto de ver exactamente un caso de uso muy genial para esta técnica. Ahora, hagamos una aplicación práctica. Y para esta lección, estaremos recreando un layout de kineticlabs.com Más específicamente, esta parte de aquí mismo que ofrece información sobre un determinado producto. Entonces, le traje todo a Figma. Como es habitual, tenemos la captura de pantalla, junto con algunas especificaciones de diseño. Y también traje todas las imágenes necesarias. He recreado los elementos del texto. Y seguí adelante y creé algunos de los marcos como este botón o esta pila de estrellas solo para ahorrar un poco de tiempo. Entonces con eso dicho, recreemos el layout usando las nuevas técnicas que aprendimos hoy sobre alineación Empecemos desde lo más alto con esta parte. Quiero mi pila de estrellas, una brecha de píxel, calificación, brecha de diez píxeles, y luego un enlace para las reseñas, y todo tiene que estar alineado al medio. Entonces hagamos las estrellas, seleccionemos estas. Asegurémonos de que la alineación aquí esté establecida en el medio, y pongamos la brecha en uno. Y luego vamos a traer las críticas. Seleccione ambos. Turno A. Y nuevamente, vamos a asegurarnos de que la alineación esté puesta en medio. Y vamos a establecer la brecha en diez píxeles. Entonces ese es nuestro primer marco más grande hecho. Ahora, cada vez que creo estos diseños complejos, siempre trato de ver elementos que tengo la misma brecha entre ellos, y luego agruparlos en un marco de diseño automático. Por ejemplo, los tres primeros elementos de mi diseño tienen la misma brecha entre ellos, 16 píxeles. Así que agarra estos tres, turno A, asegúrate de que estén alineados a la izquierda. Voy a establecer una brecha de 16 píxeles. Sigamos adelante. Tenemos la lista aquí. Entonces icono y texto. Y tenemos un hueco de ocho píxeles entre el icono y el texto y un espacio de diez píxeles entre cada elemento de la lista. Entonces, vamos a traer los íconos. Duplicemos esto. Trae el otro. Y luego selecciona el primero, desplaza A, alinea al medio, establece la brecha. Hagamos lo mismo para el segundo. Establecer la brecha y para éste. Y luego seleccionamos los tres, desplazamos A. Asegúrate de que los alinearemos a la izquierda y establecemos un hueco de diez píxeles. Ese es nuestro segundo fotograma completo. Sigamos adelante. Tenemos el precio, y luego paquete de 18. No hay brecha en el medio, pero se alinean muy bien usando la línea base, la línea base del texto. ¿Bien? Así que selecciona esto. Mayús A, voy a cambiar el diseño a horizontal, da clic aquí y presiona B. Ese es el atajo de teclado para mover la alineación del texto encendido y apagado. Y vamos a quitar ahí la brecha. Entonces, ese es el fotograma número tres. A continuación, veamos, tenemos este texto de cantidad, que ya está hecho, y luego tenemos estos botones. Entonces tenemos más menos. Cada botón es de 48 píxeles de tamaño círculo, y con el icono colocado exactamente en el medio, y luego tenemos un número entre ellos y 16 píxeles de brecha. Entonces comencemos por crear los botones. Ahora bien, estos iconos aquí ya son marcos, como se puede ver en el panel de capas, y contienen un vector en su interior. Y como ya son marcos, podemos seguir adelante y agregar diseño automático. Turno A. Y en el inspector, sólo voy a cambiar con y altura. Voy a cambiar el radio del borde 2100 para que sea un círculo perfecto. Y luego quiero asegurarme de que el icono esté colocado exactamente en el centro, así que voy a hacer clic en esto. Y luego finalmente, voy a agregar un borde un pixel dF dF D F. Hagamos lo mismo para el menos. Y luego agarraremos el menos y el número. Selecciona los tres, cambia A. Asegúrate de que los alineamos a la mitad. Y también vamos a establecer una brecha de 16 píxeles. Y ese es otro marco listo para funcionar. Después de eso, tenemos el botón, que ya está hecho, y todavía tenemos que trabajar en la creación de estos dos elementos aquí. Entonces icono, texto, texto de icono. Ocho píxeles entre los 230 píxeles entre los dos elementos más grandes. Vamos a traer el icono. Así. Y así. Seleccione estos. Desplaza A, alinea con el centro. Ocho píxeles, haz lo mismo aquí. Y ahora selecciona tanto el desplazamiento A, Alinea ambos a la mitad y establece la brecha de 30 píxeles. Ahora tenemos todos los marcos principales terminados. Ahora solo necesitamos juntarlos a todos y establecer el espaciado adecuado entre ellos. Entonces comencemos desde lo más alto. Tenemos primero frame y luego 18 pixels, y luego esta segunda sección. Así que selecciona todos alinearlos a la izquierda. 18 pixeles. A continuación, tenemos una brecha de 22 píxeles y el precio. Y aquí, en realidad voy a mostrarte un truco realmente genial. En lugar de seleccionar ambos y crear otro marco con ellos solo para poder establecer esa brecha más grande. Puedo mover esto Dentro del marco principal, puedo empujarlo hacia abajo, y actualmente tengo 18 pixeles gap, y necesito 22. Así puedo componer los otros cuatro píxeles agregando una parte superior de relleno a este fotograma. Entonces va algo así. Selecciono el fotograma, entro aquí, y agrego cuatro pixeles. ¿Verdad? Eso solo va a agregar cuatro píxeles de relleno por encima básicamente del texto del precio. Y que cuatro pixeles con los otros 18 que tengo de la brecha del fotograma principal me lleva a 22 pixeles. Así que eso permite crear estos fotogramas de una manera más eficiente y no sobrecomplicarlos con unos múltiples fotogramas anidados Realmente genial. A continuación, tenemos un hueco de 25 píxeles hasta el siguiente ítem, que es esta cantidad. Entonces solo puedo comandar X esto, pegarlo adentro. Y como esto también es un marco, puedo hacer el resto de la diferencia agregando un acolchado superior. Entonces necesito 25 pixeles, y tengo 18 gap aquí. La diferencia es lo que siete pixeles, ¿verdad? Entonces selecciona este marco, agrega siete píxeles a la parte superior. Y entonces tenemos 16 pixeles entre este elemento y la fila de botones. Aquí es donde necesito seleccionar ambos elementos, cambiar a para crear otro marco y luego establecer ese espaciado a 16, porque es menor que 18, que habíamos establecido como un hueco para el marco principal. Y como no puedo usar relleno negativo para llegar eso a 16, tuve que hacer otro frame con estos dos elementos. Ahora, seleccionemos estos elementos, desplazemos A para crear otro fotograma con ellos, alinearlos al centro y establecer el hueco en 16 píxeles. Esto sólo me va a hacer las cosas un poco más fáciles porque ahora necesito establecer la brecha entre esto y el resto a 32 píxeles, como pueden ver aquí mismo. Entonces nuevamente, de dos maneras puedo hacer esto, ya sea seleccionar ambos, crear un nuevo marco con ellos, o bate esto directamente en el marco principal. Tenemos 16 pixeles aquí, y necesito otros 16. Y debido a que este es un marco de diseño automático, puedo agregar 16 en la parte superior, y eso lo empujará hacia abajo lo suficiente. Entonces visualmente, tengo esa brecha de 32 píxeles. Entonces ahí lo tienes. Así es como puedes construir un diseño un poco más complejo en Figma usando toda la alineación y todas las opciones de espaciado y relleno que aprendimos hasta ahora Ahora, el siguiente para ti, hay una tarea, así que te veré ahí. 13. Assignment: logro de una alineación perfecta: Esta tarea consiste en sentirse cómodo con la alineación dentro de los marcos de diseño automático. Es uno súper importante, así que por favor no te lo pierdas. Ahora, tu tarea es recrear un layout desde la app nucleo Y es una de estas secciones de tabla de precios. No es exactamente el que ves en el sitio web en vivo en este momento. Tengo una versión un poco más antigua. Al parecer, la app nucleo cambió su página de precios entre el momento que tomé la captura de pantalla y cuando comencé a grabar, pero eso es todo bueno. Aún puedes obtener mucha práctica incluso con esta versión anticuada. Entonces, como siempre, incluí la captura de pantalla, las especificaciones de diseño, y también todos los elementos de texto, los iconos, y también creé este botón para ti, para que no tengas que perder el tiempo con los gradientes y todo eso Además, incluí algunas instrucciones que puedes ignorar o usar , realmente depende de ti. Así que adelante y haz esta tarea. Como dije, es muy importante, y una vez que hayas terminado, te veo en la siguiente lección, que trata sobre cambiar el tamaño con diseño automático. 14. Redimensionamiento con diseño automático: Al cambiar el tamaño con diseño automático, puede controlar tanto el marco principal como los elementos secundarios. Y en esta lección, vas a aprender sobre las siguientes tres opciones de cambio de tamaño. Abrazo el contenido, fijo y llene el contenedor. Como beneficio adicional, discutiremos el tamaño mínimo máximo. Empecemos con los contenidos de Hug. Esto solo funciona en el marco padre, y es el comportamiento predeterminado. Entonces, si selecciono estos tres elementos y agrego el diseño automático, Figma establece el redimensionamiento horizontal y vertical para abrazar, más específicamente abrazar contenidos Esto significa que el marco es tan alto y tan ancho como su contenido. Eso significa que si tuviera que eliminar uno de sus elementos secundarios, el marco cambiará de tamaño Es mucho más pequeño, ¿verdad? Si lo vuelvo a agregar, entonces el marco se hace más grande. Ahora, ten en cuenta que Figma hará esto manteniendo el mismo acolchado que yo elegí Entonces, si voy a cambiar el padding aquí a, digamos 30 píxeles, va a hacer que el frame sea tan grande y tan alto como los elementos hijos más el padding que le he puesto. Entonces, nuevamente, si borro a este hijo, el marco se hará más pequeño, pero también mantendrá ese relleno. Y si en algún momento, tengo un marco que está configurado para saber, una opción de cambio de tamaño diferente a abrazar contenidos. Siempre puedo configurarlo de nuevo para abrazar contenidos del inspector, si hago clic aquí, puedo configurarlo horizontalmente, o puedo configurarlo verticalmente, o en realidad puedo, o en realidad puedo, y este es un consejo profesional, puedo hacer doble clic en un borde horizontal para establecer el redimensionamiento horizontal para abrazar contenidos como este, o puedo hacer doble clic en un borde vertical. Entonces, ya sea el borde superior e inferior, así para establecer el cambio de tamaño vertical para abrazar el contenido. Ahora, si desea que su marco padre permanezca fijo independientemente del tamaño de los elementos secundarios, debe establecer la opción de cambio de tamaño en fijo. Y eso se puede hacer de dos maneras. Aquí, tengo un marco predeterminado que usa contenido hug, y para configurarlo en fijo, puedo cambiar un tamaño del lienzo, ya sabes, arrastrando cualquiera de los manejadores Y si miramos en el inspector, ahora, tanto el redimensionamiento horizontal el vertical están establecidos en fijos, o si están establecidos para abrazar contenido, puedo ingresar un valor manualmente, y eso automáticamente lo configurará en fijo. Y eso funciona, claro, para ambas direcciones. Y un marco que se establece en fijo no cambiará el tamaño de acuerdo con sus elementos hijos Entonces, por ejemplo, si tuviera que hacer este elemento mucho más grande, verás que el marco porque está configurado fijo permanece exactamente en el mismo tamaño. Hasta ahora, has aprendido que contenido de Hug básicamente permite que un marco se encoja o se expanda según sea necesario para que su contenido se ajuste al tamaño de los elementos secundarios. Pero, ¿y si quieres que un elemento hijo se encoja o se expanda para llenar todo el espacio disponible dentro del marco padre? Ahí es cuando necesitas usar contenedor de llenado. Ahora, llenar contenedor sólo funciona en elementos hijos. Entonces veamos que este marco tiene dos cajas en su interior. Cada uno se establece en una dimensión fija. Entonces, cuando estoy redimensionando este marco padre, no pasa nada. Los elementos hijos permanecen exactamente en ese mismo tamaño. Sin embargo, si selecciono uno de ellos, y configuro, digamos, el redimensionamiento horizontal para llenar contenedor, ese elemento hijo ahora ocupa todo el espacio disponible. Y Figma toma en cuenta, por supuesto, el relleno dentro del elemento y también la brecha a los demás elementos Además, si tuviera que establecer este elemento para que sea contenedor de relleno, estos dos elementos secundarios tendrán exactamente el mismo tamaño porque llenarán el contenedor en cantidades iguales. Ambos ocuparán la misma cantidad de espacio. Y si agregué un tercero, ahora los tres tendrán exactamente el mismo tamaño porque están todos preparados para llenar el contenedor, por lo que ocuparán la misma cantidad de espacio. Puedo establecer un elemento hijo para llenar el contenedor en la dirección vertical también, así como así. Y eso significa que ahora redimensionando Este marco padre producirá resultados totalmente diferentes a los que hemos visto antes. Los elementos ahora están redimensionando junto con su marco padre. Y aquí hay otro protip para ti aquí. Si tienes seleccionado un elemento hijo y mantienes presionada la opción u ult, y haces doble clic en uno de sus bordes. Por ejemplo, este borde inferior, que hará ese elemento o establecerá su redimensionamiento vertical para llenar contenedor. Alternativamente, si se establece fijo horizontalmente, digamos, manteniendo pulsada la tecla ult u opción y haciendo doble clic en el borde derecho o izquierdo, establecerá ese elemento para llenar contenedor en la dirección horizontal. Ahora, el cambio de tamaño automático a veces puede hacer un elemento rompa el diseño si se vuelve demasiado grande o demasiado pequeño. Es por eso que puedes establecer valores mínimos y máximos para ancho y alto. Y esto funciona tanto en elementos hijos como en marcos padre. Y es realmente sencillo de hacer. Digamos que quiero permitir este marco cambie de tamaño Pero no te pongas demasiado pequeño. Al igual que, cuando se pone así de pequeño, no es bueno. Yo quería tener al menos 400 pixeles. Entonces para hacer eso, irías al inspector donde encuentras el ancho y haces clic en el menú desplegable y agregarías un ancho mínimo o máximo. Entonces ancho mínimo, digamos 400, y agreguemos también un ancho máximo de 800. Entonces ahora, sólo puedo cambiar el tamaño de este marco padre 400-800, que son los límites que he establecido para ello. Todo bien. Tiempo para una aplicación práctica sobre el cambio de tamaño. Y para esta lección, estamos recreando un layout a partir de air call dot IO Más específicamente, esta de aquí, toda esta tabla de precios. Entonces se lo llevé a Figma. Como de costumbre, agarré una captura de pantalla, hice algunas especificaciones de diseño Y también recreé los elementos del texto, traje los íconos Y en aras del tiempo, ya hice algunas de las secciones más complejas. Donde, ya sabes, básicamente utilizamos técnicas que aprendimos en las lecciones anteriores. Entonces ahora lo que quiero hacer es simplemente completar este diseño y mostrarte algunas técnicas de cambio de tamaño que te serán útiles. Lo primero es lo primero, básicamente tenemos dos mitades aquí. Esta mitad izquierda ya está hecha. Tiene un que en realidad deberíamos configurarlo en auto. Entonces Dependiendo de la altura aquí, este botón siempre se queda en la parte inferior. Ahora, quiero que este botón ocupara todo el espacio disponible. Entonces voy a darle click, y voy a establecer su redimensionamiento horizontal para llenar contenedor, así como así. A continuación, pasemos al lado derecho donde tenemos estos separadores, estas líneas grises entre cada ítem Entonces quiero configurarlos para que también llenen todo el espacio disponible. Así que en realidad voy a seleccionar todos estos, y voy a crear un marco de diseño automático alinearlos a la izquierda. Y voy a seleccionar cada elemento de aquí, y voy a establecer su redimensionamiento horizontal para llenar contenedor. Y eso incluye los propios elementos de la lista, así como los separadores Y en realidad vamos a crear tantos separadores como necesitemos simplemente duplicando y cambiando su posición Tenemos que establecer esa brecha de 32 píxeles entre el título y la lista. Entonces hagámoslo. Cambio A. Estableceremos la brecha aquí en 32 píxeles. Y luego tenemos esta sección en la parte inferior, que también debería redimensionarse junto a todo lo demás. Entonces, seleccionemos estos dos turnos A. No necesitamos ningún tipo de espaciado entre aquí. Entonces voy a seleccionar esta sección, Alt haga doble clic para configurarlo para llenar contenedor. También seleccione esto o disposición de marco. Haz lo mismo, configúrelo para llenar contenedor, y luego haremos lo mismo para estos dos. Los pondremos para llenar en lugar de ug. Ahora bien, cuando cambio el tamaño de esto, las cosas empiezan a verse bien, pero no exactamente Entonces esta sección en la parte inferior está bien, pero no la de arriba. Entonces pongamos este para que llene contenedor y luego bajemos el pedido y fijemos el resto. Eso es bueno. Vamos a establecer también los elementos de texto. Sólo voy a seleccionar todos los elementos de texto y configurarlos para llenar contenedor. Entonces ahora, cuando estoy redimensionando , Todo cambia de tamaño en consecuencia Eso incluye el separador, el texto, y estos dos elementos en la parte inferior. Ahora, vamos a juntar a estos dos. Forman parte de un marco más grande que tiene un fondo blanco. Tengo un poco de relleno aplicado a ella. Seleccione estos ambos, turno A. Y vamos a aplicar primero el relleno, así tenemos si cuatro y 48. Y hagamos un relleno blanco. Hagamos 24 para el radio fronterizo. Y deberíamos estar bien para irnos. Ahora bien, ¿qué pasa con la brecha entre estos? Actualmente, fijado en 103. Hagámoslo un poco más pequeño, digamos 96, y vamos a tener ambos elementos establecidos para llenar contenedor. Entonces ocupan cantidades iguales de espacio, y cuando redimensiono este marco principal, esos elementos dentro cambian de tamaño junto con él Ahora, hay una cosa que no cambia de tamaño. Y esa es esta primera mitad. Y aquí tengo una opción. Puedo configurar estos para llenar contenedor también. Pero a lo mejor me gustaría que estos se quedaran exactamente como están. Así que en realidad vamos a establecer un máximo o lo siento, un ancho mínimo en la sección. Por lo que actualmente, está configurado 376 píxeles. Vamos a establecer 300 y tan pronto y seis píxeles como el ancho mínimo para la sección. Eso significa que cuando estoy redimensionando, no va a ir por debajo de ese valor. Y puedo hacer lo mismo por el de la derecha. Puedo decir que a lo mejor quiero que estos sean un mínimo de 450 píxeles. Entonces ahora redimensionar básicamente me dará esto. Todo bien. Entonces esa fue bastante información sobre un cambio de tamaño. Ojalá, las demos básicas, y también esta práctica aplicación te dio toda la información que necesitas para entenderla mucho mejor. Ahora, a continuación, tenemos una tarea o mejor dicho usted tiene una tarea. 15. Assignment: cambio de tamaño con diseño automático: El aspecto de cambio de tamaño diseño automático de Figma es probablemente el aspecto más complejo del mismo. Y por eso deberías familiarizarte realmente con él. Y para ayudarte con eso, aquí tienes una tarea en la que puedes practicar. Vas a estar recreando un diseño a partir del diseño del sistema de módulos, y si te desplazas completamente hacia abajo, encontrarás la sección de precios Entonces esta es la sección que estarás recreando. un poco más en el lado complejo. Pero si aplicas todas las técnicas que has aprendido hasta ahora, estoy seguro de que no tendrás ningún problema con ello. Creé todo lo que necesitas. Trají la captura de pantalla, hice las especificaciones de diseño, y he creado los elementos de texto y los iconos. Por supuesto, como de costumbre, tienes un conjunto de instrucciones que puedes elegir usar o ignorar la elección realmente depende de ti. Ahora bien, esa fue la tarea final. Entonces, por favor, únase a mí en la siguiente lección para la conclusión y algunas reflexiones finales. 16. Conclusión y reflexiones finales: D Oye, enhorabuena por completar esta clase, y muchas gracias por verlas. Espero que te haya resultado útil, valioso y que hayas aprendido algo nuevo. Realmente disfruté creando esta clase, y espero verte en la siguiente. Pero hasta entonces, hagamos un breve recapitulación de lo que hemos aprendido hasta ahora Exploramos diferentes métodos para agregar diseño automático y organizar objetos dentro de marcos. Descubrimos que los marcos de diseño automático se pueden anidar, lo cual es esencial para crear estructuras complejas Experimentamos con el flujo de diseño, aprendiendo sobre la dirección y el posicionamiento absoluto Dominamos las técnicas de espaciado, incluyendo la creación de espacios entre los elementos y la adición de relleno alrededor de ellos. Hacia el final, exploramos a fondo todas las opciones de alineación dentro del diseño automático de FicMA Y finalmente, aprendimos sobre las diversas opciones de cambio de tamaño y cómo usarlas para crear diseños dinámicos. Entonces, ¿qué debes hacer a continuación? En primer lugar, le agradecería mucho que dejara una reseña para esta clase. Tus comentarios son valiosos, y me ayudarán a crear mejores clases para ti en el futuro. Segundo, echa un vistazo a mi perfil y explora mis otras clases de Figma Puede que encuentres algo que te interese. También dirijo un canal de YouTube donde comparto contenido en un diseño web con enfoque en Figma y Webflow Si te interesa, no dudes en echarle un vistazo. También puedes ponerte en contacto conmigo en X Instagram o Facebook. Los enlaces están en mi página de perfil. Todo bien. Es hora de que me firme. Gracias de nuevo por ver, y espero verte en mi próxima clase. Adiós por ahora.