Crea símbolos complejos boceto en Sketch: consejos y trucos

1. Introducción: Hola, soy Karen, y soy diseñadora de productos en Panorama Education. He sido diseñador profesional desde hace más de 10 años, y he diseñado una variedad de experiencias digitales, incluyendo APS móviles, sitios web y aplicaciones Web. También he impartido otras clases de habilidad share sobre ti ex en el pasado, usando Photoshopped como mi herramienta de elección. Pero desde entonces, me convertí completamente a usar sketch, y me ha encantado aprender a usar símbolos para optimizar realmente mi proceso de diseño. En esta clase, voy a mostrar cómo puedes crear símbolos realmente poderosos para diseñar mawr de manera eficiente y consistente. Te voy a guiar a través de la construcción de diferentes componentes. El uso de símbolos complejos hará una variedad de botones, una barra de navegación y un componente móvil versátil. También te compartiré muchos consejos y trucos que he aprendido en el camino para tu proyecto de clase . Me gustaría que crearan un conjunto de símbolos complejos. Puedes o seguirme conmigo y recrear esos ejemplos o probar los tuyos. Empecemos 2. Introducción a los símbolos de botones: En esta primera lección, te voy a guiar por cómo crear un símbolo de botón simple y luego también crearé un par de otras variaciones para botones más complejos usando símbolos anidados. Vamos a saltar justo en empezar con un con la creación de nuestro primer símbolo de botón. Entonces lo primero que voy a hacer es subir a insertar oveja y voy a usar un rectángulo redondeado para mi botón para poder seguir adelante y dibujar cualquier tamaño que quiera. Te voy a hacer de 1 30 por 36 de alto, y luego puedes peinarlo de cualquier manera que quieras también religioso simplemente deshacerte de la frontera y eligiendo a Phil, uh, uh, entonces yo quiero. Se agrega una capa de texto para la etiqueta de botón se llamaba esa etiqueta. Mételo en el medio. Ahora todo lo que necesito hacer es seleccionar las capas de eso. Quiero crear el símbolo con, y puedo hacerlo arrastrando. O puede simplemente seleccionarlos aquí en el panel de capas y luego hacer clic en crear símbolo. Llamemos a este botón como para que eso sea súper fácil de crear. Ah, símbolo muy sencillo. Y lo que puedo hacer ahora es que soy capaz de cambiar esta etiqueta para decir lo que quiera. Entonces si esto es tal vez inscríbase lo que queramos que sea el botón, um entonces puedo duplicar el botón y hacer que diga cualquier otra cosa. Entonces tal vez quiero esto, Um no sólo digo crear conteo. También tengo la capacidad de arrastrar eso, pero en ser es grande o pequeño es lo quiero. Digamos que quiero un putting similar haga algo así. Entonces, uh, esto es realmente beneficioso como hablamos antes, porque en tu app o sitio web, muchas veces tienes botones estandarizados que quieres poder usar. Y esto es tan fácil de ir y agarrar, y no tienes que recrear este símbolo ¿Ese botón una y otra vez y preocúpate Oh, tengo el tamaño pensado correcto? ¿ Tengo el derecho pero en color o forma o tamaño er, radio de esquina. Pero después, entonces, uh, para llevar esto al siguiente nivel, Lo que también somos capaces de hacer es hacer que este botón funcione un poco más duro para nosotros. Entonces digamos que tenemos este estándar pero de estilo con su misma forma en el mismo textil. Pero queremos cambiar el color del fondo porque tenemos quizá dos o tres colores de botones que estamos usando en nuestro sistema de diseño. Entonces, lo que podemos hacer es usar en realidad símbolos para cambiar el color de fondo de este botón. Entonces vamos a saltar en cómo podemos empezar con eso. Está bien, Así que si hago doble clic en mi botón, voy a saltar. Esto va a la página de símbolos, y este es el símbolo de botón puro en sí. Entonces si vuelvo así esto ha devuelto dos instancia, estos aire solo instancias de ese símbolo en sí y está bien, así que voy a entrar aquí. Entonces lo que quiero hacer ahora es crear pequeñas muestras de color de un par de colores que quiero usar para botones, y luego los vamos a crear en símbolos para que podamos hacer esto muy fácilmente. Simplemente subimos a dar forma al rectángulo, y voy a dibujarlo. Realmente no importa lo grande que sea la plaza. Podría ser un pequeño Puede ser literalmente uno o dos píxeles si quieres que sea, pero para nuestros propósitos lo hará un poco más grande. Um, y voy a usar el color de fondo. Acabo de hacerlo, y voy a duplicar eso y escoger un par de colores más para nosotros. Muy bien, Así que digamos que tenemos estos tres colores en nuestro sistema. Ahora, lo que quiero hacer es crear estos en símbolos. Entonces, aunque dibujé esto en la página de símbolos, estos no son en realidad símbolos. Son solo una capa de forma, y se puede ver la diferencia esto. Pero en tiene este pequeño ícono aquí mismo que es rosa. Eso significa que se trata de una simple cosita que etiquetan en estos aires. Apenas el rectángulo se da forma a sí mismos. Entonces al igual que hicimos con un botón, me voy Teoh, haga clic en uno de los cuadrados de color y haga clic en crear símbolo. Entonces ahora una cosa que, um eso es realmente útil cuando estás creando símbolos que están relacionados o son del mismo tamaño o vas a estar usándolos de la misma manera. Lo que podemos hacer para la convención de nomenclatura es en realidad el prefijo creado. Entonces aquí, solo llamemos a este color y luego si usamos la contralga y esto es azul. Um, agregar esta Barra inclinada en realidad va a Agrupar estos símbolos que todos se llaman así para que sean realmente fáciles de encontrar y para una vez que lleguemos a las anulaciones simples, va a ser realmente fácil para que cambies. Entonces voy a decir, OK, tú Ahora, esta es mi instancia de mi Este es mi símbolo real por aquí. Esta es sólo la instancia de la misma. Voy a hacer lo mismo con los otros dos colores, Así que color contrasta azulado y más slash Ajanta. De acuerdo, así que tengo mis tres colores sólo para que puedas ver las cosas un poco mejor. Sólo los alinearemos Muy bien otra vez. Estas son las instancias. Entonces finjamos que esos no están ahí. Amplía un poco. Muy bien, entonces ahora lo que queremos dio está en este dentro de este símbolo de botón, queremos agregar una instancia de uno de estos colores. Entonces me voy a ir. Puedes o bien ir a insertar y recoger símbolos utilizados para hacer tienes, Pero recientemente agregaron esto a la interfaz para boceto. Entonces ahora puedes ver, tengo esta sección de color aquí mismo, porque eso es lo que usamos es nuestro pequeño prefijo. Y tengo mis tres Platillos juntos. Si no hiciéramos esto y sólo los necesitábamos Azul, Magenta , azulado aparecerían en esta primera esta primera lista, que una vez que tienes muchos símbolos que empieza a ponerse realmente desordenado. Por lo que realmente me gusta hacer esto bien desde el principio. Está bien, Así que voy a escoger, Vamos a escoger Teal, y voy a colocar esa instancia de símbolo justo dentro de este símbolo, y luego la voy a arrastrar para que se llene y sólo quiero reorganizar las capas para que mi etiqueta obviamente para que podamos verlo. Muy bien, así que ahora si te acuerdas, usamos una forma de rectángulo redondeada aquí para que puedas ver eso por aquí. Ojalá, um Y al colocar esto, perdemos aquello. Entonces lo que queremos dio es realmente crear una máscara. Entonces tenemos nuestro símbolo y tenemos nuestro fondo de botón. Lo que voy a hacer es seleccionar esos click derecho y elegir máscara, y así eso sólo va a preservar esa bonita esquina redondeada que tenemos en nuestro botón Muy bien, Así que ahora, por alguna razón, cuando tú hacer una máscara, lo agrupa en una carpeta pequeña. Para que puedas sacar esto si quieres, o simplemente puedes dejarlo. Um, déjalo aquí y podría decir simplemente extractor de fondo solo para mantener mi panel de capas agradable y conocer. Um, está bien, así que ahora tenemos este año, volvamos a la instancia de nuestro botón. También puedes ver porque cambiamos lo simple en sí que cambió ese color azulado. Pero ahora ¿qué pasa cuando hacemos click en una instancia? Tenemos esta nueva opción en nuestro panel de anulación que muestra color. Y si hago clic aquí, también vemos que tengo los tres colores que acabamos de crear, un símbolo para elegir. Y tan fácil es que somos capaces de intercambiar eso. Dio cualquier color que quiera y en contra de él está en Lee, incluyendo lo que esto hace es que incluye símbolos del mismo tamaño o dimensiones porque esos son probablemente lo que vas a estar intercambiando. Así que ten eso en cuenta y lo cubriremos de nuevo un poco más tarde. en esta clase. De acuerdo, así que una cosa a saber de nuestro, um nuestro panel de anulación aquí es que esto se llama colores. Último trato. Así es esto. Pero este, realidad estamos usando el azul. Entonces lo que queremos hacer es hacer que esto sobre su panel sea un poco más fácil de leer. Entonces si vuelvo al símbolo, todo lo que está haciendo es tirando del nombre del símbolo por aquí para que puedas nombrar a esto lo que quieras . Entonces solo voy a llamar a este color por ahora y luego si vuelvo aquí ahora, sólo va a decir fuego de color, que eso sólo haga las cosas un poco más fáciles. Pero eso es todo. Y entonces ahora puedes volver a usar este botón. Se puede sólo con certeza, pero en se puede decir lo que quiero llamar a esto. Se trata de una señal de salida. Se puede redimensionar de cualquier manera, y yo diré que éste es magenta uh, así que realmente, realmente fácil y de una gran manera de reutilizar botones realmente simplemente con una máscara de color 3. Simbolos anudados y anulaciones de anillas: Está bien. Entonces lo siguiente que queremos cubrir es que queremos realmente subir la complejidad de nuestro símbolo de botones un poco de nuevo agregando un icono, y esto va a crear lo que se llama símbolo anidado. Entonces lo primero que quieres hacer es tirar de mis gráficos que quiero usar para mis símbolos de icono . Y voy a ir insertar imagen y luego sólo seleccionar mis tres iconos en mi escritorio. Y luego aquí vamos, Extiende la boca. También puedes simplemente arrastrar cualquier imagen PNG, Ajay Pagan spg directamente a tu boceto, nuestra pizarra si quieres hacer eso también. Entonces, igual que hicimos con nuestros símbolos de color con todas las muestras, queremos simplemente seguir adelante y crear cada uno de estos iconos en un símbolo. Vamos a subir aquí y luego también al igual que hicimos con nuestros colores, íbamos a crear un prefijo y luego usar la barra trasera para poder agrupar estos diferentes iconos juntos. Entonces llámalo a ese. Descarga Paul, este borra y le llamaremos favoritos. Está bien. Y entonces si voy aquí, puedo ver todos mis iconos muy bien agrupados. Entonces ahora queremos hacer es hacer doble click en uno de nuestros símbolos y nos va a saltar a la página más simple. Y entonces sólo voy a arrastrar estos un poco más juntos para que sea más fácil para nosotros ver todo. Puedes reorganizar esta página de la forma que quieras. Realmente no importa. Bocetos tipo de arrulla arbitrariamente cosas en la página de símbolos. Muy bien, entonces ahora tenemos nuestros tres iconos, Um, y en realidad queremos usarlos en blanco en lugar de negro. Entonces lo primero que quiero hacer es simplemente cambiar el color de relleno para que sea blanco. Entonces, solo sigue adelante y haz eso, y te darás cuenta de que ahora no puedo ver mis iconos, lo cual es un poco molesto. Entonces ah, una forma en la que solo podemos hacer esto más fácil de ver es seleccionada las tres tablas de arte y queremos añadir un color de fondo. Así que solo escoge un gris solo para que puedas verlos y luego solo asegúrate de que no has incluido exportación comprobada e incluyendo instancias, porque si tienes esos revisados, va a incluir el gris, y nosotros no quiero eso. Simplemente queremos facilitarnos el ver esos símbolos blancos. De acuerdo, a continuación, lo que queremos hacer es crear otro símbolo de botón s O que tenemos uno con sólo la etiqueta, y luego tenemos uno con el ícono y la etiqueta. Entonces porque ya tengo todo listo, solo voy a duplicar este botón. Y porque ahora tengo dos que se llaman igual. No queremos eso. Así que vamos rápido en este tablero de arte y puedo renombrar fácilmente nuestros puertos en cualquier momento. Entonces es otra cosa saber que si crees que lo estropeaste porque nombras mal algo o si llamaste, um, uno de estos iconos en lugar de icono, puedes cambiar fácilmente cualquiera de esos. Entonces eso es realmente bonito. Ahora lo que quiero hacer es hacer doble clic en el panel de capas, y voy a usar el botón como prefijo, y voy a llamar a éste sólo icono. Y luego si voy aparece CIA, tener icono de botón y botón. Solo agreguemos, um, un nombre primario para ese otro botón solo para que consiga que esos se agrupen. Eso es un buen boceto de higiene. Ahí mismo. Um, está bien, ahora tenemos nuestra etiqueta. Tenemos nuestros iconos creados. Entonces vamos a insertar Icahn en nuestro símbolo, y puedes colocarlo de todos modos, donde quieras. Está bien. Um, la otra cosa que queremos hacer es sólo por lo simple en sí. Yo quiero tipo de mantener sobre la costura palmaditas a la izquierda y a la derecha para que eso sea un poco más limpio. Entonces voy a arrastrar esto sobre eso por ahí, hacer lo mismo mis antecedentes, sólo así de buenos. De acuerdo, entonces ahora tenemos, um, etiqueta y nuestro botón. Entonces lo otro que hicimos con nuestro símbolo de color es si ven por aquí, um, cambiamos el nombre del símbolo para ayudar con las anulaciones. Y quiero hacer lo mismo por el ícono porque no siempre vamos a estar usando este, um, este nombre. Entonces solo voy a llamar a ese ícono. Entonces ahora que me permitan si voy por aquí, sólo voy a borrar estos porque no los necesitamos. Si inserto una instancia de mi símbolo de icono que puedo ver por aquí. Tengo icono. Tengo etiqueta en un color, y eso está realmente bien organizado aquí. Otra cosa a saber es que puedes decidir cómo quieres que estas cosas aparezcan en el panel de anulación, por cierto, que están organizadas en las capas de símbolos. Entonces ahora mismo tenemos el ícono primero y luego la etiqueta, que tipo de tiene sentido porque así son, ya sabes, sabes, si lo estás leyendo de izquierda a derecha. Pero si decidimos que queremos que la etiqueta aparezca primero vuelvo. Ahora tengo etiqueta de botón que el icono, luego el fondo polar. Bueno, es sólo algo saber que puedo ayudar. Nos resulta un poco más fácil de analizar. De acuerdo, um, otra cosa que quiero cubrir con la sobresubida es si vuelvo a hacer clic en este tablero de arte , tengo estas opciones por aquí para gestionar mis anulaciones. Y en realidad, puedo decidir si quiero permitir anulaciones o no, lo cual en realidad es algo genial. Esto es algo más nuevo Ese boceto hizo bastante recientemente Así que si quiero Teoh permitir Anular, entonces puedo decidir si quiero tener el icono de texto tres en el color o si quiero decir, Oh, te han cambiado estas cosas, pero no esto Y eso sólo se va a actualizar aquí. Pronto fuera, ese fondo de color se ha ido. Entonces al igual que otra pieza extra, um, eso puede ayudarte realmente a manipular estos símbolos de cualquier manera que eso tenga sentido para ti. Muy bien, vuelta al icono de nuestro inspector. No puedo abotonar. Volvamos a saltar a la instancia. Y ahora digamos que queremos cambiar esta etiqueta para que se añada a tus favoritos. Y luego vamos a estirar esta hora y verás que aquí está pasando algo de hueso. Eso primero. Nuestro gráfico se está estirando realmente, lo cual definitivamente no queremos. Y luego nos estamos poniendo como, un espaciado raro que ocurre cuando estiramos este botón. Entonces vamos a arreglar esto usando símbolo, re dimensionamiento y restricciones. Entonces vamos a mostrarte cómo hacer eso. Um, lo primero que quería decirte es que en realidad es, así que si salto a mi página de símbolos y vamos a estar hablando de esta sección de re dimensionamiento aquí, pero lo que no es realmente útil es tener que probar algo aquí y luego saltó hacia atrás y ver qué hacía. Me parece realmente, muy útil dedo del pie, en realidad. Toma esta instancia o cualquier instancia, solo voy a copiar esto. Ve a mi página de símbolos, y luego simplemente voy a pegar no dentro del inicio del símbolo del símbolo, sino simplemente pégalo aquí. Y luego en cualquier momento que cambie algo sobre esto, uh, el símbolo en sí, las instancias van a actualizar. Y puedo ver cómo son mis cambios, Uh, cómo se propagan para que yo creo que eso es arte realmente útil. Entonces y también estoy déjame simplemente cambiar el color de esto. Simplemente eso es un poco más fácil de seguir junto con. Esto es un símbolo. Esta es la instancia. Entonces lo primero que quiero hacer es abordar esta cosa gráfica estirada que está pasando aquí. Entonces si hago clic en mi ícono ahora, Rachel, pedir re dimensionamiento lo que quiero hacer es tenerlo tamaño fijo. Entonces viste ese salto ahí mismo. Ahí vamos, los míos. Comprobarlo. Se estira si lo reviso. Um, lo que eso está haciendo esencialmente es mantener la altura en el con de los iconos para que no te den ese extraño estiramiento. De esa manera, si decido hacer mi botón más alto, por alguna razón, tampoco es buscar. Está bien, así que esa es la primera parte. Um , sigue haciendo algún espaciado raro cuando muevo mi botón. Y así lo que quiero este botón a Dio es realmente mantener la cantidad de relleno aquí entre el borde del botón y el borde del icono. Entonces lo que puedo hacer es usar este anclaje por aquí, y quiero decir, me gustaría que esta cosa se quedara a la izquierda donde lo tenía. Y así de nuevo, se puede ver que saltó por ahí, Um y sí. Entonces también quiero mantener el espacio entre el icono y la etiqueta. Por lo que si hago clic en esto, también puedo decir Pinned Edge. Ahora te darás cuenta de que saltó un poco, pero sigue dándome espacio flexible entre el ícono en la etiqueta cuando estoy cuando estiro esto. Y así si vuelvo a esta, um, etiqueta de texto, etiqueta de texto, lo que está pasando es que actualmente está en una alineación central, y son todo lo que necesito hacer es cambiar esto Sigo siendo alineado a la izquierda. Respuesta. Ahora, ahí vamos. Ahora eso se queda exactamente donde lo quiero. Y puedo tener esto. Puedo decir cómo sabes lo grande que tan grande. Yo quiero que el botón sea de esa manera. Está bien, para ver esto en acción una vez más. Vamos a hacer placa esta instancia y usemos, um, um, el ícono de descarga. Llamemos a esto pero en descarga y cambiarlo a Azul Y ahí vamos. Entonces ahora puedo tener mucha más libertad sobre com Qué grande quiero que mi botón sea y mantener esa bonita agrupación del ícono en y el texto en sí. Impresionante. Entonces llamo a esta prueba de estrés el símbolo porque lo que esencialmente estás haciendo es decir, Vale, ¿cómo puedo romper este símbolo? Um, ¿cómo puedo si me muevo? Si estoy decidiendo que quiero que mi botón sea más alto por alguna razón, se mantiene centrado? Al igual que la forma en que quería Teoh o muchas veces en realidad no estamos cambiando botones esa manera, así que verás que esto viene con otros tipos de símbolos que podrías estar estirando o alterando vertical u horizontalmente. Genial. Entonces eso solo cubrió un par de cosas diferentes. Entonces aprendimos a los kurdos. Botón sencillo. Aprendimos a cambiar el color de fondo de un símbolo de botón, y no tendremos en un icono para que tengas mucha flexibilidad con tus propios botones . 4. Consejos para anular vs. múltiples símbolos: Lo último que quiero cubrir sobre nuestros símbolos de botones es ayudarte a decidir cuándo tiene sentido usar un símbolo y aprovechar todas las anulaciones. Entonces obtienes ah, mucho de una simple versus cuándo realmente tiene sentido crear símbolos únicos y tener más de uno para algo así como lo hicimos con este botón aquí, donde tenemos nuestra primaria pero en y también tenemos nuestra botón con el ícono. Por lo que estos símbolos separan el aire lo hicimos como parte de la clase para mostrarte que sabes cómo puedes construir sobre ellos. Pero hay formas en que podría haber usado el botón con Icahn, um, y luego simplemente opté por encender y apagar tal vez el icono para ciertos botones. Entonces déjame hablar un poco más de eso. El motivo por el que elegí dedo del pie tener visas símbolos separados es que es mucho más fácil ver uno. ¿ Qué tipos de botones tienes en tu sistema y a ello es realmente las anulaciones pueden ponerse poco complicadas una vez que empieza a ponerse, um, pero hay más cosas que puedes manipular. Hay mucho más que recordar. Si alguien no está familiarizado en tu equipo de diseño o alguien más que podría estar usando tu archivo no está tan familiarizado con las anulaciones o sabe qué opciones elegir si puedo ser, Ya sabes, no No estás recibiendo tanto bang por tu buck por ello . Y en realidad no, um realmente no duele nada al tener más de un símbolo. Ah, en cuanto a botones, lo otro que realmente puedo mostrarte rápido es que hay momentos en los que no lo hace. Tampoco tiene sentido. Teoh. Usa un símbolo cuando estamos teniendo que cambiar demasiado para que funcione. Entonces déjame caminar por una cosa. Digamos que nosotros en nuestro sistema de diseño, tenemos, ah, ah, botón blanco con, tal vez como una gran línea arriba. Entonces lo que quiero hacer para demostrar esto es que voy a hacer en un duplicado este cuadrado de color . Voy a llamar a este color Blanco, y sólo voy a cambiar ese dedo blanco. Entonces, si estoy usando un poco de chatarra, ésta, por ejemplo de ella, um, si elijo es para White. Obviamente, no voy a poder leer mi etiqueta porque eso es blanco. Por lo que evito en blanco. Um, puedo hacer este truco de enmascaramiento de color. O podría ser como con texto, o también puede usar textil. Entonces hay formas de evitarlo. Pero, ya sabes, si tengo un blanco pero va a ser sobre un fondo blanco, probablemente quiero usar algún tipo de borde o sombra o algo alrededor de ese botón para que en realidad pudieras ver el botón. Um, y eso sólo se va a poner realmente complicado si estoy tratando de hacer todo eso dentro de este botón. Entonces cambiemos esto de nuevo a Magenta. Y en este caso, lo que quiero hacer es volver a duplicar este botón, y voy a llamar a este botón secundario. Y entonces lo que voy a dio es, um podría dejar esto y simplemente cambiar la instancia de aquí en remolque. Blanco, si quiero Teoh, también puedo elegir no usar el símbolo de color y en realidad solo usar este fondo original , que es solo una forma espere s para que pueda hacer cualquiera de estos. Simplemente dejaré esto con el símbolo encendido por ahora y luego puedo tomar mi etiqueta, y probablemente quisieron ser algún tipo de gris oscuro. Y ahora, vamos a añadir también, um, en realidad, ¿sabes qué? Porque quiero agregar un borde. Sólo voy a matar a esta, uh, esta máscara desenmascarada por completo eso y encontrada. Entonces ahora voy a añadir esta frontera aquí, Um, algo un poco más tarde. Está bien, así que ahora tengo este estilo diferente, y si vuelvo aquí afuera, tú solo Mira, tenemos un botón regular, tenemos un botón con ícono, y ahora secundario aquí. Y tal vez esto es algo así como cerrar sesión. Um, por lo que el vecino un estilo diferente. Entonces en mi sistema, podría tener algo que es, um, um, color un botón con un ícono y luego un botón blanco. También podrías ponerte un poco complicado o dos. Podrías tener un botón blanco con un ícono. Hay muchas cosas con las que puedes jugar. Pero por qué me parece realmente útil de nuevo el dedo del pie tienen diferentes símbolos es porque esto también me va a permitir, Teoh, solo deja muy claro que estos airean los tipos de botones que tengo dentro de mi sistema de diseño tú también podría hacer que el caso para um no permitir que se cambie el fondo, como el simple botón si realmente quieres afinar en decir como siempre que uses esta primaria. Pero en su siempre azul, siempre que uses un icono. Pero en su siempre azulado um, algo así. Y luego no hay una especie de discrepancias. Alguien no puede interpretar eso de ninguna otra manera. Esperemos que eso te ayude en términos de por qué crear un simple cuándo debes crear múltiples y cubriendo las diferentes formas de manipular este botón usando anulaciones. 5. Crear un símbolo de barra de navegación compleja: en esta siguiente lección, te voy a mostrar cómo crear un componente de barra de navegación usando múltiples nido y símbolos . Entonces vamos a tomar lo que aprendimos de los ejemplos de botones y aplicar algunas de esas técnicas en esta barra de navegación, pero hacerlo de alguna manera, en realidad estamos combinando mucho más Platillos juntos. Entonces en este ejemplo, realmente vamos a recrear la barra de navegación desde el sitio web de Skill Shire. Entonces tengo una captura de pantalla de ella justo aquí, y luego voy a saltar a la página de símbolos. Entonces lo que he hecho para especie de preparación es que acabo de lanzar juntos símbolos para las diversas partes de la barra de navegación. Entonces estos son bastante simples. Ahí hay un par de iconos avatar, barra de búsqueda. El logo es solo un mapa de bits o una imagen, un botón y luego nuestro enlace de navegación. Y así vamos a hablar más de este en el segundo porque esta es la única pieza que no terminé del todo por armar esta barra de navegación. Entonces vamos a saltar de nuevo rápido. Dos ahora son barra aquí y vamos a acercar un poco. Muy bien, entonces tenemos dos estilos diferentes. En son dos variaciones diferentes de los enlaces de navegación aquí. Entonces tenemos algo como el hogar. Somos solo un enlace de texto y luego navegar tiene este pequeño icono de flecha aquí. Entonces lo que voy a dio es usar un símbolo y mostrarte cómo puedes usar ese símbolo para ambos enlaces de navegación dentro. Sin la flecha, podrías elegir hacer dos símbolos separados. Pero para este caso, ya que es bastante fácil sólo ser, esencialmente podemos encender y apagar este símbolo que eso es sólo una mejor opción. Entonces vamos a saltar atrás y vamos a acercarnos a esta duela. Los buscadores de etiquetas pueden ver eso mejor. De acuerdo, lo primero que voy a hacer es jag mi tablero de arte y hacerlo un poco más grande para que podamos caber. Um, una cosa que quiero llamar es si por alguna razón este ajustar el contenido en el redimensionamiento se comprueba antes de dibujar antes de alterar una tabla de arte o estirarla, probablemente quieras desmarcar esa causa hace tipo de cosas funky. Um, siempre lo desmarco porque no quiero que las cosas se muevan. Yo quiero decidir a dónde los estoy colocando, así que mientras esté sin control, eso es bueno ir. Muy bien, vamos a entrar en símbolos y vamos. Teoh, agarra la flecha. Ten eso ahí dentro. Y eso es todo. Por lo que ahora nunca son etiqueta incluye euro. Y si hago click en esto, puedes ver que tengo ese símbolo aquí mismo. Está bien. Lo siguiente que quiero dio es que vamos Teoh, Um, vamos a probar rápidamente este símbolo. Entonces insertemos en instancia de este enlace de navegación. Está bien, aquí. Y oh, he creado sólo una capa de fondo aquí en este momento. Es gris. Realmente no puedo ver eso muy bien. Entonces hagámoslo blanco, y entonces podremos ver qué está pasando. Se puede especie de sólo ver el borde del del del símbolo. Por lo que ahora uno de nuestros artículos de navegación eran las cejas. Entonces vamos a hacer eso. Mostraremos cómo funciona eso, y nuestra pequeña flecha simplemente se mueve con ella. Entonces eso es genial. Pero, ¿qué pasa cuando lo estiro? Muy bien, así que esta es la prueba de estrés otra vez. Algunos viendo mis cejas. El texto se mueve y mi flecha se estira, y no queremos que pase ninguna de esas cosas. Entonces lo que queremos hacer con nuestra etiqueta de texto es que queremos anclar eso al borde. Y con nuestra, uh, flecha, vengo, sólo queremos seguir adelante y arreglar ese tamaño. A ver. Genial. Y así eso lo arregló muy bien. Y luego puedes como que simplemente escojas ayuda. ¿ Cómo? ¿ Por qué quieres que tan simple se base en el texto y no necesitamos tener esa caja blanca encendida. Podemos apagar eso más tarde. Eso no es gran cosa. Um, pero por ahora, vamos a seguir adelante y dejar eso. Está bien, así que vamos a alejar un poco. Entonces el siguiente dicho que queremos hacer es dibujar nuestro símbolo contenedor para nuestra barra de navegación. Entonces esto es esencialmente sólo el fondo en el propio bar. Entonces voy a insertar un rectángulo de forma, y voy a dibujar forma aquí, quitar el borde, quitar el borde, hacer que este blanco apunte. 01 cosa que no mencioné, um, algo que encuentro realmente útil. Por lo que esto es sólo una captura de pantalla son un límite de mapa de bits. Copia esto. Así que pon eso de nuevo a 100 um, pegarlo aquí, y luego puedo ver de qué tamaño realmente necesito para hacer esto. Por lo que este mide 59 de altura. Vamos a seguir adelante y hacer este 60 para tener un número par. Y este es el 11 72. Entonces haremos que ese 11 72. Y entonces tenemos esta pequeña sombra en el fondo. Entonces, solo agreguemos que dije solo un par de cosas aquí. Es un poco más alto. Ahí vamos. OK? Carta blewitt Todavía acaba de poner ese atuendo en 10. Realmente no importa. Um, está bien, así que ahora tenemos la forma que está coincidiendo con nuestro color y estilo de navegación. Ahora, vamos a seguir adelante y crear un símbolo de esto, y podemos simplemente llamarlo tan lejos, acuerdo? Ahora es la cantidad por un segundo. Y aquí está mi siesta real. Nuestro símbolo. Esto es sólo una instancia de ello. Entonces me voy a deshacer de eso. Voy a mover esa captura de pantalla y volver a entrar. Muy bien, Ahora empecemos a compilar o ensamblar esta barra de naff. Entonces, ¿qué? ¿ Vamos a dio otra vez? Estamos en la página de símbolos. Estos son los símbolos reales mismos. Entonces no queremos usar thes. Queremos utilizar instancias de ellas. Entonces, como este tipo mejor es una instancia de eso. Entonces podemos usar eso. Um, empecemos con el logo. Vamos a ir como a la izquierda por derecha. Entonces pon eso ahí. Podemos tipo de finura y volver a decidir dónde deben jugar las cosas o el diseño. Podemos hacerlo en un segundo. También solo voy a bloquear esta capa de rectángulo, porque cada vez que pase el ratón sobre esto, se pone azul. Y a veces eso me fastidia y simplemente lo encierro, y luego no hace eso. Muy bien, Ahora, aquí está una de mis instancias del enlace de soltera, así que solo voy a tirar de eso, y luego solo voy a duplicar esto va a volver y cambiar esas cosas después. Um Y entonces por aquí, tengo dos instancias más. Sí. Ya sabes, había otro ahí, igual que yo no lo dupliqué dos veces. Arias. Hay dos más, Entonces quiero insertar mi barra de búsqueda de repente agarrar eso aquí mismo. Y por último, ahí estaban yo lo agarré. Mi icono de notificaciones, mi avatar y mi botón. Está bien, así que esas son todas las piezas que se pueden ver ahí. Um, obviamente, tenemos que volver atrás y solo retocar algunas de estas cosas. Entonces ahora lo que queremos hacer es esto en casa. Por lo que cambié el dedo del pie de etiqueta, casa, navegar y talleres. Está bien. Ahora, sólo quiero estirar eso. Por lo que ahora puedes ver casa y talleres. No queremos usar la flecha. Entonces lo que puedo hacer es en el panel de anulación, existe la opción de hacer clic, y generalmente esto me muestra diferentes símbolos que puedo cambiar entre y volverán a mostrar símbolos de las mismas dimensiones. Pero este es el único de este tamaño, por lo que sólo tiene el uno. Pero también tenemos esta opción de seleccionar ninguno, y todo lo que hace es apagarlo. Entonces eso es genial. Eso es exactamente lo que necesitamos. Ahora puedo empezar esto y hacerlo un poco más pequeño. Voy a moverme, navegar por los talleres más, y voy a hacer lo mismo para los talleres en un selecto Ninguno. Simplemente arrastra eso, pero más pequeño. Perfecto. Ahora pienso línea contable. Um, puedo alinear cosas así y simplemente usar, um, usar estas guías o puedo simplemente poner cosas Oh, esto también puedo tomar esta imagen y ponerla en el símbolo y luego simplemente alinear las cosas. Pero creo que esto va a funcionar bien para nosotros. Rápidamente. Entonces iremos a navegar. ¿ Qué es eso más en casa? Mm. Habilidad compartir chicas bajas. Eso estuvo bastante cerca. Está bien, ahí está. Ahora saltemos por aquí. Nuestro cerebro está prácticamente en el mismo lugar. Um, somos Avatar. Se acabó. De acuerdo, así que esto son las clases va a cambiar eso. Nos vamos a deshacer de la flecha. Haces eso más pequeño. Son mis clases. Espooks. Ahora nos vamos a alinear por aquí y enseñar hecho, bien, en Lo último que queremos dio es que esta barra de búsqueda es en realidad un poco más ancha, así que podemos seguir adelante y hacer eso. Y a medida que estiro eso, ya verás que aún no he establecido las restricciones. Um, así que subirme a mi símbolo original. Voy a dar clic en el ícono del tamaño de pick seguro, y voy a hacer este pin a la izquierda. Ahí vamos. Entonces ahora cuando yo si cambio el tamaño de ese símbolo que se levantó en eso? Aquí vamos, es por eso que el estrés lo probamos. Y vas a estar eso a la izquierda también. Está bien, perfecto. Entonces realmente no importa lo grande que hagamos eso. Está bien, Así que eso es que tenemos nuestro nab están ensamblados. Ah, la única cosa que tenemos que cambiar. Ve premium. Muy bien, ahora estamos todos arreglados. Um, está bien. Entonces en la siguiente lección, vamos a caminar por re dimensionando todo este conjunto adentro muy juntos. 6. Resizing, limitaciones y organización: está bien, Acabamos de armar nuestra barra de navegación con todos nuestros símbolos y todas nuestras piezas. Esta es nuestra captura de pantalla donde apenas estábamos referenciando. Entonces yo estoy todo listo con esto. En realidad sólo voy a seguir adelante y borrar eso. Ahora, lo que queremos hacer es asegurarnos de que esta barra de navegación sea capaz de escalar correctamente. Lo que voy a hacer es ir adelante y en cierta instancia de esta barra de naff en mi archivo e. Y ahora, igual que todo lo demás, voy a seguir adelante y estirar, y sin embargo pocas restricciones tienen alguna nueva defectos. Muy bien, vamos a sumergirnos y ver qué necesitamos abordar. ¿ De acuerdo? Por lo que justo del bate, nuestro logo se está machacando. Entonces vamos a subir aquí, vamos a decir, arreglar tamaño. Y también queremos anclar eso a la izquierda, porque todo básicamente, cómo funciona esta barra ahora tan horrible cosa otra vez es todo lo de la izquierda es quiere pegarse a la izquierda. Todo de la derecha quiere esencialmente mantenerse en la derecha, alineado. Y entonces el espacio en el medio apenas cambia a medida que avanzas. Está bien, entonces vamos a clavar eso ahí. Cuatro en enlaces de navegación también iban a anclar todos estos, por lo que deberían volver a reaparecer en el lugar correcto. Eso es perfecto. Entonces estamos consiguiendo el ahorcamiento de esto. Se acabó de hacer lo mismo una y otra vez. Um, una vez que entiendas cómo necesita funcionar tu símbolo, vamos a dio pinning con la barra de búsqueda y del otro lado. Sigamos adelante y asegurémonos de que este avatar se mantenga fijo que los días de iconos fijos. Y ahora estos dos son contras. En lugar de anclar a la izquierda, queremos anclar estos a la derecha. Aquí vamos. Um, voy a volver a eso en un segundo. También asegurémonos de que estos estén anclados a la derecha. Genial. Y OK, así que siguen ocurriendo un par de cosas de este lado. Entonces hemos clavado las cosas a la derecha, así que se están quedando, pero todavía no están actuando exactamente de la manera que queremos que lo hagan. Entonces cosas que estos tipos airean espaciando un poco más de lo que queríamos. Y nuestro botón está cambiando de tamaño cuando en realidad no queremos que eso suceda. Entonces lo que vamos a dio es empezar por el lado derecho y dar click en mi botón y lo que quiero hacer porque ya hemos llamado a esto, pero en exactamente lo que queremos y este nombre no va a cambiar, voy a seguir adelante y arreglar el tamaño horizontalmente. ¿ Y viste cómo eso acaba de estallar? Sí, así que eso es lo que quiero. También quiero fijar esto al borde derecho. Y así ahora eso debería mantener ese botón debe permanecer en el mismo lugar y permanecer igual con porque no queremos que eso se variables. Y ahora, mi, mi avatar y mi icono de notificación, también se están quedando. Entonces ahí están haciendo exactamente lo que yo quería hacer. La otra cosa es, vamos a ver, déjame entrar en este símbolo original por un segundo, y luego voy a cambiar este color para que sea una especie de gris más oscuro para que veas lo que está pasando cuando estiramos esto. Muy bien ahora, también se puede ver que estos enlaces de duende también se están estirando cuando no queremos eso también. Y de nuevo, al igual que hicimos con el botón. Porque ya hemos renombrado a Thies por lo que queremos usar y no vamos a estar cambiando estos en ninguna parte. En realidad queremos arreglar el con de estos también. Entonces lo voy a hacer aquí, y lo voy a hacer aquí y eso saltó atrás. Por lo que ahora esos también están en el mismo lugar, quedándose igual. Y quiero saltar por aquí y hacer lo mismo por estos otros enlaces para mí. Enfriar. Ven a esos aires. Apenas cerca juntos. Um, apaguemos esta capa gris. Nosotros solo lo esconderé. Ahí vamos. Entonces, nuevo, mientras me estoy estirando, nada se cambia. Uh, estos tipos se van a quedar igual el tiempo en que no quisiéramos usar el fijo con para símbolos como este. En realidad no querríamos usarlo si estuviéramos cambiando los nombres de estas etiquetas sobre la marcha. Entonces si iba a cambiar estos, um, um, en mi diseño y no tenerlo como parte de este símbolo más grande, entonces voy a querer a Teoh. Asegúrate de que no arregle el tamaño porque se podría ver aquí casa es más corta que talleres. Queremos que sea sencillo poder flexionar cuando lo necesitemos para acomodar para qué? Estamos mostrando. Muy bien, Lo último que probablemente notamos es que mi barra de búsqueda está cambiando de tamaño, así que eso es cada vez más ancho y más corto, y eso está bien aquí. Ese es en realidad un patrón común en muchos sitios web donde la barra de búsqueda simplemente se hará más amplia y tipo de acomodarse a la pantalla con. Entonces creo que eso está totalmente bien. Podemos hacer eso. Y luego en algún momento, si esto se hizo más pequeño, lo que quisiéramos que hiciera es no dejar realmente que esta superposición. Um, pero podríamos dimensionar eso aquí si quisiéramos a Teoh. Si quisieras arreglar el con de esto o escoger un específico con, digamos que en realidad solo queríamos que fuera, um, ya sabes, ser es por qué necesitaba ser Podríamos arreglar el con y luego no nos quedaríamos. Pero creo que en este caso es totalmente fino dedo del pie. Que esto sea un poco más ancho, y no tenemos que arreglar el tamaño, y entonces eso se puede estirar tan totalmente hasta ti. Muy bien, vamos a cubrir también alguna organización en este expediente. De acuerdo, cuando haga clic en esta instancia de la barra de navegación, veamos en mi panel de ovarios esto es una especie de locura. Aquí está pasando mucho, y es un poco inmanejable de analizar. Entonces hablemos de cómo podemos trabajar para limpiar todo esto. Esa es esta organización comienza con el símbolo en sí. Entonces si hago clic en esta barra de siesta consiguiendo que Lizzie vuelva a entrar, esto es mostrando todas las capas en los símbolos que tengo dentro de este símbolo principal me , no nuestro símbolo encendido. Y estos se ordenan de la forma en que los acabo de crear. Pero puedo ver que si hago clic en la instancia del símbolo thes, van a estar en el mismo orden que están listados en mi panel de capas. Entonces porque Button se está mostrando primero por aquí, es porque es lo primero en esta capa. Entonces lo que quiero hacer es limpiar un poco esto. Esencialmente quiero Teoh, ver si hay algo que quiera renombrar y volver a organizar en el símbolo. Siempre me resulta más fácil organizar mis capas de izquierda a derecha. Por lo que aquí mi escultura lugar sería primero. Así que vamos a reorganizar algunas de estas piezas simplemente haciendo clic y arrastrando um, también Ahora tengo todos mis enlaces de soltera, que en el panel de símbolos allí nombraron Knave Link. Entonces déjame solo mover éste hacia arriba para que podamos verlo. Um, y voy a dar click en la instancia, así que vamos por aquí. Um, ahora puedo verlo dice Knave Ling aquí y inocentes novela aquí dentro. Pero lo que no está haciendo no es súper útil, porque no estoy seguro de cuál es el enlace este. Entonces hay un par de cosas que podría dio Pero lo que mis preferencias principales es hacer click en esto y otra vez porque ya hemos configurado y personalizado estos símbolos dentro de esta barra de navegación. Y no vamos a estar cambiando el nombre de estos símbolos. Uh, con cada instancia como ésta se van a quedar lo que son. De hecho voy a renombrar este enlace de soltera aquí a casa y luego me dejaré agarrar carouse, y solo voy a poner estos en orden talleres. De acuerdo, así que empecemos con esos tres. Ahora, cuando haga clic en la instancia, ve por aquí. Veo casa navegar talleres. Entonces eso está en el orden. También me muestra, um, qué enlace de navegación estoy hablando. También los puedes ver rondando sobre. resalta. Pero siento que es mucho más fácil de saber. Oh, estoy hablando de casa aquí mismo, y te voy a mostrar algo que es, Ah, un poco más tarde, cuando estamos viendo diferentes estados de la navegación que esto va a ser camino para nosotros hacer eso. Muy bien, en realidad volvamos a este logo por un segundo. Entonces si miro en esto sobre su panel veo logo, me deja tener la opción de una anulación. ¿ Necesito una anulación para el logo? Es muy probable que no lo haga No creo en este caso, no creo que eso vaya a cambiar en absoluto. Simplemente va a estar ahí y estar estático así que podría tener la opción de simplemente deshacerme de este logotipo por completo en cuanto a la anulación. Entonces, ¿recuerdas cuando hicimos clic al hacer clic en el tablero de arte símbolo, has gestionado anulaciones y tienes la opción de permitir anulaciones todas juntas. Pero lo que puedo hacer es entrar individualmente aquí y decir logo. Desmarcarlo. Parece el mapa de bits. También tengo que desmarcar porque este tipo está maquillado. Yo abro esto. Significa compuesto de sólo un poco. Mapa. Vuelve aquí. Desmarque eso también. Y ahora si vuelvo de nuevo a mi instancia, ese logotipo acababa de desaparecer del panel de anulación. Y así creo que eso ayuda con poder limpiarlo como algo nuevo. Ese boceto se hace bastante recientemente, y creo que eso es una gran mejora. Está bien, si no quería que Teoh ocultara algo del todo, Um, hay otra cosa de la que quiero hablar aquí con, Um, Um, así que hay etiqueta de flecha, así que navegar tiene el flecha encendida y mostrando aquí el mapa de bits. Entonces cuando tienes iconos que son mapas de bits, que son esencialmente solo un tipo de archivo de imagen de sonido J pay Gershom, puedes optar por intercambiar esta imagen por cualquier otra cosa. Y a veces eso es útil. Way en realidad probablemente haría eso con nuestro avatar, pero aquí, estos iconos no van a cambiar. Entonces dejemos eso en paz y yo voy aquí, en realidad, déjame de nuevo. Tienes que hacer clic en el símbolo Mundo del arte juntos ahora, así que me salté mi logo. Um, tengo casa. Tengo navegación, y aquí están los mapas de bits. Tienes que mirar hacia abajo la lista de cosas. Por lo que tengo el símbolo de navegación. Ten la flecha dentro de ella, que sí quiero mantener encendido el símbolo de flecha, porque así es como lo enciendo y apago. Pero el propio mapa de bits. No necesito poder cambiar eso para poder desmarcar eso aquí y ahora. Volvamos atrás y bajo navegar. Ya no tienen ese, um, um, ese mapa de bits de flecha apareciendo. Entonces eso es bueno. Eso nos está ayudando. Muy bien, Talleres luce bien. Y luego sigamos reorganizando en el orden. Por lo que siguiente sería nuestra barra de búsqueda. Volvamos aquí. Aquí está nuestra búsqueda de eso ya lleva nombre para nosotros. Entonces eso es bueno. Pero veamos aquí para que pueda ver, um, icono Buscar, icono Buscar, que también puedo renombrar. Si me gustaría hacer para realmente cambiar el nombre de estas cosas, voy a necesitar volver a mi símbolo original, así que realmente no necesito preocuparme por eso ahora mismo. No es un gran trato Pero también tengo aquí el mapa de bits para ese icono de lupa de búsqueda . Y de nuevo, no voy a estar intercambiando eso. Así que vamos a hacer clic en el Nash Bar Art Board, Desplácese hacia abajo barra de búsqueda. Ahí está ese mapa de bits. Desmarque eso genial. Y entonces vamos por aquí. Por lo que ahora quiero continuar junto con mi siguiente enlace de siesta. Por lo que después de la barra de búsqueda, he enseñado y luego tengo mis clases. Y a continuación tengo mi icono de notificaciones. Tengo mi avatar y por último, mi botón para que pueda cambiar el nombre de cualquiera de estas capas si creo que es útil, Um, tal vez quiera simplemente mantener Button llamado su, pero también podría nombrar un go premium, pero si quiero. Pero creo que mantenerlo simple aquí está totalmente bien para las notificaciones de barra inclinada de Icahn. A lo mejor podríamos simplemente simplificar esto diciendo notificaciones. Um, así que ahí está. Y mientras estamos en esto, volvamos a nuestros derechos. Vemos que tenemos el mapa de bits aquí otra vez. Entonces vamos por aquí y apaguemos de nuevo esos mapas de bits que no necesitamos. Entonces tenemos la flecha otra vez y enseñamos deshacernos de esas clases y navegaciones. Aquí tienes ese otro mapa de bits y también tengo uno para mi avatar. Entonces vamos a tener un ese por un segundo. Voy a dar clic aquí atrás para que pueda ver rápidamente. Esto sigue siendo un montón de cosas por mirar, y sigue siendo un poco desordenado, pero es una enorme mejora con respecto a lo que teníamos antes. Um, así que tengo a casa. Navegar talleres, barra de búsqueda, enseñar mis gafas. Notificaciones, Avatar. Ahora, para este avatar, tengo la opción de elegir imagen. Lo que podría dio es que podría haber un momento en el que realmente quiero intercambiar esta imagen dependiendo de dónde esté usando esta barra de navegación. Por lo que esto es esencialmente mostrar al usuario que ha iniciado sesión. En este caso, soy yo. Si estaba haciendo un simulacro para un usuario diferente y era importante intercambiar este gráfico , podría simplemente elegir cualquier imagen de mi computadora y usar eso para intercambiar, y lo va a enmascarar de la misma manera. Entonces simplemente cambiará esa imagen, y puedes hacerlo tantas veces como quieras. Puedes hacer eso con cada instancia del símbolo si quieres. Um, para que podamos Podemos elegir dejar que tú puedas. Además, Si crees que quieres a Teoh, quizá quieras dedo del pie déjalo o no. Déjalo. Siempre puedes cambiar de opinión después y desmarcar esas cosas porque es un simple encendido y apagado. Muy bien, entonces tenemos nuestro botón. Entonces esto se ve mucho mejor de lo que tenía. Otra cosa que me parece útil es que hay otras cosas que puedes, uh que puedes hacer para diferenciar de los nombres de los símbolos. que también pudiéramos hacer click en casa, por ejemplo, y podríamos hacer algo como, um, sólo como poner algo delante de él. Como si hiciera pequeños guiones, solo te mostraré cómo podría verse esto. Um, vuelve a hacer clic aquí, y eso a veces ayuda con, como, encontrar cuáles son los mil millones de símbolos versus, como, ¿cuáles son las cosas dentro de esos? Otra cosa que es que es bastante agradable de hacer es usar un emoji. Entonces si hubiera algo que representara una navegación y quisieras solo usar un emoji aquí, eso podría ser realmente útil, solo para, como, más seco. Rápidamente dedo del pie. Ah, aquí es donde necesito ir de pie para cambiar esas anulaciones. Está bien, les voy a quitar estos por ahora, pero sólo un poquito Un pequeño consejo para ti. Por lo que tenemos ahora están lejos todos configurados. Todos armados. Tenemos nuestro panel de anulación muy bien organizado lo mejor que podamos, um, um, son las capas están muy bien organizadas por aquí a su vez. Y ahora puedo usar esto donde quiera, y lo arreglamos para poder escalar adecuadamente. Um, si estoy usando esta barra de Nath en diferentes tamaños de pantalla o diferentes tamaños, nuestras tablas súper fáciles. Ahora, sólo para decir OK, este tipo necesita ser un poco más amplio. Tiene que ser un poco más corto. Podría estar usándolo para mostrarse como un simulacro de iPad o algo así. Yo soy para que pueda hacer todo eso. Y sólo una nota también. En ocasiones cuando vas de escritorio a móvil, sobre todo en la tableta. Um, a veces tienes diferentes opciones disponibles en cuanto a la navegación, no ves cada cosa. Entonces si había algo que no quisieras mostrar, , digamos que no mostramos el culo. Oops, digamos que no mostramos el pero en la experiencia móvil o por alguna razón, solo podemos subir aquí y podemos apagar ese botón. Por lo que aún tenemos todo esto estas formas de manipular este símbolo. Está bien, Hay una cosa más que quiero mostrarles sobre esta barra de navegación, así que saltemos a eso en el siguiente video. 7. Más consejos para la revocación de símbolos: Hablemos de una cosa más que podemos hacer con nuestros símbolos de la barra de navegación tan a menudo tiempo cuando tienes un sitio web, queremos mostrar en qué página se encuentra el usuario actualmente. Entonces eso es algo que podríamos llamar ya sea un estado seleccionado o un estado activo. Y en este momento sólo tenemos especie de este único estado de tipo del default. Entonces agreguemos un estado activo para que podamos alternar entre para que si estoy diseñando, digamos la página del taller en mi archivo puedo cambiar ese símbolo para mostrar que eso es página de navegación temática que entre Muy bien, vamos a empezar por duplicando esta etiqueta ahora. Y ahora de nuevo, lo primero que quiero dio ojos asegurarme de que cambie el nombre de los símbolos. Entonces ahí tienen un nombre único desde una novela ing activa y voy a cambiar este es aquello. También tiene esa estructura arbórea Teoh de bóveda. Muy bien ahora, puedo hacer cualquier cosa que quiera en términos de ¿cómo quiero representar visualmente el estado activo? Um, así que empecemos con sólo cambiar el color frontal para ser un poco más oscuro Pero eso no es eso no es demasiada diferencia, sobre todo si no somos como cambiar el color. Pero digamos que quiero agregar tal vez un poco de subyacente aquí. Ese es un patrón que hemos visto muchas veces. Entonces si quiero tener una pequeña barra de color aquí abajo, voy a necesitar hacer este símbolo más alto. Ahora. Realmente no quiero hacerlo desde aquí. Eso sólo va a estirar las cosas. Hagamos el símbolo base en sí un poco más alto. Eso sólo nos va a hacer las cosas más fáciles. Um, está bien, Todo lo que quiero hacer es tomar talleres, por ejemplo, y cambiemos el símbolo que estamos usando. Estamos usando el valor predeterminado en este momento, como se puede ver aquí, y cambiémoslo al estado activo. Entonces mientras estoy construyendo el símbolo, puedo ver lo que está pasando. También me dejo también sólo gritar. Yo quiero hacer esto no desde el símbolo de la barra de navegación, sino en realidad desde la instancia de la misma. Muy bien, entonces somos talleres divertidos que está pasando aquí. Es increíble. T caída. Cambiemos ese dedo activo Ahora Lo que pasó aquí tengo esta etiqueta de duende esencialmente revertida hacia atrás. Entonces si vuelvo al default, estas son las anulaciones que ya he hecho. Pero debido a que estoy usando un símbolo diferente para este activo, voy a tener que una especie de rehacer lo que ya he hecho. Entonces puedo ir aquí y cambiar estos talleres de Teoh, y voy a necesitar deshacerme de mi flecha. Está bien, así que ahí está. Entonces es una especie de cosa que es un poco molesto, pero es bastante rápido. Eso se puede hacer bastante rápido. Está bien, entonces aquí vamos. Ahora, estoy usando esto. Y si cambio el color en esto, puedo ver que eso va a actualizarse ahí. Pero no en el símbolo original. Volveremos a cambiar. De acuerdo, entonces ahora cuando haces clic en esto, quiero decir, quiero estirar este tablero de arte para que en realidad toque el fondo. Podría probar por aquí. ¿ A qué altura necesitamos que sea esta cosa? A lo mejor 42 pixeles. Parece que Deshacer eso. Entonces si estiré esto y tengo esto codificado 42 ahora, no quiero que esto suceda. Entonces recuerda cómo hablamos de ajustar el contenido en redimensionar al comprobar esto. Esta es una de las razones por las que así vamos a deshacer eso. Voy a desmarcar ajustar contenido. Y ahora sólo voy a golpear esto para ser de 42 píxeles. Díselo todo ahora mismo este tipo se mudó hacia arriba. Entonces digamos que queremos esto. ¿ Todo bien? Entonces queríamos ir en realidad y fijar eso hasta el borde. Por lo que de nuevo, podrías ser símbolos de prueba de estrés todo el tiempo en cualquier momento. Por lo que siempre tipo de asegurarte de que tu que estás revisando esas cosas a medida que vas para que no tengas consecuencias no deseadas. ¿ Todo bien? Ahora todo lo que quiero hacer es dibujar un poco de forma aquí. Haz una cajita. Voy a tener que esto sea azul. Sí, Lotus un poco más corto de esto hacia abajo. De acuerdo, Ahora esto es pato aparecen. Y lo que también quiero llamar es cuando estoy cambiando el tamaño de esto. Ahora, si vuelvo aquí dos talleres, me sigue dando la opción de volver a cambiar eso. Ah, pero ahora a ver, ya no tengo la opción de dar click en el activo. Y eso se debe a que las anulaciones en tu panel solo van a elegir símbolos del mismo tamaño. Por lo que realmente queremos tomar este símbolo predeterminado y puede obtener la misma altura que el otro . Alguien desclip, ajusta contenido. Voy a arrastrar eso hacia abajo. Vamos a fijar esto a la parte superior, sólo por ese bien. También voy a hacer este año, Hillary. Y ahora si hago clic aquí, volver a talleres ahora, también tengo esa opción para activo. Ahí vamos. Está bien, pero haciendo algo un poco funky. Entonces tal vez o queremos subir esto para que podamos jugar con eso. Por lo que solo depende donde quieras ese bar. ¿ Lo quieres sentado encima de esa capa gris? ¿ Quieres por encima de esa capa gris? Vamos a tenerlo por aquí, acuerdo? Otra cosa es que va a ser tan amplia como tu propio símbolo. Entonces aquí mismo tenemos ya sabes, tenemos 88 píxeles de ancho, Así que vamos a ver qué pasa si cambio el tamaño de este símbolo. Si eso se va a quedar. Sí. Entonces eso es mantenerse fijo, porque aquí arriba, arreglamos el tamaño. Si no arreglamos el tamaño aquí y luego si estamos escalando esa barra va a cambiar de tamaño, que es lo que no queremos que suceda, así que nos aseguraremos de que eso esté arreglado. Impresionante. Entonces eso fue realmente fácil. Um, así que ahora tengo la opción aquí para decir que realmente quiero usar el valor predeterminado. A lo mejor quiero cambiar de casa y usar el acto de Estado aquí. Ahora otra vez. Ya habíamos cambiado los nombres en las etiquetas y todo, así que voy a tener que volver a hacer eso y decir, Sin flecha. ¿ Y qué es lo último que está pasando aquí? Por lo que este símbolo apagado, por alguna razón, seguía siendo ancho. Entonces, sólo vamos a traer eso. OK, y ahí vamos. Ahora hagamos una cosa más. Volvamos a copiar esto. Entonces, ¿quieres volver a crear todo con copiar esta instancia? Espalda caliente, Teoh, nuestra página principal. Ahora de nuevo, esta es solo la captura de pantalla. Entonces ocultemos eso. Y vamos a pegar son barra de knave aquí. Entonces ahora se puede ver un poco más en contexto. Obviamente, eso no es una página completa. Yo soy pero se puede ver esto aquí. Entonces vamos a alternar por defecto. Ahí vamos. A lo mejor quiero dar clic en mis clases y cambiar eso al acto de Estado otra vez. Y una vez que vuelvas a nombrar estas cosas y te deshagas de los símbolos como quieras, eso se va a quedar. Entonces ahora, si tomo mis clases y vuelvo al default Y ahora otra vez, si vuelvo a activo, eso va a mantener sólo porque ya he cambiado las anulaciones ahí. Entonces ahí vamos. Esa es una barra de navegación bonita, um, flexible y personalizable. 8. Usar un símbolo básico para un componente modal compleja: en nuestro último ejemplo, quiero mostrarles cómo los símbolos complejos pueden permitirle ser flexibles con sus diseños mientras aún se adhieren a su sistema de diseño y siendo capaces de mantener la consistencia. También voy a explicar cuándo hay momentos en los que no deberías usar símbolos para ciertos componentes. Entonces hablemos de esto. Este es un componente móvil también conocido como pop up, y aquí tengo tres ejemplos de cómo podría usarse un motel dentro de un sistema de diseño. En este 1er 1 es más una confirmación, por lo que es sólo una especie de texto de algunos botones para que el usuario elija. En el segundo ejemplo, tengo un móvil crear cuenta, donde tenemos un formulario. Y en el tercer ejemplo, tenemos más de un móvil informativo que podría simplemente aparecer y permitir al usuario leer algo de información para luego descartar. Entonces a primera vista, realmente no parece que haya una manera de usar un símbolo complejo para lograr cada uno de estos tres diseños. Entonces, ¿crearías símbolos separados para cada uno de estos? En realidad no tienes a Teoh y yo personalmente no lo haría en este caso, Así que pasemos por esto y hablemos de por qué los símbolos funcionan maravillosamente para componentes que serán reutilizados una y otra vez, sobre todo cuando no estás lidiando con mucha variedad con esos componentes. Ahora, componente Motile es algo que estaríamos usando, probablemente una y otra vez. Pero hay alguna variación dentro de cada uno de estos modelos. En ocasiones tus diseños sí necesitan esa variedad, pero sigues apegándote a un sistema para que estos modelos no parezcan que sean de sistemas completamente diferentes. Aquí hay algunos elementos comunes, y esa es la clave. El clave es encontrar agua los puntos comunes entre las variaciones y centrar en eso. Entonces echemos un vistazo a estos tres modelos. Cada uno de ellos tiene un título y un ex para descartar el punto el componente móvil. Algunos de ellos tienen botones, algunos de ellos no. Algunos de ellos tienen más de un cuerpo de texto, y éste no. Esta es una forma. Esta tiene una imagen, por lo que hay similitudes. Pero también hay diferencias. Lo que puedo hacer aquí es crear un símbolo complejo como base y luego construir sobre él para crear estas diferentes configuraciones. Queremos que el contenedor del móvil en ciertos elementos dentro de eso sea estandarizado pero permitiendo que la flexibilidad tenga algún contenido para ser incluido dentro de ese contenedor. Entonces en este ejemplo, donde tengo esta imagen, podría tener una imagen completamente diferente. Podría tener mucho texto. Podría querer incluir botones en esto a veces y a veces no con formularios. Hay mucha variación que vienen con una forma. No siempre se va a presentar de esta manera. Y luego con modelos de confirmación, a veces hay más opciones. A veces hay más texto. Todavía hay cierta flexibilidad y variación que viene con cada uno de estos estilos. Entonces saltemos al símbolo base que he creado. Saltar a mi página de símbolos. Ahora puedes ver aquí tengo un par de cosas pasando. Um, ya he creado algunos símbolos para nuestros botones. Tengo algunos colores. Tengo algunos de estos campos de texto y luego tengo nuestro símbolo móvil en sí. Entonces lo que tengo aquí es que junté esos elementos comunes de los que hablamos. Tengo nuestro título. Tengo un cuadro de texto. Tengo nuestros botones y el ícono X. Por lo que quiero guiarte a través de cómo podemos usar este símbolo base de una serie de maneras diferentes para crear todas estas diferentes variaciones. Este 1er 1 es el más estrechamente alineado con el símbolo base en sí. Esencialmente tiene todas las piezas por las que acabamos de caminar. Y si hago clic en el símbolo móvil, mira el panel de anulación. Todo lo que he hecho es básicamente canjear el texto aquí añadido etiquetas por nuestros botones, y eso es todo. Es una simple es que tengo mucha flexibilidad aquí con la cantidad de texto, porque la forma en que nuestro Simbolista configuró, podemos escalarlo tan alto como sea necesario. También podemos escalarlo como por qué tiene que ser Y esas cosas, uh, uh, simplemente se arreglan a sí mismas. Por lo que ya he configurado esas restricciones y re dimensionamiento. No voy a pasar por esa parte ahora mismo porque lo hemos cubierto en lecciones anteriores . Entonces si necesitas un refresco, sólo tienes que volver atrás y ver los otros videos de particularmente la barra de navegación en este siguiente móvil. Voy a abrir este grupo así que tengo aquí el modelo base, y si escondo esta otra sección. Lo que esencialmente he hecho es que he usado las mismas piezas que este 1er 1 pero notarás que aquí no hay texto. En realidad puedo ver. Ahí está que me quiere mostrar que hay algo ahí. Entonces hablemos de eso y anula. Básicamente, yo simplemente no tengo nada en el campo de texto ahí, y un pequeño hackeo para que esto suceda es que verás que tengo un espacio. Voy a borrar ese espacio y luego verás cuadro de texto móvil aquí. Entonces eso es alinearse con lo que hay en el símbolo base. Pero para poder, si no quiero ese texto ahí, todo lo que necesito hacer es pinchar aquí y agregar un click de espacio. El bar espaciador golpeó retorno y se ha ido, así que esa es una manera realmente bonita de permitir más flexibilidad allí. También tengo los botones, así que está bien. Y entonces tengo en esta forma elementos. Estoy usando esos símbolos que te mostré desde la página Símbolos para estos para estos formularios de campo de texto , y los he agrupado juntos, por lo que este sigue siendo un símbolo complejo o anidado. Pero todo esto no es un símbolo en la tercera opción aquí, déjame volver a abrir esto. Déjame ocultar esto en este ejemplo tengo texto y tengo un poco más de texto pero tengo por aquí Pero aquí no tenemos los botones. Y así si recuerdas cómo somos capaces de elegir qué botón estaban usando puedo hablar de toggle entre primaria y secundaria porque ya tengo esos símbolos arriba. Pero aquí estoy diciendo ninguno porque no quiero ningún botón en este otra vez. Eso nos da la flexibilidad. Entonces lo que puedo dio es para los propósitos de mi simulacro. Si necesito incluir una imagen aquí, puedo hacer lo que quiera. Si esta imagen es más alta de nuevo, puedo dar click en este móvil y podría estirar esto. A lo mejor este texto es más largo o más corto. A lo mejor esta imagen es más grande. Tengo toda la flexibilidad para hacer eso también. No, sólo porque estamos usando un símbolo base e incluso otros símbolos anidados dentro de esto no significa que necesites tomar cada uno de estos modelos y convertir esto en un símbolo que realmente no importa. Estábamos utilizando los bloques de construcción que estaban creando para tener consistencia dentro de nuestros diseños para poder utilizar las diferentes piezas. Pero no tiene sentido. No necesitamos reproducir todo este móvil específico o este móvil específico entero. Y esa es la belleza de esto. Este método también permite más flexibilidad más adelante, si hay otros tipos de modelos o configuraciones que quieres volver a crear, tenemos nuestra base aquí y eso es suficiente. Entonces eso nos hace empezar. Eso nos permite tener esa consistencia dentro de nuestro sistema de diseño. Por lo que nuestros botones siempre están en el mismo lugar. A veces sólo necesito uno. Pero en tal vez a veces no hay una X. Yo también puedo esconder eso . Pero en última instancia estoy obteniendo mucha flexibilidad y obteniendo mucho bang por mi dinero de este único símbolo basado. 9. Reflexiones finales: Espero que hayan encontrado estos tutoriales y consejos para ser útiles. Hay tantas formas en que puedes usar símbolos complejos, símbolos anidados y anulaciones para hacer que el diseño sea más rápido y eficiente. Hacer que los símbolos funcionen para ti es todo sobre el ensayo y el error. Entonces no tengas miedo de experimentar. Y si te quedas atascado, por favor no dudes en publicar preguntas aquí y yo mismo, tus compañeros de clase pueden ayudarte. Muchas gracias por tomar esta clase.