Criando símbolos complexos no Sketch: dicas e truques

1. Introdução: Oi, sou Karen, e sou designer de produtos na Panorama Education. Sou designer profissional há mais de 10 anos e desenvolvi uma variedade de experiências digitais, incluindo APS para dispositivos móveis, sites e aplicativos da Web. Eu também dei outras aulas de compartilhamento de habilidades em você ex no passado, usando Photoshopped como minha ferramenta de escolha. Mas desde então, eu me converti completamente para usar esboços, e eu adorei aprender a usar símbolos para realmente otimizar meu processo de design. Nesta aula, vou mostrar-lhe como você pode criar símbolos realmente poderosos para projetar mawr de forma eficiente e consistente. Vou guiar-te através da construção de componentes diferentes. Usando símbolos complexos fará uma variedade de botões, uma barra de navegação e um componente móvel versátil. Eu também vou compartilhar muitas dicas e truques que eu aprendi ao longo do caminho para o seu projeto de classe . Eu gostaria que você criasse um conjunto de símbolos complexos. Você pode seguir comigo e recriar esses exemplos ou tentar o seu próprio. Vamos começar 2. Primeiros passos com símbolos de botões: Nesta primeira lição, eu vou orientá-lo através de como criar um símbolo de botão simples e, em seguida, também irá criar algumas outras variações para botões mais complexos usando símbolos aninhados. Vamos começar com um com a criação do nosso primeiro símbolo de botão. Então a primeira coisa que eu vou fazer é subir para inserir ovelhas e eu vou usar um retângulo arredondado para o meu botão para que eu possa ir em frente e desenhar qualquer tamanho que eu quiser. Eu só vou fazer 1 30 por 36 de altura, e então você pode estilizá-lo de qualquer maneira que você quiser tão bem religioso simplesmente se livrando da fronteira e escolhendo Phil, uh, então eu quero. Adicionar uma camada de texto para o rótulo do botão foi chamado esse rótulo. Enfie no meio. Agora tudo que eu preciso fazer é selecionar as camadas disso. Eu quero criar o símbolo com, e eu posso fazer isso arrastando. Ou ele pode simplesmente selecioná-los aqui no painel de camadas e, em seguida, clicar em criar símbolo. Vamos chamar este botão como para que seja super fácil de criar. Símbolo muito simples. E o que eu posso fazer agora é que eu sou capaz de mudar este rótulo para dizer o que eu quiser. Então, se isso é talvez inscrever o que quisermos que o botão seja, hum, então eu posso duplicar o botão e fazer com que ele diga qualquer outra coisa. Então talvez eu queira isso, hum, eu não digo apenas criar contagem. Eu também tenho a capacidade de arrastar isso, mas em ser é grande ou pequeno é que eu quero. Digamos que eu quero uma colocação semelhante fazer algo assim. Então, uh, isso é realmente benéfico como falamos anteriormente, porque em seu aplicativo ou site, muitas vezes você tem botões padronizados que você quer ser capaz de usar. E isso é tão fácil de pegar, e você não tem que recriar esse símbolo. É aquele botão e se preocupar com Oh, eu tenho o tamanho certo? Eu tenho o direito, mas na cor ou forma ou tamanho er, raio de canto. Mas depois, para levar isso para o próximo nível, o que também somos capazes de fazer é fazer com que este botão funcione um pouco mais para nós. , para levar isso para o próximo nível, o Então, digamos que temos este padrão, mas estilo com a mesma forma no mesmo têxtil. Mas queremos mudar a cor do fundo porque temos talvez duas ou três cores de botões que estamos usando em nosso sistema de design. Então o que nós somos capazes de fazer é realmente usar símbolos para alterar a cor de fundo deste botão. Então vamos entrar em como podemos começar com isso. Tudo bem, então se eu clicar duas vezes no meu botão, eu vou pular. Isto vai para a página de símbolos, e este é o símbolo de botão puro em si. Então, se eu voltar para trás, isso retornou duas instâncias, estes ar apenas instâncias desse símbolo em si e tudo bem, então eu vou entrar aqui. Então o que eu quero fazer agora é criar pequenas amostras de cores de um par de cores que eu quero usar para botões, e então nós vamos criá-los em símbolos para que pudéssemos fazer isso realmente facilmente. Vamos até moldar o retângulo, e eu vou desenhá-lo. Não importa o quão grande é a praça. Pode ser um pequeno Pode ser literalmente um ou dois pixels se você quiser que seja, mas para nossos propósitos vai torná-lo um pouco maior. E eu vou usar a cor de fundo. Acabei de fazer, e vou duplicar isso e escolher outras cores para nós. Muito bem, digamos que temos estas três cores no nosso sistema. Agora, o que eu quero fazer é criar estes em símbolos. Então, mesmo que eu tenha desenhado isso na página de símbolos, estes não são realmente símbolos. Eles são apenas uma camada de forma, e você pode ver a diferença isso. Mas dentro tem este pequeno ícone aqui que é rosa. Isso significa que esta é uma coisinha simples que rotula neste ar. Apenas o retângulo se molda. Então, assim como fizemos com um botão, eu vou Teoh, clique em um dos quadrados de cores e clique em criar símbolo. Então agora uma coisa que, hum que é realmente útil quando você está criando símbolos que estão relacionados ou eles são do mesmo tamanho ou você vai usá-los da mesma maneira. O que podemos fazer para a convenção de nomenclatura é realmente criado prefixo. Então aqui, vamos chamar essa cor e então se usarmos a barra invertida e isso é azul. Hum, adicionar essa barra invertida está realmente indo para ele vai agrupar esses símbolos juntos que são todos nomeados assim para que eles são realmente fáceis para você encontrar e para uma vez que chegar a substituições simples, ele vai ser muito fácil para você trocar. Então eu vou dizer, OK, você Agora, este é o meu exemplo do meu Este é o meu verdadeiro símbolo aqui. Esta é apenas a instância disso. Vou fazer a mesma coisa com as outras duas cores, então, barra invertida e barra mais cheia Ajanta. Tudo bem, então eu tenho minhas três cores só para que você possa ver as coisas um pouco melhor. Vamos alinhá-los tudo bem de novo. Estas são as instâncias. Então vamos fingir que não estão lá. Amplie um pouco. Tudo bem, então agora o que queremos dificar está dentro deste símbolo de botão, queremos adicionar uma instância de uma dessas cores. Então, eu vou. Você pode ir para inserir e escolher símbolos usados para você tem, Mas eles recentemente adicionaram isso na interface para esboço. Então agora você pode ver, eu tenho esta seção de cores bem aqui, porque isso é o que usamos é o nosso pequeno prefixo. E tenho os meus três Pratos juntos. Se não fizéssemos isso e precisássemos deles Blue, Magenta, verde-azulado , eles apareceriam nesta primeira lista, que uma vez que você tem um monte de símbolos que começa a ficar realmente confuso. Então eu realmente gosto de fazer isso desde o início. Tudo bem, então eu vou escolher, vamos escolher Teal, e eu vou colocar essa instância de símbolo bem dentro deste símbolo, e então eu vou arrastá-lo para que ele preencha e eu só quero reorganizar as camadas para que minha gravadora, obviamente, para que possamos vê-lo. Tudo bem, agora se você se lembra, usamos uma forma de retângulo arredondado aqui para que você possa ver isso aqui. Com sorte, e colocando isso, perdemos aquilo. Então, o que queremos fazer é realmente criar uma máscara. Então temos o nosso símbolo e o fundo do botão. O que eu vou fazer é selecionar aqueles clique direito e escolher máscara, e isso vai apenas preservar esse canto arredondado agradável que temos em nosso botão Tudo bem, então agora, por alguma razão, quando você fazer uma máscara, ele agrupa em uma pequena pasta. Então você pode tirar isso se você quiser, ou você pode simplesmente deixá-lo. Hum, deixe aqui e eu poderia apenas dizer fundo do puxador só para manter meu painel de camadas agradável e se encontrar. Tudo bem, agora que temos este ano, vamos voltar à instância do nosso botão. Tudo bem, agora que temos este ano, Você também pode ver porque nós mudamos o simples em si que ele mudou essa cor de azul-petróleo. Mas agora o que acontece quando clicamos em uma instância? Temos essa nova opção em nosso painel de substituições que mostra cores. E se eu clicar aqui, também vemos que eu tenho as três cores que acabamos de criar, um símbolo para escolher. E tão fácil é que somos capazes de trocar isso. Dio qualquer cor que eu quero e contra ele é em Lee, incluindo o que isso faz é incluir símbolos do mesmo tamanho ou dimensões porque esses são provavelmente o que você vai estar trocando para fora. Então, tenha isso em mente e vamos cobrir isso de novo um pouco mais tarde. nesta classe. Tudo bem, então uma coisa a saber sobre o nosso painel de sobreposições aqui é que isto é chamado de cores. Último acordo. Então é isso. Mas este aqui, estamos usando azul. Então, o que queremos fazer é tornar isso em seu painel um pouco mais fácil de ler. Então, se eu voltar para o símbolo, tudo o que ele está fazendo é puxar o nome do símbolo aqui para que você possa nomear isso o que quiser . Então eu vou chamar essa cor por agora e então se eu voltar aqui agora, vai dizer disparando cor, então isso só torna as coisas um pouco mais fáceis. Mas é isso. E então você pode usar esse botão novamente. Você pode apenas com certeza, mas em você pode dizer o que eu quero chamar isso. É um sinal de saída. Você pode redimensioná-lo de qualquer maneira, e eu vou dizer que este é magenta uh, então realmente, muito fácil e de uma ótima maneira de reutilizar botões realmente simplesmente com uma máscara de cor 3. Symbols e sobreposições: Tudo bem. Então a próxima coisa que queremos cobrir é que queremos realmente aumentar a complexidade do nosso símbolo de botões um pouco novamente adicionando um ícone, e isso vai criar o que é chamado de símbolo aninhado. Então a primeira coisa que você quer fazer é puxar os meus gráficos que eu quero usar para meus símbolos de ícone . E eu vou inserir imagem e, em seguida, basta selecionar meus três ícones na minha área de trabalho. E aí vamos nós, Espalhe a boca. Você também pode simplesmente arrastar qualquer imagem PNG, Ajay Pagan spg direto para o seu esboço, nossa placa se você quiser fazer isso também. Então, assim como fizemos com nossos símbolos de cores com as amostras inteiras, queremos apenas ir em frente e criar cada um desses ícones em um símbolo. Vamos subir aqui e, em seguida, também como fizemos com nossas cores, vamos criar um prefixo e, em seguida, usar a barra traseira para ser capaz de agrupar esses ícones diferentes juntos. Então ligue para aquele. Baixe Paul, este exclui e chamaremos este favorito. Tudo bem. E então, se eu for aqui, eu posso ver todos os meus ícones bem agrupados. Então agora queremos fazer é clicar duas vezes em um dos nossos símbolos e vai saltar-nos para a página mais simples. E depois vou arrastar estes um pouco mais juntos para que seja mais fácil para nós vermos tudo. Você pode reorganizar esta página da forma que quiser. Realmente não importa. Esboços tipo de arbitrariamente plops coisas na página de símbolos. Certo, agora temos nossos três ícones, , e queremos usá-los em branco em vez de preto. Então a primeira coisa que eu quero fazer é apenas mudar a cor de preenchimento para ser branco. Então vá em frente e faça isso, e você vai notar que agora eu não posso ver meus ícones, que é um pouco irritante. Então ah, uma maneira que podemos apenas tornar isso mais fácil de ver é selecionado as três placas de arte e queremos adicionar uma cor de fundo. Então, basta escolher um cinza apenas para que você possa vê-los e, em seguida, apenas certifique-se de que você não incluiu exportação marcada e incluindo instâncias, porque se você tiver essas marcadas, ele irá incluir o cinza, e nós não Quero isso. Só queremos tornar mais fácil para nós ver esses símbolos brancos. Ok, seguir, o que nós queremos fazer é criar outro símbolo de botão s O que nós temos um com apenas o rótulo, e então nós temos um com o ícone e o rótulo. Então, como eu já tenho tudo configurado, eu vou apenas duplicar este botão. E porque agora eu tenho dois que são nomeados a mesma coisa. Nós não queremos isso. Então vamos rápido neste quadro de arte e eu posso facilmente renomear nossos portos a qualquer momento. Então, outra coisa é saber que se você acha que fez asneira porque você nomeou algo errado ou se você ligou um desses ícones em vez de ícone, você pode facilmente mudar qualquer um desses. Então, isso é muito bom. Agora o que eu quero fazer é clicar duas vezes no painel de camada, e eu vou usar botão como um prefixo, e eu vou chamar este único ícone. E então, se eu for aparecer na CIA, tenho botão e botão ícone. Vamos adicionar um nome primário para o outro botão só para que eu os junte. Isso é um bom esboço de higiene. Bem ali. Tudo bem, agora temos a nossa gravadora. Tudo bem, Temos nossos ícones criados. Então vamos inserir Icahn em nosso símbolo, e você pode colocar isso de qualquer maneira, onde quiser. Tudo bem. A outra coisa que queremos fazer é só pelo simples. Eu quero tipo de manter sobre a costura tapando na esquerda e na direita para fazer isso um pouco mais limpo. Então eu vou arrastar isso para lá, fazer a mesma coisa no meu passado, só que bom. Ok, então agora nós temos, hum, rótulo e nosso botão. Então a outra coisa que fizemos com nosso símbolo de cor é se você vê aqui, um, nós mudamos o nome do símbolo para ajudar com as substituições. E eu quero fazer a mesma coisa para o ícone porque nós nem sempre vamos usar este, hum, este nome. Então, vou ligar para esse ícone. Agora que isso me permite que eu vá até aqui, vou deletar isso porque não precisamos deles. Se eu inserir uma instância do meu símbolo de ícone que eu possa ver aqui. Eu tenho um ícone. Eu tenho rótulo em uma cor, e isso é muito bem organizado aqui. Outra coisa a saber é que você pode decidir como deseja que essas coisas apareçam no painel de substituições, a propósito, que elas estão organizadas nas camadas de símbolos. Então agora nós temos o ícone primeiro e depois o rótulo, que meio que faz sentido porque é assim que eles são, você sabe, se você está lendo da esquerda para a direita. Mas se decidirmos que queremos que o rótulo apareça primeiro, volto. Agora eu tenho rótulo do botão do que o ícone, em seguida, o polar de fundo. Bem, é apenas algo para saber que eu posso ajudar. Ficamos um pouco mais fáceis de analisar. Tudo bem, , uma outra coisa que eu quero cobrir com a ascensão é que se eu clicar neste quadro de arte novo, eu tenho essas opções aqui para gerenciar minhas substituições. E na verdade, eu posso decidir se eu quero permitir substituições ou não, o que é realmente legal. Esta é uma coisa mais recente que o esboço recentemente fez Então se eu quiser Teoh permitir Override, eu posso então decidir se eu quero ter o texto três ícone na cor ou se eu quero dizer, Oh, você mudou essas coisas, Mas não isso e isso só vai atualizar aqui. Logo fora, esse fundo de cor se foi. Assim como uma outra peça extra, , que pode ajudar a manipular esses símbolos de qualquer forma que faça sentido para você. Certo, volta ao ícone do inspetor. Não consigo abotoar. Vamos voltar para a instância. E agora vamos dizer que queremos alterar esse rótulo para ser adicionado aos seus favoritos. E então vamos esticar esta hora e você verá que algumas coisas de osso estão acontecendo aqui. Eso primeiro. Nosso gráfico está ficando muito esticado, o que definitivamente não queremos. E então estamos ficando, tipo, espaçamento estranho acontecendo quando esticamos este botão. Então vamos corrigir isso usando símbolo, re dimensionamento e restrições. Então vamos mostrar-lhe como fazer isso. Hum, a primeira coisa que eu queria dizer é que na verdade é, então se eu saltar para a minha página de símbolos e nós vamos estar falando sobre esta seção de tamanho re aqui, mas o que não é realmente útil é ter que tentar algo aqui e, em seguida, saltou para trás e ver o que ele fez. Acho que é muito, muito útil, na verdade. Tome esta instância ou qualquer outra instância, eu vou apenas copiar isso. Vá para a minha página de símbolos, e então eu só vou colar não dentro da criação símbolo símbolo símbolo, mas apenas colá-lo aqui. E então sempre que eu mudar algo neste, uh, o símbolo em si, as instâncias vão atualizar. E eu posso ver como minhas mudanças são, uh, como eles se propagam para que eu acho que isso é realmente útil arte. Então, e eu também vou mudar a cor disso. Só que é um pouco mais fácil de acompanhar. Isto é um símbolo. Esta é a instância. Então a primeira coisa que eu quero fazer é abordar essa coisa gráfica elástica que está acontecendo aqui. Então, se eu clicar no meu ícone agora, Rachel, pedido re dimensionando o que eu quero fazer é tê-lo tamanho fixo. Então você viu aquele salto bem ali. Lá vamos nós, meu próprio. Verifica isso. Estica se eu verificar. Hum, o que isso está essencialmente fazendo é manter a altura no com os ícones para que você não tenha aquele alongamento estranho. Assim, se eu decidir fazer meu botão mais alto, por algum motivo, também não está procurando. Certo, então essa é a primeira parte. um Ainda está fazendoumespaçamento estranho quando mexo meu botão. E então o que eu quero este botão para Dio é realmente manter a quantidade de preenchimento aqui entre a borda do botão e a borda do ícone. Então o que eu posso fazer é usar esta fixação aqui, e eu quero dizer, que eu gostaria que esta coisa ficasse à esquerda onde eu estava. E então, novamente, você pode ver que pulou ali, hum e sim. Então eu também quero manter o espaço entre o ícone e o rótulo. Então, se eu clicar sobre isso, Eu também posso dizer Fixed Edge. Agora você vai notar que saltou um pouco, mas ainda está me dando espaço flexível entre o ícone no rótulo quando eu estou quando eu esticar isso. Então, se eu voltar para este , rótulo de texto, o que está acontecendo é que ele está atualmente em um alinhamento central, e eles são tudo que eu preciso fazer é mudar isso ainda sendo alinhado à esquerda. Responda. Agora, lá vamos nós. Isso é ficar exatamente onde eu quero. E eu posso ficar com isso. Eu posso dizer como você sabe o quão grande. Quero que o botão fique desse jeito. Tudo bem, ver isso em ação mais uma vez. Vamos apenas fazer placa esta instância e vamos usar, hum, hum, o ícone de download. Vamos chamar isso, mas em download e mudá-lo para Azul e lá vamos nós. Então agora eu posso ter muito mais liberdade sobre com Quão grande eu quero meu botão para ser e manter esse bom agrupamento do ícone e do próprio texto. Incrível. Então eu chamo isso de teste de estresse de símbolo porque o que você está essencialmente fazendo é dizer, ok, como eu posso quebrar esse símbolo? , Como posso,se estou me mudando? Se estou decidindo que quero que meu botão seja mais alto por alguma razão, ele está centrado? Como a maneira que eu queria Teoh ou um monte de vezes nós não estamos realmente mudando botões dessa forma , então você vai ver isso vir para cima com outros tipos de símbolos que você pode estar esticando ou alterando verticalmente ou horizontalmente. Ótima. Então isso só cobriu algumas coisas diferentes. Então aprendemos a curdos. Botão simples. Aprendemos como alterar a cor de fundo de um símbolo de botão, e não teremos um ícone para que você tenha muita flexibilidade com seus próprios botões . 4. Dicas para Overrides vs. vários símbolos: A última coisa que eu quero cobrir sobre nossos símbolos botões é ajudá-lo a decidir quando faz sentido usar um símbolo e tirar proveito de todas as substituições. Então você obtém ah, muito fora de um simples versus quando é que realmente faz sentido criar símbolos únicos e ter mais de um para algo tipo de como fizemos com este botão aqui, onde temos o nosso primário, mas dentro e também temos o nosso com o ícone. Então esses símbolos separados por ar fizemos isso como parte da classe para mostrar que você sabe como você pode tipo de construir sobre. Mas há maneiras que eu poderia ter usado o botão com Icahn, hum, e então apenas optou por talvez ligar e desligar o ícone para certos botões. Então deixe-me falar sobre isso um pouco mais. A razão pela qual eu escolhi o dedo tem vistos símbolos separados é que é muito mais fácil ver um. Que tipos de botões você tem em seu sistema e para ele é realmente substituições pode ficar meio complicado uma vez que começa a ficar, hum, mas há mais coisas que você pode manipular. Há muito mais para lembrar. Se alguém não está familiarizado com sua equipe de design ou alguém que possa estar usando seu arquivo não está tão familiarizado com substituições ou sabe quais opções escolher se eu posso ser, você sabe, não você não está recebendo tanto estrondo por isso . E não faz mal a nada por ter mais de um símbolo. Ah, em termos de botões, a outra coisa que posso mostrar rapidamente é que há momentos em que não acontece. Também não faz sentido. O Teoh. Use um símbolo quando estamos tendo que mudar demais para fazê-lo funcionar. Então deixe-me passar por uma coisa. Digamos que nós em nosso sistema de design, temos, ah, botão branco com, talvez como uma grande linha up. Então o que eu quero fazer para demonstrar isso é que eu vou fazer em uma duplicata esta cor quadrada . Vou chamar esta cor branca, e vou mudar o dedo do pé de branco. Então, se eu estiver usando um pouco de sucata, este, por exemplo, se , eu escolher, é para White. Obviamente, eu não vou ser capaz de ler minha gravadora porque ela é branca. Então eu evito no branco. Hum, eu posso fazer este truque de máscara de cor. Ou pode ser como com texto, ou também pode usar têxtil. Então há maneiras de contornar isso. Mas, você sabe, se eu tiver um branco, mas vai ser sobre um fundo branco, eu provavelmente quero usar algum tipo de borda ou sombra ou algo ao redor desse botão que você possa realmente ver o botão. Hum, e isso vai ficar muito complicado se eu estiver tentando fazer tudo isso dentro deste botão. Então vamos mudar isso de volta para Magenta. E neste caso, o que quero fazer é duplicar este botão de novo, e vou chamar este botão secundário. E então o que eu vou diligir é, hum eu poderia deixar isso e apenas mudar a instância daqui a reboque. Branco, se eu quiser Teoh, Eu também posso optar por não usar o símbolo de cor e, na verdade, apenas usar este fundo original , que é apenas uma forma esperar s para que eu possa fazer qualquer um destes. Vou deixar isto com o símbolo ligado por agora e depois posso levar o meu rótulo, e eles provavelmente queriam ser algum tipo de cinza escuro. E agora, vamos também acrescentar, , na verdade, quer saber? Porque eu quero adicionar uma borda. Vou matar esta máscara completamente desmascarada e encontrada. Então agora eu vou adicionar esta fronteira aqui, hum, algo um pouco mais tarde. Tudo bem, então agora eu tenho esse estilo diferente, e se eu voltar aqui, você só olha, nós temos um botão normal, um botão com ícone, e agora secundário aqui. E talvez isso seja algo como sair. Hum, então o vizinho tem um estilo diferente. Então, no meu sistema, eu posso ter algo que é, hum, cor um botão com um ícone e, em seguida, um botão branco. Você também pode ficar um pouco complicado ou dois. Você poderia ter um botão branco com um ícone. Há um monte de coisas com as quais você pode brincar. Mas por que eu acho que isso realmente útil novamente dedo do pé tem símbolos diferentes é porque isso também vai me permitir, Teoh, apenas deixar realmente claro que estes ar os tipos de botões que eu tenho dentro do meu sistema de design você também poderia fazer o caso para um não permitir que o fundo para ser alterado em, como o botão simples se você quiser realmente aprimorar em dizer como sempre que você usar este primário. Mas em seu sempre azul, sempre que você usar um ícone. Mas na sua sempre verde-azulada, algo assim. E então não há discrepâncias. Alguém não pode interpretar isso de outra forma. Felizmente, isso ajuda você em termos de por que criar um simples quando você deve criar vários e cobrindo as diferentes maneiras de manipular este botão usando substituições. 5. Criação de um símbolo de barra de navegação complexo: nesta próxima lição, vou mostrar-lhe como criar um componente de barra de navegação usando vários ninho e símbolos . Então vamos pegar o que aprendemos com os exemplos de botões e aplicar algumas dessas técnicas nesta barra de navegação, mas fazê-lo de certa forma, estamos realmente combinando muito mais Pratos juntos. Então, neste exemplo, vamos realmente recriar a barra de navegação do site de Skill Shire. Então eu tenho uma captura de tela bem aqui, e então eu vou pular para a página de símbolos. Então o que eu fiz para tipo de preparação é que eu apenas juntei símbolos para as várias partes da barra de navegação. Então, estes são bem simples. Há um avatar de ícones, barra de pesquisa. O logotipo é apenas um mapa de bits ou uma imagem, um botão e, em seguida, o nosso link de navegação. E então vamos falar mais sobre este no segundo porque esta é a única peça que eu não terminei para montar esta barra de navegação. Então, vamos voltar rápido. Dois agora são barra aqui e vamos ampliar um pouco. Certo, então temos dois estilos diferentes. On são duas variações diferentes dos links de navegação aqui. Então, temos algo como a nossa casa. Somos apenas um link de texto e, em seguida, navegar tem este pequeno ícone de seta aqui. Então o que eu vou dio é usar um símbolo e mostrar como você pode usar esse símbolo para ambos os links de navegação dentro. Sem a seta, você pode optar por fazer dois símbolos separados. Mas para este caso, já que é muito fácil apenas de ser, podemos essencialmente ligar e desligar este símbolo que é apenas uma opção melhor. Então vamos saltar para trás e vamos aproximar este valete. Os requerentes de etiquetas podem ver isso melhor. Tudo bem, a primeira coisa que vou fazer é agitar meu quadro de arte e fazer isso um pouco maior para que possamos caber. Uma coisa que eu quero chamar para fora é se por algum motivo este ajuste de conteúdo no redimensionamento é verificado antes de você desenhar antes de alterar um quadro de arte ou esticá-lo, você provavelmente quer desmarcar isso porque ele faz um tipo de coisas funky. Uma coisa que eu quero chamar para fora é se por algum motivo este ajuste de conteúdo no redimensionamento é verificado antes de você desenhar antes de alterar um quadro de arte ou esticá-lo, Eu sempre desligo porque não quero que as coisas se mexam. Quero decidir onde vou colocá-los, por isso, desde que esteja desmarcado, está bom para ir. Tudo bem, vamos entrar em símbolos e vamos embora. Teoh, agarra a flecha. Tem isso aí dentro. E é isso. Por isso, agora nunca são rótulo inclui euro. E se eu clicar nisso, você pode ver que eu tenho esse símbolo bem aqui. Tudo bem. A próxima coisa que eu quero fazer é que vamos Teoh, um, vamos testar rapidamente este símbolo. Então vamos inserir na instância deste link de navegação. Ok, aqui. E, oh, eu criei apenas uma camada de fundo aqui agora. É cinza. Não consigo ver isso muito bem. Então vamos fazer isso branco, e então podemos ver o que está acontecendo. Você pode apenas ver a borda do símbolo. Então agora um dos nossos itens de navegação era sobrancelhas. Então vamos fazer isso. Vamos mostrar como isso funciona, e nossa pequena flecha se move com ela. Então, isso é ótimo. Mas o que acontece quando eu esticar? Certo, então este é o teste de estresse de novo. Alguns vendo minhas sobrancelhas. O texto está se movendo e minha flecha está se esticando, e não queremos que nenhuma dessas coisas aconteça. Então, o que queremos fazer com nosso rótulo de texto é que queremos fixar isso na borda. E com a nossa , flecha, eu venho, queremos ir em frente e consertar esse tamanho. Vamos ver. Ótima. E assim que o consertou bem. E então você pode escolher ajuda. - Como? Por que você quer que isso simples seja baseado no texto e nós não precisamos ter essa caixa branca ativada. Podemos desligar isso mais tarde. Isso não é grande coisa. Hum, mas por enquanto, vamos em frente e deixar isso. Certo, então vamos diminuir um pouco mais. Então o próximo ditado que queremos fazer é desenhar nosso símbolo de contêiner para nossa barra de navegação. Portanto, isto é essencialmente apenas o fundo da barra em si. Então eu vou inserir um retângulo de forma, e eu vou desenhar forma aqui, remover a borda, fazer este branco apontado. Uma coisa que eu não mencionei, um, algo que eu acho realmente útil. Então, esta é apenas uma captura de tela são um limite de mapa bit. Copie isto. Então ajuste isso de volta para 100 hum, colá-lo aqui, e então eu posso ver o tamanho que eu realmente preciso para fazer isso. Então este é 59 de altura. Vamos apenas ir em frente e fazer este 60 para ter um número par. E este é o 1172. Então vamos fazer isso 11 72. E então temos essa pequena sombra no fundo. Então vamos acrescentar que eu disse apenas algumas coisas aqui. É um pouco mais alto. Lá vamos nós. OK? carta de Blewitt ainda define essa roupa para 10. Isso realmente não importa. Certo, Certo, agora temos a forma que combina com nossa cor e estilo de navegação. Agora, vamos em frente e criar um símbolo a partir disso, e podemos chamá-lo tão longe, certo? Agora é a quantia por um segundo. E aqui está meu cochilo real. Nosso símbolo. Este é apenas um exemplo disso. Então eu vou me livrar disso. Vou mover essa captura de tela e voltar. Muito bem, agora vamos começar a compilar ou montar esta barra de naff. Então, o que? Vamos fazer diligência de novo? Estamos na página de símbolos. Estes são os símbolos reais em si. Então não queremos usar isso. Queremos usar instâncias deles. Então, como se esse cara fosse um exemplo disso. Então podemos usar isso. Vamos começar com o logotipo. Nós vamos tipo de ir para a esquerda da direita. Então coloque isso aí. Podemos tipo de delicadeza e voltar para decidir onde as coisas devem acontecer ou layout. Podemos fazer isso em um segundo. Eu também vou bloquear esta camada retangular, porque sempre que eu passar o mouse sobre isso, ele fica azul. E às vezes isso me incomoda e eu tranco, e depois não faz isso. Certo, agora, aqui está uma das minhas instâncias do link do valete, então eu vou puxar isso, e então eu vou apenas duplicar isso vai voltar e mudar essas coisas depois. E aqui, tenho mais duas instâncias. Sim. Sabe, havia outro lá, assim como eu não dupliquei duas vezes. Arias. Há mais dois, então eu quero inserir minha barra de pesquisa de repente pegar isso aqui. E por último, lá estava eu a agarrei. Meu ícone de notificações, meu avatar e meu botão. Tudo bem, então essas são todas as peças que podem ver lá. Obviamente, Obviamente, precisamos voltar e ajustar algumas dessas coisas. Então, agora o que queremos fazer é que esta é a nossa casa. Então eu mudei o rótulo dedo do pé, casa, navegação e oficinas. Tudo bem. Agora, eu só quero esticar isso. Então agora você pode ver casa e oficinas. Não queremos usar a flecha. Então o que eu posso fazer é no painel de substituições, há a opção de clicar, e geralmente isso me mostra símbolos diferentes entre os quais eu posso alternar e mostrará símbolos novamente das mesmas dimensões. Mas este é o único deste tamanho, por isso só tem um. Mas também temos essa opção de selecionar nenhum, e tudo o que ele faz é desligá-lo. Então, isso é ótimo. Isso é exatamente o que precisamos. Agora eu posso começar isso e torná-lo um pouco menor. Eu vou mudar, navegar sobre oficinas sobre, e eu vou fazer a mesma coisa para oficinas em um seleto Nenhum. Basta arrastar isso, mas menor. Perfeito. Agora acho que é uma linha contável. Hum, eu posso alinhar as coisas assim e usar, hum, usar esses guias ou eu posso apenas colocar as coisas Oh, isso eu também posso pegar essa imagem e colocar no símbolo e então apenas alinhar as coisas. Mas acho que vai funcionar bem para nós. Rapidamente. Então vamos procurar. O que é aquilo em casa? Mm. Habilidade compartilhar meninas baixas. Isso foi bem perto. Tudo bem, tem isso. Agora vamos pular aqui. Nosso cérebro está praticamente no mesmo lugar. Somos Avatar. Acabou. Ok, então essas aulas vão mudar isso. Vamos nos livrar da flecha. Você faz isso menor. São as minhas aulas. Assustadores. Agora vamos nos alinhar aqui e ensinar fatos, tudo bem, na última coisa que queremos difundir é que essa barra de busca é um pouco mais larga, então podemos ir em frente e fazer isso. E enquanto eu esticar isso, você verá que eu não defini as restrições ainda. Hum, então deixe-me ir até o meu símbolo original. Eu vou clicar no ícone do tamanho da escolha segura, e eu vou fazer este pino para a esquerda. Lá vamos nós. Então, agora, se eu redimensionar o símbolo, quem se levantou nisso? Aqui vamos nós, é por isso que testamos o estresse. E você vai ser isso para a esquerda também. Certo, perfeito. Então, realmente não importa o quão grande nós fazemos isso. Tudo bem, então é que temos o nosso nab montado. Oh, a única coisa que temos que mudar. Vá premium. Tudo bem, agora estamos prontos. Hum, tudo bem. Então, na próxima lição, nós vamos caminhar através de re dimensionando tudo isso para fora muito juntos. 6. Redimensionamento de bar , restrições e organização: Tudo bem, nós apenas juntamos nossa barra de navegação com todos os nossos símbolos e todas as nossas peças. Esta é a nossa captura de tela onde estávamos apenas fazendo referência. Então eu estou tudo pronto com isso. Na verdade, vou apagar isso. Agora, o que queremos fazer é garantir que esta barra de navegação seja capaz de dimensionar corretamente. O que eu vou fazer é ir em frente e em certos casos dessa barra de naff no meu arquivo e. e agora, assim como todo o resto, eu vou em frente e esticar, e ainda assim poucas restrições têm qualquer nova defeitos. Tudo bem, vamos mergulhar e ver o que precisamos enfrentar. Ok? Então, logo de cara, nosso logotipo está sendo esmagado. Então nós vamos subir aqui, vamos dizer, corrigir o tamanho. E nós também queremos fixar isso para a esquerda, porque tudo basicamente, como esta barra agora funciona tão horrível coisa novamente é que tudo à esquerda é quer ficar para a esquerda. Tudo à direita quer essencialmente ficar certo, alinhado. E então o espaço no meio muda à medida que você vai. Tudo bem, então nós vamos fixar isso lá. Quatro em links de navegação também iam fixar tudo isso, então eles devem voltar para o lugar certo. Isso é perfeito. Então estamos pegando o jeito disso. É por fazer a mesma coisa uma e outra vez. Uma vez que você entender como seu símbolo precisa funcionar, nós vamos adiar com a barra de pesquisa e do outro lado. Uma vez que você entender como seu símbolo precisa funcionar, Vamos em frente e certifique-se de que este avatar permanece fixo que os ícones dias corrigidos. E agora estes dois são contras. Em vez de fixar para a esquerda, queremos fixá-los para a direita. Aqui vamos nós. Hum, eu vou voltar a isso em um segundo. Vamos também certificar-nos de que estes estão fixados à direita. Ótimo. E OK, então algumas coisas ainda estão acontecendo deste lado. Então nós fixamos as coisas à direita, então eles vão ficar, mas eles ainda não estão exatamente agindo da maneira que queremos. Coisas que esses caras têm espaçamento um pouco mais do que queríamos. E nosso botão está mudando de tamanho quando não queremos que isso aconteça. Então o que vamos fazer é começar do lado direito e clicar no meu botão e o que eu quero fazer porque nós já nomeamos isso, mas exatamente o que queremos e esse nome não vai mudar, eu vou em frente e corrigir o tamanho horizontalmente. E você viu como isso acabou de aparecer? Sim, então é isso que eu quero. Eu também quero fixar isso na borda direita. E então agora que deve manter esse botão deve ficar no mesmo lugar e ficar o mesmo com porque nós não queremos que a variável. E agora, meu avatar e meu ícone de notificação, eles também vão ficar. Então lá estão eles fazendo exatamente o que eu queria fazer. A outra coisa é, vamos ver, deixe-me entrar neste símbolo original por um segundo, e então eu vou mudar essa cor para ser uma espécie de cinza mais escuro para que você possa ver o que está acontecendo quando esticamos isso. Tudo bem agora, você também pode ver que essas ligações de valete também estão se estendendo quando nós não queremos isso também. E novamente, assim como fizemos com o botão. Porque nós já renomeamos Thies para o que queremos usar e nós não vamos mudar isso em lugar algum. Nós realmente queremos corrigir o com destes também. Então eu vou fazer isso aqui, e eu vou fazer isso aqui e aquilo saltou para trás. Então agora esses também estão no mesmo lugar, permanecendo iguais. E eu quero pular aqui e fazer o mesmo por esses outros links para mim. Legal. Venha para o ar. Apenas perto juntos. Vamos desligar esta camada cinzenta. Só vou escondê-lo. Lá vamos nós. Então, novamente, enquanto estou esticando, nada mudou. Esses caras vão ficar na mesma hora em que não queremos usar o fixo para símbolos como este. Esses caras vão ficar na mesma hora em que não queremos usar o fixo Nós realmente não quereríamos usá-lo se estivéssemos mudando os nomes desses rótulos imediatamente. Então, se eu fosse mudar esses, hum, no meu design e não fazer parte desse símbolo maior, então eu vou querer o Teoh. Certifique-se de que eu não conserte o tamanho porque você pode ver que aqui casa é mais curto do que oficinas. Queremos que o simples seja capaz de flexionar quando precisamos dele para acomodar para quê? Estamos mostrando. Certo, a última coisa que você deve ter notado é que minha barra de pesquisa está mudando de tamanho, então está ficando mais larga e mais curta, e tudo bem aqui. Isso é, na verdade, um padrão comum em muitos sites onde a barra de pesquisa só vai ficar mais ampla e tipo de acomodar a tela com. Então acho que está tudo bem. Podemos fazer isso. E então, em algum momento, se isso ficasse menor, o que gostaríamos que ele fizesse é não deixar isso se sobrepor. Hum, mas nós poderíamos dimensionar isso aqui se quiséssemos Teoh. Se você queria corrigir o com isso ou escolher um específico com, digamos que nós realmente só queria que fosse, um, você sabe, você sabe, ser é por isso que ele precisava ser Nós poderíamos consertar o com e então não ficaríamos. Mas acho que, neste caso, é um dedo fino. Faça isso ser um pouco mais largo, e nós não temos que consertar o tamanho, e então isso pode esticar totalmente até você. Certo, vamos também cobrir alguma organização neste arquivo. Tudo bem, quando eu clico nesta instância da barra de navegação, vamos olhar no meu painel de ovários isso é meio louco. Tem muita coisa acontecendo aqui, e é um pouco difícil de analisar. Então vamos falar sobre como podemos trabalhar para limpar tudo isso. Essa é a organização que começa com o símbolo em si. Então, se eu clicar nesta barra de sesta recebendo Lizzie de volta, isso está mostrando todas as camadas nos símbolos que eu tenho dentro deste símbolo principal me , não nosso símbolo em. E estes são ordenados da maneira que eu os criei. Mas eu posso ver que se eu clicar na ocorrência do símbolo thes, eles estarão na mesma ordem em que estão listados no meu painel de camadas. Então, porque Button está mostrando primeiro aqui, é porque é a primeira coisa nesta camada. Então o que eu quero fazer é limpar isso um pouco. Eu essencialmente quero Teoh, ver se há algo que eu quero renomear e re organizar no símbolo. Eu sempre acho mais fácil organizar minhas camadas da esquerda para a direita. Então aqui minha escultura lugar seria o primeiro. Então vamos apenas reorganizar algumas dessas peças apenas clicando e arrastando um, também Agora eu tenho todos os meus links de valete, que no painel de símbolos lá chamado Valete Link. Então deixe-me mover este para cima para que possamos vê-lo. E eu vou clicar na instância, então vamos até aqui. E eu vou clicar na instância, Agora posso ver que diz Valete Ling aqui e novela de inocentes aqui. Mas o que ele não está fazendo não é super útil, porque eu não tenho certeza qual o link este é. Então há algumas coisas que eu poderia dialogar Mas o que minhas principais preferências é clicar sobre isso e novamente porque nós já configuramos e personalizamos esses símbolos dentro desta barra de navegação. E não vamos mudar o nome desses símbolos. Uh, com cada instância como esta vai ficar o que eles são. Vou mudar o nome desta ligação de valete aqui para casa e depois deixar-me ir buscar o carouse, e vou pôr isto em ordem nas oficinas. Ok, então vamos começar com esses três. Agora, quando eu clicar na instância, vá até aqui. Vejo oficinas de navegação em casa. Então isso está na ordem. Também me mostra de qual link de navegação estou falando. Você também pode vê-los pairando sobre. Destaca-os. Mas sinto que é muito mais fácil de saber. Oh, eu estou falando de casa bem aqui, e eu vou te mostrar algo que é, Ah, um pouco mais tarde, quando estamos olhando para diferentes estados da navegação que isso vai ser É melhor fazermos isso. Muito bem, vamos voltar para este logo por um segundo. Então, se eu olhar para este sobre seu painel eu vejo logotipo, ele me permite ter a opção para uma substituição. Preciso de uma substituição para o logotipo? É muito provável que eu não acho que neste caso, eu não acho que isso vai mudar em tudo. Ele só vai estar lá e ser estático para que eu possa ter a opção de apenas me livrar deste logotipo completamente em termos de substituição. Então você se lembra quando clicamos em quando você clica no quadro de arte símbolo, você gerenciou substituições e você tem a opção de permitir substituições todos juntos. Mas o que posso fazer é entrar aqui individualmente e dizer logo. Desmarque. Parece o mapa de bits. Eu também tenho que desmarcar porque esse cara é inventado. Eu abro isto. Significa feito de apenas um pouco. Mapa. Volte aqui. Desmarque isso também. E agora, se eu voltar para a minha instância, esse logotipo acabou de desaparecer do painel de substituições. E então eu acho que isso ajuda em ser capaz de limpá-lo como uma coisa nova. Esse esboço foi feito recentemente, e eu acho que isso é uma grande melhoria. Tudo bem, se eu não quisesse que o Teoh escondesse algo completamente, , há outra coisa que eu quero falar aqui com, um, um, então há o rótulo de seta, então procurar tem o ativada e mostrando o mapa de bits aqui. Então, quando você tem ícones que são mapas de bits, que são essencialmente apenas um J pay Gershom som tipo de arquivo de imagem, você pode optar por trocar esta imagem com qualquer outra coisa. E às vezes isso ajuda. Provavelmente faria isso com o nosso avatar, mas aqui, estes ícones não vão mudar. Então vamos deixar isso em paz e eu vou aqui, na verdade, deixe-me de novo. Você tem que clicar no símbolo mundo da arte juntos agora, então eu pulei meu logotipo. Hum, eu tenho casa. Tenho de procurar, e aqui estão os mapas de bits. Você meio que tem que olhar para baixo a lista de coisas. Então eu tenho o símbolo de navegação. Tem a seta dentro dela, que eu quero manter o símbolo da seta ligado, porque é assim que eu ligo e desligo. Mas o mapa de bits em si. Eu não preciso ser capaz de mudar isso para que eu possa desmarcar isso aqui e agora. Vamos voltar e procurar. Eles não têm mais aquele mapa de flechas aparecendo. Então isso é bom. Isso está nos ajudando. Tudo bem, Workshops parece bom. E então vamos continuar reorganizando a ordem. Então, a próxima seria a nossa barra de pesquisa. Vamos voltar aqui. Aqui está a nossa busca por que já nos deu o nome. Então isso é bom. Mas vamos olhar aqui para que eu possa ver, hum, ícone Pesquisar, que eu também posso renomear. Se eu gostaria de fazer para realmente mudar o nome dessas coisas, eu vou precisar voltar para o meu símbolo original, então eu realmente não preciso me preocupar com isso agora. Não é grande coisa, mas eu também tenho o mapa de bits aqui para o ícone da lupa de busca . E de novo, não vou trocar isso. Então, vamos clicar no Nash Bar Art Board, Role para baixo barra de pesquisa. Há aquele mapa de bits. Desmarque isso ótimo. E depois vamos para aqui. Então agora eu quero continuar junto com o meu próximo link de cochilo. Então, depois da barra de pesquisa, eu tenho aulas e depois eu tenho minhas aulas. E a seguir tenho meu ícone de notificações. Eu tenho meu avatar e, finalmente, meu botão para que eu possa renomear qualquer uma dessas camadas se eu acho que é útil, Hum, eu poderia querer apenas manter Button chamado dele, mas eu também poderia nomear um prêmio ir, mas se eu Quero. Mas eu acho que mantê-lo simples aqui é totalmente bom para Icahn barras notificações. Talvez pudéssemos simplificar isso dizendo notificações. Hum, então tem isso. E já que estamos nisso, vamos voltar aos nossos direitos. Vemos que temos o mapa de bits aqui novamente. Então vamos até aqui e desligar de novo os mapas de bits que não precisamos. Então nós temos a flecha novamente e ensinar a se livrar dessas aulas e navegações. Aqui está o outro mapa de bits e eu também tenho um para o meu avatar. Então vamos ter um por um segundo. Vou clicar de volta aqui para poder ver rapidamente. Isso ainda é um monte de coisas para olhar através, e ainda é um pouco confuso, mas é uma grande melhoria em relação ao que tivemos antes. Hum, então eu cheguei em casa. Procurar oficinas, barra de pesquisa, ensinar meus óculos. Notificações, Avatar. Agora, para este avatar, tenho a opção de escolher a imagem. O que eu poderia dio é que pode haver um momento em que eu realmente quero trocar essa imagem dependendo de onde eu estou usando esta barra de navegação. Então isso é essencialmente mostrando o usuário que está conectado. Neste caso , sou eu. Se eu estivesse fazendo uma simulação para um usuário diferente e fosse importante trocar esse gráfico , eu poderia escolher qualquer imagem do meu computador e usá-la para trocar, e ele vai mascará-la da mesma maneira. Então ele só vai trocar essa imagem, e você pode fazer isso quantas vezes quiser. Você pode fazer isso com todas as instâncias do símbolo, se quiser. Hum, que possamos. Podemos escolher sair que você pode. Além disso, Se você acha que quer Teoh, você pode querer deixar isso ou não. Deixe isso. Você sempre pode mudar de idéia depois e desmarcar essas coisas porque é uma simples alternância de ligar e desligar. Muito bem, então temos o botão. Então isso parece muito melhor do que parecia. Outra coisa que eu acho útil é que há outras coisas que você pode, uh que você pode fazer para diferenciar os nomes dos símbolos. Então você também poderia clicar em casa, por exemplo, e poderíamos fazer algo como, um, apenas colocar algo na frente dele. Como se eu fizesse pequenos traços, eu mostraria como isso pode parecer. Um, clique de volta aqui, e isso às vezes ajuda com, como, encontrar quais são os 1.000.000 símbolos versus, tipo, quais são as coisas dentro deles? Outra coisa que é muito legal de fazer é usar um emoji. Então, se houvesse algo que representasse uma navegação e você quisesse apenas usar um emoji aqui, isso poderia ser realmente útil, apenas para, tipo, mais seco. Eu rapidamente o dedo do pé. Oh, aqui é onde eu preciso ir para trocar essas substituições. Tudo bem, eu vou tirar isso por agora, mas só uma pequena dica para você. Então nós temos agora estão longe tudo pronto. Todos juntos. Temos nosso painel de sobreposições bem organizado da melhor forma que pudermos, hum, camadas estão bem organizadas aqui por sua vez. E agora eu posso usar isso onde eu quiser, e nós o consertamos para que eu possa dimensionar corretamente. Se eu estiver usando essa barra de Nath em tamanhos de tela diferentes ou tamanhos diferentes, nossas placas são super fáceis. Se eu estiver usando essa barra de Nath em tamanhos de tela diferentes ou tamanhos diferentes, Agora, só para dizer OK, esse cara precisa ser um pouco mais largo. Precisa ser um pouco mais curto. Ele pode estar usando para mostrar como uma simulação de iPad ou algo assim. Eu sou para que eu possa fazer tudo isso. E apenas uma nota também. Às vezes, quando você está indo de desktop para celular, especialmente no tablet. Às vezes você tem diferentes opções disponíveis em termos de navegação, você não vê todas as coisas. Às vezes você tem diferentes opções disponíveis em termos de navegação, Então, se havia algo que você não queria mostrar, como, digamos que não mostramos a bunda. Ops, digamos que não mostramos o mas na experiência móvel ou por algum motivo, podemos subir aqui e desligar esse botão. Então ainda temos todas essas maneiras de manipular esse símbolo. Certo, há mais uma coisa que quero mostrar sobre essa barra de navegação, então vamos pular para isso no próximo vídeo. 7. Mais dicas para Overrides: Vamos falar sobre mais uma coisa que podemos fazer com nossos símbolos da barra de navegação tantas vezes quando você tem um site, queremos mostrar em qual página o usuário está atualmente. Então isso é algo que poderíamos chamar um estado selecionado ou um estado ativo. E agora só temos um tipo de um estado de padrão. Então vamos adicionar um estado ativo para que possamos alternar entre para que, se eu estiver projetando, digamos que a página do workshop no meu arquivo eu possa alternar esse símbolo para mostrar que essa é a página de navegação do tema que entre Tudo bem, vamos começar por duplicando este rótulo agora. E agora, novamente, a primeira coisa que eu quero dio olhos ter certeza de que eu renomear os símbolos. Então lá eles têm um nome único desde um romance ativo e eu vou mudar este é aquele . Também tem aquela estrutura de árvore Teoh de vault. Tudo bem agora, eu posso fazer o que eu quiser em termos de como eu quero representar visualmente o estado ativo? Então vamos começar com apenas mudar a cor da frente para ser um pouco mais escura, mas isso não émuita diferença, especialmente se não somos como mudar a cor. Então vamos começar com apenas mudar a cor da frente para ser um pouco mais escura, mas isso não é muita diferença, Mas digamos que eu queira adicionar talvez um pouco de subjacente aqui. Esse é um padrão que já vimos muitas vezes. Então, se eu quiser ter uma barra de cores aqui em baixo, eu vou precisar fazer este símbolo mais alto. Agora. Eu realmente não quero fazer isso daqui. Isso só vai esticar as coisas. Vamos fazer o símbolo de base em si um pouco mais alto. Isso só vai facilitar as coisas para nós. Tudo bem,tudo o que eu quero fazer é fazer workshops, por exemplo, e vamos mudar o símbolo que estamos usando. Tudo bem, tudo o que eu quero fazer é fazer workshops, por exemplo, Estamos usando o padrão agora, como você pode ver aqui, e vamos alterá-lo para o estado ativo. Então, enquanto estou construindo o símbolo, eu posso ver o que está acontecendo. Eu também me deixo apenas chamar. Eu quero fazer isso não a partir do símbolo da barra de navegação, mas na verdade a partir da instância dele. Tudo bem, então somos oficinas divertidas que estão acontecendo aqui. É incrível. T cair. Vamos mudar esse dedo ativo agora o que aconteceu aqui eu tenho este rótulo de valete essencialmente revertido para trás. Então, se eu voltar para o padrão, essas são as substituições que eu já fiz. Mas como eu estou usando um símbolo diferente para este ativo, eu vou ter que tipo de refazer o que eu já fiz. Então eu posso ir aqui e mudar essas oficinas do Teoh, e eu vou precisar me livrar da minha flecha. Tudo bem, então há isso. Então é uma coisa que é um pouco irritante, mas é bem rápido. Você pode fazer isso bem rápido. Tudo bem, então aqui vamos nós. Agora, estou usando isso. E se eu mudar a cor disso, posso ver que isso vai ser atualizado lá. Mas não no símbolo original. Vamos mudar de volta. Ok, então agora quando você clica nisso, quero esticar este quadro de arte para que ele realmente toque o fundo. Eu poderia testar aqui. é a altura que precisamos desta coisa? Talvez 42 pixels. Parece desfazer isso. Então, se eu esticar isso e tiver isso codificado 42 agora, eu não quero que isso aconteça. Lembre-se de como falamos sobre ajustar o conteúdo ao redimensionar ao verificar isso. Esta é uma das razões por que então vamos desfazer isso. Vou desmarcar ajustar conteúdo. E agora eu vou apenas acertar isso para ser 42 pixels. Diga tudo agora que esse cara subiu. Então digamos que queremos isso. Tudo bem? Então nós queríamos realmente ir e fixar isso na borda. Então, novamente, você poderia ser símbolos de teste de estresse o tempo todo, a qualquer momento. Então, sempre tipo de certifique-se de que o seu que você está verificando essas coisas como você vai para que você não obter consequências indesejadas. Tudo bem? Agora tudo o que quero fazer é desenhar um pouco de forma aqui. Faça uma caixinha. Vou ter isto azul. Sim, Lotus um pouco mais curto daqui para baixo. Ok, agora isso é pato aparecer. E o que eu também quero chamar é quando eu estou mudando o tamanho disso. Agora, se eu voltar aqui duas oficinas, ainda me dá a opção de mudar isso de volta. Oh, mas agora veja, eu não tenho a opção de clicar no ativo mais. E isso porque as substituições no seu painel só escolherão símbolos do mesmo tamanho. Então nós realmente queremos pegar este símbolo padrão e pode obter a mesma altura que o outro . Alguém desprenda, ajuste o conteúdo. Vou arrastar isso para baixo. Vamos colocar isso no topo, só por isso. Também vou fazer este ano, Hillary. E agora se eu clicar aqui, voltar para oficinas agora, Eu também tenho essa opção para ativo. Lá vamos nós. Está bem, mas a fazer algo um pouco estranho. Então talvez nós queiramos mudar isso para que possamos brincar com isso. Então depende de onde você quer aquele bar. Queres que fique em cima daquela camada cinzenta? Você quer acima dessa camada cinza? Vamos fazer isso por aqui, certo? Outra coisa é que vai ser tão grande quanto o seu símbolo. Então aqui estamos nós temos você sabe, temos 88 pixels de largura, então vamos ver o que acontece se eu redimensionar esse símbolo. Se isso vai ficar. Sim. Então isso é ficar fixo, porque aqui em cima, nós consertamos o tamanho. Se não consertarmos o tamanho aqui e, em seguida, se estamos dimensionando a barra vai mudar de tamanho, que é o que nós não queremos que aconteça, então vamos ter certeza de que isso é corrigido. Incrível. Então isso foi muito fácil. Hum, então agora eu tenho a opção aqui de dizer que eu realmente quero usar o padrão. Talvez eu queira mudar de casa e usar o ato de Estado aqui. Agora outra vez. Nós já tínhamos mudado os nomes nos rótulos e tudo mais, então eu vou ter que fazer isso de novo e dizer: “ Sem flecha”. E qual é a última coisa que está acontecendo aqui? Então este símbolo fora, por alguma razão, ainda era largo. Então, vamos trazer isso. OK, e lá vamos nós. Agora vamos fazer mais uma coisa. Vamos voltar a copiar isto. Então você deseja criar tudo novamente com copiar esta instância? Hot back, Teoh, nossa página principal. Agora, novamente, esta é apenas a captura de tela. Então vamos esconder isso. E vamos colar são barras de valete aqui. Então agora você pode ver isso um pouco mais no contexto. Obviamente, isso não é uma página inteira. Estou, mas você pode ver isso aqui. Então vamos alternar o padrão. Lá vamos nós. Talvez eu queira clicar nas minhas aulas e mudar isso para o ato de Estado novamente. E uma vez que você nomear essas coisas e se livrar dos símbolos como você gostaria, isso vai ficar. Então, agora, se eu pegar minhas aulas e voltar para o padrão e agora novamente, se eu voltar para ativo, isso vai continuar porque eu já mudei as substituições lá. Então lá vamos nós. Essa é uma barra de navegação muito flexível e personalizável. 8. Usando um símbolo básico para um componente modal complexo: em nosso exemplo final, quero mostrar como símbolos complexos podem permitir que você seja flexível com seus designs enquanto ainda adere ao seu sistema de design e seja capaz de manter a consistência. Eu também vou explicar quando há momentos em que você não deve realmente usar símbolos para certos componentes. Então vamos falar sobre isso. Este é um componente móvel também conhecido como um pop-up, e aqui eu tenho três exemplos de como um motel pode ser usado dentro de um sistema de design. Neste 1º 1 é mais uma confirmação, então é apenas uma espécie de mensagem de texto alguns botões para deixar o usuário escolher. No segundo exemplo, eu tenho um móvel conta criar, onde temos um formulário. E no terceiro exemplo, temos mais de um motile informativo que pode simplesmente aparecer e permitir que o usuário leia algumas informações e, em seguida, descarte. Então, à primeira vista, não parece realmente haver uma maneira de usar um símbolo complexo para alcançar cada um desses três designs. Então você criaria símbolos separados para cada um desses? Você realmente não tem Teoh e eu pessoalmente não faria neste caso, Então vamos passar por isso e falar sobre por que símbolos funcionam maravilhosamente para componentes que serão reutilizados uma e outra vez, especialmente quando você não está lidando com muita variedade com esses componentes. Agora, componente Motile é algo que estaríamos usando, provavelmente uma e outra vez. Mas há alguma variação dentro de cada um desses modelos. Às vezes, seus projetos precisam dessa variedade, mas você ainda está aderindo a um sistema para que esses modelos não pareçam serem de sistemas completamente diferentes. Existem algumas semelhanças aqui, e essa é a chave. A chave é encontrar água as semelhanças entre as variações e centrar-se nisso. Então vamos olhar para esses três modelos. Cada um deles tem um título e um ex para descartar o ponto o componente móvel. Alguns têm botões, outros não. Alguns deles têm mais um corpo de texto, e este não tem. Este é um formulário. Este tem uma imagem, então há semelhanças. Mas também há diferenças. O que eu posso fazer aqui é criar um símbolo complexo como base e, em seguida, construir sobre ele para criar essas configurações diferentes. Queremos que o recipiente do móvel em certos elementos dentro dele seja padronizado, mas permitindo flexibilidade para ter qualquer conteúdo a ser incluído dentro desse recipiente. Então, neste exemplo, onde eu tenho essa imagem, eu poderia ter uma imagem completamente diferente. Posso ter muitas mensagens. Eu poderia querer incluir botões sobre isso às vezes e às vezes não com formulários. Há muita variação que vem com um formulário. Nem sempre vai ser colocado desta forma. E então, com modelos de confirmação, às vezes há mais opções. Às vezes, há mais texto. Ainda há alguma flexibilidade e variação que vem com cada um desses estilos. Então vamos saltar para o símbolo base que eu criei. Ir para a minha página de símbolos. Agora você pode ver aqui que eu tenho algumas coisas acontecendo. Hum, eu já criei alguns símbolos para os nossos botões. Tenho algumas cores. Eu tenho alguns desses campos de texto e então eu tenho o nosso símbolo móvel em si. Então o que eu tenho aqui é que juntei essas coisas em comum que falamos. Tenho o nosso título. Tenho uma caixa de texto. Tenho os botões e o ícone do X. Então eu quero orientá-los sobre como podemos usar este símbolo base de várias maneiras diferentes para criar todas essas variações diferentes. Este 1º 1 é o mais estreitamente alinhado ao próprio símbolo de base. Essencialmente tem todas as peças que acabamos de passar. E se eu clicar no símbolo móvel, olhe para o painel de substituições. Tudo o que eu fiz foi basicamente trocar o texto aqui adicionou rótulos para nossos botões, e é isso. É um simples é que eu tenho muita flexibilidade aqui com a quantidade de texto, porque da maneira que o nosso Simbolista configurar, podemos escalá-lo tão alto quanto ele precisa ser. Nós também podemos escalá-lo como por que ele precisa ser e essas coisas, uh, apenas tipo de se consertar. Então eu já configurou essas restrições e re dimensionamento. Não vou passar por essa parte agora porque já abordamos isso em lições anteriores . Então, se você precisar de uma atualização, basta voltar e assistir os outros vídeos da barra de navegação neste próximo motile. Vou abrir este grupo para que eu tenha o modelo base aqui, e se eu esconder esta outra seção. O que essencialmente fez é que eu usei as mesmas peças que este 1º 1, mas você vai notar não há nenhum texto aqui. Eu posso realmente ver. Tem que me mostrar que há algo lá. Então vamos falar sobre isso e você substitui. Basicamente, eu só não tenho nada no campo de texto lá, e um pequeno hack para fazer isso acontecer é que você vai ver que eu tenho um espaço. Vou apagar esse espaço e você verá a caixa de texto móvel aqui. Então isso está alinhando com o que está no símbolo base. Mas para ser capaz, se eu não quiser esse texto lá, tudo o que eu preciso fazer é clicar aqui e adicionar um clique de espaço. A barra de espaço aperta Return e desapareceu, então essa é uma maneira muito agradável de permitir mais flexibilidade lá. Eu também tenho os botões, então tudo bem. E então eu tenho nesta forma elementos. Estou usando os símbolos que mostrei da página Símbolos para estes formulários de campo de texto , e eu os agrupei, então este ainda é um símbolo complexo ou aninhado. Mas essa coisa toda não é um símbolo na terceira opção aqui, deixe-me abrir isso de novo. Deixe-me esconder isso neste exemplo eu tenho texto e eu tenho um pouco mais de texto, mas eu tenho aqui Mas aqui nós não temos os botões. E assim, se você se lembrar como somos capazes de escolher qual botão estavam usando eu posso falar alternância entre primário e secundário porque eu já tenho esses símbolos para cima. Mas aqui estou eu dizendo nada porque não quero nenhum botão neste de novo. Isso nos dá flexibilidade. Então o que posso fazer é para os propósitos da minha simulação. Se precisar incluir uma imagem aqui, posso fazer o que quiser. Se esta imagem for mais alta novamente, eu posso clicar neste móvel e eu poderia esticar isso. Talvez este texto seja mais longo ou mais curto. Talvez esta imagem seja maior. Também tenho toda a flexibilidade para o fazer. Não, só porque estamos usando um símbolo base e até mesmo outros símbolos aninhados dentro disso não significa que você precisa pegar cada um desses modelos e transformá-lo em um símbolo que realmente não importa. Estávamos usando os blocos de construção que estavam criando para ter consistência dentro de nossos projetos para ser capaz de usar as diferentes peças. Mas não faz sentido. Não precisamos reproduzir todo esse móvel específico ou todo esse móvel específico. E essa é a beleza disso. Este método também permite mais flexibilidade mais tarde, se houver outros tipos de modelos ou configurações que você deseja criar novamente, nós temos nossa base aqui e isso é suficiente. Então isso nos faz começar. Isso nos permite ter essa consistência dentro do nosso sistema de design. Então nossos botões estão sempre no mesmo lugar. Talvez às vezes eu só precise de um. Mas talvez às vezes não haja um X. Posso esconder isso também. Mas, no final, estou recebendo muita flexibilidade e recebendo um monte de estrondo para o meu dinheiro com este símbolo baseado. 9. Considerações finais: Espero que você tenha encontrado esses tutoriais e dicas para ser útil. Há tantas maneiras que você pode usar símbolos complexos, símbolos aninhados e substituições para tornar o projeto mais rápido e eficiente. Obter símbolos para trabalhar para você é tudo sobre tentativa e erro. Então não tenha medo de experimentar. E se você ficar preso, por favor, não hesite em postar perguntas aqui e eu, pois seus colegas podem ajudá-lo. Muito obrigado por fazer essa aula.