Cómo diseñar y animar una barra lateral plegable en Figma

1. Te doy la bienvenida a la clase: En esta clase, te mostraré cómo diseñar y animar una barra lateral plegable en Esta es una clase muy práctica, y te va a enseñar a diseñar algo que probablemente encuentres en tu carrera de diseño, y te mostraré las mejores herramientas y técnicas que puedes usar para hacerlo de manera rápida y eficiente. Esta clase, te pondrás manos a la obra con algunas de las características más poderosas de Figma Te mostraré cómo usar el diseño automático para mantener todo perfectamente alineado, cómo ahorrar tiempo con variables y estilos de capa, y cómo optimizar tu flujo de trabajo con componentes y variantes. Además, nos sumergiremos en algunas técnicas avanzadas de creación de prototipos para que puedas animar suavemente la barra lateral entre sus estados colapsado y expandido Oigan todos, en caso de que no nos hayamos conocido, mi nombre es Adi. Soy diseñador y desarrollador web freelance con más de diez años de experiencia. Ahora, iniciaremos este proyecto de diseño con un conjunto de wireframes y algunos activos de marca Y te mostraré cómo usar correctamente los diferentes logotipos que se proporcionan, cómo elegir los colores correctos de la paleta que se nos dio, cómo elegir el conjunto de iconos correcto, tipografía y cómo unir todo en un diseño cohesivo Ahora, debido a que esta es una clase muy práctica, puedes seguir descargando los wireframes y los activos de la marca y trabajando a mi lado Este es un proyecto fantástico para practicar tus habilidades e incluso exhibir en tu portafolio. ¿Tan listo para sumergirse? Empecemos. 2. El proyecto de clase: El proyecto de clase es sencillo. Necesitas diseñar y animar una barra lateral plegable en Ahora, en la descripción de la clase, encontrarás un enlace a este archivo Figma En el interior, encontrarás tres wireframes, cada uno con una estructura diferente, y cada uno hecho específicamente para una marca diferente También encontrarás los activos de las tres marcas. Estos son, por supuesto, ficticios, y contienen las suites de logotipos, los colores de la marca y cierta información tipográfica Entonces tu tarea es escoger cualquiera de estas tres marcas y diseñar la barra lateral correspondiente. En la clase, estaré diseñando el de tienda Megan, pero puedes elegir lo que quieras. Incluso puedes elegir los tres y diseñar tres barras laterales que depende totalmente de ti Cuando termines, exporta tu diseño como imagen y publícalo como proyecto de clase. Espero con ansias ver lo que se te ocurre. Y recuerda, a medida que avanzamos, siéntete libre de hacer cualquier duda. Estoy aquí para ayudar. Ahora, comencemos con la clase. 3. Elección de iconos: El primer paso que debemos dar es elegir íconos para nuestro proyecto, y eso es súper importante porque íconos complementarán los enlaces en la barra lateral. Eso va a permitir a los usuarios escanear el diseño más fácilmente y además determinar rápidamente de qué se trata cada enlace. Ahora bien, a la hora de elegir íconos, es importante que consideremos un principio de diseño llamado consistencia. Eso básicamente significa que todos los iconos deben tener el mismo estilo. Ya sea que sean de contorno o de tono dúo o sólidos, necesitan tener el mismo estilo. Entonces, por ejemplo, si vamos a escoger algunos iconos de esquema para algunos de los enlaces, no deberíamos elegir, digamos, íconos sólidos para los otros enlaces. Todos los iconos deben tener el mismo estilo. Y la forma más fácil de asegurarse de que eso suceda es elegir íconos del mismo conjunto. Ahora, hay un par de sets que te recomiendo que consigas, y todos son gratis. Sólo voy a repasarlos rápidamente. El primero son íconos sin título de Jordan Hughes, y encontrarás un enlace a esto en la descripción de la clase Entonces tenemos Font Awesome, que cuenta con más de 2000 iconos gratuitos. Esto lo puedes encontrar en fontawesome.com. Entonces los iconos bootstrap también son una gran opción. Los puedes encontrar en icons dotgtbootstrap.com. Y por último, tenemos los íconos de material de Google. Simplemente vaya a fonts.google.com y vaya a iconos. Y aquí encontrarás un montón de estos. Sí, puedes buscar varios íconos. Incluso puedes cambiar el peso del icono aquí, lo cual es muy interesante. Y todos estos son de uso gratuito. Ahora, para el diseño que voy a estar creando en esta clase, estaré usando los iconos sin título porque creo que coinciden muy bien con el proyecto o con la marca para la que estamos diseñando Y hablando de eso, déjame mostrarte lo que voy a estar creando. Entonces obtuve el archivo, el archivo de recursos estudiantiles que te mostré en las lecciones anteriores. Y aquí puedes ver que tenemos los tres activos de marca. Y hoy, estaré diseñando para tienda Mingo, que es una plataforma de comercio electrónico enfocada en compras sociales Por supuesto, esta es una marca ficticia, pero aquí obtenemos prácticamente todo lo que necesitamos Obtenemos los diversos logotipos y las combinaciones de colores que se pueden utilizar. Y también tenemos los colores con variaciones para más claros o más oscuros. Y también tenemos alguna información tipográfica. Esto es solo los tipos de letra utilizados en el diseño del logotipo. No significa necesariamente que los usaremos en nuestro diseño de interfaz de usuario, pero están aquí como pauta, básicamente. Ahora, para que sea más fácil para mí y para ti también, creé muchas variables para todos los colores que voy a usar. Entonces como puedes ver, aquí, tenemos variables para todas las variaciones de los colores utilizados en los activos de la marca. Para las tres marcas. Y además de eso, también creé estilos de color que puedes ver aquí en la barra lateral, y trabajar con estilos de color es realmente sencillo. Entonces por ejemplo, si aquí dibujo un rectángulo y quiero agregar o cambiar el color de fondo a uno de estos colores predefinidos, todo lo que tengo que hacer es ir al relleno aquí, aplicar estilos y variables, y simplemente hago clic en esto. Yo elijo el color que quiero de la lista, y ahora que usa, por ejemplo, blue lagoon 500. Simplemente me ahorrará mucho tiempo a la hora de elegir colores porque no tengo que andar a tientas con códigos hexagonales o, ya sabes, generar tintes o tonalidades de esos colores en el acto Todo está guardado y listo para mi uso. Ahora, escojamos los íconos que necesitamos para nuestro proyecto de diseño. Así que voy a estar diseñando para Shop Megan, como dije. Entonces iré a la página de Wireframe y agarraré Wireframe dos, que es el que necesitamos Y sólo voy a ir a esta página aquí y vamos a pegar el wireframe Aquí. Voy a crear un frame, Control o Comando R para renombrar, y voy a renombrar estos dos íconos. Este es solo un lugar que voy a usar para guardar todos mis iconos. Entonces veamos qué tenemos. Tenemos una barra de búsqueda, así que necesitamos un icono de búsqueda. Entonces volviendo a Untitled, voy a ir por, no sé, buscar Small o buscar MD, uno de estos Haga clic para copiar, y voy a pegar eso y voy a cambiar el nombre de esto para buscar. A continuación, tenemos tres enlaces que pertenecen a la categoría de productos. Así icono para todos los productos. Busquemos grilla. Y eso me va a dar este ícono. Vamos a copiar eso, pegarlo en, renombrado a grid. Y la forma en que eliges estos íconos es algo subjetiva, supongo. Realmente depende de cómo interpretes un determinado vínculo. Yo personalmente, cuando pienso en todos los productos, pienso en, ya sabes, una colección, cierto, un grupo de algo. Entonces elegí el ícono de la cuadrícula porque también, representa un grupo de algo, ¿verdad? Es solo una colección de artículos individuales. Entonces, en mi opinión, esto funciona muy bien para una página que muestra múltiples productos. A continuación, tenemos la lista de categorías. Ahora, aquí podríamos ir por algo así como una lista pero en realidad voy a buscar la base de datos, y eso me va a dar este resultado. Y base de datos, creo que esto vuelve a funcionar, muy bien para el enlace de categorías porque simboliza una lista de ítems, una colección de Entonces va a funcionar muy bien. Cambiemos el nombre a esto también. A continuación, los recién llegados. Entonces cuando pienso en los recién llegados, digo, Bien, nuevo, necesito que me avisen porque es nuevo. Busquemos, como, una campana de notificación o algo así, ¿verdad? Entonces busca a Bell, y voy a agarrar campana 03. Pegado aquí. Sigamos adelante. Órdenes. Tenemos historial de pedidos. Entonces cuando pienso en historia, pienso en tiempo pasado, temporizador, reloj, algo así. Entonces busquemos el reloj. Y vamos con este reloj rebobinar y rebobinar porque estamos hablando del tiempo pasado, Historia. Creo que eso funcionaría muy bien. Renombrar eso a reloj. A continuación, realizar un seguimiento del orden. Entonces, ¿qué me da el rastreo? Una ubicación precisa, ¿verdad? Y cuando pienso en la ubicación, pienso mapa pin, correcto, o ya sabes, uno de esos pines que pones en un mapa para marcar una ubicación específica. Entonces busquemos pin. Y vamos con este Marcador Pin 06. Copiar, pegar, renombrar. Sigamos adelante. Devoluciones y reembolsos. Así que la devolución es cuando envías algo de vuelta, reembolso es cuando devuelves el dinero. Entonces pensemos en algo con flechas, ¿verdad? Entonces busquemos flecha, y para flecha, simplemente desplácese hacia abajo. Veamos cargar más íconos. Creo que esto funciona bastante bien. Interruptor horizontal. Vamos a por este. Vamos a renombrar para cambiar. Bien, siguiente, charla con soporte. Entonces, cuando pensamos en charlar, ¿pensamos qué? Mensaje. Todo bien. Entonces vamos con una de estas burbujas de discurso con algo adentro, tal vez este mensaje texto cuadrado. Entonces vamos a copiar eso. Basado en renombrar a mensaje. A continuación, preguntas frecuentes. Las preguntas frecuentes son preguntas frecuentes. Entonces buscamos pregunta. Entonces usemos el signo de interrogación. Este, círculo de ayuda. Creo que eso funcionaría bien. Renombrar para ayudar. El siguiente es el Centro de Ayuda. Este, creo que vi este Life Boy. Esto funcionaría bien. Cambiemos el nombre de esto para ayudar. ¿Y qué más? Tenemos ajustes. Ajustes, bastante fáciles. Buscamos ajustes aquí, y obtenemos este icono de diente Así suele ser como hacemos las cosas, o, ya sabes, podríamos agarrar algo de esto o algo de esto. Hay muchos íconos que podemos elegir aquí, pero el icono del diente es, como, instantáneamente reconocible para cualquiera que esté buscando la página de configuración Así que vamos a cambiar el nombre de estos dos ajustes. A ver, tenemos todos los enlaces aquí. También necesitamos un icono para colapsar y Expandir, ¿verdad? Entonces cuando pensamos, ya sabes, colapsar o expandir, expandir, la barra lateral, ya sabes, se hace más grande en tamaño, colapsa, la barra lateral se vuelve más pequeña en tamaño. Entonces estamos lidiando con la dirección, derecha, ya sea a la izquierda o a la derecha. Busquemos flecha, y veamos qué encontramos aquí. Así que vamos a desplazarnos hacia abajo. Entonces algo como esto. Ves este icono de descarga. Esto podría funcionar bastante bien, excepto que necesitaría que se rotara. Busquemos la alineación. Quizá encontremos algo ahí. Sí, ahí vamos. Entonces una línea a la izquierda y una línea a la derecha. Necesito ambos. Una línea a la izquierda y una línea a la derecha. Bien, entonces una línea a la izquierda usaremos esto para cuando queramos colapsar porque la dirección va así, y una línea a la derecha, usamos para expandir porque se expande hacia el lado derecho. Todo bien. Entonces estos son todos los íconos que necesitamos. Vamos a ordenar esto un poco. Entonces con el marco de iconos seleccionado, subamos aquí y vamos a agregar autoayout Bien. Y déjame mover esto para que lo veas mejor. Y voy a usar el rap como dirección, y voy a establecer, digamos, 64 píxeles entre estos elementos y el relleno de 64 píxeles en todos los lados. Así que todos los iconos se muestran muy bien en una cuadrícula, así. Bien. Ahora, una última cosa que quiero hacer aquí, quiero hacer mi vida más fácil a largo plazo. Entonces voy a convertir cada uno de estos iconos en un componente. De esa manera, puedo usar la función de intercambio instantáneo infigma components si quiero cambiar un icono de uno a otro, y te lo mostraré en la siguiente lección Pero por ahora, en realidad vamos a seleccionar todos estos iconos, y quiero renombrarlos a todos. Así que voy a hacer un clic derecho renombrar el nombre, y voy a seleccionar renombrar dos icono barra diagonal, y luego el nombre actual Bien, entonces eso solo les va a cambiar el nombre a icon slash Search, iconlahGrid, icon slash database, y así sucesivamente y así sucesivamente Ahora, con estos renombrados, puedo convertirlos a todos en componentes Entonces para hacer eso, iré aquí en la barra lateral, tres puntos, y voy a seleccionar Crear múltiples componentes. Así. Así que eso girará a cada uno de estos iconos en su propio componente. Y la razón por la que los nombré como icono slash en el nombre del icono, es porque la cosa icon slash permite a Figma agrupar Entonces por ejemplo, ahora quiero agregar uno de esos componentes a mi lienzo, y voy al panel Activos aquí, puedes ver que mis íconos ahora están agrupados bajo icono, ¿verdad? Puedes verlas todas aquí. Pero cuando tienes múltiples componentes, es mucho más fácil categorizarlos así Entonces, bajo los activos locales, todos mis íconos que acabo de crear, todos mis componentes ahora están agrupados bajo la subcarpeta de iconos, lo que puede ser muy, muy útil. Bien, entonces ahora tenemos los íconos. Creamos los componentes, así que es hora de diseñar los elementos del menú. Eso viene a continuación. 4. Diseño de los elementos del menú: Ahora, debido a que tenemos varios elementos de menú que tienen aproximadamente la misma estructura, es una buena idea usar componentes. De esa manera podemos reutilizar los elementos del menú. Y si en algún momento decidimos cambiar algo, simplemente lo hacemos una vez en el componente maestro. Entonces déjame mostrarte cómo podemos hacer eso. Echemos un vistazo a la estructura del menú aquí. Entonces vamos a tener el texto, claro. De hecho, llevemos aquí una copia de eso y cambiemos el ancho a auto. Ahora, aparte del texto, también necesitamos un icono, ¿verdad? Así que vamos a agarrar uno de los íconos. Digamos el primero, y voy a pegarlo aquí. Y si no sabes cómo funcionan los componentes en Figma, es realmente, muy simple Entonces cada componente tiene dos partes. Digamos que tienes el componente principal, y luego tienes la instancia, ¿de acuerdo? El componente principal es la única fuente de verdad, por así decirlo. La instancia es básicamente una copia. Entonces la idea es, cualquiera que sea el cambio que hagas al componente principal, ese cambio será propagado y aplicado a cualquier otra copia del mismo Entonces, por ejemplo, aquí mismo, tenemos el componente principal que se llama icon slash Grid Y fíjate en el icono que está usando. Es como un icono de diamante completo. Esto de aquí, sí, es una copia de ese componente. Y en el panel de capas, se puede ver que tiene un icono diferente. Es un diamante vacío. Entonces ahora si selecciono el componente principal, y por ejemplo, cambio su color, verá que la copia o cualquier otra copia del mismo recibió ese cambio. Tiene el color diferente. Entonces, si cambio esto de nuevo a lo que era, las instancias también cambiarán. Así es básicamente como funcionan los componentes en FigMA. Por supuesto, hay usos más complejos, como verás en este curso, pero en su nivel base, eso es a lo que se reduce Ahora, vamos a crear este elemento del menú. Entonces tenemos un icono, y tenemos el texto. Pongamos el texto al Inter. Este es el tipo de letra que usaremos para el diseño de la interfaz de usuario en este proyecto Inter una fuente gratuita disponible en Google. Tiene muchos pesos diferentes, y fue hecho específicamente para este tipo de aplicaciones. Entonces usaremos 16 píxeles inter regulares y también 150% de altura de línea Ahora, con estos dos seleccionados, voy a presionar Mayús A para crear un marco de diseño automático, y voy a establecer el espacio entre ellos a 12 píxeles. Así que el espacio entre el texto y el icono a 12 píxeles. También voy a obtener o dar algún relleno de 12 píxeles a la izquierda y a la derecha del contenido y también ocho píxeles a la parte superior e inferior. Eso me va a permitir agregar algo de respiro alrededor del contenido de ese enlace del menú. Cambiemos el nombre de este marco al enlace de menú. Con él seleccionado, vamos a convertirlo en un componente. Entonces iré a la barra lateral, crearé componente o usaré el atajo de teclado Control AK en Windows o Command Option K en una Mac. Genial. Ahora, quiero poder, por supuesto, duplicar este componente, crear múltiples instancias del mismo. Y también para cada uno, quiero cambiar el texto y el icono. Para eso, agreguemos algo de anulación. Entonces con el texto seleccionado dentro del componente principal, voy a ir en la barra lateral justo aquí donde dice, crear propiedad de texto. Haga clic en eso. Vamos a darle un nombre. Puede ser lo que quieras. Solo lo dejaré en texto, crearé propiedad. A continuación, voy a seleccionar el icono, y también en la barra lateral, voy a ir y elegir Crear propiedad de intercambio de instancia. Voy a llamar a esta propiedad. Déjame mostrártelo de verdad. Voy a llamarlo icono. No te preocupes por el valor o los valores preferidos aquí. Simplemente haga clic en Crear propiedad. Todo bien. Entonces ahora, podemos tomar este enlace del menú, copiarlo y pegarlo en otro marco. Y esto es lo que usaremos para crear nuestro diseño de barra lateral. Esta es ahora una instancia del componente que acabamos de crear. Entonces acerquemos un poco el wireframe aquí para que podamos ver lo que estamos haciendo Y comencemos a crear los elementos del menú. Así que el primer enlace todos los productos. Bueno. Duplicemos esto. El siguiente va a ser categorías. Entonces con la instancia seleccionada, puedo subir aquí. Puedo cambiar el texto a categorías. E incluso puedo cambiar el icono, y Figma ahora usará los componentes del icono, o me va a mostrar los componentes del icono que creé en la lección anterior Podemos verlas todas aquí mismo. Incluso podemos buscar un ícono específico. Así que solo puedo escoger eso y Figma lo reemplazará automáticamente en mi instancia. ¿Qué tan genial es eso? Entonces estoy usando una copia del componente principal, una instancia, pero puedo personalizarlo con mi propio contenido o con contenido diferente para cada uno. Sigamos adelante. Éste, recién llegados, y voy a elegir la campana. Duplicemos estas dos veces más y rellenemos el resto de los elementos del menú. H Así que ahora hemos creado los otros elementos del menú, todos personalizados con su propio texto e icono. Ahora, un cambio que me gustaría hacer es reducir un poco los íconos. Por defecto, son 24 píxeles. Entonces vamos a hacerlos 20 pixeles. Ahora bien, porque usé componentes, si hago esto de 20 píxeles, ese cambio se aplicará a cada instancia de componente individual, súper genial. Y por cierto, utilizo la herramienta de escala para reducir el tamaño del icono. Simplemente presiona K en tu teclado y obtienes esta interfaz aquí donde puedes cambiar el ancho o la altura o cambiar el tamaño usando un factor. Ahora, hay dos variaciones más de estos elementos del menú que necesitamos crear. El primero es el activo. Entonces, ¿qué sucede cuando realmente seleccionamos o hacemos clic en un elemento de menú específico, y eso se vuelve seleccionado, verdad? Entonces, cuando eso suceda, hagamos lo siguiente. Seleccionaremos el componente principal, y podemos subir aquí y elegir Agregar variante. Ahora bien, esto hará una copia de ese componente, pero no es una instancia. En realidad es una variación, una variante de ese componente. Y ahora Figma envuelve estas variantes en esta línea punteada. Ahora, vamos a seleccionar el componente principal, y donde dice propiedad uno, vamos a hacer doble clic y le cambiaremos el nombre tipo. Y luego seleccionaremos el primero, y simplemente lo dejaremos por defecto. Y en el segundo haremos doble clic y le cambiaremos el nombre a active. Entonces para los activos, quiero usar un color de nuestros activos de marca. Entonces vayamos a la página de activos de marca, y quiero usar este color primario. Entonces es laguna azul 500. Así que vamos a seleccionar esto y debajo de llenar, camino aquí abajo. Voy a buscar laguna azul, y voy a seleccionar 500. Entonces eso va a agregar ese color como relleno. Pero también quiero cambiar el icono y el color del texto. Ahora, podría ir con el blanco para esto, y eso va a estar bien, pero quiero usar una variación de ese color primario. Así que voy a volver y puedo ver que Blue Lagoon 50 es el color más claro del manojo Entonces vamos a usar esa. Así que nuevamente, en figma con tanto el icono como el texto seleccionados, iré a Color de Selección Haga clic en esto y elija laguna azul 50. Ahora, seleccione la variante y agreguemos un radio de borde de ocho píxeles. Entonces, ¿cómo me ayuda esto exactamente? Bueno, aquí está la parte genial. Digamos que quiero hacer la instancia de todos los productos, ser la variante activa. Todo lo que tengo que hacer para eso es subir aquí donde dice tipo, y en vez de por defecto, selecciono activo, y eso es todo. Eso lo puedo hacer por cualquiera de los otros enlaces. Y luego finalmente, la otra variación que necesito crear es la que tiene la insignia. Así que fíjate algunos de estos enlaces, tienen números adjuntos a ellos. Y quiero agregar este número como una especie de placa. Entonces hagámoslo. Seleccionaremos la primera variante. Haremos clic en el icono más. Eso va a hacer una copia de la misma. Y voy a renombrar esto a default con badge. Así que vamos a agarrar ese número. Y vamos a pegarlo aquí. Hagamos este contenedor un poco más grande. Voy a usar Inter esta vez negrita, 12 píxeles, la misma altura de línea del 150% Y voy a agregar esto a su propio marco de diseño automático porque quiero agregarle un fondo. Entonces voy a presionar Mayús A, y eso me va a permitir agregarle relleno. Pero antes que nada, agreguemos un color de relleno. Y voy a volver a los activos de la marca, y veo que tenemos este rojo coral como color secundario. Así que escojamos el rojo coral 100 como fondo, y luego el 600 o el 700 como el color del texto. Entonces aquí bajo llenar, voy a buscar rojo coral, seleccione 100. Y para el texto, hagamos rojo coral, 600 o 700. Creo que 700 funciona mucho, mucho mejor. Y con el seleccionado, le agreguemos también un poco de relleno. Entonces voy a hacer ocho pixeles a la izquierda y a la derecha, dos pixeles arriba e abajo. Cambiemos el ancho aquí para abrazar contenidos. Y abrazar contenidos básicamente significa que el marco se redimensionará para que coincida con el para tapar su contenido No se hace más grande ni más pequeño de lo que contiene. Y si quieres aprender más sobre el diseño automático, tengo un curso muy detallado disponible que es solo sobre el diseño automático. Tiene muchos ejemplos, y voy muy a fondo sobre este tema. Solo echa un vistazo a los enlaces o consulta mi perfil para encontrar ese curso. Ahora, creamos este lote. De hecho, vamos a darle un radio de borde, y vamos a seleccionar el texto dentro, y voy a configurarlo en ancho automático. Entonces el cuadro de texto coincide con el ancho del texto en sí. Y también, lo que quiero hacer aquí es agregar un ancho mínimo a esto porque si cambio el texto, se puede ver que tenemos forma de píldora. Pero si sólo tengo un dígito, es casi como un círculo. Entonces quiero que esto siempre se vea como una forma de píldora. Entonces para eso, voy a ir al diseño automático. Voy a hacer clic en esto, y voy a añadir un ancho mínimo de, digamos, 32 píxeles. Entonces eso es mucho, mucho mejor. Entonces ahora, podemos volver a nuestras instancias puedo seleccionar los elementos del menú que necesitan las insignias. Por ejemplo, los recién llegados, voy a cambiar su tipo a default con badge. El chat apoyaría, misma historia, por defecto con placa. Pero necesito una manera de controlar el texto de esa placa, el número. Volvamos aquí y voy a seleccionar el texto en el componente principal, el texto de la insignia, y aquí abajo, voy a seleccionar aplicar propiedad de texto, crear propiedad, y vamos a llamar a este número de placa. Bien. Entonces ahora, si seleccionamos esas instancias nuevamente, tenemos un campo de número de placa que podemos poblar, ¿verdad? Entonces cuatro está bien para los recién llegados, pero este debería usar dos. Y déjame mostrártelo de verdad. Fresco. Por último, una última cosa aquí, notarás que si seleccionamos una de estas instancias y la hacemos más grande, el número de placa se queda justo después del texto, y no quiero eso. Quiero que el número de placa se muestre en el extremo derecho como lo tenemos en el wireframe Entonces, la forma de hacerlo es agregar un hueco automático entre la placa y el texto. Así que volvamos a esta variante y vamos a hacer un pequeño cambio aquí. Seleccionaremos el texto principal y el icono. Haremos el turno A para agregarlos a su propio marco de diseño automático. Entonces entonces voy a seleccionar el marco principal, y voy a cambiar el valor de gap aquí de 12 a auto. Entonces ahora, eso me permitirá cambiar el tamaño de esta instancia a cualquier tamaño, y Figma establecerá automáticamente la brecha entre estos elementos y la insignia al valor más alto Y esto también funciona aquí, como pueden ver. Y con eso, los elementos del menú están hechos. Entonces volvamos nuestra atención al resto de la barra lateral. Así que al llegar diseñaremos el resto de los elementos. 5. Diseño de las dos barras laterales: Hay algunos elementos más que necesitamos crear en la versión expandida de la barra lateral, y por supuesto, también necesitamos diseñar la versión colapsada. Entonces comencemos con el primero. En cuanto a los elementos, echemos un vistazo al wireframe Aún tenemos que añadir el logo. Así que volvamos a los activos de la marca, y solo voy a agarrar el logotipo normal para Shop Minge y solo voy a pegarlo aquí mismo. Entonces voy a presionar K, y voy a cambiar el tamaño de esto a 56 pixeles de altura Bueno. Ahora, tomemos esto y vamos a cambiarle el nombre a un logotipo. A continuación, tenemos una barra de búsqueda, ¿no? Así que vamos a tomar todos estos, moverlos un poco hacia abajo, y vamos a cambiar el tamaño de este marco también Entonces, para la barra de búsqueda, tomemos el texto de búsqueda, y lo pondremos aquí. Y necesitamos un icono de búsqueda, ¿no? Entonces vamos a los activos y voy a agarrar el icono de búsqueda, arrástralo adentro. Cambiemos el tamaño de esto a 20 píxeles, que coincida con el resto de los iconos en mi barra lateral, y luego seleccionemos ambos Cambie A para agregarlos a un marco de diseño automático. Y voy a añadir un color de relleno, y vamos a usar el carbón. Si echamos un vistazo a los colores aquí para nuestra marca. En la paleta de colores, tenemos un color carboncillo. Esto es para el gris, básicamente. Entonces usaremos esto para el texto y para los elementos más neutrales de la interfaz de usuario, como el fondo de un elemento de formulario, ¿verdad? Entonces vamos a usar carbón, ya sabes, 50 o 100 depende de lo que mejor se vea para nosotros. Así que vamos a seleccionar esto y nosotros elegiremos llenar. Buscaremos carbón y veamos Carboncillo 50. Sí, eso se ve bastante bien. Así que nos quedaremos con eso. Pero también, voy a cambiar el color de los demás elementos. Entonces el ícono va a ser Charcoal 500. También usaremos esto para el resto del texto. Y el texto de búsqueda, porque suele ser un marcador de posición, como lo decimos, vamos a usar una versión más ligera de carbón, que es 300, solo un color más apagado Ahora, voy a usar o estamos usando el diseño automático para este elemento. Así que definamos ocho píxeles como la brecha. Esa es la distancia entre el icono y el texto. Y vamos a usar 12 píxeles para el relleno por todas partes. Genial. Y ahora, finalmente, vamos a sumar un radio de borde de ocho píxeles. Entonces estamos haciendo coincidir el radio del borde de los otros elementos redondeados. Genial. Ahora solo podemos tomar esto y redimensionarlo a cualquier tamaño que queramos Entonces esa es la barra de búsqueda. A continuación, cada grupo de elementos del menú tiene este texto como una especie de encabezado de grupo. Así que vamos a agarrar eso. Lo pegaremos aquí. Hagamos que el ancho sea automático. Y aquí vamos a cambiar las propiedades tipográficas para entrar Déjame acercarme aquí para que veas. Me voy a quedar con 12 pixeles como tamaño de fuente, 150% de altura de línea, y voy a ponerla en mayúscula Y también, voy a hacer que el espaciado entre letras sea un poco más grande. Entonces, ya sabes, aumentar el espaciado entre letras es algo que te recomiendo hacer cuando tienes texto pequeño, negrita mayúscula, y aumentar el espacio entre las letras solo hace que el texto sea un poco más fácil de leer Así que vamos a mover esto aquí arriba. Y además, me olvidé del uh, el color, ¿verdad? Entonces el color del texto. Vamos a usar un carboncillo 300, así que un texto muy, muy ligero, y simplemente volveremos a subir la opacidad al 100% Bien. Ahora vamos a agrupar en realidad algunos de estos enlaces. Entonces seleccionaré estos tres, turno A, y eso los agregará a su propio marco de diseño automático. Y puedo cambiar la brecha aquí a cero, y quiero asegurarme de que estos estén alineados a la izquierda. Y quiero tomar todos los elementos dentro y tener su ancho o su redimensionamiento horizontal configurado para llenar contenedor. Así que ahora, cada vez que cambio el tamaño del elemento padre, los elementos dentro también cambian el tamaño Y hay una última cosa que tenemos que hacer, y es agregar un pequeño hueco entre la cabecera del grupo y el resto de los elementos. Y si solo tuviera que cambiar la brecha, de las propiedades de diseño automático, va a cambiar la brecha entre cada elemento individual. La forma en que podemos hacerlo es, antes que nada, pongamos esto de nuevo en auto con y con él seleccionado, Mayús A para agregarlo a un marco de diseño automático. Y debido a que ahora se asienta en un marco de diseño automático, puedo agregarle relleno. Entonces voy a ir en el inspector aquí mismo y voy a cambiar su relleno inferior a 16 píxeles. Entonces eso solo va a agregar un poco de distancia a un poco de relleno, básicamente solo a ese pequeño texto, creando la distancia que necesitamos. Ese es un pequeño truco ingenioso. A continuación, hagamos lo mismo por los demás. Así que agarra esto, pegarlo aquí. Y eso debería decir órdenes. Y seleccionemos el Cambio A. Asegúrate de que la dirección esté establecida en vertical. La brecha se establece en cero y los elementos dentro se configuran para llenar el contenedor. Y por último, el tercer grupo es de apoyo. Misma historia, seleccione todo, Mayús A, Gap establecido en cero, seleccione todas las instancias de elementos de menú, establezca que están redimensionando para llenar contenedor. Ahora, dos cosas aquí que me olvidé de hacer. En primer lugar, seleccione el texto de búsqueda y establezca su tamaño en 16 píxeles en lugar de 12. Y luego cambiemos el color del icono y el texto en estos elementos del menú porque me olvidé de hacer eso. Actualmente usa negro. Entonces, seleccionemos ambas variantes, y todo el camino aquí abajo bajo colores de selección, cualquier artículo que use negro debería usar Charcoal 500. Así. Entonces eso es mucho, mucho mejor. No soy un gran fan de usar solo color de texto negro puro en cualquier diseño. Es simplemente demasiado contraste, demasiado grande de un contraste. Y por último, para esta área, tenemos la información del usuario, ¿verdad? Tenemos una foto del nombre de usuario y dirección de correo electrónico. Así que vamos a pegar eso en. Y comencemos con el avatar. Hagamos esto 48 por 48. Agreguemos un radio de borde de ocho píxeles para hacerlo alrededor. Y cambiemos la imagen por dentro. Ahora bien, la forma en que esto funciona en Figma es que tienes una forma y agregas un relleno, y el relleno puede ser color, y también puede ser una imagen entre otras cosas Entonces puedes hacerlo manualmente o puedes usar un plugin. Tengo un plugin que uso regularmente y se llama Unsplash Esto básicamente solo, ya sabes, descarga imágenes de Unsplash y las aplica directamente como relleno a tu forma Entonces busquemos un retrato, y voy a elegir éste. Justo aquí. Y eso es todo. Eso es todo lo que tienes que hacer. A continuación, tomemos estos dos elementos, y cambiemos su tamaño a 16 píxeles. Y vamos a cambiar el ancho dos auto. Hagamos el turno A, agréguelos a su propio marco de diseño automático. Estableceremos la brecha a cero, y también cambiaremos la altura de la línea al 150%, así Seleccionaremos el nombre Comando B para usar el peso de la fuente en negrita. Y cambiemos el texto aquí por el nombre. Vamos a usar Charcoal 500 para la dirección de correo electrónico. Quiero que esto sea un poco más tenaz. Voy a usar Charcoal 300 así. Por último, selecciona tanto el avatar el texto. Turno A otra vez. Asegúrate de que la alineación aquí esté establecida medio y estableceremos en el medio y estableceremos el espacio entre ellos a 12 píxeles. Así. Y finalmente, hagamos que este elemento del menú colapsar sea un poco más tenso porque es más una cosa funcional que está relacionada con la barra lateral, no necesariamente una parte del grupo principal de elementos del menú Entonces cambiemos su color. Pasaremos de Charcoal 500 que puedes ver aquí. Iremos al 300 y por el icono también. Entonces veamos qué tenemos. ¿Nos perdimos algo de la estructura metálica? No, tenemos todo lo que necesitamos. Entonces ahora es simplemente una cuestión de crear un diseño adecuado, agregar algo de alineación y espaciado adecuados para todos estos elementos. Así que selecciona todo. Cambia A para agregarlos a su propio marco de diseño automático. Ahora, con el seleccionado, voy a establecer la brecha entre los elementos a 48 píxeles, y voy a usar un relleno de 24 píxeles tanto en la parte superior como en la inferior. Además, voy a agregar un radio de borde de ocho píxeles, y voy a agregar una sombra a todo este contenedor. Entonces para la sombra, en realidad voy a usar otro plugin Figma llamado sombra suave Y la sombra suave básicamente agrega una sombra en capas al objeto que quieras. Así que voy a hacer clic en Aplicar sombra. Y porque no tenemos un color de relleno que aplique la sombra a cada elemento dentro del marco, pero eso está bien. Solo podemos agregar un relleno de blanco, y ahora la sombra es visible. Mira eso lo suave que es esa sombra. Bien, así que ahora vamos a seleccionar el marco principal aquí y establecer su redimensionamiento horizontal para abrazar el contenido Entonces, ya sabes, coincide con el ancho y la altura de sus elementos de contenido. Tomemos los grupos de enlaces de menú aquí y configuraremos su redimensionamiento para llenar contenedor. Entonces, ya sabes, cada vez que estoy redimensionando esto, ellos van a cambiar el tamaño junto con él. Y vamos a conseguir la búsqueda y configuremos eso para llenar contenedor. Y por último, quiero un poco menos de espacio entre el logo y la barra de búsqueda. Entonces, agrupémoslos, seleccionemos ambos, cambiemos A para agregarlos a su propio marco, y estableceremos la brecha entre ellos en 24. Entonces esa es la versión expandida de la barra lateral. Ahora, vamos a crear la versión colapsada. Así que vamos a duplicar este Comando D o Control D, y la versión colapsada es básicamente una muy pequeña. Es una muy estrecha, ¿de acuerdo? Entonces, para que eso sea posible, necesitamos diseñar nuestros elementos tal manera que se ajusten a un espacio muy estrecho. Para los elementos del menú, significa deshacerse del texto. Solo nos quedamos con el icono, el logotipo, posible que necesitemos hacerlo más pequeño o usar una versión diferente del logotipo. La barra de búsqueda, la reemplazamos un botón y la lista puede continuar. Entonces, pongámonos a trabajar. Empecemos desde arriba. Y en realidad reemplazaremos el logo. Si volvemos a los activos de la marca para shop Minge, tenemos dos versiones del logo, la versión por defecto y una versión más pequeña, solo el símbolo, ¿verdad? Así que vamos a agarrar este. Este es un perfecto para este caso de uso. Entonces seleccionaremos el marco aquí, pegaremos eso en, y voy a presionar K para cambiar el tamaño, y voy a establecer el ancho en 48 píxeles Ahora eliminamos el logo antiguo. Movemos esto hacia arriba simplemente presionando la tecla arriba y abajo o la tecla de flecha arriba en este caso, y le renombramos a logo. Barra de búsqueda, podemos simplemente eliminar el texto de búsqueda, y podemos seleccionar la entrada aquí, y en lugar de llenar, la configuramos para abrazar contenidos. O mejor aún para asegurarnos de que tenemos el mismo ancho en estos elementos, podemos redimensionarlo a 48 píxeles, y podemos asegurarnos de que los elementos estén alineados al medio A continuación, seleccionemos los marcos que contienen los encabezados de grupo, y simplemente los ocultaremos Y entonces, ¿qué pasa con los elementos del menú? Necesitamos una versión de esto donde sea solo el icono. Así que volvamos a nuestro menú enlace componente principal. Seleccionaremos la versión predeterminada. Haremos clic en el signo más y cambiaremos el nombre a este por defecto colapsado. Y todo lo que tenemos que hacer aquí es seleccionar un texto ocultarlo, y luego seleccionar el elemento principal. Vamos a establecer un ancho de 48 píxeles, y vamos a alinear todo a la mitad. Así que ahora podemos entrar aquí y seleccionar default colapsado, default colapsado. Y otra vez, aquí. ¿ Y el seleccionado? Agreguemos otra variante. Entonces voy a seleccionar esto, agregar variante. Voy a decir seleccionado, colapsado. Y la misma historia. Seleccionamos el texto aquí, lo ocultamos. Seleccionamos el elemento principal. Ponemos su ancho a 48, y alineamos todo en el medio. Entonces ahora podemos volver atrás y seleccionar este seleccionado colapsado, o debería haber dicho activo colapsado solo para mantenerse al día con la convención de nombres. Tan activo colapsó. Genial. Por último, necesitamos una variación más, y esa es la versión colapsada del elemento del menú con una insignia. Entonces, en realidad vamos a duplicar este. Lo llamaremos colapsado con placa. Y dibujemos un círculo de ocho por ocho. Y debido a que esto está en un marco de diseño automático, Figma lo posiciona automáticamente, pero no queremos eso Entonces voy a ir justo aquí y voy a elegir Ignorar perdón, aquí arriba, botón equivocado. Ignorar el diseño automático. Bien. Y eso básicamente me va a permitir posicionar este elemento en cualquier lugar que quiera dentro de un marco de diseño automático. Entonces vamos a moverlo ahí y luego uno, dos, tres, cuatro, uno, dos, tres, cuatro. Y agreguemos un color adecuado. Si volvemos a la combinación de colores aquí, quiero usar el secundario, el rojo coral. Entonces voy a buscar rojo coral, y voy a usar el 500, que es el color base. Entonces ahora vamos de esto a esto, básicamente, y de esto a esto. Ahora, una cosa que quiero cambiar aquí es seleccionar todo y establecer el ancho para abrazar contenidos. Por lo que se muestran en su tamaño regular. Voy a hacer esto por todos ellos. Contenidos del abrazo. Ahí vamos. Bien. Y estos deberían tener 48 píxeles de ancho, y ahora son 44. Entonces, ¿por qué está pasando eso? Entonces 48, 48, 48. Oh, bien, eso es porque el ancho de estos puede ser diferente. Así que necesito establecer manualmente el ancho aquí en 48 píxeles. Eso está bien. No es un gran problema. 48 y 48 aquí también. Bien. Así que estamos llegando. Vamos a seleccionar todos estos elementos, y vamos a volver a revertirlos para abrazar contenidos No te preocupes por esta línea rosa aquí. Es solo un artefacto que seguí viendo desde esta nueva actualización de Figma. Bien. Y cambiemos también esta versión. Así que voy a cambiarlo de default a default colapsado, y también voy a cambiar el icono a una línea derecha. Y por último, me gustaría ocultar todo este marco. Entonces todo lo que queda aquí es el avatar. Entonces esa es nuestra versión colapsada de la barra lateral. Eso es lo expandido, ese es el colapsado. Eso no fue muy duro. Se. Puedes ver lo rápido que va esto cuando tienes las cosas correctamente establecidas de antemano con, ya sabes, estilos de capa y colores y componentes y variantes y todas esas cosas. Simplemente se trata de cambiar un par de cosas, esconder un par de cosas. Y se puede pasar fácilmente de, en este caso, una versión ampliada de la barra lateral a una versión colapsada. Entonces, ahora que tenemos estos dos, veamos cómo podemos animar el cambio entre los dos estados, y eso se acerca 6. Animación de la barra lateral: Ahora, la forma en que vamos a animar el cambio entre colapsado y expandido y viceversa es mediante el uso de prototipos Y si nunca has usado prototipado en Figma, no te preocupes Es súper, súper simple. prototipos es una forma hacer que ciertos elementos sean interactuables Y lo haces usando disparadores y acciones. Un disparador es algo que hace un usuario, haciendo clic en algo, desplazándose hacia algo, presionando una tecla Una acción es algo que ocurre en respuesta a un disparador. Entonces, comencemos creando o convirtiendo nuestras dos barras laterales en un componente. Entonces, para hacer eso, seleccionaremos ambos. De hecho, vamos a arrastrarlos fuera de ese marco. Y cambiemos el nombre de esto a expandido, y cambiemos el nombre de esto a colapsado. Ahora, seleccione ambos. Y vamos a subir aquí en la barra lateral y crear un conjunto de componentes. ¿Bien? Entonces cuando hagamos eso, Figma creará un componente con estos dos elementos como variantes ¿Bien? Cambiemos el nombre del componente a la barra lateral, y con él seleccionado, cambiemos el nombre de esta propiedad haciendo doble clic para estado. Por supuesto, puedes cambiarle el nombre a lo que quieras. Entonces ahora tenemos una barra lateral con dos estados. Se expandió y colapsó. Entonces, si vuelvo a este marco aquí, puedo ir a mis bienes. Puedo ir a bienes locales y puedo arrastrar esa barra lateral aquí mismo. Y esto es, por supuesto, una instancia. Es una copia de mi componente original. Pero con los seleccionados, puedo subir muy fácilmente hasta aquí y seleccionar el estado que quiero. Entonces esta es la expandida, pero puedo cambiar fácilmente a la colapsada y viceversa. Ahora, vamos a crear la animación que haga que este cambio sea más fluido. Entonces volveremos al componente principal, y presionaremos Mayús E. Eso va a alternar entre el modo prototipo y el modo de diseño. También puedes hacer este cambio haciendo clic en estos dos botones aquí en la barra lateral. Ahora, una vez que estemos dentro del modo prototipo, necesitamos seleccionar el disparador, ¿verdad? Entonces, ¿qué va a pasar que va a desencadenar esa animación? Bueno, digamos, cuando hacemos clic en el enlace de colapso, quiero que esta barra lateral cambie a la versión colapsada, ¿de acuerdo? Así que con el cursor de mi ratón. Voy a pasar el cursor sobre el signo más aquí, hacer clic y arrastrar al marco Ahora, eso va a crear una interacción, ¿verdad? Entonces el disparador está al hacer clic cuando hago clic en este botón. La acción es que cambio al estado colapsado, y luego puedo elegir la animación. Entonces, para que esta sea una animación muy fluida, vamos a elegir Smart animate. Y Smart animate básicamente mirará cómo está un elemento en el estado A, y luego mira cómo está ese mismo elemento en el estado B. Entonces ve las diferencias, y crea una animación para el cambio en la propiedad, ¿verdad Entonces, por ejemplo, si el elemento si el mismo elemento es largo es, digamos, más ancho en el estado A y es más corto en el estado B, el smart animate anima la propiedad width, Va a encoger el elemento. Se va a animar el cambio en ese ancho. Entonces vamos a elegir Smart animate. Para curva, vamos a ir con suave, y vamos a mantener la duración de 800 milisegundos Ahora, hagamos lo contrario. Entonces cuando estoy en el estado de colapso y quiero volver al estado expandido, bien, voy a crear otra interacción, y esto también va a ser al click, y cambiamos a expandido y mismas propiedades, smart animate, suave 800 milisegundos Bien. Así que ahora, hagamos esto un poco más pequeño, y seleccionemos la instancia aquí y vamos a centrarla. Y volviendo al modo prototipo, agreguemos un punto de inicio de flujo, y de hecho puedes ver esto aquí mismo. Esto sólo va a marcar este marco como flujo uno. Entonces cuando presiono Mayús y espacio, eso va a jugar flujo uno. Entonces ahí está mi barra lateral. Y ahora cuando golpeo colapso, las cosas cambian, ¿verdad? Pasa de la versión expandida a la versión colapsada. Y luego viceversa, si le pego a esto, va de colapsado a expandido. Y puedo jugar con esto tanto como quiera. Pero es una animación muy suave. El logo también cambia. Observe aquí. El logo cambia de esa parte a esa parte porque se les llama igual, ¿verdad? Y Smart Animate mira los nombres de las capas. Entonces porque puse el nombre de ambas capas logo, anima el cambio entre ellas. ¿Qué tan fácil es eso? Y por supuesto, puedes, ya sabes, jugar con las diferentes propiedades de animación aquí. Puedes hacer doble clic en cualquiera de estos fideos, y, ya sabes, puedes cambiar, por ejemplo, la curva entre, ya sabes, suave a rápido, digamos. Va a ser una flexibilización ligeramente diferente. Cambiemos esto a rápido. Así que ahora cambia el espacio, y la animación se verá ligeramente diferente. Y eso es todo, de veras. Así es como puedes diseñar y animar una barra lateral plegable en Ahora, solo asegúrate para que esto funcione, las dos versiones de la barra lateral necesitan ser variantes dentro de un conjunto de componentes, y eso permite que todo el sistema de prototipado funcione correctamente Entonces con eso dicho, por favor únase a mí en la siguiente lección para la conclusión y algunas reflexiones finales. 7. Conclusión y reflexiones finales: 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, y no puedo esperar a verte en la siguiente. Entonces, ¿qué debes hacer a continuación? Bueno, te agradecería que te tomaras un momento y dejaras una reseña para esta clase. Realmente me ayuda a crear mejores clases en el futuro, y tus comentarios son súper importantes. Uh, también, siéntete libre de revisar mi perfil para ver mis otras clases de FigMa. Uno de ellos está dedicado 100% al diseño automático Figma, y tiene muchos ejemplos y asignaciones del mundo real Así que asegúrate de revisar esa. También dirijo un canal de YouTube donde comparto contenido sobre diseño web con enfoque en Figma. También puedes ponerte en contacto conmigo a través de las redes sociales habituales. Encontrarás enlaces en mi página de perfil. Y con eso dicho, es hora de que me firme. Muchas gracias de nuevo por verte y deseando verte en mi próxima clase. Adiós por ahora.