O guia sem touro para se tornar um profissional figma em 2023 e profissional de UX/UI/produto

1. Introdução e trailer: Ei, obrigado por clicar aqui e queria conferir meu curso sobre Figma. Então, este é o curso nobre sobre Figma. E o que vamos fazer é ensinar você a se familiarizar com a ideia de ser um Figma Pro o mais rápido possível. Meu nome é Chuck e, de acordo com a filosofia do Nobel, o que você vai ganhar com isso não é nada extra, nada fofo. Forneceremos exatamente o que você precisa para ter total confiança e competência no uso da ferramenta Figma, a fim de realizar todas as ideias e coisas que você está discutindo com seus amigos, com seus colegas de equipe e expressar isso na ferramenta Figma. Então, há algumas razões pelas quais você pode querer confiar em mim, confiar neste curso e ver como vamos chegar lá. Usar meu curso é quádruplo. A primeira é que sou usuário do Figma desde 2018. E não só isso, atualmente sou amigo de Figma na área de Manchester. Então, estou muito atraída Figma e eu realmente a amo e o que consegui alcançar com ela. E isso é algo que eu adoraria compartilhar com todos vocês. O segundo é o tipo de trabalho que eu também fiz. Então, eu tenho sido um excelente engenheiro de software, o próximo líder de tecnologia. Então, eu não só entendo como ser designer de produto e como tirar o melhor proveito do Figma e fazer com que seu fluxo de trabalho seja simples e direto possível. Mas eu sei do que seus engenheiros precisarão porque eu tenho esse conjunto de habilidades. Eu sei como tudo se encaixa. Então esse é o segundo motivo. O terceiro é um tipo de lugar em que eu também trabalhei. Portanto, não são apenas empresas em que trabalhei ou startups que trabalharam para ambas. Portanto, em termos de empresas e empresas que trabalharam em ordem cronológica inversa, está a Jaguar Land Rover. Antes disso, trabalhei no Banco Cooperativo aqui no Reino Unido. E antes disso eu estava em uma consultoria chamada KYC Solutions, que agora faz parte do streaming da Disney. Então você sabe que não se trata apenas de HTML, CSS, algumas das coisas básicas. Serão coisas muito complexas e difíceis que eu consegui realizar e entregar dentro do conjunto de habilidades de engenharia. Então, eu sei exatamente como essas pessoas pensam, como essas pessoas nessas posições querem receber designs. Do lado da Figma. O próximo é médio. Por isso, escrevo artigos e mídias há alguns anos, com mais de 300.000 visualizações, devo acrescentar o UX Collective, o maior meio de publicação de UX. E estou muito interessado em ensinar outras pessoas da comunidade a fazer desde algumas das coisas mais simples, como garantir que você domine o aninhamento de estruturas no Figma, até coisas mais complexas, como realmente ser capaz de criar aninhamento de estruturas no Figma, até coisas mais complexas protótipos de pontos de interrupção e montar esses tipos de protótipos. E nem sempre são úteis. Não me entenda mal. Mas às vezes eles realmente valem a pena quando você realmente quer conferir algo e garantir que o protótipo seja o melhor possível para obter o melhor resultado possível para seus usuários e para seu produto. E se isso não for suficiente para você, tenho aqui a janela do meu curador de estimação para manter a empresa de tempos em tempos. Portanto, fique de olho e você poderá se juntar nós em algumas das aulas. Mais uma delonga. Se você não está convencido até agora, então não há nenhum ângulo para convencê-lo. Então, para aqueles que querem continuar, muito obrigado por escolherem me dar uma chance e eu não vou decepcioná-los. Vamos começar. 2. Janela, painéis e o palco principal: Nesta lição, abordaremos os painéis básicos, janelas e coisas que você deve conhecer ao abrir um arquivo pela primeira vez no Figma e se orientar. Então, o que abordaremos é o painel de camadas, o painel de páginas , os painéis de design, protótipo e inspeção, bem como onde suas ferramentas e itens padrão estarão localizados. Então, aqui, quando você abre uma janela do Figma e abre qualquer arquivo, ou mesmo quando você não abre o arquivo, você verá um pequeno ícone de adição na parte superior. E você verá esta página, que é útil quando você quer escolher entre um arquivo de design e um arquivo fig gem. Abrirá um novo arquivo de design aqui e orientará você para as diferentes janelas e onde tudo está localizado. Então, como você pode ver quando abre pela primeira vez, não há muita coisa acontecendo. Você tem o palco principal no centro. Então é aqui que você fará a maior parte do seu trabalho de design. Você tem o painel Layers aqui aberto por padrão à esquerda. Portanto, todas as coisas importantes que você deseja conhecer e gerenciar estarão lá. Então, enquanto eu crio algumas coisas básicas, você verá que as diferentes camadas aparecerão aqui no painel de camadas. O que você verá é que o painel de páginas não está aberto por padrão. Então, eu normalmente abro isso sozinho e quando meu arquivo começa a ficar maior e quando eu quero me organizar, trabalhando com outras pessoas, é isso que eu vou abrir. E você pode criar páginas aqui, de forma bem simples. Os outros painéis que você deve conhecer também estão aqui no lado direito. Então, se eu criar um retângulo simples, você verá que o painel de design abre algumas opções diferentes sobre sua localização, tamanho e algumas personalizações diferentes que você pode fazer. Esse painel de design muda dependendo do tipo de camada que você abriu. Então você pode ver aqui, com a camada de texto, que eu tenho as diferentes coisas que posso abrir e editar do ponto de vista técnico. Os outros painéis que você verá são que, quando eu crio uma moldura simples, é isso que eu quero criar um protótipo e criar alguns fluxos para criar um protótipo clicável. É aqui que eu precisarei estar. Assim, você pode criar alguns pontos de partida de fluxo , dependendo da estrutura que você tem. Configure as interações de diferentes quadros ou de diferentes camadas. Então você pode criar uma interação a partir dessas coisas, mas você pode criar uma interação a partir dessas coisas. Então, o que mais você verá é o painel de inspeção no lado direito. Portanto, isso produz algumas propriedades e cores geradas automaticamente. Portanto, eu mesmo não os uso muito pessoalmente. Mas seus desenvolvedores, desenvolvedores com quem você trabalha, podem usá-los eles mesmos. E você pode ver alguns códigos básicos gerados automaticamente que podem ser úteis. Então, as duas coisas que eu quero chamar sua atenção, ou três, na verdade, são. O primeiro é o plano de fundo. Assim, você pode mudar a cor do plano de fundo se for tarde demais para você, se quiser trabalhar em um fundo mais escuro, digamos que você esteja mais confortável com isso. Então, geralmente é bom tê-lo aqui. Interessado em mudar isso, mas eu gosto de deixar isso como padrão. Em segundo lugar estão os estilos locais. Isso é o que eu queria compartilhar com você. Então eu criei um retângulo aqui e vamos mudar essa cor para algo aleatório, como verde limão. Depois de criar essa cor, podemos adicioná-la à nossa biblioteca local. Ao fazer isso. Verde-limão, vamos chamá-lo. O que isso faz é adicioná-lo aos seus estilos locais. Portanto, há várias coisas diferentes que você pode adicionar. Texto, cores, efeitos e estilos de grade que talvez você queira usar para ajudá-lo a criar seus designs e protótipos. Aqui em cima, no topo, está a última coisa. Eu, a penúltima coisa, na verdade, antes de falar sobre isso, a segunda, a última coisa que eu quero compartilhar, penúltima coisa que eu quero compartilhar com você é essa coisa aqui em cima. Assim, ele seria capaz de ver onde seu arquivo está localizado e renomeá-lo. Então, meu primeiro arquivo. Aqui, você terá algumas opções diferentes para poder mover seu arquivo para um projeto diferente duplicá-lo se quiser publicar sua biblioteca. Então, quando você começa a trabalhar com sistemas de design, isso é algo que você pode querer usar. A última coisa a compartilhar e abordar com você é que todas as suas principais ferramentas estarão aqui. Eles são aparentemente simples. Não há muitas ferramentas que o comparem. Se você é um pouco antiquado e já usou o Photoshop antigamente. Há um painel enorme, ferramentas diferentes que você pode usar. Na próxima lição, abordaremos essas ferramentas, como usá-las e como tirar o melhor proveito delas. 3. Ferramentas e seus atalhos de teclado: Então, a seguir, abordaremos as diferentes ferramentas e orientaremos sobre quais são as ferramentas, para que você pode usá-las, os atalhos que você também poderá usar e, em seguida, alternar entre as diferentes coisas. Então, de volta ao arquivo, começará da esquerda para a direita aqui na barra superior. Portanto, a ferramenta padrão que você tem é a ferramenta de ponteiro. Portanto, se você tiver algumas coisas diferentes, a ferramenta de ponteiro é boa para simplesmente arrastar as coisas. E o atalho para isso é v. Então, pelo que me lembro, a letra V é bem pontiaguda. Então você também pode usar isso. Aponte ao redor. Abaixo está a ferramenta de escala. Então, demoramos um pouco para descobrir isso, mas a ferramenta de escala é realmente muito legal. Então k é um atalho, ou você pode clicar usando a barra de ferramentas no canto superior esquerdo. E isso é muito novo, na verdade, isso é bem recente. Isso não estava aqui antes, e você pode escalar por fatores que você deseja escalar por padrão. O padrão é do canto inferior esquerdo, eu acredito. Então, fazemos vezes dois. Você pode ver que ele cresceu no canto inferior esquerdo. Você também pode crescer a partir do centro. Então, se eu fizer duas vezes novamente, você pode ver que agora se sobrepõe ao quadrado à esquerda deste. Então essa é a ferramenta de escala e você também pode clicar nas coisas e simplesmente clicar e arrastar como quiser. Você também pode escalar. Na verdade, é proporcional, acho que é o que estou tentando dizer. Portanto, você não precisa se preocupar muito em obter o tamanho certo. Se você voltar para a ferramenta de ponteiro, poderá alterar a forma. Como você poderia esperar. Em seguida, temos as molduras, as seções e a fatia. As molduras são seu pão com manteiga, então vamos abordá-las no próximo módulo. É assim que você une diferentes protótipos e pode trabalhar no agrupamento de quadros. E quando você usa a ferramenta de moldura, você também obtém algumas predefinições. Portanto, é muito legal que você possa usar coisas como a predefinição do Apple Watch ou usar outras coisas e dizer que, na verdade, eu tenho o MacBook Air e quero criar um protótipo com base nesse tamanho de tela. Então, isso é muito útil. O que você também pode usar. Aqui está a ferramenta da seção. O atalho é Shift S. E a seção é muito boa para montar suas coisas. Assim, você poderá organizar suas coisas completo e arrastá-las para a esquerda e para a direita. Isso é muito legal. Vamos nos livrar disso. Em seguida, temos as ferramentas de modelagem. Portanto, o padrão é o retângulo. Então, como você viu lá em cima, se eu usar are, posso desenhar um retângulo e personalizá-lo à direita. Eu também tenho a ferramenta de linha e a ferramenta de seta. Então eu posso usar L para desenhar uma linha, ou eu posso usar Shift L para desenhar uma seta. Eu posso usar 0 para, é a ferramenta Ellipse, mas eu me lembro que é 0 para oval. Então eu vou arrastá-lo. Ele não mantém nenhuma proporção. E eis que Shift vai ser exatamente quadrado. Isso. Isso é muito bom para criar formas ovais e fazer coisas como avatares ou alguns ícones. Você também tem essas outras ferramentas, o polígono e a estrela. Portanto, a estrela é praticamente padrão, basta criar um ícone de estrela conforme desejar. E você também tem o polígono. Então, por padrão, isso é um triângulo. Mas no próximo módulo, veremos como editar isso e algumas coisas detalhadas sobre edição de formas. Ele também recebeu uma imagem ou vídeo do Place. E eu normalmente não uso isso. Na verdade, arraste direto da área de trabalho ou do meu navegador de arquivos. E eu acho isso muito mais fácil. Em seguida, temos a ferramenta de caneta e lápis. Eu não uso muito a ferramenta de caneta porque é ponto a ponto, o que é normal. Mas o que eu tenho usado com mais frequência é a ferramenta do lápis. Então, eu poderia usar isso para anotar coisas e dizer que este é meu polígono e isso é uma estrela. Então, descubra que a ferramenta de lápis é muito boa e funciona também em iPad e tablets. Então, isso é muito bom se você quiser apenas esboçar algo ou fazer alguma anotação e crítica de design. Você tem a camada de texto. Assim, você pode criar camadas de texto e adicionar seu texto aos seus designs e protótipos. Você tem os recursos que abrangem seus componentes, plug-ins e widgets. Então, isso é muito útil. Então você tem a ferramenta manual. Então, o que você deve ter notado é que eu estava arrastando sempre que queria navegar, faço uma ferramenta manual, mas você também pode clicar com o botão do meio do mouse e usá-la para mover seu arquivo. E, finalmente, temos os comentários. Então, posso pressionar C para comentar e dizer que esta é uma camada de texto. Aí está. Essas são todas as ferramentas com as quais você precisa trabalhar. 4. Páginas e nomes de página melhores práticas: Então, finalmente, a última coisa que acho que vale a pena cobrir por si só são as páginas. E isso porque nem sempre, não está claro à primeira vista quantas páginas você deve ter, como você deve estruturar isso, esse tipo de coisa e também as limitações. Então, em termos de recomendações e como eu sugiro, você organize suas páginas e as junte, se você usar essas cinco constantes diferentes. Então, primeiro você tem sua capa. Então, essa é a primeira página em que ao voltar ao navegador de arquivos, você verá tudo o que tem nesse arquivo específico. Portanto, também pode ser bom. Coloque isso em cima e diga meu primeiro arquivo. E se eu emoldurar isso, isso pode ser a folha de rosto. Então, quando alguém olha esse arquivo no navegador de arquivos, isso é o que eles verão. Assim, você pode colocar as informações principais, usá-las para status, esse tipo de coisa. E isso é muito útil quando se trabalha com outros designers. E até mesmo para se lembrar no que você está trabalhando e o que está contido nesse arquivo. O próximo são esses dois. Então, eles são chamados de Final e Protótipo. Portanto, o final também pode ser chamado de transferência. Às vezes. Eu gosto de colocar isso como a segunda página. É quando você termina de passar pelo processo de design e termina de descobrir o que deseja construir, como deseja construí-lo, esse tipo de coisa. Esta é a página para a qual eu direcionaria meus engenheiros e projetistas quando quisesse eles vissem exatamente o que precisa ser construído e o que exatamente está por vir. E o que eu gosto de fazer é detalhar isso também um pouco. Então, isso é o que você consideraria a página finalizada, se quiser. Você também pode criar versões alternativas. Então, às vezes, isso pode ser útil, se você quiser indicar às pessoas que, na verdade, passamos por algumas revisões importantes. E queremos criar uma versão um, mas aqui está uma versão dois que talvez queiramos colocar no topo. A próxima sugestão é um protótipo. É quando você tem um protótipo clicável de ponta a ponta e o que eu gostaria comunicar a outros designers e desenvolvedores, etc. Talvez diferente do protótipo clicável ou dos testes de usuário que estou montando. É por isso que eu recomendo ter isso como uma página separada. Trabalhar é o próximo. Então é aqui que você passaria a maior parte do seu tempo ou onde eu passo a maior parte do meu tempo experimentando alguns fluxos diferentes, algumas ideias diferentes, algumas maneiras diferentes de modelar algo ou comunicar algo ao usuário e ver se podemos chegar a uma conclusão até tomar uma decisão sobre o que deveria ser. Isso é bom se eu também precisar fazer algumas pequenas correções e ajustes, uma atualização. exemplo, talvez queiramos alterar a escala do tipo em seus primeiros dias ou mais tarde, podemos optar por alterar o raio da borda e garantir que pareça correto ou atualizar a cópia, por exemplo antes de passar para a página de entrega. O último que eu recomendaria são os componentes. Portanto, há outro módulo sobre o qual discutiremos os componentes de ponta a ponta e em profundidade. Mas ter uma página separada com seus componentes é muito útil para que, se outros designers entrarem em seu arquivo, eles não cliquem no arquivo de trabalho e digam onde estão todos os componentes? Ou entre no protótipo e diga: onde estão todos os diferentes pedaços? Talvez copie demais em vez de coisas erradas. Então, tenho alguns blogs diferentes e coisas falando sobre isso, sobre por que isso é uma coisa realmente útil de se fazer. Resumindo, se você tiver uma página em que criou todos os novos componentes de trabalho, todos os novos componentes de trabalho são todos os componentes locais. É bom separar os dois e colocá-los juntos na mesma página. Então você pode ver claramente, aqui estão os componentes que eu criei que devem ser absorvidos de volta por um sistema de design maior. Aqui estão os componentes locais que eu usei apenas localmente para este arquivo para entregar o trabalho e chegar à decisão. Então, isso encerra o primeiro módulo. Espero que tenha sido útil, tenha fornecido uma orientação em termos de onde estão os diferentes painéis e como se orientar em Figma dentro do arquivo de design. Onde encontrar as principais ferramentas que você precisará usar e como usá-las, bem como as páginas e minha configuração recomendada para páginas. No próximo módulo, abordaremos as formas e as ferramentas e as usaremos com um pouco de profundidade. Assim, você pode ver um pouco mais de detalhes como tirar o melhor proveito dessas coisas, em vez de apenas arrastar e soltar as diferentes predefinições. 5. Ponto de verificação 1: respire: Legal. Então, espero que você se sinta orientado pelo programa Figma e não se sinta muito perdido ao entrar e tentar descobrir o que é essa janela, o que faz essa janela, agora você tem uma ideia de onde todas as coisas principais estão que faz essa janela, agora você tem uma ideia de onde em um arquivo de design de figma. Em seguida, abordaremos cores, linhas e formas, e topografia, não nessa ordem, mas examinaremos essas coisas. Você também parece confuso. Você é como eu gritei. Sim, vamos examinar essas coisas. Sim, você está indo muito bem. Continue assim. 6. Molas, raio de borda e edição de forma: Neste módulo, será muito fácil. Vamos abordar formas, raio de borda e edição de formas. Esses são os fundamentos e você já usou coisas como o Sketch ou o Photoshop antes, ou já experimentou editar essas formas diferentes ou até mesmo fogos de artifício de mídia macro quando isso existia. Você achará isso bastante natural. Caso contrário, não se preocupe, abordaremos os diferentes detalhes e os detalhes que você precisa saber para ser bom designer de produto ou interface de usuário. Então, de volta ao editor, começaremos com a ferramenta de retângulo. O atalho novamente é nosso, se o criarmos, é bom, muito simples. Você pode criar algo além de adicionar um raio de borda. Você pode adicioná-lo aqui. Então, o que isso faz é adicioná-lo a todos os cantos diferentes. Portanto, isso é muito bom para criar um tipo de cartão, por exemplo, você também pode fazer isso em dois quadros, aliás, como uma rápida observação, para que você possa adicionar raio da borda para que seja útil posteriormente. E o que você precisa saber sobre o raio da borda é que você pode torná-lo independente. Então, por exemplo I. Talvez queira deixar os dois cantos inferiores afiados, mas o superior realmente seja arredondado. Se eu estiver criando, por exemplo, I. Clique com o botão direito do mouse e vire verticalmente, posso deixar isso branco, por exemplo e torná-lo mais curto. E então parece um pouco mais com um cartão. Isso é muito útil ao trabalhar com raio de borda. Se adicionarmos um polígono, posso te mostrar onde. Acho que aqui o raio da borda ainda funciona em todos os cantos. Mas o que você pode fazer é quando você entra na edição de formas, é aqui que você pode adicionar mais vértices, eu acho que é a palavra certa. E todos eles têm borda independente, valor de raio. Então, aqui eu posso mudar isso para 999 e isso é como uma supercurvatura aqui. Mas posso deixar esses dois como estão e adicionar mais coisas conforme necessário. Então, talvez eu precise de uma forma diferente. Portanto, isso é muito útil se você quiser fazer alguns ajustes finos em alguma forma e fazer um trabalho mais ilustrativo naturalmente, como editar a forma. E então, usando o raio da borda em conjunto com isso, você pode criar algumas formas realmente complexas ou algumas formas realmente fascinantes conforme necessário e conforme achar melhor. A ferramenta oval é provavelmente a próxima coisa interessante para compartilhar com você. Então, novamente, lembre-se de que 0 é para oval. E se eu segurar a tecla Shift, posso mudar o ar, manter a proporção enquanto atualizo o tamanho. Então, isso é realmente muito útil quando estou trabalhando com essa coisa. A outra coisa a mencionar é que também há a rotação. Portanto, se você fizer isso da maneira errada, poderá alterar a rotação do objeto ou passar o mouse próximo a um dos cantos, arrastá-lo para o ângulo certo de sua preferência. Mantendo pressionada a tecla Shift. Você pode alterá-lo para um dos graus de encaixe. Então você pode ver aqui que ele muda a cada 15 graus. Se você estiver de olho no valor no canto superior direito, isso é muito útil quando você quer trabalhar em formas, juntando-as usando o raio da borda, adicionando esses vértices e criando formas personalizadas. Usando isso para conseguir exatamente o que você quer e juntá-los todos. A última coisa antes de eu seguir em duas linhas é a Star Tool. E não tenho certeza, para ser honesto com você, por que essa é sua própria ferramenta personalizada. Mas aqui tem essa propriedade especial sobre relatos de raios que são picos que você pode ter na estrela. Então, às vezes, é divertido brincar com isso. Parece que 60 é o máximo que você pode fazer. Mas isso é muito útil se você precisar de uma forma mais em forma de estrela. 7. Truques com raio fronteiriço: Uma última coisinha que eu gostaria de mostrar para vocês, que é muito legal, é se vocês se lembram, usamos 0 e pressionamos Shift e podemos fazer um círculo. Agora, com o raio da borda, vamos criar um retângulo do mesmo tamanho. E se você definir o raio da borda para um valor alto, digamos 200. E agora também parece um círculo. Deixe-me mudar essa cor para que você possa ver isso com um pouco mais de clareza. Mas tenha cuidado ao usar isso. Porque se eu usar apenas a ferramenta normal de ponteiro de pontos e depois redimensioná-la. E você poderá ver que um permanece como um círculo. E um parece um retângulo com bordas muito curvas. Portanto, tenha cuidado ao usar essa técnica, o que não está errado, mas é uma pequena técnica interessante que você pode usar. Se você precisar fazer um círculo rapidamente. E você quer usar a ferramenta retangular em vez disso, ou é isso que vem à mente primeiro. 8. Linhas e setas: Agora que você conhece as ferramentas para criar formas, editar formas em linhas e setas, no raio da borda , o que será muito fácil para você. Eu vou te mostrar. Então, primeiro vamos criar algumas linhas e coisas para trabalharmos. Então você usa o, você pode clicar aqui para obter uma linha e desenhá-la normalmente. Ou você pode usar l como tecla de atalho para fazer isso. E se você pressionar Shift, você pode, em vez de deixá-la de forma livre, fazer com que ela se mova para baixo em um ângulo específico. Você pode alterar a espessura do mesmo. Você tem todas essas configurações diferentes aqui, então isso é muito útil. Eu posso simplesmente digitar azul , por exemplo, e fazer isso. Mantenha pressionada a tecla Shift e pressione L para abrir a ferramenta de seta. Portanto, é bom ficar de olho no canto superior esquerdo para ver qual ferramenta você está usando. E então isso cria uma flecha. E posso usar isso para anotar meus designs e coisas nas quais estou trabalhando. Então, por exemplo, eu poderia fazer isso e , em seguida, pressionar Shift L toda vez para conectar todas as formas diferentes que eu tenho. Se você quiser fazer com que a seta tenha uma forma diferente, por exemplo, o que eu faço às vezes com facilidade, arraste um vértice extra e altere-o para, digamos, 50, talvez 200. 200 nos dá um pouco mais para jogar com isso. E dá uma boa curva. Assim, você pode clicar duas vezes para entrar na edição e clicar duas vezes em fora para sair. E a partir daqui, agora eu tenho uma pequena flecha bonita que posso arrastar até aqui. Eu posso ir até a esquina e girar e dizer que aqui está o meu, vamos usar T para texto. Só para ilustrar e usar K para ampliar. Então, aqui está meu ponto de partida. E eu posso anotar uma pequena flutuação. Isso dá uma ideia da ferramenta de linha, da ferramenta de seta, de como editá-la e movê-la. E praticamente para que você pode usá-lo. 9. Estilos de cor: Então, nesta parte, vamos falar sobre estilos. E primeiro falaremos sobre estilos de cores, como configurá-los e começar o mais rápido possível para que você possa começar a criar coisas mais rapidamente. Então, no meu primeiro arquivo, você deve ter notado, ou se você se lembra de uma das lições anteriores, configuramos um estilo de cor básico chamado verde limão. E só para recapitular, quando fazemos algo como um retângulo. Portanto, o atalho é R, e você pode simplesmente arrastar até o palco principal. Para fazer isso, podemos atualizar o preenchimento com um dos estilos locais que criamos. Então, uma coisa que você notará é que eu tenho um conjunto de cores diferentes aqui. E eles costumavam ser fornecidos por padrão sempre que você criava uma nova equipe, mas esse não é mais o caso. Então, o que vou fazer é fornecer um link na descrição disso. Se você quiser usá-los ou se quiser usar algo mais moderno, o que eu vou fazer é usar o design de materiais, usando alguns desses recursos. E eu os sugiro para configurar sua paleta e começar a trabalhar com eles. Então, por exemplo, temos esse arquivo que eu encontrei na comunidade. Então, temos cerca de 5.000 downloads e é muito fácil. Você pode simplesmente fazer uma cópia. E tudo o que você precisa fazer é clicar aqui. Clique em Publicar biblioteca. Estou usando o plano gratuito e, provavelmente, são apenas dois estilos. As cores padrão. E publique esses estilos. E aí está. Então, a partir daí, você poderá voltar ao seu arquivo. Você pode clicar em Figma e clicar em Bibliotecas apenas para ter certeza de que as compartilhamos. E você pode ver que eu tenho essas bibliotecas disponíveis que permanecem. Mas neste eu acabei de publicar o material de design em duas cores. E assim, no plano gratuito, você pode compartilhar os estilos básicos. Então, o que isso significa é que agora eu posso clicar em Fechar e mudar a cor de preenchimento. E eu tenho todas essas cores disponíveis em um espectro de cores. Então, o pedido está ok. Você os tem como absolutamente não, é muito bom, na verdade. Então, nos baseamos no material para projetar agora, daqui a três anos, mas isso ajudará você a começar e, pelo menos, a trabalhar com alguma coisa. Então, posso definir o traçado disso, por exemplo vamos definir isso para dez pixels. Talvez seja demais, talvez cinco. E podemos entrar aqui e atualizar essas cores e defini-las como quiser, talvez uma cor um pouco melhor do que essa. Então, o que isso significa é que você pode configurar esses estilos. E então, em vez de tentar lembrar os códigos hexadecimais como esse, como se lembrar de coisas como d9. Isso significa que, ao analisar seu design, você pode tentar se lembrar de quais são. Uma dica que eu também vou te dar é que você pode pesquisar por nome. Então você pode ver na escala de cores do material, que eles vão de 50 aqui até o tom mais escuro, que é 900. E então eles têm algumas tonalidades de 100, 200, 300, etc. Assim, você pode filtrar por eles e digitar pink 700 e ele virá direto para cima. Portanto, essa é uma maneira muito fácil de montar rapidamente o design e garantir que suas cores sejam consistentes, de modo que ao juntar e usar, dê um passo atrás, o design pareça furado. 10. Estilos de tipografia: Ótimo. Agora que você configurou as cores, vamos configurar a tipografia. Porque depois de juntar essas duas coisas e usar as ferramentas básicas de forma do Figma, você já poderá criar muitas coisas sem aprender algumas das outras técnicas mais avançadas. Entre. Quando se trata de tipografia. Não se esqueça de que nossa tecla de atalho é T para texto. Quando inserimos, podemos dizer meu primeiro título, por exemplo, o que vamos querer fazer é mostrar como configurá-lo. Se você quiser criar sua própria pilha de tipografia. E então eu vou te mostrar o atalho. Então você pode avançar. Se você é do tipo atalho de pessoa como eu, ou se quer entender como isso funciona, isso também é como eu. Vou te dar uma introdução rápida. Vamos definir meu primeiro título. Vamos chamar isso de 24 pontos. E se você quiser criar um estilo e clicar no sinal de adição, não se esqueça, podemos definir um e dizer Estilo de título. Agora, quando quiser criar mais alguns textos, você pode dizer outro texto, e o padrão será o estilo de cabeçalho dos textos mais recentes. O que você pode fazer se quiser definir algum corpo de texto é dissociá-lo . Então, se você ficar preso, não se esqueça, você sempre pode separar o estilo. Não há problema com isso. Defina o tamanho dele. Vamos deixar isso de volta para irregular. E agora eu posso fazer outro estilo legal. Agora, quando eu tenho algumas coisas diferentes que estou projetando ou montando. Agora tenho meus estilos locais definidos para cabeçalho e corpo. E talvez eu consiga criar mais alguns. Então, se você tem uma ideia clara daquelas que deseja implementar, ou tem experiência em design gráfico, por exemplo, ou talvez tenha experiência em engenharia de front-end e já tenha visto esse tipo de coisa. Isso é legal. Você sempre pode configurar isso, personalizar e jogar com seu coração o quanto quiser. Se você quer avançar rapidamente e não é muito designer visual. Como se eu ainda fosse até certo ponto. O que você pode fazer em vez disso é baixar algo, por exemplo como fizemos com as cores. Aqui está um arquivo que encontrei sobre a comunidade. Então, eu já copiei isso em meus rascunhos. E, assim como antes, podemos publicar esta biblioteca, publicar apenas estilos, digamos estilos de fotografia de tipo básico. Muito simples. Podemos voltar para aqui. Clique em Bibliotecas no menu figma no canto superior esquerdo do meu arquivo. E então eu posso habilitar essa biblioteca de arquivos no meu arquivo de trabalho atual. Se fecharmos isso e depois fizermos uma cópia disso. Então eu posso comandar C, clique com o botão direito do mouse em colar aqui. Agora, eu posso alterá-los e posso ver esses estilos de tipografia de design de materiais. Então, digamos que o título dois, que é enorme, e temos o corpo um. Então, quando você está montando seus próprios designs e coisas que deseja montar. Você também pode usar isso como base e depois ajustar esses estilos. Eu sugiro tentar manter algum sistema existente. Se você não é muito experiente, nunca fez esse tipo de coisa antes. Acho muito útil porque define a escala tipográfica de uma maneira agradável, onde é muito fácil ver qual é o título, o que é o corpo e o que é um rótulo? Por exemplo, se eu estiver fazendo um botão, posso acessar o estilo do botão e configurá-lo de forma que você possa reconhecê-lo visualmente e distingui-lo dos outros estilos. Então aí está. Há uma configuração rápida em têxteis, como fazer isso sozinho. E uma sugestão de algo que pode ajudá-lo a começar imediatamente. 11. Ponto de verificação 2: ainda respirando?: Coisas cinzentas. Então, espero que você esteja gostando do curso até agora. Neste módulo, abordaremos quadros, grupos em seções. Agora, isso merece seu próprio módulo porque há algumas diferenças sutis entre um grupo e um quadro A. E o que você notará é que sua memória muscular pode ser usada agrupando coisas. É importante observar que há uma diferença e as molduras são, na verdade, mais poderosas. E eu vou te mostrar os motivos pelos quais eles são mais poderosos e por que você os usará com mais frequência. Mas também é muito importante lembrar por que é muito importante lembrar os grupos, porque eles também têm seus próprios benefícios em serem usados. Você também tem seções aqui, o que é uma adição relativamente recente ao Figma. Então, isso é muito bom para organizar seu trabalho. Então, acho que isso realmente reúne três ferramentas diferentes que vocês usarão juntas. Se você é mais leitor, então eu tenho este artigo, que vou linkar abaixo que foi escrito há cerca de dois anos e meio. Agora, isso explica as diferenças entre usar um grupo e usar um quadro e quando você pode querer usar qualquer um deles. Então, isso é muito útil. E sem mais delongas, vamos continuar. 12. Grupos: Então, vamos começar com grupos, porque para muitas pessoas, especialmente se você nunca foi designer antes ou usou algumas das ferramentas de designer no passado. Os grupos serão muito mais familiares para você. Então, vamos pular para o Figma e eu vou te mostrar como tudo isso se encaixa. Então, para demonstrar como os grupos funcionam, o que vou fazer é criar algumas coisas diferentes. Então, eu tenho uma camada de texto normal, terei um círculo. Vamos chamar esse círculo e torná-lo azul para que seja mais fácil de ver. Então, o que eu vou fazer também é importar uma imagem. E vamos lá. Então, como você pode ver lá, foi muito legal, na verdade, você pode colocá-lo dentro de objetos. Se sua imagem importante que vamos fazer é, na verdade, colocá-la aqui e deixar que esteja, mantenha pressionada a tecla Command. Na verdade, você pode cortar sem precisar clicar duas vezes e editar imagens. Então, isso é muito útil. E aqui está uma arte com leite na qual venho trabalhando para aprender a servir. Então, para mostrar como tudo isso se encaixa, se você pegar isso, você pode clicar com o botão direito do mouse e agrupar uma seleção ou pressionar o Comando G para juntá-la. E quando isso acontece, você pode redimensionar isso para ver o que acontece com as camadas internas. Então, enquanto eu faço isso, você pode ver tudo dentro de uma escala tão grande quanto o grupo em si, encolhida para coincidir. E é um pouco mais difícil de ver com as camadas de texto. Mas se eu clicar nisso, você pode ver que ele também se redimensiona ao clicar no grupo e fazer isso. Você pode ver que ficou do mesmo tamanho. Portanto, uma coisa a ter em mente é que você ainda não verá algumas das ferramentas que obterá com uma moldura. E se você quiser que isso mantenha seu tamanho, isso não é mais possível com grupos, especialmente se você saiu para ler o artigo que escrevi sobre grupos versus quadros. Portanto, você não pode realmente editar as restrições. Você não pode editar, quer queira que seja dimensionado ou não. Tudo o que você poderá fazer é agrupar coisas com um grupo e obter o comportamento padrão de como os grupos funcionam e se encaixam. Isso é um pouco mais familiar. Provavelmente, isso é muito mais sobre o que muitas pessoas estarão acostumadas, exceto pelo texto. Então, isso é muito mais parecido com a ferramenta de escala. Você pressiona uma tecla para escalar. Lembre-se de que isso está no canto superior esquerdo e eu o dimensiono. Talvez isso seja um pouco mais familiar. E isso começa a mostrar algumas das pequenas diferenças em Figma e o que você poderá ver quando estivermos migrando para as molduras. Como você pode ver quando voltei para a ferramenta de ponteiro. E se eu redimensionar isso, tudo se esmaga. Esse é apenas o tamanho da camada em si, mas as camadas de texto se comportam de forma um pouco diferente. Então, ao usar um grupo, esses, isso é uma coisa a ter em conta. Então, quando você agrupa as coisas, elas aumentam de escala. Portanto, se você precisar redimensionar as coisas, não funcionará da maneira que você gostaria. Então, vou deixar isso aí por enquanto, quando se trata de explicar grupos, como fazer isso e como eles se encaixam. Quando eu abordo molduras, você verá exatamente onde a diferença realmente começa a brilhar e realmente faz uma grande diferença na forma como você monta seu arquivo e como reúne seus protótipos e designs. 13. Quadras 1 de 2: Então, onde os grupos eram muito simples e fáceis de entender. Espero que tenha sido bom para você. Vamos mergulhar nos quadros. Há muito a cobrir. Então, vamos começar. Então, o que vou fazer é copiar essas três coisas. Vou fazer uma cópia. Então você pode ver que eu pressionei a tecla Option ou Alt e arrastei uma cópia da coisa original. É por isso que eu posso fazer para colocar as coisas de volta em algum tipo de escala aproximada com a qual eu possa trabalhar. Eu vou fazer isso também, ou mudar o texto. Na verdade, eu faço isso e mudo isso de volta para o que era, 16. É mais como 24, algo assim. Então, se eu copiar tudo isso, agora eles não estão agrupados. Eu posso enquadrar essa seleção que é diferente, o atalho é a Opção de Comando G. E agora eu tenho uma moldura. E, a princípio, parece que nada está diferente, mas se você começar a redimensioná-lo, verá que as coisas não mudam de localização e não parecem mudar de tamanho. Se você for da esquerda, parece que fica para a esquerda. E o mesmo com a parte superior. E somente investigando essas coisas aqui você poderá ver as diferenças. O que faremos é tirar isso. E se eu selecionar a camada da imagem, por exemplo, você verá no painel de design que há essa coisa chamada restrições à esquerda e à parte superior das coisas padrão. E é assim que as coisas se comportam na web. Portanto, se você não está acostumado a criar coisas para a web, o que notará são os comportamentos que deseja ver. Para produtos digitais, coisas que você verá na web e em aplicativos móveis. Eles se comportarão muito mais com base em restrições do que em um grupo mais tradicional que você pode encontrar em coisas como Google Slides ou arquivos de apresentação do PowerPoint. Eles são muito poderosos porque você pode fazer coisas como se eu selecionasse esse círculo, por exemplo, vamos colocá-lo no centro e dar a essa moldura uma cor de fundo. Então, vamos usar o preenchimento. E vamos selecionar um tipo de cor verde claro, e isso está aproximadamente no centro. Agora, quando eu redimensiono, a largura agora segue o meio. Então, espero que o que você possa ver isso é que seu cérebro está começando a pensar e a ver. Há coisas diferentes que podemos conseguir com molduras. Algo diferente aqui. E o que você notará é que, usando essas restrições, podemos realmente torná-las muito poderosas. Então, se fizermos para a esquerda e para a direita, podemos imitar o comportamento ou usar a escala para replicar com mais precisão. Um grupo faz. Então, se eu definir a largura como escala, podemos fazer isso. Mas com a moldura, é ótimo porque é ainda mais poderoso que, ao fazer isso, ela permaneça a mesma. Ou o que eu posso fazer é simplesmente centralizá-la ao redimensionar essa moldura e, em seguida, ficar no centro, aspas, dessa moldura. Uma das primeiras coisas que você provavelmente vai querer saber e aprender a fazer é, na verdade, como criar o comportamento de rolagem dos protótipos. Abordaremos os protótipos em detalhes posteriormente. Mas o que é realmente importante trabalhar com ele é o comportamento de rolagem. Então, se eu pegar tudo isso e mudá-lo para a esquerda e para cima novamente, o que eu posso fazer é mudar a altura disso e existe essa coisa chamada conteúdo do clipe. E o que você notará é que as coisas podem estar dentro uma moldura ou dentro de uma moldura. Você pode cortar o que está lá. E isso pode ajudar na hora de mudar quais coisas devem estar visíveis, quais coisas devem ser editáveis? Uma das coisas interessantes que você pode fazer no Figma é a rolagem transbordante. Então, quando eu faço rolagem vertical, que provavelmente é a coisa mais comum que você vai querer fazer. Agora, quando eu coloquei isso em um protótipo. Então, vamos fazer isso apenas para demonstrar o comportamento. Agora você pode ver que, enquanto eu rolo, é quase como uma página da web. Agora, usando esses blocos básicos de construção de uma moldura, como ela se encaixa usando as restrições, você pode escolher como as coisas realmente são exibidas juntas. E você pode usar esse comportamento exagerado para ditar como as coisas devem fluir juntas e como sua página deve funcionar. Então, isso realmente vai ser muito útil. E um dos pedaços de pão com manteiga do seu kit de ferramentas. E usando Figma. 14. Quadras 2 de 2: Então, a última coisa que eu gostaria de fazer para encerrar esta lição é dar outro exemplo de como os quadros podem ser poderosos. Vamos fazer, por exemplo, uma sobreposição. Então, quando entramos nesse quadro, lembre-se, você tem que rolar para baixo para chegar ao círculo azul. Vamos transformar isso em um botão. E o que vamos fazer é criar uma sobreposição muito simples, se você quiser. Então, o que eu vou fazer é agrupar isso, deixar o vermelho, mudar as linhas. Então, uma coisa boa que vou mencionar aqui é que definitivamente fique de olho na sua estrutura de camadas. Isso realmente será útil para você seguir em frente se você se perder ou não tiver certeza. O que é uma moldura em vez de um grupo, para que você possa ficar de olho nos diferentes ícones aqui. Portanto, este é um grupo, por exemplo, com a linha tracejada. E o quadro é mais parecido com um hash. Aqui tinha ido para x, depois sobreposição, coisa de sobreposição. E vamos fazer uma linha simples aqui e aqui. Vamos torná-los um pouco mais monótonos. E então, não se preocupe, abordaremos esse tipo de coisa um pouco mais tarde. Em um dos módulos posteriores, na verdade, livre-se disso apenas para fins de demonstração. Então, se fizermos isso, poderemos criar rapidamente uma sobreposição, um pouco de preenchimento. Vamos fazer isso. E então dê um pouco de cor a alguma coisa. Talvez não dessa cor. Sim, continue, vamos fazer isso e dar a ele um raio de fronteira. Então, aqui temos nossa sobreposição básica, e esta é uma moldura. E isso só é possível porque está configurado como uma moldura. Então, quando entramos na guia Protótipo, você pode realmente criar uma nova interação. E quando você clica nele, ele abre uma sobreposição. E podemos selecionar a moldura de sobreposição. E quando fazemos isso, podemos adicionar um plano de fundo. Então, temos o fundo opaco em segundo plano. E agora, quando você abre esse protótipo, podemos rolar como demonstramos anteriormente. E se você clicar no botão azul, poderá ver sua sobreposição. Essa é apenas uma das muitas coisas poderosas que você pode fazer com molduras. E o que eu realmente queria compartilhar com você para ajudá-lo a entender qual é a diferença entre um grupo era a estrutura e por que realmente temos essas duas coisas diferentes? 15. Devo usar grupos ou quadros: Legal. Agora que apresentei uma introdução sobre o são grupos, quais são os frames, os tipos de coisas que você pode conseguir com ambos, espero que comece a ficar claro quais coisas você deve usar com mais frequência e quando. Ainda me perguntam: qual é o melhor ou quando devo usar qualquer um deles? Ao contrário de se você quiser uma regra prática rápida, sempre use como padrão uma moldura. E há algumas razões pelas quais. Portanto, mesmo que os grupos tenham seu lugar e ainda se comportem muito mais como as imagens se comportam quando você escala as coisas para cima e para baixo, especialmente quando você está trabalhando com arquivos de apresentação, esse pode ser um comportamento com o qual você está mais acostumado, ainda é algo que você pode replicar com um quadro configurando os objetos internos para um comportamento de escala. E B, camadas de texto simplesmente não se comportam da mesma maneira. você também pode usar a ferramenta de escala Em vez disso, você também pode usar a ferramenta de escala e alterar o tamanho das coisas. Então, essas são as principais razões pelas quais você realmente usaria um quadro em vez de um grupo. E eles têm alguns casos de uso. Mas se você conferir o artigo que eu compartilhei antes na verdade, não é mais a capacidade de usar restrições em grupos. Então isso é algo que costumava ser o caso e agora acabou. Então, na minha opinião, eles são um pouco mais do que um legado. E eu acho que uma das outras grandes armadilhas, eu diria, porque não é um grande benefício quando um designer diferente ou uma pessoa diferente está trabalhando em seu arquivo Figma, se eu quiser alongar um quadro. Então, por exemplo, eu posso ter uma tela iOS ou uma tela de aplicativo móvel na qual estou trabalhando. E eu quero adicionar uma seção extra. Se eu alongar isso para qualquer grupo que está dentro, isso vai alongar a coisa. Então, vou te dar uma demonstração rápida disso agora só para te mostrar olá. Então, aqui está um exemplo de uma tela de celular. Na verdade, vamos dar uma olhada nisso. Vamos preencher isso rapidamente. Só para que pareça um pouco mais com uma página. O que eu vi é que aqui você tem uma barra de navegação, esse grupo de coisas. E por que chamamos isso apenas de filtro. Eu quero, já vi antes que esse não é o padrão, na verdade. Portanto, isso pode não ser um problema para você. Mas, à medida que os designers trabalham em um arquivo grande e trabalham juntos para resolver grandes problemas, às vezes as restrições são configuradas para escalar por padrão. Para um grupo de coisas, geralmente são ícones ou grupos de algumas coisas diferentes juntas. O que você verá é que, se eu precisar alongar a tela, esse tipo de coisa acontece. E isso é muito frustrante. Quando você usa um rodapé. Definitivamente, deve estar sempre no fundo. Portanto, não se preocupe, abordaremos esses tipos de restrições mais tarde. Mas você verá esse tipo de comportamento e não é isso que queremos. O que queremos é que ele crie mais espaço para trabalharmos ao trabalhar em um design. Isso resume muito bem minha opinião sobre quando você usa um grupo, quando você usa uma moldura, uma história longa, curta, usa molduras, elas são melhores. 16. Seções para arquivos organizados: Legal. Então, a última, não falta muito, é a ferramenta de seção aqui com a moldura. Você também tem essa coisa chamada seção. Esse é um recurso relativamente novo do Figma, que tem sido altamente recomendado. Então, enquanto eu estava passando por essas diferentes lições e compartilhando com você como as coisas se encaixam. Pode ser muito fácil se perder. E o que você pode ficar tentado a fazer é agrupar certas coisas em uma moldura. Mas quando você faz isso, pode perder a integridade das interações ou a maneira como configura certas coisas. E as seções têm comportamentos e propriedades ligeiramente diferentes . Resumindo, tudo o que você precisa saber é que essa é uma maneira mais segura de agrupar uma coleção de diferentes camadas, molduras e coisas nas quais você está trabalhando para que seja mais fácil para alguém examinar seu arquivo. Então, por exemplo, se eu clicar na Ferramenta de Seleção ou Shift S para o atalho, posso fazer isso. Eu posso dar um nome a esta seção. Então, esse é o primeiro conjunto de coisas. E se eu criar uma nova seção, essas podem ser minhas molduras. Quadros, ferramentas de seleção de molduras. E o que eu posso fazer é me mover. Opa. Não examinou essas coisas muito bem. O que eu posso fazer é cortar essas coisas usando o comando cortar e simplesmente colá-las dentro. Eu posso fazer isso e depois arrastar todas as minhas coisas com facilidade. E é muito bom porque aqui estou trabalhando em formas e linhas. E você pode mudar a cor da sua seção. Então, digamos que eu queira usar uma cor mais vermelha clara porque isso é algo de que preciso me livrar e posso mudar o rótulo. Isso é realmente muito útil quando você deseja organizar seu trabalho e deixar claro para alguém quantos anos essas coisas se encaixam. Um dos superpoderes que você encontrará nas seções é que você pode aninhá-las umas nas outras, mas elas são basicamente uma coisa de alto nível. Então explique o que quero dizer com isso. Então, pegamos essa, essa seleção de molduras e seções. O que eu posso fazer é selecionar isso e mover as formas e linhas para esta seção. E agora tudo isso pode ser movido em conjunto. Então, isso é muito útil. Mas uma das coisas diferentes nas seções é que você não pode arrastá-las para os quadros. Então, digamos que eu crie uma moldura desse tamanho. E eu quero arrastar essa seção ou arrastar uma cópia. Eu posso arrastá-lo aqui para esta área. Mas, como você pode ver, ele foi adicionado a esse quadro. Então, um dos problemas de configurar molduras antes e usá-las para organizar visualmente seu trabalho é o mesmo, mas como uma moldura pode estar dentro de qualquer outra moldura, ela começa a ficar muito confusa rapidamente, onde você pode acidentalmente agrupar coisas ou adicioná-las a uma moldura e da maneira errada. Então, as seções fazem duas coisas. Eles permitem que você organize seu trabalho e deixe isso claro. Mas faça isso de uma forma que não facilite para você ou outros designers que navegam ou editam seu arquivo para organizar as coisas de uma forma que perca a integridade da estrutura em que perca a integridade da que você está trabalhando e juntando essas coisas. 17. Ponto de verificação 3: layout automático, meu herói: Olá, sua camisa, nova iluminação, esse mesmo conteúdo de qualidade. Então, nesta lição, falaremos sobre layout automático. Vou mostrar como todas essas diferentes ferramentas e técnicas que você pode usar como parte do layout automático podem realmente tornar sua vida muito mais fácil. E isso pode realmente tornar seu dia-a-dia em Figma e criar projetos. Isso é muito mais um prazer. Vou te dar uma rápida mostra agora do que seremos capazes de construir quando terminarmos de ensinar essas habilidades a você. Aqui na Figma, temos um exemplo trivial de um site para vender microondas. E à medida que eu rolo para baixo, parece bem típico. Apenas algumas imagens de destaque com uma cópia, uma mensagem para a chamada à ação. E essa coisa sobre a coleção brilhante sempre que quisermos , queremos chamá-la. E se eu diminuir um pouco o zoom, à medida que eu cresço e diminuo isso, você pode ver como tudo responde ao tamanho. E isso é algo que vamos explorar juntos. Isso parece assustador, não se preocupe. Analisaremos isso passo a passo e você ficará surpreso com a rapidez com que poderá montar algo assim sozinho. Em questão de alguns minutos, menos de uma hora, com certeza. Vamos começar. 18. Redimensionamento horizontal/vertical e conceitos de espaçamento: Então, primeiro, abordaremos layout automático horizontal e vertical e daremos uma ideia de como essas coisas funcionam juntas. Então, o que eu gosto de começar são essas barras de navegação e os componentes futuros. E eu vou te mostrar como eles se encaixam. Primeiro, vamos pegar a barra de navegação superior. Pegue uma cópia disso e deixe-me destruí-lo primeiro. Então, se eu desagrupar e você puder ver, isso é meio difícil de ver. Até mude isso para, opa, para uma cor preta temporariamente. Podemos ver aqui que temos um logotipo e, em seguida, temos uma moldura dessas coisas diferentes. Então, mas desagrupe-o, você provavelmente começará com algo assim. Pegue um grupo de itens e você receberá outra coisa que talvez queira colocar de lado. Ele os destacará e depois eu o transformei em uma moldura. Então essa é a Opção de Comando G. Duas maneiras de adicionar tudo ao layout A primeira é o layout definitivo. Você pode simplesmente clicar aqui ou no atalho. Eu gosto de usar esse shift a, e isso se aplica automaticamente ao layout automático. Você pode ver aqui que ele definirá um pouco de preenchimento horizontal, o que estiver mais próximo, e os dividirá uniformemente. Você mesmo pode ajustar isso ao que quiser. E isso define o padrão ou a horizontal. Se eu, por exemplo pegar três cópias disso e torná-las aproximadamente verticais e fazer a mesma coisa. Você não precisa agrupar no início, basta pressionar Shift a e você será direto para adicionar tudo ao layout no Figma, descobrirá que tudo deve ser empilhado verticalmente e descobrir o espaçamento aproximado que deveria existir. Então, a partir daqui, vamos transformar esse original e começar a aninhá-lo. Então, isso é realmente muito importante. Então, abordamos as estruturas de nidificação e isso é muito importante para que essas coisas aconteçam. Então, aqui eu tenho essa moldura à esquerda. Então, esses são meus itens de menu. Opa. Isso é legal. Esses itens do menu. E é esse. Isso é Jacquard white porque estou usando uma instância de um componente. Em seguida, agrupe-os e pressione Shift a novamente. Você verá que eu adicionei o layout automático. E isso é feito automaticamente. Isso. Uma coisa que você deve fazer para obter o efeito real da barra de navegação é na verdade, ignorar o espaçamento entre eles. E vamos preenchê-lo apenas para facilitar a visualização. Vamos fazer algo assim para que possamos diferenciá-lo. E a primeira coisa que você encontrará muito rapidamente é o espaçamento. Então, nós vamos, nós vamos fazer isso. E esse 12,12. Então, isso define a esquerda e a direita, e a coisa errada que você notará é que, quando eu faço isso, ela não responde. O que gostaríamos que ele fizesse é mudar o modo de espaçamento. Então, se eu desfizer isso e passar aqui para os três pontos, há uma coisa chamada empacotado, e o espaço entre o padrão é compactado e você pode definir quanto espaçamento deve haver entre cada um dos itens nesse quadro específico. Mas se eu abrir espaço entre, agora, esses dois itens nesta moldura, à medida que eles crescem e encolhem, ele sempre ficará à direita. Então, se eu adicionar para fazer com que pareça um pouco mais natural e normal, revele a estrutura do que está aqui. Para criar uma barra suficiente. Temos os próprios itens do menu aninhados internamente com seu próprio layout horizontal. Temos o logotipo à direita. Então. Para essa barra de navegação principal, ela tem seu próprio layout automático, mas alteramos o espaçamento e a preenchemos. E o que fizemos foi ajustar o modo de espaçamento para obter essa responsividade. Então esse é um exemplo muito simples que você pode fazer. E analisando isso passo a passo para começar a explorar como a horizontal funciona. As obras verticais e também algumas coisas, como o espaçamento, que abordaremos um pouco mais detalhes em uma das próximas aulas. A única última coisa a acrescentar é que, para os layouts verticais, isso é praticamente a mesma coisa, mas as coisas simplesmente fluem em uma direção diferente. Então você pode ver aqui, se eu passar o mouse sobre o espaçamento, espaçamento vertical entre os itens ao alternar entre horizontal e vertical. Olhando a foto, dá para ver que cada um desses itens, mostra o espaçamento dessas vacinas entre si. 19. Alinhamento e ordem de item com layout automático: Nesta lição, abordaremos o alinhamento dos itens e a ordem dos itens. Porque uma coisa que você descobrirá é que às vezes você quer reorganizar a ordem das coisas ou ela pode entrar na ordem errada e talvez você precise ajustar as coisas. Muito comum, mas muito fácil. Eu vou te mostrar. Então, aqui estão os dois exemplos com os quais vou trabalhar o rodapé e uma das partes principais do recurso: imagem e cópia. Então, tomando isso como exemplo seguimos um exemplo do que aprendemos na primeira lição, como aconteceu aqui. Para conseguir isso, é fazer um alinhamento vertical de todos esses itens diferentes. E então o que eu fiz foi apenas mudar o alinhamento e você tem uma grade muito boa. Isso torna muito simples mudar a forma como você deseja que as coisas sejam organizadas. Então eu poderia organizá-los para a esquerda, para a direita. Se eu escolher ter uma altura fixa, posso mudar para que ela fique no canto superior esquerdo, no canto inferior esquerdo, em cima da direita, no ponto morto. Portanto, há tantas opções diferentes com as quais você precisa jogar. E é bom ter em mente que, se você quiser algo um pouco mais complicado, precisará fazer agrupamento de estruturas para obter o efeito desejado. Para ilustrar alguns desses efeitos de aninhamento de quadros, usarei este exemplo aqui. Então, vamos abordar o rearranjo das coisas bem rápido antes de mergulharmos nisso, onde você pode fazer é ver na outra peça, eu tinha isso e elas estavam em ordem alternativa. Basta arrastar seu item para cima. E só funciona desde que haja um layout automático no quadro principal. Este exemplo enquadra 63, basta clicar nele. Lembre-se de que para onde você arrasta esse item para sua camada , ele pode tirar coisas da moldura de layout automático e adicioná-las novamente. Às vezes é fácil ou às vezes é um pouco complicado e você pode começar a aninhar as coisas um pouco mais fundo. Então, por exemplo, aqui, mudei a imagem para um quadro diferente. Então, ao analisar agrupamento de quadros e ajustar a forma como as coisas estão, para ilustrar primeiro, vamos tornar isso um pouco maior. Então você pode ver que isso está no centro. Se eu mudar o alinhamento aqui para o meio, isso muda esse estilo e a forma como ele se encaixa. Mas se eu fizer isso, você pode ver que internamente, isso é feito de uma maneira diferente. Se eu mudar isso para largura fixa, que abordaremos daqui a pouco, não se preocupe. E apenas mude a largura disso. Eu posso alterar a largura de alguns dos itens internos assim, por exemplo, você pode ver essa moldura com toda a cópia. Eu posso mudar a forma como isso é exibido, seja para a esquerda ou para a direita. É por isso que você começará a ver que tentar ensinar tudo isso passo a passo pode ser bastante complicado, porque eles se juntam rapidamente para obter componentes responsivos e criar um design responsivo. Dentro de Figma. 20. Modos de redimensionamento de abraço, enchimento e fixos: Então, a seguir, veremos os modos de redimensionamento horizontal e vertical. Então, faça todos esses exemplos usando a horizontal, mas as mesmas regras se aplicam à vertical. Eu faço horizontalmente porque provavelmente é com isso que você lutará com mais frequência quando começar a aprender como tudo isso se encaixa. Usando esta seção que reúne a coleção brilhante, como eu a chamei. Vamos tirar uma cópia de todas essas imagens e aplicar o Layout automático. E lembre-se de que o atalho para isso é Shift a. E quando eu faço isso, o que ele faz por padrão é definir o espaçamento. Então, vamos mudar isso para 40. Portanto, é um pouco mais fácil de ver na tela. E podemos ver que o modo de espaçamento padrão para horizontal e vertical não é realmente grande. O que isso significa é que, se eu copiar e colar outra imagem, ela será adicionada à moldura principal. Então esse é o quadro 63. Então, vamos analisar a horizontal padrão até o redimensionamento. Modos de redimensionamento. Você pode ver que, ao adicionar itens, isso só vai alongar o comprimento dessa coisa. Então, o que devemos começar a explorar é como os comportamentos fixo e completo funcionam. Pegue uma cópia e vamos renomeá-la para padrão. Vamos dar uma olhada em fixo. Então, se eu mudar isso para fixo, o que isso significa é que o layout do quadro principal fixo também existe, mas o tamanho desse quadro permanecerá o mesmo. Se eu excluir essa coisa e tivermos um item a menos ou até dois itens a menos. Você pode ver que o tamanho desse quadro em si ainda mantém o tamanho original. E isso é muito importante ao montar seu layout. Porque se eu, por exemplo, colocar isso em uma moldura como essa e mudar o plano de fundo. Vamos mudar isso para uma cor ligeiramente diferente. Vamos fazer um mais escuro. Você pode ver que está corrigido assim. E se eu adicionar layout automático e tentar movê-lo para o centro, todos os itens, restarão apenas três. Então, vai colocá-los mais no lado esquerdo desse quadro. E isso pode não ser o que você deseja alcançar. Se eu mudar isso para abraço, então você pode ver que isso se centraliza automaticamente. E uma coisa que posso fazer aqui é redimensionar esse quadro aqui. Se você notar e ficar de olho. Passou do padrão de abraçar, seja qual for o tamanho do conteúdo, fixo. E agora, quando eu misturei o alinhamento neste novo quadro 63 principal e esse quadro fixo com as três imagens, agora temos o comportamento de abraço. O último comportamento que quero compartilhar com você é o recipiente de enchimento. E é importante lembrar que o recipiente de enchimento só funciona em um recipiente dentro de outro. Então você pode ver aqui que eu tenho esse par fixo na moldura. Vamos chamar isso. Como se chamava? Demonstração do contêiner completo. E renomeie esse quadro aparente. Se eu mudar este para preenchimento, então você pode ver que agora ele ocupa o espaço da moldura principal para torná-la maior. Você pode ver que o espaçamento à esquerda e à direita é o mesmo. E eu vou torná-lo menor. O espaçamento também corresponde a esse tamanho e espaçamento. Então, eles são muito bons para misturar. E quando você começa a brincar com eles, se você tiver seu anúncio, se eu adicionar outro, por exemplo, você pode ver que isso preenche, mas transborda aqui porque não está abrangendo o conteúdo. Então, essa é provavelmente a última coisa para realmente informar você sobre esse conteúdo aqui. A moldura em si, a demonstração do recipiente de enchimento. Vamos ocupar o espaço central exato com espaçamento igual à esquerda e à direita. Mas o conteúdo interno pode transbordar à medida que eu adiciono mais itens a ele. Então, dependendo do que você quiser, se eu mudar isso para abraçar novamente, então é mais responsivo e ocupa o espaço e o envolve de maneira uniforme e agradável. Espero que tenha sido muito útil para você como um tutorial muito pequeno, mas rápido, para mostrar como funcionam os comportamentos de redimensionamento de contêineres de abraçar, consertar e encher. 21. Modos de espaçamento e espaçamento de layout automático: Nesta parte, veremos modos de espaçamento e espaçamento. E a melhor maneira de explicar isso com um exemplo funcional é com um botão ou uma chamada à ação, além de usar esse exemplo, que usei para explicar os modos de redimensionamento. Então, para explicar como isso funciona, reconstruir o apelo à ação é provavelmente a maneira mais rápida. Então, se eu mantiver pressionada a tecla Alt ou Option, enquanto arrasto a camada significa que estou tomando um café e o que vou fazer é simplesmente mudar a cor para que possamos ver isso, uma das coisas rápidas que você pode uma das coisas rápidas que você pode fazer se quiser criar um botão ou criar algo como eu fiz com a chamada à ação aqui. Basta pressionar Shift a, e isso cria tudo para o layout. E o que isso faz se houver apenas um item, ele assume como padrão e define o espaçamento entre os itens como dez, bem como o preenchimento horizontal e o preenchimento vertical. Então, quando se trata de espaçamento, o que quero dizer com isso é o preenchimento que está na parte superior, inferior, esquerda e direita dos itens dentro do seu grupo de layout automático. Então, se eu definir uma cor de preenchimento rápido, vamos fazer essa. Vamos usar o roxo. Eu acho que roxos são muito bons. Agora posso mudar a cor do texto novamente e torná-lo um pouco mais fácil de ver. Então, vamos fazer isso, parece que não está funcionando. Então, vou mudar isso assim. Lá vamos nós. Eu seleciono isso novamente, adiciono um raio de borda apenas para fazer com que pareça mais abotoado. E o que você pode ver é que parece tudo bem por si só. Mas, ao brincar com esses valores, você pode usá-los para alterar o espaçamento ao redor de seus itens. Portanto, isso pode ser útil dependendo de como você deseja que seus itens fluam automaticamente usando o layout automático ou de como você deseja que eles sejam exibidos. Se você estiver fazendo uma chamada à ação como essa, criando algo mais parecido com um botão. Você também pode clicar aqui para definir o preenchimento individual. Então, digamos que, por algum motivo, eu quisesse adicionar um espaçamento de 50 abaixo porque achei que seria bom. E aqui, se você se lembra, temos o alinhamento. Então, se eu alinhá-lo ao centro e aos itens internos , isso não vai afetá-lo. Portanto, pode não se comportar da maneira que você pretende. Então eu fiz isso acidentalmente, mas acho que essa é realmente uma lição muito boa. Onde está o acolchoamento na parte inferior que ditará para onde ele vai. Então, se eu mudar isso para dez e depois mudar a altura dessa coisa, então você pode ver que a altura fica fixa e o preenchimento ainda está aqui, cima e em baixo, então os itens internos fluirão entre eles. Então, essa é uma demonstração rápida para analisar o espaçamento. A última coisa a fazer são esses modos básicos. Então, por hábito, acho muito bom adicionar um pequeno botão de sombra porque ele completa bem as coisas. Se nos lembrarmos desta ou de uma das aulas, se você já passou por ela, aqui, eu tenho uma demonstração de contêiner cheio, mas nem tudo se desenrola bem. Tudo o que ele faz é se alinhar à esquerda. Assim, ele poderia alinhar as coisas no centro. Você sempre quis que o espaçamento entre eles fosse consistente. Mas às vezes você quer que eles preencham tudo dentro dessa moldura. Então, o que você pode fazer é demonstrar primeiro como isso funciona, se eu fizer isso que fica no centro. Eu seleciono isso, preencho uma demonstração do contêiner. Se eu clicar nos três pontos, você terá acesso ao modo de espaçamento. E usar o espaço entre isso garantirá que o espaçamento entre eles seja alterado automaticamente e se estabeleça automaticamente. Estou fazendo isso? Esse é um truque muito simples de um clique. Isso significa que o espaçamento entre eles é sempre uniforme e consistente entre si. Mas ocupa o espaço do contêiner que está usando um recipiente de enchimento. Redimensionamento horizontal ou modo de redimensionamento vertical. Então, esses são os exemplos concretos que você pode usar. E espero ter ilustrado para você como definir o espaçamento das coisas, como usar o recipiente de preenchimento e definir o modo de espaçamento para outra coisa. E espero usá-los para ajudar a melhorar ainda mais. Também defina as coisas sozinho. 22. Componentes: mestres e instâncias: Ótimo material. Então, vamos direto aos componentes e às duas coisas que você precisa conhecer nossos mestres e instâncias. E eu vou te mostrar o que quero dizer com um exemplo concreto. Então, para um pequeno exemplo, vamos começar com o botão humilde usando t para criar uma camada de texto. E vou chamá-lo de meu botão. E se você se lembra, temos nossos têxteis. Então, procure o estilo do botão. Então, isso é algo que eu posso usar muito bem. Em seguida, podemos simplesmente adicionar um layout automático e isso, por padrão, nos fornecerá algumas coisas que são muito úteis. Dê a ele um raio de borda simples e um preenchimento. Vamos escolher essa cor. Eu gosto desse tipo de cor brilhante. E deixe-me atualizar isso para isso. Então, o que você pode fazer a partir daqui é agora que você tem esse botão. Mas e se você quiser usá-lo várias vezes? Se eu quiser editar o conteúdo ou a cor, digamos, e eles atualizam a cor desse três azul para um verde. Se eu tiver que fazer isso em um protótipo, ele vai para todos os lugares. E eu vou ter que mudar cada botão. O que você pode fazer é desfazer isso e excluir esses dois. Na verdade, não vamos, deixe-me copiar isso. Deixe-me transformar isso em um componente. Então, há duas maneiras de fazer isso. Você pode clicar com o botão direito do mouse e criar um componente, ou eu sempre uso a tecla de atalho Opção de Comando. E o que isso faz é criar o que é chamado de mestre para um componente. E você pode ver isso pelo pequeno símbolo aqui. Portanto, não acho que o zoom pareça fazer diferença. Mas você sempre pode olhar para o lado esquerdo do painel Layers. Você pode dizer se algo é uma instância é mestre ou não. E você pode ver que, por esse realce roxo , eu copio. Agora você notará que ele não tem um nível nomeado, embora na verdade tenha um nome. E você pode dizer que o fundo do cliente, vamos chamar o fundo do poço. E se eu atualizar o rótulo do seu botão, todas as alterações serão propagadas. Agora, essa é uma das coisas mais poderosas que você pode usar usando componentes no Figma. E não só isso, há muitas outras coisas que você pode fazer. Mas se você conseguir entender aqui o básico sobre mestres e instâncias com componentes, você está pronto. Então, como outro exemplo, só para dar uma ideia, posso personalizar minha instância aqui. E mesmo que eu atualize isso para o botão deles, isso só atualizará as instâncias em que eu não substituí quais são os padrões. E você pode ver isso novamente, onde se eu mudar a cor, por exemplo eu vou mudar a cor para amarelo, por exemplo, agora que mudar a cor do original, o amarelo permanecerá, mas o botão inferior mudará para roxo. Então, é mais ou menos assim, o ciclo de atualização meio que funciona entre um mestre e uma instância. E você sempre pode dizer algumas coisas por exemplo, porque é roxo em termos de contorno e também no pequeno símbolo. Você verá no painel de camadas, que é um diamante vazio. Só que a única outra coisa que você pode querer saber é que há muitas outras coisas que podem ser compartilhadas quando você configura seus componentes. Então, quando você o configura, não é apenas o preenchimento e o conteúdo do texto. Também há coisas como a opacidade. Então eu disse que isso é 50 por cento. Na verdade, isso se propaga por toda parte como a borda ou o traço, devo dizer. As tantas coisas diferentes que você pode configurar em seu componente. E isso é bem simples onde é apenas uma única camada de texto, mas você pode adicionar muitas coisas diferentes dentro dela. Então, eu poderia, por exemplo, adicionar duas coisas de texto e mudar isso de volta para 100% de opacidade. E você pode ver que com duas camadas de texto, posso dizer que aqui está o botão e mudar isso para o ônibus dela. E para que você possa ver isso em um exemplo simples de botão, você pode começar a criar em cima disso. E eu encorajo você a experimentar e tentar fazer com que todas essas atualizações continuem e se certifique de essas atualizações continuem que está confortável com o que você pode definir de seus mestres e quais coisas propagadas até sua instância e o que se salvará sozinhas. Não seja afetado pelas atualizações principais. 23. Nidificação de componentes: Em seguida, vamos construir com base nesse exemplo fazendo o aninhamento de componentes. Então, soa exatamente como na lata. Você está basicamente colocando componentes dentro outros componentes e em duas outras estruturas. Por aqui. Eu fiz um pouco de preparação com antecedência. Então, surgiu uma pequena coisa de avatar. E eles têm apenas 50 por 50 pixels, apenas usando a ferramenta de elipse para a cabeça e também para o corpo, e simplesmente comprimindo-a. E eu tenho duas camadas de texto aqui usando apenas o estilo seis do cabeçalho, bem como o estilo do corpo um. E nós temos o ônibus e a aula anterior. Então, o que você pode fazer a partir daqui é se eu pegar uma instância disso, garantir que você pegue uma instância, então você pode pegar as outras coisas que quiser. Layout automático para isso. Lembre-se de que o atalho para isso é a letra a. E faremos esse zero entre ela. E o que eu vou fazer é tirar uma cópia desse botão. Vou apenas alterar o conteúdo de uma visualização, por exemplo, agora, se eu alterar, colocar esse centro à esquerda, o que é bom para mim, eu queria reduzi-lo. Como exemplo. Espere, digamos, com espaçamento de dez em toda a volta. Só para fazer com que pareça um cartão. Vamos chamá-lo de branco, cinza seis. Na verdade, eu quero usar branco, então é mais fácil para você ver, esperançosamente, e o raio da borda é normal. E a partir daqui, agora temos um protótipo básico para uma carta. O que você pode fazer é a tecla Command Option para se transformar em componente. Ou lembre-se, você sempre pode clicar com o botão direito do mouse em algo. Você pode transformar um quadro em um componente. Basta renomear isso para uma linha de cartão de perfil, digamos. Agora temos um bom mestre, onde dentro desse componente mestre, a linha do cartão de perfil, temos dois componentes, o avatar e o normal, e esse componente de botão. Agora, se eu pegar um exemplo disso, se eu estiver montando uma tela, posso tirar algumas cópias diferentes disso. Vamos adicionar um layout automático e chamar isso de 20 entre cada linha. E agora, se eu fizer atualizações, por exemplo se eu mudar as cores de seleção do perfil para verde. Deixe-me, talvez eu tenha que me aprofundar nisso por algum motivo. Lá vamos nós. Agora você pode ver que essas mudanças agora se propagam. Assim, você pode ver que mesmo usando componentes é poderoso, mas ao agrupar seus componentes e entender o ciclo de atualização entre eles, você pode realmente compor seus designs seus layouts e coisas que você deseja comunicar muito, muito rapidamente. 24. Variantes e propriedades: Portanto, esta última grande lição que tenho que ensinar a vocês é sobre variantes e os componentes do Eve não eram poderosos, poderosos o suficiente. As variantes são uma forma de tornar muitas coisas personalizáveis e globais, em vez de criar muitos conjuntos de componentes. Então, veja um exemplo em que talvez você queira ter muitos estilos de botão diferentes. E no passado, você costumava criar todos os estilos. Portanto, você teria que criar botões de cor padrão, todas as cores com ícones sem contras de tamanhos diferentes. E isso só cresce exponencialmente. Portanto, as variantes que podem reduzir isso a um conjunto de componentes bom, muito pequeno e fácil de usar , com muitos botões configuráveis. Então, faremos um exemplo prático em conjunto para mostrar como isso se encaixa, como isso se encaixa e pode ser alcançado. Aqui no faturamento do Figma do exemplo anterior, o que eu fiz foi duplicar a linha do cartão de perfil e renomeá-la. Portanto, isso é para facilitar a configuração da variação. Portanto, a variação geralmente é qualquer coisa em que eles tenham algo semelhante. Então, vamos construir outro agora que seja um pouco mais alto e depois adicionar um pouco de sombra apenas para distingui-lo visualmente de todos os outros. Então, por exemplo, você pode querer trocar algo e isso é algo que você acabou de adicionar ou algo parecido. Se eu segurar a tecla Alt ou você puder clicar com o botão direito do mouse copiar e colar normalmente. E o que precisamos fazer é separar essa instância porque queremos transformá-la de uma instância em sua própria mestra. E vamos renomear isso destacado. E podemos fazer algo simples. Vamos apenas aumentar a altura ou o efeito padrão, que é uma sombra. E pressione a tecla Opção de Comando ou clique com o botão direito do mouse para virar o componente e pronto. Então, o que queremos fazer a partir daqui é se você selecionar vários componentes, você verá aqui à direita, há essa coisa chamada combinação como variância. Então, quando eu faço isso, você pode ver o que é feito automaticamente. Então, Figma agora reconhece isso como um componente singular, mas tem muitos estilos diferentes. Então você pode ver aqui que abrimos essa janela com as propriedades e deixe-me renomear esse estilo. E podemos ver que existem alguns estilos diferentes. Você tem um padrão sempre destacado. Então, isso é muito útil apenas para inspecionar o que há de diferente lá dentro. E você pode fazer todo tipo de coisas muito legais. Vou te dar uma prévia rápida do que você realmente pode fazer. Agora que fizemos isso com essa variante, agora podemos trocar qualquer instância existente por uma dessas coisas destacadas. Agora, você pode começar a ver o poder de não apenas agrupar componentes e começar a propagar mudanças para frente e para trás. Mas, na verdade, podemos adicionar a capacidade de alternar as coisas retrospectivamente. E agora esses estilos diferentes. E enquanto estivermos usando um agrupamento de quadros e enquanto estivermos usando nosso layout automático, muitas coisas podem se encaixar muito rapidamente. Para dar uma introdução e um resumo das outras coisas que você pode fazer vamos abordar os estilos de propriedades. Então, vou te dar uma prévia rápida de tudo isso. A variante é a padrão que você define. Então, isso geralmente é bom para estados e estilos. Boolean é bom se você quiser esconder alguma coisa. Normalmente gosto de usar um ponto de interrogação. Então, por exemplo, título. Portanto, podemos dizer que ShowTitle é um título alto. O que eu posso fazer é entrar nessa camada. E o que eu preciso fazer é usar essa coisa para aplicar uma propriedade booleana. Então, por padrão, isso é verdade se eu conectar tudo isso. Portanto, é aqui provavelmente é bom observar que é bom configurar seu componente e trabalhar com dois ou talvez três antes de conectar todos eles. Agora, nesses, agora tenho esse pequeno botão onde ele pode ativar e desativar o título. Então, algumas outras coisas que você pode fazer, há também a troca de instâncias e os textos de texto, por exemplo, eu posso simplesmente entrar aqui. E, para conteúdo, podemos pesquisar isso. Então, tipo de texto de texto. Agora, apesar de tudo isso, eu deveria ser capaz, porque eu só vi esse, eu posso mudar isso para o título deles. E isso é atualizado automaticamente. E a última coisa é a troca de instâncias. Isso significa que você pode trocar entre dois componentes diferentes. Então, aqui o que vou fazer é vincular esse componente como uma troca de instância e seu botão. E o que vou pedir às pessoas que façam, as trocas preferidas que eu gostaria que você fizesse. Em termos de criação, o sistema de design será isso. Agora, você pode ver que eu posso trocar entre botão e link. 25. Dicas para modelar componentes: Então, aqui, com base nessas variantes e propriedades, há algumas dicas rápidas que eu quero dar a você apenas para tornar sua vida um pouco mais fácil, mais adiante, à medida que você descobre como modelar as coisas. Então, eu encorajo você a realmente sentar e praticar, tentar brincar e criar algumas coisas, cometer alguns erros para que você possa se lembrar e consolidar esse conhecimento em sua cabeça. Mas aqui também estão alguns atalhos rápidos que podem ajudar a acelerar o aprendizado. Ok, então a primeira coisa é sobre o dimensionamento das coisas quando você está fazendo uma troca de instância. Então, isso se baseia no que passamos anteriormente. Você pode ver que a altura desse botão é de 39 pixels, enquanto esse link é de 19. Então, se eu mudar isso para 19 e realmente colocar a camada de texto bem no meio. Oh, na verdade eu tenho que fazer assim. Não arrume a camada de textos. Então, quando você faz a troca de instâncias, geralmente é um pouco mais fácil quando você troca coisas. Então você pode ver que, se você conseguir combinar o tamanho da coisa, geralmente é melhor. Então, ícones são bons, por exemplo, troque esse tipo de coisa. É muito bom estar atento a como as coisas são montadas e como os estilos são aplicados ao layout automático e ao dimensionamento, esse tipo de coisa. O próximo passo são as dicas rápidas sobre não necessariamente o booleano, mas o uso dos botões. Então, ao selecionar isso, podemos ver que posso selecionar o estilo com o menu suspenso, então isso é bom. Usando a propriedade variante, você tem o título, que é feito por um booleano. Você tem a propriedade text e a propriedade instance while aqui. Mas também o que você pode fazer é excluir isso para que tenhamos apenas dois. E vou renomear estilo de estilo para destacá-lo. E o que você notará é que, com esse diamante, isso ainda significa que é uma propriedade do tipo variante. Mas se eu mudar ou destacar os estilos, ou devo dizer, de, digamos, falso para verdadeiro. Então, automaticamente, o Figma pode reconhecer isso e está rasgando o que está destacado do menu suspenso em um botão. Então, isso é muito útil. E algumas outras coisas que você pode fazer são, em vez de falsas, você também pode dizer sim e não. Não tenho certeza se você pode. Você não pode misturá-los para poder usar verdadeiro e falso, sim e não. Então, esses são os tipos em que você pode usá-los aqui, verdadeiro e falso funcionarão. Sim e não trabalha. E esses vão juntá-los. Então, essas são apenas algumas pequenas coisas que notei ao longo do tempo, construindo componentes sozinho e tentando montá-los juntos. E isso realmente me ajudou a ditar e descobrir qual é a melhor maneira de modelar e expressar isso. que seja mais fácil para meus colegas de equipe e para outras pessoas usarem o material que eu montei e o criei. 26. Ponto de verificação: componentes responsivos: Incrível. Então, temos quase tudo o que precisamos para realmente capazes de ser muito rápidos e muito livres e sermos capazes expressar tudo o que queremos e juntar diferentes protótipos o mais rápido possível, o que realmente me atraiu para ferramenta Figma e por que eu ainda a adoro, usando-a o dia todo, todos os dias. Então, neste módulo, vamos realmente falar sobre design responsivo e componentes responsivos. E vamos ver isso de dois ângulos. Primeiro, veremos métodos para tornar as coisas responsivas no Figma. A seguir, falaremos sobre a quem eles respondem. Então, quando falo sobre componentes responsivos e Figma e esse tipo de coisa, normalmente estou pensando nos designers. Então, como posso facilitar a vida de mim de meus colegas de equipe para que eles possam montar protótipos muito rapidamente e ajustar esses modelos para que possamos entregar no ritmo necessário. Mas também há um design responsivo. Então, abordaremos brevemente o design responsivo. Este não é um curso para ajudar você a aprender os fundamentos do design web responsivo, mas abordaremos isso e como Figma pode ajudá-lo a chegar lá. 27. Métodos de modelagem responsivos: Com base no que fizemos em uma das aulas anteriores, acabei de pegar um dos nossos componentes que construímos juntos. Eu também fiz outro e ainda não o configurei completamente. Mas só para ilustrar as diferenças entre as duas formas de modelar componentes para responsividade. Então, primeiro, esse quadro aninha um layout automático. Então, o que você percebe é que, à medida que eu cresço e diminuo esse componente específico, do tamanho do material, o botão de visualização permanece à direita. O que você notará é que corrigiremos isso em um momento, mas o botão de visualização também fica acima do texto. Então, isso é um pouco responsivo com esta versão de restrições. Em vez disso , o que fiz foi que, se você se lembra, emoldurei as camadas de texto juntas e apliquei o layout e apliquei a todas para criar o layout de todo o cartão em si. Então, horizontalmente, ela teria sido aplicada sempre com o modelo de restrições. Acabei de colocar tudo dentro. Então você tem seu avatar, seu título, o conteúdo do corpo e o botão. E o que você pode fazer é alterar as restrições dessas coisas em relação a onde elas se encaixam em sua estrutura principal. E é muito importante assim como a moldura, porque acho que funciona de forma um pouco diferente com grupos, mas vamos nos limitar às molduras porque as molduras são boas. Lembre-se, agora que fiz isso, se eu crescer e encolher isso, agora ele se comporta exatamente como o outro. Então, seria perguntar: qual é a diferença entre esses dois? E algumas outras coisas que você pode fazer. Então você pode ver aqui que eu tenho esse quadro e o redimensionamento horizontal está configurado para ser preenchido. Mas o que ainda não fizemos foi definir o redimensionamento horizontal no título e o corpo precisa ser preenchido. O que você notará é que agora, quando eu reduzo isso, o texto é automaticamente encapsulado. Você pode ver que quando eu diminuo isso , tudo vai para o centro da carta. E se eu não gostar disso, posso ajustar para onde tudo vai. Eu posso usar o alinhamento. Não se esqueça do layout automático e altere essas configurações até que eu fique feliz. O que você notará é que, se eu fizer algo parecido, posso fazer isso e mudar a largura, a largura delas, até aqui, até o fim. Também posso mudar essa restrição para a esquerda e para a direita. Então, eu encorajo você, como sempre, a experimentar e brincar com essas configurações para ver como todas elas se encaixam. Ao fazer isso, você pode ver que o texto agora muda. Então, o que você também notará é que o plano de fundo não mudou para envolvê-lo. E é aí que as diferenças começam a aparecer. Onde há muitas coisas que faremos. Coisas muito básicas para torná-los responsivos. Eles meio que funcionam. Mas se você quiser que as coisas envolvam as coisas e funcionem mais ou menos assim, você também precisa de um layout. Isso não quer dizer que você não possa misturar os dois. Portanto, embora essas sejam duas abordagens independentes, é muito bom que você tente experimentar, misturar e combinar o que você precisa. Então, há um exemplo para este. Talvez eu não queira que o avatar esteja realmente no centro. Na verdade, quero que esteja no topo. Então, o que eu posso fazer é separar isso apenas para facilitar, porque preciso configurar as coisas. E por dentro, você pode ver que todas essas coisas internas estão configuradas em escala. Então, se eu definir todos eles para a esquerda e para o topo, por exemplo, agora, quando eu mudo a altura, posso realmente alterar a altura do recipiente a ser preenchido. Isso significa que o avatar e o texto se alinharão de forma mais agradável e natural. Por outro lado, se eu tentei fazer isso antes, você pode ver que ela se estende assim e apenas escala. Hum, então eu acho que esses são exemplos bons o suficiente para você dar uma olhada, dissecar e começar a jogar O que você vai gostar e começar a fazer, o que você quer é realmente jogar com essas configurações para ter uma ideia de como todas essas coisas se encaixam. Acho que, a partir daqui, a única última coisa a mencionar é o layout automático e a responsividade das coisas. Tente ficar em um eixo. Portanto, não tente torná-lo responsivo verticalmente, assim como fazer com que os feriados respondam horizontalmente. Você verá que quando eu encolho e fiz isso, eu realmente só trabalhei no eixo horizontal. Mas assim que eu começo a mudar a altura isso começa a não parecer muito bom e começa a desmoronar. Portanto, é bom ter em mente que tente manter um eixo e experimentar esses dois estilos diferentes de tornar os componentes responsivos. 28. Responsive para designers: Então, quando se trata de projetar de forma responsiva, mas para designers, aqui está exatamente o que quero dizer. Então, quando tomamos isso como exemplo, digamos que eu esteja usando algumas dessas linhas de cartão de perfil. E eu quero alinhar todos eles. Então, estou tentando alinhá-los assim e obter o título. Basta escrever o que eu quiser adicionar em algo diferente no meio. Digamos que eu tenha um desses componentes, digamos. E eu vou ampliar. E se eu quiser colocá-lo aqui, eu teria que selecioná-los, movê-los para baixo, e então eu preciso verificar novamente o espaçamento. Então, você provavelmente já percebeu, ou espero que tenha aprendido em uma das lições anteriores, é que, se eu selecionar todas elas e usar o layout automático, isso vem em meu socorro. E isso é algo que eu posso fazer para facilitar minha vida. Então, aqui você pode ver se eu faço isso e altero todas as coisas internas para preencher o redimensionamento horizontal, então se eu fizer isso e talvez alterar o tamanho de fixo, o que é bom. Digamos 349 porque estamos trabalhando na tela 375. E aqui eu posso ajustar a altura das coisas. E não só isso, posso reorganizar as coisas se precisar, sem problemas. Eu sou ainda, ainda mais. Posso adicionar outra seção e dizer, vou adicioná-la e colocá-la na tela e colocá-la aqui. E se eu configurar tudo corretamente, o que você notará e provavelmente começou a perceber é que usar vários quadros dentro de quadros na verdade, não é um problema, desde você os gerencie com cuidado e cada quadro deve servir a um propósito e fazer alguma coisa. Então você pode ver lá onde acabei de adicionar também o layout. Não muito, mudou, mas agora eu tenho esses contextos e outros contatos. E digamos que você seja crítico interno de design, então você está trabalhando profissionalmente e tem alguns dos designers ou partes interessadas. E eles dizem: Na verdade, acho que meu outro contato deveria ir para o topo. E vamos fingir por um momento que o conteúdo deles é diferente. Eu posso simplesmente me movimentar. E o mais simples é que, ainda mais, eu posso pegar uma cópia disso e digamos, vamos projetá-la para tablet, certo? Então, se eu fizer isso, isso será corrigido. Mas o que eu configurei aqui para a barra de navegação, vamos fazer com que pareça um contêiner. Agora você pode ver automaticamente, na verdade, esse layout não funciona muito bem. Talvez devêssemos fazê-los lado a lado. Então, se eu os agrupar, mude a para fazer o layout automático e coloque-os lado a lado. E vamos mantê-lo em 30. Você pode ver automaticamente isso tentando projetar. Como designer, quando tenho componentes que são responsivos dessa forma, minha vida fica muito mais fácil. E isso torna as coisas muito rápidas de fazer e atualizar. Porque se tudo fosse apenas uma camada por cima, sim, às vezes é um pouco frustrante, aqui está meu mainframe e meu design para iPad. E eu tenho meu conteúdo. Eu tenho que entrar nesse quadro. E esse quadro, que é essa coluna, então vá para esse componente e faça alguns ajustes. Mas se você criar seu arquivo Figma e seus designs como uma composição, na verdade, todas essas coisas internas devem ser apenas componentes muito fáceis selecionar e mexer nas propriedades que você possa ter configurado ou trocá-las por outra coisa. Então, você pode ver isso automaticamente redimensionando as coisas. Se eu também os mudar de fixos para preenchidos, o que você verá, isso se tornará um comportamento e uma memória muscular muito comuns que você acumula com o tempo. Agora eu posso ajustá-lo e começar a brincar com todos os diferentes layouts e coisas e começar a ver como você pode se comportar de verdade no meu design . Então, isso é algo que eu definitivamente sugiro e que dá uma sensação de tentar projetar, mas tornar as coisas responsivas para você como designer. E é muito importante cuidar si mesmo e facilitar sua vida. 29. Web design responsivo: Então, abordaremos brevemente quando se trata de criar sites responsivos. E eu faço isso intencionalmente porque, novamente, isso é apenas para que você se familiarize e trabalhe com fluidez no Figma, não para ensiná-lo a fazer web design responsivo, mas se você quiser explorá-lo e entender como eu tomei essas decisões. Portanto, parece muito sensato alinhá-los lado a lado. Mas como tudo isso se encaixa e como fazemos essas coisas? Então, resumidamente, tudo se resume ao layout e às duas coisas que queremos ver, nossos contêineres em colunas. Então, por contêiner, o que queremos dizer é que uma coisa fixa no centro da tela. Você notará que, se tivermos um iPad hipotético e o esticarmos assim, haverá um tamanho máximo para o qual ele deveria ser usado. Se eu reduzir isso novamente, o que fiz também foi configurar uma grade de layout. E se eu usar o Control G, e isso pode ativar isso aqui, estou usando 0s, sistema básico de 12 colunas, que é bastante padrão. E o que você notará é que não está perfeitamente alinhado, mas é o suficiente para dar uma ideia de que tudo bem, tudo está no centro. Então, se eu renomear isso, isso pode ser um contêiner. E se eu os encolher, temos essa coluna esquerda e coluna direita. Então, vamos chamar isso de Coluna seis. E vamos chamar isso de Coluna seis também. E isso porque, ao trabalhar com o bootstrap como exemplo em muitas outras estruturas e sistemas de layout de front-end, eles usam um sistema de doze colunas e definem o tamanho das coisas usando 12 colunas. E você pode configurar seus componentes para atender ao tamanho de tudo. Entre esse tamanho. Se você me entende. Então, temos as colunas seis ocupando seis colunas à esquerda e a outra ocupa seis colunas à direita. Você pode ajustá-lo e alterar a divisão. Então, um pega três colunas e o outro leva nove. Você pode até mesmo fazer números ímpares que não se encaixam ao configurar coisas e fazer um web design responsivo. Você pode ver isso aqui. Na verdade, eu deveria ajustar essas coisas aqui. Então, eu tenho essas coisas, o ícone, vamos renomear isso para facilitar. E esse B é branco. Meu logotipo é branco. Então, se eu quiser colocar um pouco, mude para uma largura fixa e reduza para aproximadamente o mesmo tamanho. E então, se eu chamar esse contêiner, tudo bem. Isso é bom. Na verdade, deve ser como o que temos, se você mudar isso para um espaço intermediário, então dá uma ideia aproximada de como as coisas realmente deveriam funcionar e se encaixar. Portanto, neste conceito de contêiner, você pode ler mais sobre Get Bootstrap e simplesmente procurar contêineres. E então, olhando para as colunas, você pode olhar para getbootstrap e olhar para as colunas. Então, a documentação é muito boa, eu diria. E o que você descobrirá é isso para esse iPad hipotético, se eu o tornar super amplo. Então, eu tenho uma tela ultra widescreen, por exemplo, que tem uma proporção de 21 por nove. Você verá que, na verdade, muitos sites não sabem como usar isso. Ou se o deixássemos se dividir por toda a coisa, seria muito desconfortável de ler. Então eu disse isso e coloquei para encher um recipiente. Isso é muito horrível, não é? Então, desligamos essas grades por um momento. Novamente, com o controle G, você pode ver que é meio difícil de ver e ler e é muito melhor manter o meio. Portanto, esse contêiner fornece um tamanho máximo onde as coisas devem ir para as colunas, fornece um sistema de como as coisas são dispostas na página, que vem de uma história do design de impressão. Muito interessante. Eu recomendo a leitura. E isso deve lhe dar uma ideia suficiente de como essas coisas se encaixam. Infelizmente, Figma realmente não gosta de modelos deles. Por exemplo, você não pode alterar os componentes à medida que o tamanho da tela muda. Mas tudo bem. Há algumas coisas que podem imitá-lo bem de perto. Mas lembre-se do Figma como uma ferramenta para dar uma ideia e comunicar sua intenção para os diferentes tamanhos de tela. E então cabe a você fechar essa lacuna ao falar com seus engenheiros. E você definitivamente pode aprender muito. E acho que torna sua vida mais fácil se você aprender como isso é realmente feito para codificar de verdade. Porque, no final das contas, é aí que seu usuário vê, não seus arquivos Figma. 30. Interações de protótipo: Por isso, já abordamos protótipos clicáveis anteriormente. Mas agora vamos fazer isso de verdade. Vamos fazer um trabalho de ponta a ponta muito bom, um exemplo para ajudá-lo a descobrir como fazer isso também. Então, aqui, eu desenvolvi alguns dos exemplos anteriores dos módulos e lições anteriores para criar um tipo de fluxo de comércio eletrônico muito básico. Então, estou tomando a ideia direta do micro-ondas e montei um pequeno seletor em que você pode escolher entre dois estilos de micro-ondas e escolher entre duas cores diferentes antes de ir para a tela da cesta e depois ir para o início da finalização da compra. Então, vamos direto ao assunto. Para começar, a coisa mais fácil de fazer é clicar nos protótipos que temos no canto superior direito. E a partir daí, o que você verá ao atravessar diferentes camadas é que há um pequeno círculo que aparece nessas diferentes camadas. E quando você seleciona sua camada, essa será a maneira mais fácil de criar uma interação de protótipo. Portanto, se a página em que você está trabalhando não tiver um fluxo existente, você notará algumas coisas aqui. Antes, não havia interações com protótipos. E quando eu arrasto isso para cima, isso cria isso e interação. E as duas coisas a serem observadas primeiro são que isso criou um fluxo que você pode ver no canto superior esquerdo chamado fluxo 1, que você pode editar aqui, mas nos detalhes da interação. Então, por padrão, isso será feito com um clique, mas se houver uma interação existente, ela será padronizada para a próxima. Então, continuará sendo arrastado. Então, enquanto paira, enquanto pressiona , etc., etc. Vamos nos limitar a desclicar hoje. Mas vou deixar vocês com alguns exercícios para explorar os outros. Então, se formos desclicar e navegar, e eu quiser que seja instantâneo, não há muito mais que eu queira fazer. Então, vou clicar em Fechar e isso manterá isso lá. O que eu posso fazer a partir daqui é clicar em todas as coisas diferentes entre as quais eu quero navegar. Então, com o seletor enquanto eu vou entre os diferentes, quero que isso aconteça. O que vou fazer aqui é habilitar a animação inteligente. E isso fará com que pareça mais interativo do que era. Então, faça com que pareça mais real, acho que é o que estou tentando dizer. Então, se passarmos por aqui e passarmos por isso, basta passar pelos diferentes. Você pode ver que, se você preparou suas telas e fluxos com antecedência, conectar tudo é relativamente simples. Vamos tomar um momento e fazer isso e garantir que eu tenha feito a maioria delas. E você pode ver que, uma vez que eu altero as configurações, para qual delas é esse b? Essa, não é? Depois de alterar as configurações, ele continuou mantendo as últimas configurações conhecidas que eu coloquei. Então, isso é muito útil. Nós iremos aqui. Você pode conectar isso até aqui. Ok, ótimo material. Então, basta conectá-los completamente. Portanto, cada um deve ter duas interações indo para uma das outras telas. A partir daí. Quero comprar este apenas para fins ilustrativos. A alternativa e o estilo branco, que é esse. E pegue o botão adicionar à cesta. E olha isso aqui em cima. Então, vou mudar isso de volta para o instante. E isso é mais natural. E a partir daqui, eu posso fazer isso e fazer isso. A única outra coisa que você pode querer saber também é desclicar. Você pode voltar. Então, ele vai para a tela anterior ou para a interação anterior. Portanto, não parece tão interessante no momento. Mas isso é muito útil se você quiser desfazer ou se tiver muitos flutuadores complexos diferentes. Então, essas são as principais coisas que você deseja conhecer. Então, é basicamente assim que você configura todas as suas interações. Vou abrir isso bem rápido. Vamos renomear esse fluxo. Fluxo. Clique em. E você deve ser capaz de ver em um momento como tudo isso se encaixa. À medida que rolamos, podemos ver aqui, construir meu micro-ondas e o Smart Animate. Você pode ver que ele gira entre eles. Quão legal é isso? Então selecione esses dois na cesta, nos leva até aqui, então eu posso prosseguir com a compra e voltar para a cesta nos leva de volta para lá. Exemplo curto, limpo e simples que ajuda você a juntá-los. Como protótipo de instrutor. 31. Vários fluxos: Criamos um fluxo na lição anterior. Mas e se você quiser compartilhar vários fluxos? Um de vocês quer testar duas condições diferentes uma contra a outra. Então, vou te dar uma introdução rápida e uma visão geral de como fazer isso. Primeiro, o que você deve observar na pré-visualização é que, ao clicar, você pode ver alguns controles diferentes. No canto superior esquerdo aqui. Isso será o que será mais útil para você. Você pode ver todos os diferentes fluxos que você montou. Então, aqui temos o único fluxo que montamos, meu fluxo. Mas o que queremos montar? Outro? É bem simples. Digamos que comecemos do checkout por qualquer motivo. E você pode simplesmente, nesta guia de protótipo, se você não a selecionou ou clicou nela, certifique-se de selecionar a guia Protótipo novamente. Então, se você clicar no ponto inicial do fluxo, poderá fazer a condição de fluxo de checkout e dar um nome a ela. Em seguida, o protótipo parte daí. Então, eles são basicamente apenas marcadores onde você pode ir de uma equipe de TI, clicar aqui ou clicar no botão play no canto superior direito. O que você verá é que, para qualquer pessoa que tenha o arquivo aberto e possa ver o protótipo , ela também pode ver essas coisas. Então, se eu clicar no meu fluxo, isso nos leva de volta ao início do fluxo que construímos anteriormente. Ele poderia passar, construir meu micro-ondas e clicar entre as diferentes coisas. Ou se eu quiser trabalhar em um fluxo diferente e começar diretamente de outro lugar, viemos aqui e você pode ver que isso nos leva direto para a cesta. Aí está. 32. Compartilhando protótipos: Agora que você tem um protótipo clicável e reuniu os fluxos que deseja compartilhar com as pessoas. Agora você vai querer compartilhar isso com alguém remoto ou, digamos , que você esteja trabalhando em casa ou tenha alguém que esteja trabalhando em um escritório diferente geograficamente e queira compartilhar isso com essa pessoa. Então, aqui estão todas as coisas que você vai querer saber para compartilhar seu protótipo da melhor maneira possível. Então, antes de chegarmos aos links, há três coisas que eu queria colocar no seu radar. Eles são os pontos de acesso azuis, o nível de zoom e a exibição e ocultação da interface de usuário. Porque quaisquer que sejam as configurações que você selecionar aqui, nós nos incorporaremos ao link de compartilhamento para que você as compartilhe com seus amigos, colegas ou com quem você quiser compartilhar. Portanto, é muito importante corrigir essas configurações antes de gerar o link de compartilhamento. Aqui no canto superior direito, você pode ver algumas coisas diferentes. Então, por padrão, mostre dicas de pontos de acesso. O Onclick está sempre ativado. Então, se eu fizer isso, você pode ver que há uma área da tela que se destaca em azul. Então, às vezes, você pode querer desligar isso. Se você não quer dar dicas às pessoas e fazer com que pareça mais realista, não é algo que você possa ativar e desativar a partir daqui. O próximo é o nível de zoom. Aqui. É um tamanho muito bom, mas você quer ter certeza de que o Zoom é do tamanho certo para o que você deseja compartilhar. Portanto, o Fit to Screen é um dos formatos que você pode usar. Isso é bom para apresentações. Você meio que tem a largura adequada. Então, ele se expande até que o tamanho máximo da tela seja grande o suficiente, ele simplesmente será exibido em 100%. Você também tem a tela de preenchimento, que é meio semelhante à tela ajustada. Bem, há um tamanho real. Portanto, dependendo de como você configurou seu protótipo e da resolução que você tem, pode mudar a forma como um protótipo é visto pela pessoa que o recebe. Então, se eu esmagar isso, não vai funcionar, não é? Ok, não vamos esquecer isso. De qualquer forma. Resumindo, ao tentar dizer, mude as opções de zoom até ficar satisfeito com a forma como elas são exibidas. Antes de você realmente enviar isso para alguém. O último é mostrar e ocultar a interface. Então, alguém que adora isso, nós vamos comprar isso também, esse bar. E se você abrir isso, ficará visível para o que você pode querer fazer é mostrar ou ocultar a interface do usuário do Figma. Então tem esse símbolo engraçado aqui. Mas o atalho que eu uso é o comando e o backspace, mas o botão de barra invertida, desculpe, ou o símbolo do tubo, que é como uma linha vertical. Em seguida, clique aqui. Você pode ver que está oculta a interface do usuário. E quando eu clico sobre, não consigo mais ver isso à tona, comando, barra vertical, caractere de barra invertida, e então eu posso ver todas as coisas da interface de usuário novamente. Depois de configurar isso, você deve acessar o link Compartilhar protótipo. É por isso que você pode ver que há um link de cópia e compartilhamento que aparece na parte inferior. Porque se você ocultar a interface do usuário, não conseguirá realmente ver o botão de compartilhamento. Mas a partir daqui, isso provavelmente é algo que você vai querer fazer. Se entrarmos aqui, posso mostrar a aparência do URL. Se aumentarmos o zoom, você pode ver, geralmente você pode usar isso para verificar a si mesmo. Aqui, essas opções de URL, então vou mantê-la o mais acessível possível para você. Mas para ocultar a interface do usuário, por exemplo, você pode ver aqui que foi adicionada uma opção e um alto DUI, e é uma delas. Se eu quiser que isso realmente apareça, eu poderia mudar isso para zero, por exemplo, e você pode ver aqui que também está embutido na opção de escala para o Zoom, essas são todas as opções importantes que você precisa conhecer. E depois de compartilhar o link, a última coisa que você vai querer fazer é, ao compartilhar o protótipo, garantir que qualquer pessoa com o link possa visualizá-lo e depois copiar o link. Você pode enviá-lo por e-mail para Pete them. Você pode adicionar e-mails de pessoas ou contas Figma, mas acho mais útil configurá-lo para qualquer pessoa com o link, copiar o link e enviá-lo para alguém. Então, isso abrange tudo o você deseja saber sobre compartilhar um protótipo do Figma e quaisquer fluxos que você queira fazer e testar ou compartilhar algumas ideias com seus amigos, colegas, familiares e quem você quiser compartilhar com seu cachorro. Talvez, por exemplo.