Protótipo mais inteligente: criando uma biblioteca de símbolos de esboço

1. Conheça e saudação: O design está se movendo rapidamente. Trabalhamos em equipes ágeis e iteramos rapidamente com base no feedback de usuários e partes interessadas. Infelizmente, gastamos muito mais tempo fazendo mudanças nas maquetes do que pensamos nos grandes problemas que os usuários enfrentam. Meu nome é Tina Musich e sou designer de UX. Tenho usado o Sketch quase todos os dias nos últimos anos. Eu realmente comecei a conhecer os prós e contras. Ainda no ano passado, procurei converter nossa biblioteca de padrões de UX de equipes em elementos reutilizáveis no esboço com grande sucesso. Quero compartilhar o que aprendi com você nesta aula. Através dessas lições, você aprenderá a protótipo e iterar mais rapidamente usando uma biblioteca de símbolos no Sketch. Quer esteja a utilizar um sistema de design ou a criar padrões à medida que avança, bibliotecas semelhantes ajudam a simplificar o seu processo, bem como a manter a consistência entre os seus projetos. Você pode fazer um elemento como um botão uma vez e usá-lo para sempre e sempre no Sketch. Se você estiver trabalhando em uma equipe que tenha uma biblioteca de símbolos é crucial para manter suas maquetes sincronizadas. Vamos começar. 2. O que são símbolos?: Então, primeiro, vamos falar um pouco sobre o que são símbolos. Um símbolo no esboço é uma única fonte de verdade, é um elemento que existe em um ponto e é mantido nesse ponto, mas pode ser usado em vários outros quadros de arte ou projetos e é assim que eles funcionam. Então você tem seu símbolo e essa é a única fonte da verdade mas você também pode usar esse símbolo em lugares diferentes e quando você faz isso, esses são chamados de instâncias do símbolo. Quando você atualiza um símbolo, a alteração exclui todas as instâncias em que você usou esse símbolo e para alterar o símbolo novamente, ele é atualizado em todas as instâncias novamente. Então agora você entende o que os símbolos fazem, mas por que você deve usá-los? O primeiro é que ele mantém a consistência em todo o seu projeto. Digamos que você está trabalhando em seu projeto e você tem duas placas de arte que são bastante parecidas e você quer fazer uma mudança. Portanto, normalmente o que você faz é adicionar alguns links extras à sua navegação superior. Você pode mudar a cor. Talvez você esteja fazendo alguns elementos maiores, então você tem que pegar essas mudanças e colá-las ou refazê-las em todos os outros quadros. Então sim, isso é factível, mas leva tempo e é irritante ter que continuar fazendo. Se você tem uma biblioteca de símbolos, você pode fazer algo assim. Quero adicionar alguns links para minha navegação e atualizações em todos os meus quadros de arte. Agora eu quero mudar a cor e continua a atualizá-los quadros de arte. Por último, eu quero mudar o tamanho desse elemento e as regras da cadeia para todos os quadros de arte. Eu não posso dizer quantas vezes eu quero mudar algo, talvez até apenas alguns pixels. Eu quero trocar as coisas e construindo em símbolos para o meu trabalho, eu posso fazer essas mudanças ir através de toda a minha arte perto realmente facilmente sem usar símbolos e esboço, eu vou estar fazendo um monte de copiar, colar, criando novas placas de arte e geralmente apenas movimentando-se com um monte de elementos uma e outra vez e outra vez. Quando estou trabalhando em projetos, eu estou sempre experimentando e mudando as coisas ao redor e usando os símbolos me permite fazer isso muito rapidamente e sem a dor de copiar e colar 1000 vezes. Outra razão para usar símbolos e esboços é manter a consistência em todos os projetos de sua equipe. Então conversamos sobre manter todas as suas placas de arte em seu projeto em sincronia. Mas você pode estar trabalhando em uma equipe e pode haver alguns símbolos que você compartilha como uma equipe, talvez a navegação superior em seu aplicativo é sempre a mesma ou você tem um guia de estilo com botões, cores e forma e todos os elementos que você compartilha como uma equipe com uma biblioteca de símbolos, se alguém da sua equipe estiver, digamos que adicionar alguma coisa à navegação superior se propagará por todos os arquivos usando essa biblioteca de símbolos. Se você decidir mudar a cor, os arquivos de Neha e Kevin serão atualizados e terão a navegação superior correta. Se sua equipe de projeto ou equipe de projeto tiver o problema em que todas as suas maquetes estão parecendo um pouco diferentes e talvez esteja causando confusão com suas equipes de engenharia ou causando confusão e dentro de sua própria equipe, usando sua biblioteca de símbolos pode ajudar a garantir que todos na equipe os mesmos elementos e, portanto, criar um design mais consistente em toda a sua empresa. O último item é que ele ajuda você a protótipo de forma mais rápida e eficiente. Não sei quanto a vocês, mas estou sempre recebendo feedback de pessoas diferentes sobre a equipe de design, a equipe de produtos e partes interessadas. Às vezes ouço algo da nossa equipe de engenharia sobre o que é mais difícil de construir e preciso fazer ajustes ou o que não se encaixa com os dados que estamos usando e antes de começar a usar símbolos, nossa equipe de engenharia sobre o que é mais difícil de construir e preciso fazerajustes ou o que não se encaixa com os dados que estamos usando e antes de começar a usar símbolos, tem que manter constantemente mudando vários elementos em cada página cada vez que eu tenho feedback. Eu também estava criando um monte de elementos uma e outra vez e outra vez. Não havia realmente um bom lugar para mantê-los e eu estava puxando de arquivos antigos e todas essas coisas contribuem para retardar sua prototipagem. Tornando mais difícil para você criar wireframes e maquetes e colocá-los nas mãos dos usuários para que você possa fazer seus testes. Então, se você tem uma biblioteca de símbolos, você tem todos esses elementos que você pode simplesmente puxar dentro conforme necessário. Eles serão muito fáceis de redimensionar, para editar se você quiser fazer alterações e isso ajuda a acelerar todo o processo de design, iteração e assim por diante e assim por diante. 3. Como criar um símbolo: Vamos entrar na coleção de biblioteca de símbolos nitty-gridty. Se você tem guia de estilo em diferentes componentes, como botões e campos de formulário, então você já está um passo à frente e criar uma biblioteca, vai ser muito mais fácil. Quanto a mim, muitas vezes estou criando símbolos como eu preciso deles. Eu vou trabalhar em uma maquete, também adicionando símbolos, eu vou editar esses símbolos já em minhas maquetes. A primeira coisa que eu quero fazer é adicionar algumas cores como símbolos. Isso é super fácil e vamos aprender o básico. Eu já tenho esta paleta de cores aqui. Para criar um símbolo, tudo o que você precisa fazer é selecionar o que você quer estar nesse símbolo. Então esta é a cópia retangular 13. Eu não mudei o nome. Você não precisa renomeá-lo agora também porque podemos nomeá-lo quando fizermos o símbolo. Tudo o que você poderia fazer com este símbolo é apenas clicar no que você quer ser no símbolo. Neste caso, apenas um elemento. Então eu quero clicar com o botão direito e abrir este menu e eu vou descer para criar símbolo. Por agora vou chamar isso de preto. Posso nomear meu símbolo o que eu quiser aqui. [ inaudível] para nomear um pouco mais tarde e então eu vou ajudar a organizar sua biblioteca, mas por enquanto vamos manter simples e vamos chamá-la de preto. Em seguida, há este botão, enviar símbolo para a página de símbolos. Vou manter isto verificado. Isto vai criar uma página para nós que contém todos os nossos símbolos. Tudo o que vou fazer é clicar em “Ok”. Agora, algumas coisas mudaram. Vamos verificar isso. No lado esquerdo, você pode ver enorme cópia retangular 13 diz preto, e esse foi o nome que escolhemos para o nosso símbolo. Você sabe que isso é símbolo porque ele tem este ícone com as duas setas. Esse é o ícone dos símbolos. O que mais mudou. No lado direito podemos ver esta área de símbolo. Posso fechá-la se quiser. Aqui é onde você pode trocar símbolos. Se eu abrir isso, ele me mostra todos os símbolos que eu tenho na minha biblioteca de símbolos. Acabamos de fazer nosso primeiro, então só temos um símbolo e essa é a cor preta. Eu posso fazer algumas coisas aqui, mas eu vou fazer isso um pouco mais tarde. Por fim, temos a página de símbolos e é aí que todos os nossos símbolos vivem. Se clicarmos sobre isso, você pode ver esta página e temos basicamente uma prancheta e tudo o que está na prancheta é apenas esta cor preta. Temos preto, mas queremos adicionar as outras cores. Vou voltar para a minha página 1. A menos que você esteja adicionando o resto dessas cores, clique com o botão direito do mouse em criar símbolo. Vamos chamar este cinza 4 e depois vamos aqui, e eu vou chamar este cinza 3. Vamos verificar como é a página simples. Eu tenho todas as minhas cores, todas empilhadas aqui e eles são nomeados. Então vamos vê-los à esquerda. Todas as pranchetas com os retângulos. Se eu for para a minha página, eu posso ver que todos estes são símbolos porque eles têm as setas duplas. Na próxima lição, vamos usar esses símbolos coloridos para tornar nosso design mais flexível. 4. Adição e edição de símbolos: Temos esses símbolos que vivem em nossa página de símbolos. Mas quando os usamos em outra página, eles são chamados de Instâncias. Veja, você pode ter várias instâncias de um símbolo, e essa é a idéia. Há uma fonte de verdade que vive na página de símbolos. Você pode alterar as coisas em uma página de símbolos e atualizar em todos os lugares que há uma instância desse símbolo no documento. Mesmo à medida que nos aprofundamos nas bibliotecas de símbolos, ela pode cruzar vários documentos em cascata. Vamos ao nosso documento. Você pode ver que eu tenho este cabeçalho cinza mais escuro que eu quero usar um dos meus símbolos grandes cores em vez. Eu vou excluir este cabeçalho, e eu quero ir para cima para o canto superior esquerdo e ir para baixo para símbolos. Eu posso ver todos esses símbolos no meu documento aqui eles são pretos, pêssego sujo. Eu queria cinza também, então eu vou colocar neste quadrado. Você pode ver dentro da minha página inicial, Eu tenho meu símbolo cinza dois. Eu vou pegar isso, e eu vou apenas arrastá-lo para o tamanho que eu quiser. Então eu vou enviá-lo para trás para que fique por baixo. O que posso fazer agora são algumas coisas. Agora que é simples, por exemplo, eu poderia editar este símbolo e eu poderia mudar essa cor. Posso clicar duas vezes em qualquer símbolo e me leva direto para a página de símbolos e para esse símbolo. Posso entrar, clicar no retângulo, passar aqui para preenchimentos, e posso mudá-lo para azul brilhante. Então eu posso voltar para a instância. Agora, meu cabeçalho é azul, mas eu vou desfazer isso porque eu gosto de cor [inaudível]. Aqui vamos nós, desfazer, enviá-lo de volta. Outra coisa que eu poderia fazer é extrair de todas as cores que acabamos de criar aqui como símbolos. Eu posso clicar nele e eu posso ir para a área do símbolo. Clique no “menu suspenso”, e eu posso escolher de qualquer cor que eu queira ter um cabeçalho de pêssego, cabeçalho de pêssego escuro. Isso me dá a flexibilidade de mexer e ver como as coisas funcionam de uma forma muito leve. Tenho alguns ícones aqui. Eu tenho este ícone de usuário que é estrela de seta suspensa que eu quero transformar em símbolos para que eu possa usá-los em todo o meu projeto. A primeira coisa que vamos fazer é clicar no meu ícone, este ícone de estrela. Vou clicar com o botão direito e criar símbolo. Vamos chamá-lo de estática. Mas eu não quero que este ícone seja preto, eu realmente queria talvez cores diferentes em lugares diferentes. Vou entrar neste símbolo, clique duas vezes em. Eu vou fazer algo chamado Inception símbolo, onde eu pego um símbolo e eu colocá-lo em outro símbolo. Parece confuso, mas é super poderoso e vou te guiar por isso. O que eu quero é que este símbolo tenha uma certa cor. Eu vou subir aqui, pequenos meus símbolos. Quero que seja pêssego escuro. Spiegel Square, peça para baixo. Na verdade, eu só estou fazendo o tamanho menor, então isso não fica no caminho. Não tem que ser perfeito. Agora o que eu vou fazer é mover esta pasta. Quero que tudo esteja fora das pastas. Eu vou desagrupá-lo selecionar tanto esta forma de estrela e esta cor. Vou clicar com o botão direito do mouse, e vou mascarar. Agora o que eu tenho é a minha cor de pêssego escuro com uma máscara de estrela sobre ele. Você pode estar dizendo: “Tina, por que não mudou a cor da estrela? Você poderia ter apenas clicado na estrela vetorial, mudar a cor anotada de forma muito fácil.” Eu definitivamente faço isso às vezes, há alguns símbolos que eu não acho que eu vou mudar sua cor muitas vezes. Posso entrar aqui e trocá-lo para onde quiser. Mas vou te mostrar por que fiz isso. Vou voltar à instância, e agora tenho a minha estrela de pêssego. Agora, eu posso subir aqui e eu posso adicionar mais estrelas no meu documento, ver ícone de estrela. Ou posso segurar Shift, arrastar, fazer mais algumas estrelas. Todos eles estão conectados ao ícone original da estrela. Você pode ver aqui é um ícone de estrela. O livro era bom, mas não grande e só realmente tem quatro estrelas. Se você olhar para aqui, para substituições. Aqui é onde você pode editar uma ocorrência de um símbolo de maneiras muito específicas, dependendo de como você construiu. Para texto, você pode substituir e colocar texto diferente lá. Para este ícone, posso substituir esta cor e adicionar uma cor diferente. É o mesmo símbolo, o mesmo ícone de estrela. Para este exemplo, é um pêssego leve se eu quisesse, eu poderia adicionar mais estrelas. Eles podem ser qualquer cor que adicionamos. Dessa forma, quando você estiver fazendo suas maquetes, você pode trocar as cores das coisas. Isso realmente lhe dá muito mais flexibilidade. É muito fácil tentar coisas diferentes, e isso é uma grande parte da prototipagem. Você quer ser capaz de reagir ao feedback das partes interessadas, temos que usar seu feedback, mudar as coisas rapidamente. Se você tem uma biblioteca de símbolos realmente robusta que vamos construir, você pode fazer essas mudanças muito facilmente. 5. Redimensionando símbolos: Bem-vindo a esta lição sobre o redimensionamento de símbolos. Fomos e fizemos alguns símbolos. Temos as nossas cores aqui, todos os nossos símbolos e depois temos um ícone. Se voltarmos ao nosso criador, foi muito fácil para nós marcar um símbolo de cor cinza, esticá-lo e torná-lo em nosso cabeçalho. Uma vez que você começa a entrar em símbolos mais complexos, como texto em um botão, por exemplo, ou um campo de formulário, algo que está combinando vários elementos, você realmente quer aprender a fazer o redimensionamento e certificar-se de acertar. O valor que vem de ser capaz de redimensionar símbolos é que você pode criar consistência em toda a sua equipe. Pode certificar-se de que todos os botões têm a mesma altura, pode certificar-se de que têm todos a mesma largura. Você pode garantir que todos os seus ícones permaneçam na proporção certa. Essas são coisas que só facilitarão para toda a sua equipe se manter alinhada. Vamos testar o redimensionamento com este botão que temos aqui. Temos este botão Adicionar atualização e a partir de agora, vou tirar o ícone para tornar as coisas um pouco mais fáceis para nós. Vamos começar com um botão centralizado. Tenho o meu texto e a minha forma. Para fazer este símbolo, vou selecionar os dois. Vou clicar com o botão direito do mouse, criar um símbolo. Vamos chamá-lo de botão. Vamos ver o que acontece agora que é um símbolo quando tentamos redimensionar. Algumas coisas estranhas acontecem. Podemos fazer este botão realmente grande. Podemos fazer isso reverter. Podemos fazer um monte de coisas. Para alguns elementos, um comportamento como este é ótimo. Mas, para esse botão, queremos ter certeza de que ele tem sempre a mesma altura e que o conteúdo permaneça no lugar certo. Vou clicar duas vezes para poder editar este símbolo. Voltou ao tamanho que era porque quando criamos este símbolo, especificamos que seria esta altura e esta largura. Primeiro, eu vou adicionar em uma instância deste símbolo. Só para vermos o que acontece enquanto mudamos as coisas. Quero ir até o documento e encontrar o meu botão. Vou colocá-lo logo abaixo para que você possa ver o que acontece. Deixe-me rotular isso rapidamente para não ficarmos confusos. Certifique-se de que sabe que este é o símbolo. A primeira coisa que queremos fazer é ter certeza de que para este botão, eu sempre quero que ele seja da mesma altura. Não quero que tenha 50 pixels em alguns lugares ou 30 pixels em outros lugares. Eu quero este 41. Vamos fazer 40 só para tornar as coisas um pouco mais fáceis. Eu só encolhi o quadro de arte um pouco para que ele se encaixe. Agora temos um botão de altura de 40 pixels. O que eu quero fazer é ir para o lado. Diz “redimensionamento”. Tenho algumas opções diferentes aqui. Temos pino a borda, temos tamanho fixo e Sketch tem essa maneira muito legal de ver o que vai acontecer quando você expandir ou encolher seu símbolo, dependendo do que você selecionar. As coisas que você pode selecionar aqui, você pode selecionar esta parte superior, esta esquerda , inferior e direita e fixar a borda, ou você pode selecionar tudo, se você clicar no meio, desmarcar, você clicar no meio para cima também. Você também pode corrigir o tamanho verticalmente ou corrigir o tamanho horizontalmente, ou corrigir o tamanho de ambos dependendo de onde você clicar. Se você clicar no meio, ele irá corrigir o tamanho em todas as direções. Se eu fizer um elemento e eu sempre quero que ele permaneça na mesma altura, expanda este botão para que possamos ver como as coisas mudam. Para o meu botão, eu quero que a largura seja flexível. Eu quero ser capaz de ser um botão largo se houver um monte de textos, eu quero que ele seja mais curto para menos textos. Eu sempre quero que a altura seja de 40 pixels. Eu vou até aqui para corrigir tamanho, e eu vou corrigir o conteúdo verticalmente. Agora você pode ver em nossa instância do botão, que mesmo que eu tenha arrastado isso para ser mais alto, o botão ainda tem apenas 40 pixels de altura, mas nós também podemos ver que à medida que você expande este botão, ele está centrado nesta caixa, o que tornaria difícil alinhar. Você pode ver que as guias vermelhas estão focando na área do retângulo e não neste retângulo arredondado, o botão pêssego. Isso também não é o que eu quero. Nós temos a altura, mas eu também quero que este botão mantenha a borda superior esquerda para que fique mais fácil de alinhar. É aí que a outra opção de redimensionamento, Fixar na Borda, vem a calhar. Temos o topo, o fundo, a esquerda e a direita. Isso é basicamente permitindo que você selecione um elemento dentro do seu símbolo e você pode ter esse elemento abraçar uma borda diferente. Você pode tirá-lo com apenas a direita, você pode tê-lo abraçar o canto inferior direito. Você pode tê-lo abraçar a parte inferior superior direita para todas as bordas. Vamos brincar e ver quais são esses efeitos diferentes. Se eu segurei o topo, eu posso ver que aqui em baixo, meu retângulo saltou para o topo da caixa. Se eu abraçar o fundo, ele salta para o fundo da caixa. Agora, como nosso retângulo não é uma largura fixa, ele está se expandindo para o tamanho total do contêiner, então não faz diferença se abraçarmos o lado esquerdo ou direito. Quando eu faço elementos, eu uso um monte de alinhamento superior esquerdo ou superior direito para as coisas. Se eu pegar este retângulo eu vou tê-lo para o canto superior esquerdo e agora como eu começar a redimensionar este botão, você pode ver que a forma do botão está mantendo a mesma altura e no lugar certo. Mas nosso texto ainda está fazendo algo engraçado. Eu quero que este texto seja centralizado, então eu vou clicar no texto e eu vou passar para o alinhamento e certificar-se de que ele está centrado dentro da caixa de texto. Eu quero que este texto fique com o botão, mas fique no centro do botão, eu vou fixar este texto no topo. Agora, quando eu fixá-lo na parte superior, eu posso expandir meu botão ou até mesmo encolher meu botão, e meu texto está ficando onde eu queria que ele fosse, e eu tenho meu botão exatamente como eu queria. Ao editar um símbolo, lembre-se de que cada elemento dentro do símbolo pode ter suas próprias configurações de redimensionamento. Você também tem configurações para o símbolo como um todo. Se eu clicar no up-board e apenas estou selecionando o botão. Agora eu posso alterar se eu quero ajustar o conteúdo ao redimensionar, o que é útil, e então eu também posso ativar ou desativar a substituição. Vimos a sobreposição um pouco com o nosso símbolo de estrela, onde em uma instância da estrela poderíamos mudar a cor. Para este botão, a única substituição que temos agora é poder alterar este texto. Você pode ver que ele diz, “Adicionar valor de texto de atualização”, ter isso clicado nos permitirá alterar o texto do botão em qualquer lugar em nosso projeto. Vou mostrar-te como isto se parece. Se eu for até aqui para a ocorrência do símbolo, eu não o substitui, isso me permite mudar o texto no botão. Posso fazer com que diga “Ok” ou “Salvar”. Se eu não quiser que ele tenha qualquer texto, e isso vem a calhar muito para fazer um símbolo onde às vezes há conteúdo e às vezes não há, você pode adicionar um espaço. Isso só irá certificar-se de que o texto está em branco. Eu tenho este botão, mas vamos voltar para a marca. Originalmente eu queria ter um ícone de mais no meu símbolo. Quando eu ir e copiar este ícone que eu queria, eu vou clicar duas vezes neste símbolo. Eu quero ter a capacidade de ter um botão que é apenas texto, mas eu também quero ter este botão mais. Vou duplicar este botão, posso ir até aqui e dizer “Duplicar”. Você também pode clicar no símbolo, auto-duplicá-lo, lá vamos nós. Eu tenho um botão aqui e eu tenho cópia de botão, então eu chamo este botão mais, colar no ícone. Quero que o ícone fique no lado esquerdo do botão, e quero que este botão fique pendurado no lado esquerdo. Eu vou, pino na borda esquerda. Eu também vou adicionar, instância do botão apenas para que você possa assistir o que acontece. Eu tenho este ícone mais colocando o lado esquerdo, vamos ver o que acontece quando eu expandir o botão. Eu tenho a posição certa, mas o que está acontecendo é que quando eu expando o botão, o ícone está ficando distorcido. O que eu quero fazer é que eu quero vir aqui para este ícone e eu vou corrigir o tamanho porque não importa como eu redimensioná-lo, eu não quero que este ícone para obter qualquer tiro mais alto, mais largo, truque em qualquer maneira. Então eu vou apenas clicar no centro, que vai corrigir o tamanho. Você pode ver em nosso caso que o ícone se encaixa de volta ao tamanho certo. Mas quando você olha para o texto, o texto é separado do botão de uma maneira estranha e também sangra para ele. Em vez de o texto ser centralizado, quero que o texto seja alinhado à esquerda. Vamos alinhá-lo lá, e eu também vou fixar o texto no lado esquerdo. Desta forma, o espaço entre este ícone e este texto é sempre o mesmo, não importa como eu expanda o botão. Deixe-me apenas reajustar isso um pouco. Queremos fazer isso um pouco menor, e eu quero que o tabuleiro todo seja do mesmo tamanho. Você pode encontrar isso às vezes, eu tenho esta caixa de seleção marcada que diz “Ajustar conteúdo ao redimensionar”, e é por isso que quando eu estou mudando o tamanho da placa, ele não está realmente encolhendo nossa placa para coincidir com o final deste rosa botão. É só esticar. O que você precisa fazer é desmarcar isso. Agora ele vai permitir que você encolher o tabuleiro todo para que ele abraça a borda do botão. Vamos ver o que acontece agora com o botão quando diz ajustar o conteúdo redimensionar e esse é o objeto, ele ainda funciona. Eu gasto uma boa quantidade de tempo testando meus símbolos para garantir que o redimensionamento está funcionando corretamente. Você pode não fazer a primeira tentativa, tudo bem. Eu vou entrar aqui e mudar este texto, já que este é o botão de adicionar. Vou fazer isto, dizer “Salve”. Se voltarmos para o nosso arquivo, deixe-me me livrar deste sinal de mais, temos o nosso botão regular que o primeiro que fizemos essa mudança para dizer “Salvar”. Mas agora eu quero usar o botão de mais. O que eu tinha que fazer é, ir até aqui para o meu menu suspenso de símbolos e eu vou mudá-lo para o botão mais. O que aconteceu aqui? A área do símbolo para o botão que trocamos é expandida para esta altura. Quando eu fiz este símbolo, eu tinha este ícone abraçar o lado esquerdo, mas ele não abraçou o canto superior esquerdo. Por isso, fica na proporção do lado esquerdo do botão, mas não na proporção do topo. Vou voltar e consertar isso. Vou clicar duas vezes em, e vou selecionar este ícone e vou fixá-lo no topo também. Vamos voltar e ver se consertou. Às vezes, se você substituir um símbolo por outro, talvez seja um símbolo maior substituído por símbolo menor ou símbolo menor substituído pelo símbolo maior, as coisas podem parecer um pouco estranho. Basta entrar e clicar com o botão direito do mouse no símbolo e ir para baixo para definir o tamanho original, e então eu vou encolher até o tamanho do símbolo. Eu também vou puxar isso em um pouco. Então nós temos o nosso botão Adicionar atualização, e é um símbolo. Estamos chegando muito perto de ter essa meta macro simplificada. 6. Criação de símbolos complexos: Tudo bem, então agora vamos trabalhar em um símbolo mais complexo. Tenho aqui esta nova coluna de recomendações. Este retângulo, eu quero que seja para mostrar capas de livros, há texto para o título, o autor. Eu tenho uma linha divisória aqui. Então eu tenho quem me recomendou. Aqui está um lugar para uma foto de alguém e, em seguida, nome de amigo e outra divisória. Quando você está fazendo símbolos, cabe a você decidir quantos itens você deseja transformar em símbolos. Podemos dividi-lo até o ponto em que cada pedaço de texto para este símbolo e trabalhar o seu caminho até tornar seus símbolos realmente amplos também. Eu geralmente estou em algum lugar no meio e à medida que você passa, você vai aprender quais itens são símbolos mais úteis e outros. Vamos fazer alguns símbolos a partir deste, eu vou fazer esta linha divisória para um símbolo, vai aumentar símbolo aqui. Eu quero usar este símbolo de linhas divisórias também para esta linha divisória. Vou apagar este e depois arrastar isto para baixo. Agora isso é bom o suficiente. Vou pegar todos esses elementos agora. Selecione todos eles e transformá-lo em um símbolo complexo. Vou clicar com o botão direito do mouse, “Criar símbolo” para ser. Agora tenho o meu símbolo. Eu posso arrastar vários, eu vou virar minha página. Eles são muito genéricos agora. Vai dizer “Título do Livro”, “Autor” e eu não tenho nenhuma foto. Mas há um plugin chamado Craft, feito pela Envision, e é realmente útil. Eu tenho este plugin instalado e me dá essas opções à direita. Um que é realmente legal para usar os símbolos são dados. Com outra guia de dados, você verá todos esses diferentes tipos de dados, alguns destes que eu adicionei, mas estes são os genéricos. Primeiro quero fazer as capas dos livros. Eu entrei e fiz uma pasta, apenas puxando fotos da Internet de um monte de capas de livros e eu puxei para Craft. Entrei na minha seção de fotos e adicionei uma pasta e a chamei de Capas de Livros. Tudo o que pude fazer é selecionar minhas instâncias do símbolo e ir até aqui para capas de livros. Agora, ele me perguntou qual layout dentro desse símbolo eu quero preencher. Eu não fiz um trabalho de nomear meus símbolos, eu sou confuso assim. Mas se você fosse nomeá-los seria muito mais fácil. Porque é uma foto, só me mostra que conteúdo pode ser preenchido por uma foto. Eu tenho um retângulo, e oval, e duas linhas. As duas linhas são aquelas linhas divisórias que criamos. O oval é este círculo e nome extra amigo, e o retângulo é a área que eu pretendia para capas de livros. Vou selecionar “Cópia Rectangular 6”, vou clicar em “Ok”. Ele puxou três capas de livros aleatoriamente da minha lista. Passo pode maquete pode parecer um pouco mais real. Agora, posso entrar no meu símbolo e ver as minhas substituições. A imagem já foi substituída usando Craft. Mas posso substituir o título do livro para corresponder à imagem agora. Você pode ver que este conteúdo atualizado. Eu só vou passar e terminar o resto destes. Não gosto da hierarquia entre o título e o autor. Eu vou entrar no meu símbolo, eu não estou acostumado a isso, editar isso um pouco. Vou fazer este meio, não o suficiente, torná-lo pesado. Vou fazer o texto do autor. Isto pode ser cobertura, vamos ver como é. Muito melhor, o título se destaca muito mais. Vou até fazer o autor um pouco menor. Tudo bem. Nós também temos uma pasta de fotos de amigos, e eu posso adicionar aqui. Vou selecionar os símbolos novamente. [ inaudível]. Entra aqui. Vou adicionar esta pasta. Desta vez eu quero substituir o oval. Essas fotos não se destacam o suficiente. Vou aqui adicionar uma pequena fronteira. Liste os nomes dos amigos. Os nomes estão um pouco longe das imagens, então eu posso voltar para o meu símbolo, posso mesclar isso. Felizmente, está se deparando com o quão fácil é fazer alterações quando você está usando símbolos. Algo que podemos fazer por causa da forma como construí este símbolo é, não posso desligar nenhuma destas linhas divisórias. Se eu não quiser que a última imagem tenha uma linha debaixo dela. Isso é realmente útil para tabelas, acordeões, muitas linhas repetidas, eu posso clicar nesta instância e eu posso passar para linha divisória. Acho que é a cópia. Na verdade, você pode ver que ele destaca azul quando eu passar o mouse sobre ele, e eu quero selecionar, “Nenhum”. Só por esse exemplo, não há nenhum resultado. Isso é porque eu construí essas linhas como símbolos e as incluí no símbolo para que eu possa substituí-la. Com isso, estamos um passo mais perto de uma incrível biblioteca de símbolos. 7. Naming e organização: Eu fui em frente e adicionei mais alguns símbolos e podemos olhar para eles aqui. Mas ficou um pouco desorganizado, não acha? Os elementos velares misturados e há muitos deles. Vou te mostrar como organizar melhor. O que você quer fazer é ir para a nossa página de símbolos e a forma como esboçar ninhos símbolos está usando uma barra no título. Você nomeia o grupo que você deseja. Para esta primeira coluna, vou fazer um grupo de cores. Barra de cor e, em seguida, você nomear a cor ou barra de ícone e nomear o ícone. Então eu vou para preto e eu nomeá-lo, cor barra preta e ir para o nosso cinza e nomeá-lo, cores barra cinza-4. Estou apenas renomeando o [inaudível]. Você pode clicar em [inaudível] à esquerda, ou você pode clicar com o botão direito do mouse, “Renomear”, e agora vamos ver o que acontece. Há os documentos e vemos, agora temos um grupo de cores, é preto e cinza. Posso fazer o mesmo com ícones. Eu posso chamar este ícone Slash Star. Aqui está o nosso ícone de pesquisa, chame-o ícone barra de pesquisa. Agora, quando eu subir aqui, você pode ver que eu tenho esses ícones. Este eu já tinha nomeado e eu também posso fazer isso. Eu quero fazer um grupo de entradas executa e coisas assim. Pesquisa barra de entrada e na caixa de seleção é parte de nossas entradas, então eu vou fazer entrada barra caixa de seleção barra desmarcada. Esse é o estado da caixa de seleção. Vou nomear este, barra de entrada caixa de seleção barra marcada. O que isso está dizendo é, eu quero grupo de símbolos que são todas as entradas, então eu quero grupo de apenas as caixas de seleção, e então esta chamada para a verificação de estado específico lá, desmarcada. Você vai até aqui, vai para os meus símbolos, vai para a entrada, e eu tenho a minha pesquisa, e eu também tenho caixa de seleção, e eu posso escolher marcada ou desmarcada. Nomear seus símbolos é útil para a organização, mas também ajuda a classificar todos os seus prototipagem. Vamos pegar dois símbolos. Nós temos nossa caixa de seleção, desmarcada, e eu também vou puxar o nosso botão de opção e selecioná-lo. De trabalhar em um fluxo de trabalho, e eu quero mostrar uma caixa de seleção, desmarcada e então marcada. Eu posso ir aqui, clicar na “Caixa de seleção”, passar para o meu símbolo e para o lado direito, e eu posso escolher e apenas alterá-lo para marcado. Mas se eu não nomear meus símbolos e organizá-los de uma maneira fácil de acessar, quando eu vou até aqui para mudar meu botão de opção para dizer que ele foi selecionado, eu apenas percorrer todos os símbolos para selecionar o botão de opção selecionado. A nomeação é útil para a organização, para você e sua equipe entenderem como encontrar o que você está procurando, mas também é útil para criar protótipos e garantir que você possa se mover muito rapidamente quando estiver iterando. Agora eu quero passar e renomear todos esses símbolos. Estou de volta depois de renomear todos os meus símbolos e você pode ver que eles estão todos bem organizados em grupos. Mas na minha página de símbolos, nada está realmente agrupado do jeito que poderia ser para facilitar. Eu usei este plugin muito legal chamado organizador símbolo. Tudo o que você precisa fazer é configurar o organizador de símbolos. Existem diferentes opções de como você pode agrupar seus símbolos. Você pode exibir títulos sobre os símbolos, você pode alterar o espaçamento, e eu vou mostrar o que acontece. Vamos organizar e agora, todos os meus símbolos são agrupados sob esses cabeçalhos, e os cabeçalhos correspondem a essas pastas que criamos. Agora, quando eu olho em minha única página, é realmente fácil encontrar o que eu estou procurando. Adicione algumas informações deste plugin para o curso, e como você criar novos símbolos, tudo que você precisa fazer é ir para o seu organizador simples, executar o seu organizador simples e tudo irá agrupar da maneira que você quer que ele. 8. Usando sua biblioteca: Temos um monte de símbolos. Construímos a nossa biblioteca, nomeámo-la, organizámo-la. Agora o que? Esta é a parte mais curta e fácil de tudo o que estamos a fazer. Digamos que você entrou e criou toda a sua biblioteca de símbolos. Talvez seja só para você usar, talvez seja para você e sua equipe, e você queira colocá-lo em algo em que você está trabalhando, você possa usar todos os símbolos que você criou. Vou criar um novo arquivo de esboço. Você também pode puxar isso para qualquer arquivo de esboço existente. Vá para “Sketch”, “Preferências”, e você tem todas essas guias. Vamos para “Bibliotecas”, e vamos para “Adicionar Biblioteca”. Vou encontrar o arquivo que criamos para construir aquela biblioteca. Chamávamos-lhe Biblioteca de Símbolos. Você pode ver que são as nossas marcações e alguns símbolos. Então eu abro, e agora está checado. O que significa ser verificado é que se eu passar aqui para o meu plus, eu tenho a opção de usar todos esses símbolos que eu criei em outro documento. Aqui estão m cores. Agora posso usar aquela biblioteca que criamos em vários lugares. Se eu quiser editar alguma coisa. Então, se eu quiser tomar criar dois e eu quero mudá-lo para um cinza diferente. Posso clicar duas vezes e recebo este menu, diz que o símbolo pertence a uma biblioteca externa, sendo as bibliotecas externas o arquivo que criamos. Eu posso desvinculá-lo da biblioteca, então ele não está mais conectado dessa maneira ou eu posso abri-lo nesse documento. Se você tiver acesso ao documento, ele abrirá para você. Isso nos leva direto ao símbolo. Eu posso ir aqui e posso mudar a cor um pouco se eu quiser. Vou torná-lo talvez um cinza mais escuro, e ele me diz que este documento é uma biblioteca. Eu posso salvá-lo. Então eu apenas Apple S, salvei. Se devolvi o meu novo documento, tenho esta actualização no canto superior direito. Diz que as atualizações da biblioteca estão disponíveis. Posso ver que houve uma mudança. Eu tinha uma cor antiga, era cinza claro. Agora a nova cor é o cinza e eu posso optar por atualizar isso e certificar-me de que minha biblioteca está atualizada. Se eu estiver em um arquivo e não quiser usar essa biblioteca, posso entrar e desmarcá-la e ela não aparecerá à minha esquerda. Você pode ver aqui, entretanto, desde que eu adicionei nestes símbolos como símbolos, eles ficam no meu documento mesmo se eu desvincular essa biblioteca. Mas se eu puxá-lo de volta e eu ligá-lo novamente, eles vão direto para a biblioteca de símbolos. 9. Usando símbolos em vários fatores de formas: Eu falei sobre como símbolos tornam sua prototipagem mais rápida. Eu queria apenas mostrar-lhe como você pode pegar uma maquete que talvez seja desktop e converter em uma página móvel. Os símbolos, pode ser muito mais fácil. Tenho uma página de perfil que não foi construída. Eu carrego nosso cabeçalho, eu poderia até fazer isso em seu próprio símbolo em algum momento, e eu vou adicionar alguns campos. Quero ligar para este, dizer nome, e-mail. Quero fazer um que seja sobre você. Você pode ver que eu ainda não trabalhei no redimensionamento desses símbolos. Há um espaço entre o nome e o lado esquerdo do símbolo, eu só preciso entrar e vejo que o texto está centralizado e não alinhado à esquerda aqui na área de alinhamento. Vou clicar nisso. Lá vamos nós. Tenho isso sobre você, mas não nos dá muito espaço para datilografar. Quero criar um novo símbolo que seja uma área de texto maior. O que eu posso fazer é pegar uma instância de um símbolo e separá-lo, e então fazer um novo símbolo. Quero que clique com o botão direito do mouse nesse “Sobre você”. Quero descer para “Desanexar do Símbolo”. Se olharmos à esquerda, é uma pasta, não um símbolo porque não temos o ícone de seta dupla. Daqui, eu vou fazer isso, eu não vou desagrupar isso por um segundo. Quero tornar isto maior algo assim. Vou agrupar isso novamente, clique com o botão direito do mouse, “Criar símbolo” chamá-lo de entrada/texto grande. Eu também tenho esta foto de perfil, editar a opção de imagem. Vamos pegar esta página de perfil básico e ver como ele se parece no celular. Eu sei que há também um móvel de trabalho primeiro, projetando primeiro no celular e depois no desktop. Eu vou pegar este título, e eu quero que ele seja centrado nesta página. seguir é a foto do perfil, eu enviei para isso também. Vou puxar os seus campos. Você pode ver que este campo é um pouco longo demais para que eu possa pegá-lo para que ele se encaixe melhor. Vamos ver. Eu não posso ajustar o tamanho agora, mas isso pode ser algo que eu queira fazer, então eu vou entrar e editar meu símbolo e eu tê-lo em uma altura fixa. Vou desmarcar isso. Agora deve permitir-me expandir isto tanto quanto eu quiser. Algo que eu não adicionei a essas entradas que eu realmente recomendo, vamos ver, eu vou editar isso e eu vou adicionar em algum texto. Informação do campo. Eu vou consertar a altura, mas eu quero que isso seja capaz de ser o tempo que eu quiser para encher o espaço. Quero adicionar o campo superior esquerdo. Agora eu volto. Eu tinha esses campos editáveis. Posso dizer pelo nome e dizer, Tina Musich, sou eu. E-mail. Se eu quisesse simular um perfil vazio, vamos entrar aqui e adicionar um espaço ao meu texto de campo. Adicione um espaço aqui e ele aparecerá em branco. Eu entro nessa imagem e posso fazer disso um símbolo se eu quiser. Vamos mudar isso para cinza. Assim, eu tenho um exemplo de um perfil não editado e um perfil editado e eu tenho a versão desktop. 10. Hora do projeto!: Agora que você tem as informações básicas e criar a biblioteca de montagem, é hora de colocar suas habilidades para trabalhar. Faça um projeto em que você está trabalhando e tente converter alguns desses elementos em símbolos. Treine símbolos com símbolos para tornar as coisas ainda mais poderosas. Inclua o arquivo para você usar no caso de precisar de algo para simbolizar. Você tem alguma pergunta? Por favor, poste no conselho comunitário e eu ajudo-o. Quando terminar, não se esqueça de compartilhar suas bibliotecas, para todos possam conferi-las. Importa-se de ver o que você fez.