Prototipagem Figma: um mergulho profundo, iniciante a profissional, para UX/UI Designer

1. 00 Introdução: Este curso é um verdadeiro mergulho profundo no mundo da prototipagem com Vamos examinar mais de perto a configuração básica para prototipagem Animação inteligente, componentes interativos, prototipagem com variáveis, além documentar e compartilhar nossos Começaremos com o básico e aprenderemos como conectar telas, definir diferentes comportamentos de rolagem e visualizar nossos designs Em seguida, passaremos para a animação inteligente, a parte mágica quando se trata de prototipagem Vou mostrar todos os superpoderes do Smart Animate e também falaremos sobre as limitações e resolveremos alguns problemas Depois de entendermos o Smart animate, passaremos a configurar microinterações com componentes interativos no Figma Os componentes interativos economizarão muito tempo quando se trata de adicionar comportamento padrão às instâncias em todo o seu design. Depois de adicionarmos variáveis para criar expressões e declarações condicionais, você verá o verdadeiro poder de Figma ganhando vida Fornecerei muitos exemplos para explorar nos arquivos do playground. Para finalizar, vou mostrar dicas e técnicas para documentar e compartilhar seus protótipos com outras pessoas. Vamos dar uma olhada na documentação dos componentes interativos do Figma, bem como dos sistemas de design externos Fornecerei um arquivo Figma que permite que você trabalhe comigo durante os vídeos ou retorne aos exercícios com instruções detalhadas em seu próprio tempo Isso faz com que você tenha conhecimentos básicos do Figma ou seja um usuário avançado do Figma e queira melhorar suas habilidades de prototipagem Este é o curso da moon learning dot IO. 2. !!! POR FAVOR, ASSISTA !!! Nova interface do usuário Figma em beta: Heads Figma atualizou sua interface de usuário e você pode ver um novo design em vez do antigo Atualmente, esta atualização está em versão beta fechada, então nem todos têm acesso ainda. Vou atualizar as artes e refletir a nova interface assim que ela estiver disponível para todos. As mudanças são principalmente visuais. Todos os recursos e ferramentas ainda estão lá, apenas em lugares ligeiramente diferentes ou com um novo L. Por exemplo, a barra de ferramentas superior foi movida para baixo. O painel lateral esquerdo, por outro lado, permaneceu praticamente inalterado Agora você pode alterar o nome do seu arquivo aqui. Você ainda pode ver todas as suas páginas, camadas e ativos. No lado direito, você notará algumas mudanças ao clicar em um design, mas todos os recursos ainda estão disponíveis. Se você é iniciante e acha a nova interface confusa, pode clicar no ponto de interrogação na parte inferior direita e voltar temporariamente para a interface antiga Isso não influencia seu design. Dessa forma, você pode acompanhar os vídeos do curso usando a interface antiga com muito mais facilidade até que esteja pronto para fazer a transição para a nova. A FIMA está lançando gradualmente essa atualização. Se você ainda não tem acesso, também pode solicitá-lo à FIMA, mas não há garantia, talvez alguns de vocês precisem ser um pouco pacientes Talvez o administrador da sua equipe também precise ativar a atualização para você, portanto, verifique isso também. A Figma atualiza o software com frequência, portanto, espere mudanças e esteja preparado para se adaptar Os recursos podem se mover como esse botão de biblioteca aqui esteve em todos os lugares possíveis nos últimos anos. Mas não se preocupe, nada nunca se perderá e você se acostumará a usar o FIMA de uma forma muito mais flexível Ele tem um foco muito bom na usabilidade. Portanto, não se trata de aprender algo de cor, mas de entender o software como um todo. 3. MATERIAL: download de arquivo de figma: Talvez você queira trabalhar comigo, então preparei alguns arquivos para você baixar no curso você está fazendo, basta navegar até o projeto e os recursos. E lá você encontrará todas as informações e o link para baixar o material. Nesta página, você encontrará uma variedade de downloads. Você pode simplesmente escolher a causa que está tomando atualmente e clicar em Baixar. E ele baixará automaticamente o arquivo para você. Para importar os arquivos, basta baixá-los. É importante que você tenha uma conta Figma. Na sua conta Figma, navegue até os rascunhos ou vá para um projeto dentro de uma equipe. Clique no botão Importar e você pode escolher qual arquivo deseja carregar. Pode demorar um pouco, pois são muito grandes, mas depois de importados, eles estarão na sua conta e você não precisará repetir esse processo. Dentro do arquivo. Você encontra material para trabalhar comigo nos vídeos, mas eu também adicionei algumas instruções para que você possa sempre voltar em seu próprio tempo, experimentar e praticar. Estou trabalhando com fontes do Google para a maioria dos meus designs. Portanto, se você estiver trabalhando com o aplicativo Figma, não precisará fazer nada ou as fontes do Google serão pré-carregadas automaticamente. Se você quiser trabalhar com o Figma no navegador, basta pesquisar a fonte que está mostrando como ausente, por exemplo Poppins, eu uso muito. E então você pode baixar essa fonte diretamente, instalá-la no seu computador e pronto. 4. NOVO! Configurar as atualizações 2023: No final de junho de 2023, durante uma conferência de conflito da Figma, algumas atualizações para prototipagem foram lançadas Tudo ainda funciona como antes. No entanto, existem poucos extras como esse. Temos um arquivo de entrada, uma prévia. Nosso menu de prototipagem agora está visível ao lado de nossos conectores E podemos prototipar com variáveis. Certifique-se de baixar a versão mais recente do arquivo Figma Aqui você também pode marcar claramente o que há de novo e onde encontrar tudo. Deixe-me explicar rapidamente os novos recursos para que você fique ciente de quaisquer alterações nos vídeos. Assim como antes, se você selecionar qualquer quadro e clicar no botão Reproduzir, isso abrirá a pré-visualização para você. No entanto, agora também temos outra maneira de visualizar , ou seja, se clicarmos no pequeno erro, você poderá ver Visualizar no arquivo. Isso significa que temos uma pequena janela de visualização diretamente em nosso arquivo para ver nosso protótipo e Ação, o que é muito útil Também existe um atalho para isso. Basta pressionar Shift e a barra de espaço, e isso abrirá a janela de visualização para você. E outras mudanças: se você clicar em qualquer conector , o menu de prototipagem agora estará exatamente onde sua interação está acontecendo antes que isso abra uma janela no canto superior Dentro do menu, você ainda encontra tudo como antes, mas tem um layout um pouco diferente. Alguns novos elementos foram adicionados, que são variáveis e condições. Todo o resto já esteve lá antes. Eu recomendo que, se você quiser usar variáveis e condicionais na prototipagem, primeiro se familiarize com as variáveis, que é um recurso totalmente novo no Figma e eu tenho um E então você pode começar a prototipagem com esses novos recursos É mais ou menos isso. Divirta-se prototipando 5. BASICS: 01 Espaço de trabalho de protótipo da Figma: Então, vamos começar com algumas noções básicas o espaço de trabalho ao lidar com prototipagem. Então, aqui temos algumas configurações de design para celular e outras para desktop. E, como padrão, estaremos na guia Design. Ao lado da guia Design, você encontra a guia Prototipagem. Ou você também pode usar o atalho para alternar entre eles, antigo 89, e, a propósito, zero seria o modo de inspeção. Então, vamos conhecer esse menu aqui com mais detalhes. Por enquanto. Saiba que, se você clicar na tela cinza, definirá as configurações gerais do protótipo. Portanto, qualquer dispositivo que você queira configurar, saberei mais sobre isso mais tarde. E se você quiser mudar o plano de fundo , isso estará na visualização da apresentação, que veremos em um minuto. Se você selecionar qualquer moldura em sua tela , verá que o menu de prototipagem aqui muda. E é aqui que vamos trabalhar a maior parte do tempo. Vamos aprender como configurar fluxos diferentes, como configurar interações e animações entre telas diferentes e até mesmo dentro de conjuntos de componentes. E vamos falar sobre o comportamento de rolagem. E se você clicar aqui, basicamente voltará para a configuração geral do protótipo. Portanto, esse é o mesmo menu como se eu simplesmente clicasse no plano de fundo da tela. Vamos fazer isso de novo. Eu seleciono qualquer moldura. Agora você pode ver isso um passo adiante e as configurações do protótipo. Portanto, as configurações do protótipo são apenas para a configuração geral antes de todas as molduras e todos os elementos aqui contidos. Agora, arquivo de design, é aqui que vamos configurar o design e todo o comportamento do nosso protótipo. Se quisermos ver nosso protótipo e ação , precisamos apertar o pequeno botão Play no canto superior direito do seu arquivo. Em seguida, isso salta para o modo de apresentação ou visualização. Você passa o mouse sobre isso. Você também verá os atalhos. No meu caso, como estou em um Mac, tudo isso é para Command and Enter. E você pode ver que isso agora está abrindo uma nova guia. Então, nesta prévia, você verá um único quadro no centro. Se você clicar em um fundo preto e tiver mais algumas opções aqui para poder comentar e compartilhar comentários com sua equipe. E no lado direito, você tem as opções de compartilhamento. Assim, com um link ou convidando, você pode compartilhar e até mesmo obter um código de incorporação para seu protótipo. E falaremos sobre todas essas opções de compartilhamento com mais detalhes durante o curso. Aqui você tem as opções de como deseja que seu protótipo seja exibido. Se você simplesmente usar isso, poderá alternar as diferentes opções para ver tamanhos diferentes como deseja que sejam exibidos. Você pode simplesmente usar as teclas do teclado para pular para o próximo quadro, mesmo que ainda não tenha nenhuma conexão configurada. E observe a ordem em que o Figma usa aqui. Então, isso é muito útil porque Figma realmente escolhe o primeiro quadro e localiza, e depois passa pela linha de quadros. Se não houver mais quadros, ele passará para o próximo quadro disponível. Portanto, esse não precisa ser um papel claro. Pode ser algo assim, mas Figma interpretará isso como uma linha e percorrerá o quadro um por um. 6. BASICS: 02 Onde meus prorotypes deveriam viver?: Agora, onde você deve configurar seus protótipos? Bem, como podemos pular do design para a guia Prototipagem no Figma. Você pode simplesmente configurá-los em seus projetos existentes. Isso pode ser bom para um projeto muito pequeno, mas, em geral, recomendo que você faça uma cópia de suas telas, configure pelo menos uma página própria ou até mesmo um arquivo totalmente próprio e copie seus quadros aqui. E agora eu teria esse local designado apenas para minha prototipagem. A razão para isso é que se eu estiver trabalhando com prototipagem, provavelmente vou configurar muitas versões e ajustar um pouco meus designs para a prototipagem funcione da maneira que eu quiser. Enquanto isso, quero que meu design permaneça bem limpo e seja apenas uma visão geral das páginas existentes. Isso fará mais sentido quando começarmos a construir nossos protótipos e também quando falarmos sobre documentar diferentes comportamentos. 7. BASICS: 03 Na visualização de dispositivo de tela: No Figma, você pode configurar uma pré-visualização do dispositivo, o que é muito bom. Então, se selecionarmos a tela aqui e voltarmos para nossa guia Design. Eu posso ver que esse verde está configurado como um iPhone 14. Eu voltei para o meu menu de prototipagem. Eu posso ir para mostrar as configurações do protótipo. Ou é o mesmo que se eu simplesmente clicasse na tela cinza. E então, no dispositivo, posso escolher o iPhone 14 dos meus dispositivos predefinidos. Eu posso escolher uma cor aqui, então vamos usar a luz das estrelas. E eu também poderia alterar a cor de fundo ao meu gosto. Então, agora vamos tocar novamente. E você pode ver que agora meu design dentro deste dispositivo. Lembre-se de que, depois de fazer uma prévia para celular, alguns gatilhos mudarão de nome. Então clique, por exemplo, será chamado de Tap, mas funcionará exatamente da mesma forma. Agora, a única coisa que você precisa observar é que, se você estiver acessando telas diferentes, tudo estará perfeito, desde que você continue trabalhando nesse tamanho de celular. Assim que você estiver acessando a visualização da área de trabalho, que eu tenho no mesmo arquivo de design, você pode ver que ela simplesmente aparece aqui, mas está mantendo essas configurações de protótipos porque elas estão definidas para toda a página. Se você quiser usar uma pré-visualização do dispositivo, recomendo que você configure uma segunda página para prototipagem. Então, vou chamar esse protótipo de mesa. E eu gosto muito de adicionar alguns ícones, mas não é absolutamente nada que você precise fazer. Você pode simplesmente copiá-los. E eu vou usar esse pequeno ícone de prototipagem aqui. E agora vou chamar isso de um protótipo de esfregão. Então é aqui que a tela do meu celular vai ficar. E eu também gosto de fazer uma espécie de aplicativo separado. Se você estiver no plano gratuito do Figma, talvez não tenha permissão para ter tantas páginas. Então, basta deixar tudo em uma página e simplesmente não usar a pré-visualização do dispositivo. Agora tudo o que preciso fazer é copiá-los para minha nova página. E você já pode ver isso aqui. Na configuração do dispositivo , eles estão definidos como nenhum. Normalmente, não deixo o desktop em nada. Mas você também pode dar uma olhada se há um dispositivo que você deseja usar. Então você pode ver 1280. Então eu tenho que verificar se isso corresponderia ao MacBook Air. Então, vou criar um protótipo e agora posso simplesmente escolher o MacBook Air, e eu teria esse aqui. Agora, enquanto estou jogando, você pode ver que esta página está configurada para o MacBook Air. Se eu estiver voltando e selecionando minha visualização móvel , aqui, esta permanece com o dispositivo do iPhone. Portanto, esse é um conceito muito importante para entender que os protótipos não se comunicam em páginas diferentes mesmo que estejam no mesmo arquivo. 8. BASICS: 04 elementos fixos e scrollable: No Figma, podemos configurar que sejam projetados forma que, no modo de apresentação, alguns elementos sejam fixos e outros sejam roláveis. Vamos dar uma olhada. Aqui. Eu tenho o design de uma tela de celular. Quero que a navegação na parte superior permaneça fixa enquanto o conteúdo rola. Eu tenho outro botão Adicionar aqui embaixo, que também parece permanecer fixo. Vamos dar uma olhada no modo de apresentação, como está agora. Se eu pressionar o botão Play, posso ver meu protótipo. Eu posso ver que, se eu tentar rolar , absolutamente nada acontece. Então, vamos voltar e configurar isso. Para que a rolagem realmente funcione. Precisamos de conteúdo maior que o quadro. Então, aqui eu seleciono o quadro principal chamado mobile. E no lado direito, você pode ver uma pequena caixa de seleção chamada Clipar conteúdo. Se eu desmarcar essa caixa, você verá que meu grupo de cartões é na verdade, muito maior do que minha moldura original. E isso é muito importante se você não tiver conteúdo que possa recortar e que basicamente transbordará sua moldura. Então você não pode adicionar o scroll. Você pode ter isso marcado ou desmarcado. Não faz nenhuma diferença. O que você precisa fazer agora é entrar no modo de prototipagem. Então, clique na guia Prototipagem no canto superior direito. E, em seguida, em rolagem estourada, escolha rolagem vertical. Vamos voltar ao nosso modo de apresentação e ver o que isso fez. Agora eu posso rolar o conteúdo, mas como você pode ver, meu cabeçalho e meu botão aqui não estão fixos. Então, vamos voltar e configurar isso. Escolha o elemento, no meu caso, o cabeçalho que você deseja manter fixo e pule para a prototipagem. Você verá a opção abaixo posicionada de fixar, permanecer no lugar. Observe que aqui no elemento filho você também tem a opção de definir o comportamento de estouro. Então esse seria o comportamento de rolagem dentro desse quadro aninhado. Nesse caso, não queremos nenhum comportamento. Já dissemos nossa rolagem vertical até o contêiner principal. Vamos também corrigir esse botão aqui embaixo. Vamos configurar isso como corrigido, permanecer no lugar também. E agora vamos clicar em Play e dar uma olhada em como isso parece. Portanto, meu contêiner principal rola bem e todos os meus elementos fixos permanecem no lugar. Se alguma vez você perceber que a rolagem não está funcionando, verifique três coisas. Em primeiro lugar, em sua guia de design, certifique-se de ter um conteúdo recortado que seja maior do que o quadro com o qual você está lidando. No menu de prototipagem, verifique se a rolagem de sobrecarga está definida. Depois de configurar o elemento pai, agora escolha um elemento filho que você deseja fixar no local, vá para a prototipagem e, em seguida outro médico escolha fixo, permaneça no local. 9. BASICS: 04 elementos pegajosos no rolo: Elementos fixos na rolagem. Você também pode criar um efeito em elementos que permaneçam grudados quando atingem a parte superior da tela. Essa é praticamente a mesma configuração dos elementos fixos. Portanto, você precisa ter certeza de que o quadro principal tem conteúdo recortado que transborda o quadro para que isso funcione. E isso precisa ser configurado para rolagem vertical. Agora, solte e escolha os elementos que você deseja que permaneçam fixos. Então, no meu caso, esta é a seção chamada Nova e essa seção chamada salva. E então eu estou voltando à prototipagem. E agora na posição em vez de fixa, vou escolher o batente adesivo na borda superior. O que é importante para que isso funcione é que você precisa configurar a ordem no painel de camadas de forma que a posição que está por último. Então, no meu caso, esse azul aqui chamado salvo está em cima do outro. Então parece que este é o primeiro. Mas basicamente na minha hierarquia de camadas, na realidade, essa seção dois está no topo da seção um. Agora vamos escolher a moldura principal. Volte para o clipe de design novamente. E vamos clicar em Play e ver se isso está funcionando. Isso parece ótimo. No entanto, você ainda pode manter o cabeçalho fixo e, em seguida, fazer com que essas seções parem abaixo do cabeçalho simplesmente fixando o cabeçalho. Isso não funcionaria porque eles buscariam a mesma borda superior. Um pequeno truque que você pode usar aqui é desenhar uma moldura ao redor da seção. Então eu chamei isso aqui de pegajoso. E então, por dentro, você pode ver que tenho minha seção normal colocada uma moldura ao redor dela é um pouco maior. Portanto, essa distância aqui é a mesma distância do menu na parte superior. Então, estou criando um offset artificial. E eu fiz o mesmo com minha outra seção aqui embaixo. Então eu fiz o mesmo com o azul aqui. Vamos recortar isso e clicar em Reproduzir e dar uma olhada. E você pode ver que agora ele armazena essa pequena seção, então cria um deslocamento no meu menu e está funcionando muito bem. 10. BASICS: 05 quadros de nidificação para apresentação: Um dos grandes poderes da Figma são as molduras de nidificação. E isso também liberará muitas possibilidades quando se trata de prototipagem. Então, vamos entender isso um pouco melhor. Então, aqui eu tenho meu design e essa geralmente é a tela que eu estou representando como uma moldura. E aqui já configurei tudo o que eu queria que fosse fixo e rolável. Se eu entrar no meu modo de apresentação, posso fazer com que eu role um protótipo para cima. Até agora tudo bem. Se eu pudesse, no entanto, desenhe uma moldura em torno desta. Então, vamos desenhar uma moldura simples e dar a ela outra cor de fundo. Então, entendemos isso um pouco melhor. E agora eu entraria no meu modo de apresentação. Então você pode ver que Figma pegou a moldura principal. Então, tudo o que contém outras molduras como minha moldura de exibição. A melhor coisa agora é que tudo o que eu configurei neste quadro. Portanto, todo o elemento fixo e elementos roláveis mais antigos ainda permanecem no lugar. E podemos fazer um ótimo uso disso. Porque isso nos permite apresentar nosso protótipo em contexto. Então, o que podemos fazer, por exemplo, eu configure aqui outro quadro. E nesse quadro eu posso adicionar um título, alguns marcadores de descrição descrevendo meu protótipo. E eu também adicionei uma imagem, então uma maquete onde vou colocar meu protótipo. Você não precisa adicionar isso. Então, agora vou pular e copiar meu design original. E com isso, uma cópia de todas as configurações, rolagem de pedidos e elementos fixos. E eu vou colá-lo dentro da minha maquete aqui. Vamos arredondar os cantos para que se encaixe um pouco melhor. Então, se eu selecionar agora esse quadro e pressionar o modo de apresentação , ele me mostrará o quadro inteiro. Então, todos os slides da apresentação que eu configurei. E o melhor é que meu protótipo ainda estará funcionando. Portanto, ele pode realmente ser apresentado em seu ambiente. Se você mover o mouse para o canto superior direito da tela, você verá o menu suspenso Opções. E ele pode escolher coisas como se você quiser que uma apresentação seja ajustada à tela em termos de largura e assim por diante, o que quer que você escolha aqui, se você clicar no botão de compartilhamento do protótipo, qualquer pessoa que visualize sua apresentação com esse link terá as mesmas predefinições. Você também pode conectar diferentes quadros de apresentação. Assim, assim como um protótipo padrão, você pode criar uma apresentação que inclua um protótipo funcional e clicável. Do tamanho que esse é um recurso realmente incrível para impressionar a todos em uma apresentação, é muito bom entender como a prototipagem e o Figma funcionam. Ou seja, você define a prototipagem nos quadros individuais. E isso é algo que vai te ajudar muito quando nos aprofundarmos um pouco mais na definição de direções diferentes. 11. BASICS: 06 rolagem horizontal e vertical: Vamos investigar um pouco mais as diferentes direções de rolagem em Figma. Portanto, temos a vertical, a horizontal e a combinação de ambas que queremos ver. Vamos começar com a vertical, que também é a mais comum. Lembre-se de que, para todos eles, para que a rolagem funcione, você precisa ter um conteúdo recortado. Isso significa que você precisa de conteúdo que ultrapasse seu quadro. Então, se for esse o caso, basta acessar sua guia de prototipagem. E em rolagem excessiva, defina isso como rolagem vertical. Se agora entrarmos no modo de apresentação, tudo poderá ser rolado. Como aprendemos antes, também podemos selecionar certos elementos, voltar ao Design e fixá-los em sua posição. Então, se voltarmos para o modo de visualização, você pode ver que agora o cabeçalho será corrigido e apenas um corpo poderá ser rolado. Então, até agora, sempre que lidamos com a rolagem de conteúdo, adicionamos à moldura principal. Mas o melhor do Figma é que podemos adicioná-lo a qualquer quadro aninhado. Então, deixe-me mostrar a diferença. Em primeiro lugar, vamos selecionar a moldura principal aqui. Jim, volte ao protótipo e retire rolagem vertical para que você possa simplesmente configurá-la para não rolagem. Agora, em vez da moldura principal, vou selecionar a moldura aninhada aqui, então o grupo de cartas, e vou definir isso como rolagem vertical. Então, vamos pular para o nosso modo de pré-visualização e ver se isso funciona. Bem. Na verdade, não está funcionando, é aqui que há um pequeno movimento de salto, mas não está rolando esse conteúdo. Então, vamos ver por que isso acontece. Agora lembre-se de que precisamos recortar conteúdo, seja, conteúdo maior que o quadro. Para que a rolagem funcione. Vamos voltar para nossa guia Design. Podemos ver aqui que no quadro principal que era verdadeiro, nosso grupo de cartas era maior do que o quadro, portanto, ele começou a rolar. Mas agora aplicamos a rolagem a esse quadro aninhado. E você pode ver que isso não vai ser cortado porque a moldura ao redor está , na verdade, contendo todo o conteúdo em um. Então, o que posso fazer agora é selecionar essa moldura e agora posso redimensionar a moldura. Certifique-se de ativar o conteúdo do clipe. Assim, você pode ver que seu quadro é na verdade, menor do que seu conteúdo. E agora posso ajustá-lo até a parte inferior da minha moldura aparente. Então, agora vamos tentar novamente. Clique em Jogar e você pode ver que agora apenas o grupo de cartas pode ser rolado. Observe como a barra de pesquisa e tudo mais permanecem no lugar. Entender que você pode aplicar o comportamento de rolagem ao quadro principal ou ao quadro aninhado é muito importante para liberar todo o poder da prototipagem. Vamos dar uma olhada na rolagem horizontal. Então, novamente, precisamos selecionar o quadro aninhado, porque se eu aplicasse a rolagem ao quadro principal, isso rolaria o quadro inteiro. Mas eu só queria essa parte aqui do grupo de cartas que tem cartas empilhadas horizontalmente. Agora vamos tentar o mesmo de antes. Basta selecionar esse grupo, acessar o protótipo e alterá-lo para rolagem horizontal. Se eu pressionar agora a pré-visualização, isso novamente não vai funcionar e só vai me dar esse comportamento nervoso. Então, vamos fazer o mesmo que fizemos com a rolagem vertical. Vamos selecionar um grupo. Volte ao Design e veja o que acontece com o conteúdo recortado. Na verdade, posso soltar a moldura principal e então você pode ver o tamanho total do grupo aninhado. Como você pode ver, essa moldura tem o tamanho que inclui todos os cartões e nada pode ser recortado. Então, novamente, vou apenas selecionar essa moldura e redimensionar a moldura. Agora, se eu alternar o conteúdo recortado, você pode ver o conteúdo oculto. Então, agora meu conteúdo é maior do que meu quadro. Vamos apertar o botão play novamente. E você pode ver que agora minha rolagem horizontal está funcionando. Ok, então o último é combinar rolagem horizontal e vertical. Esse é um comportamento típico que você gostaria de ter em um mapa ou algo parecido. Então, se eu descompactar o conteúdo desse mapa, você pode ver que, na verdade, ele é muito maior do que a moldura. Então eu seleciono esse mapa, que é uma moldura aninhada. Vá para o protótipo e selecione rolagem horizontal e vertical. Agora, como o conteúdo já é maior, não preciso fazer mais nada. Basta selecionar o quadro principal e clicar em Reproduzir. Você pode ver que pode mover o mapa. E como estamos aplicando o comportamento deles a esses elementos aninhados, podemos combiná-los. Assim, podemos ter um rolando horizontal e verticalmente. E então podemos adicionar um comportamento completamente diferente ao quadro principal, por exemplo, então vamos adicionar um pouco de rolagem vertical. Agora, como você pode ver, isso ainda está em vigor, mas também posso rolar todo o conteúdo. Então, como você pode ver, aplicar esse comportamento a quadros aninhados realmente desencadeia o poder de misturar diferentes comportamentos na prototipagem. 12. BASICS: 07 telas de ligação: Vincular telas e Figma é realmente muito simples. Então, aqui eu tenho um exemplo simples. Nesta tela inicial. Eu tenho formas de cores diferentes. E quando eu clico em uma dessas formas coloridas, eu queria ir para a página de detalhes de cada cor. Verifique se você está no modo de protótipo e , em seguida, selecione qualquer moldura. Texto, não importa. Depois de passar o mouse sobre ele, você verá aquelas pequenas bolhas aparecendo. Você pode simplesmente escolher qualquer bolha. Não importa qual lado você está selecionando. Agora, arraste um conector e simplesmente conecte-o à estrutura à qual ele queria se conectar e solte-o. E é isso. Figma abrirá automaticamente o painel de detalhes da interação para você e poderá personalizar ainda mais sua interação. Você pode fazer isso imediatamente. Ou, se estiver fechado, basta clicar no conector ou diretamente na interação no painel e ele abrirá novamente. Uma interação é sempre composta por um gatilho, uma ação e um destino. Então, esta é a parte superior deste painel aqui. Onclick é o gatilho para o qual você navega a ação. O destino é nossa moldura chamada Orange. Agora posso alterar a ação do gatilho e a estimativa é simplesmente clicando sobre eles. Assim, eu poderia trocar para acionar de clicar para arrastar, passar o mouse enter e assim por diante. Se quisermos mudar de tela , geralmente será o OnClick. Então, vou deixar assim por enquanto e vamos conhecer os outros mais tarde. Minha ação é navegar até. Figma também me dá a opção de trocar sobreposições, fechá-las e abri-las e assim por diante. Volte, vá até um link aberto e veremos isso em um minuto. Depois, o destino. Eu também poderia escolher qualquer outro quadro desse menu suspenso. No entanto, você notará que, ao lidar com mais quadros, isso é um pouco entediante. Portanto, prefiro simplesmente selecionar meu conector e escolher outro quadro simplesmente movendo-o. Abaixo está a parte da animação. Então é assim que nossas coisas animadas acabam se comportando quando a interação acontece. Essa é a parte chique, a parte que funciona configura todo esse comportamento mágico. Coisas se transformando umas nas outras e assim por diante. Agora vamos dar uma olhada mais detalhada, especialmente no Smart Animate. No entanto, apenas uma palavra de cautela, as microinterações são realmente úteis. No entanto, recomendo que você primeiro verifique se sua conexão real e sua usabilidade estão funcionando e que tudo faz sentido. Mais tarde, com sua equipe de desenvolvimento, você pode pensar nas animações e interações que gostaria de adicionar. Porque o que às vezes é apenas um clique e Figma, na verdade é muito difícil de configurar e usar CSS. Então, só para que fique um pouco mais suave, vou buscar a alma. Ele pode definir o tempo necessário para se dissolver em outra tela. E também poderíamos escolher um dos comportamentos predefinidos. Vou deixar tudo à vontade por enquanto, que é muito bom. Vamos dar uma olhada em como isso ficaria em nossa prévia. Vou selecionar a moldura principal e adicionar uma maquete ao redor dela. Estou trabalhando em um iPhone tamanho 14. Ok, então vamos clicar em Play. Aqui eu vejo minha tela inicial e, se eu clicar agora na minha forma laranja, posso ver que ela navega até a subpágina. No entanto, se eu estiver clicando em uma sacola , nada está acontecendo. Então, vamos configurar as outras interações também. Então, vamos voltar ao nosso arquivo Figma. E aqui, primeiro de tudo, vou conectar as outras formas de dentes. Então, vou simplesmente arrastar um conector. E você pode ver que Figma salvou as predefinições que acabei de usar para a laranja. Então, isso geralmente é muito bom e útil. Agora, o que eu também quero fazer clicar em Voltar, quero voltar para a tela inicial. Então, é o mesmo na guia, navegue até a página inicial. E eu posso deixar isso com o mesmo comportamento. Então eu vou fazer isso para os outros dois. A propósito, se você está se perguntando por que ainda diz tab and click, isso é simplesmente porque eu mudei o dispositivo para iPhone. A ação ainda funciona da mesma forma. Então, vamos dar uma olhada no nosso protótipo. E isso está funcionando perfeitamente. 13. BASICS: 08 A ação de volta: Vamos falar sobre a ação traseira, porque isso pode realmente ajudá-lo a simplificar consideravelmente nossos protótipos. Então, aqui eu tenho um exemplo em que eu clico em uma das formas e depois vou para a página de detalhes. Se eu quiser voltar, tenho um botão Voltar na parte superior. E isso, novamente, leva de volta à página principal. Agora isso funciona muito bem e você pode absolutamente usá-lo assim. Mas existe uma maneira de se livrar de todas essas conexões extras. Vamos selecionar nosso botão Voltar aqui e abrir nosso menu interativo. Aqui eu posso dizer onclick. E, a propósito, se você definir seu protótipo aqui , isso mudará. Dois em cima. Deixe-me mostrar que é exatamente o mesmo. É só que se você definir um protótipo mudará o texto. Então, OnClick ou On Tab, em vez de navegar basta escolher novamente no menu Ação. Agora, isso vai voltar para o quadro anteriormente aberto. Então, vamos dar uma olhada nisso em nosso modo de apresentação. E eu posso ver que, se eu clicar aqui, chego à página de detalhes, clico em voltar e simplesmente volto aqui. Então, o mesmo que se eu tivesse uma conexão direta. Agora, uma pequena dica, agora posso selecionar todos eles e alterá-los manualmente para voltar. Ou eu posso simplesmente excluir as conexões e então ter essa aqui que eu configurei, copiá-la e simplesmente colar o comportamento em qualquer outro elemento. Isso funciona porque estou no modo de prototipagem. Se eu estivesse no modo de design, simplesmente copiaria o elemento inteiro. Agora, voltar é fantástico, mas não confunda com um botão home. Porque à medida que seu design se torna mais complexo, há lugares diferentes e navegue até a mesma tela. Portanto, voltar realmente existe para sempre voltar para a última tela visitada. E essa não é necessariamente sua tela inicial. 14. BASICS: 09 Scrollto: Então, até agora, estamos vinculando apenas quadros externos a quadros externos, mas também podemos vincular a um elemento dentro do mesmo quadro. Então, no meu exemplo, vamos apenas descompactar o conteúdo. Você pode ver que eu tenho aqui embaixo um quadrado preto. Então, o que eu quero é que, se eu clicar nesse círculo preto, ele desça até o quadrado preto. Então, vamos pular para o modo de protótipo. E então eu vou simplesmente conectar meu círculo, não com uma tela externa, mas com o quadrado na mesma moldura no painel de interação. Você pode ver isso ao clicar. E, novamente, isso é o mesmo que na guia. Se você tiver um conjunto de protótipos, role também. Então, isso é simplesmente uma ação aqui. E então vá até mim. Eu simplesmente nomeei um pergaminho quadrado para mim. Agora, aqui você tem compensações que também podem ser definidas e veremos por que precisamos delas em um segundo. E, assim como com qualquer outro, você pode escolher instantâneo ou animado. Eu vou escolher a animação porque isso vai dar esses pequenos limites que, você sabe, vai deixar tudo à vontade por enquanto. Vamos dar uma olhada em nosso modo de pré-visualização. Então, se eu clicar no círculo, ele desce até o meu quadrado preto. Então, o lugar onde você vai ver que há muitas coisas, é uma página ou site em que você tem uma navegação que não leva a páginas separadas, mas a duas seções dentro da página. Então, vamos descompactar o conteúdo aqui. E você pode ver que está um pouco abaixo. E ele terá minha seção Sobre e minha nova seção. Então, o que eu quero fazer agora é pegar a descrição do menu, ir para a prototipagem e, em seguida, conectar esse menu de navegação à seção. E vou fazer o mesmo com as notícias. Então, vamos dar uma olhada em nosso modo de pré-visualização para ver se isso vai funcionar. Então eu clico em Sobre Annette rolando para baixo, e se eu clicar em novos conjuntos, também funciona. Mas há duas coisas que eu não gostei nisso. Em primeiro lugar, eu tenho um menu fixo, então isso está cobrindo minha seção Sobre. Além disso, se eu clicar no blog, preciso subir porque não quero voltar para cima. Eu quero o mesmo comportamento. Então, voltando ao meu design, primeiro quero conectar o blog. Estou conectando o blog ao meu grupo de cartões aqui. Agora eu quero corrigir essas compensações. Sei que vou adicionar um pouco de compensação aqui, mas ainda não sei os valores. Então, por volta disso, meu problema era a altura do menu. Então, vamos verificar isso. E a altura aqui é 90. Então, vamos para o menu. Vamos voltar ao modo de prototipagem. E vou adicionar uma compensação de -90. E eu preciso adicionar -90. 90 porque, caso contrário, o empurraria ainda mais para baixo. Eu queria subir. É por isso que estou adicionando um valor negativo. E vou fazer o mesmo com as notícias. E, a propósito, você também pode segurar Shift e Command e selecionar vários. Então, eu também poderia simplesmente adicionar o mesmo valor uma vez aqui e depois ter isso para ambos. Agora, com um blog, eu não quero 90 porque basicamente queria voltar ao topo. Então, o que eu vou fazer é ampliar um pouco aqui. E eu vou medir quanto é esse valor. Então, isso é do topo minha seção, começando em 220. Então, neste caso, vou adicionar um deslocamento de -220. Vamos ver se isso funciona. Então, vamos clicar em Blog. E sim, estamos subindo até o fim. Então, está rolando bem para baixo e as notícias também estão funcionando. 15. BASICS: 10 sobreposição: Vamos dar uma olhada nas sobreposições e no Figma. Então, um exemplo perfeito de sobreposição é um menu. Então, é basicamente sua própria moldura. Mas se clicarmos, por exemplo , no trabalho, não queremos que o quadro inteiro mude esse menu, mas queremos que o menu apareça abaixo de nossa navegação aqui. Nós praticamente os configuramos como qualquer outra conexão. Então, vamos selecionar Trabalhar. Link para o menu. E agora, ao clicar, em vez de navegar até, escolhemos Abrir sobreposição, menu de sobreposição. Agora posso escolher a posição. Portanto, centro, superior, esquerdo, inferior e assim por diante em relação à moldura principal. Ou também posso escolher o manual, que é o que eu precisaria aqui. Agora posso ver essa pequena prévia da minha sobreposição e posso posicioná-la na moldura conforme necessário. Posso escolher que ele feche automaticamente quando alguém clica do lado de fora. Então, qualquer área por aqui. E eu poderia adicionar um plano de fundo para o menu que realmente não faz muito sentido. Então eu deixo. E, como sempre, posso escolher minha animação. Então, vou fazer com que isso também se dissolva como de costume. Vamos dar uma olhada em como isso vai parecer . Vamos clicar em Play. E eu posso ver que, se eu clicar em trabalhar, meu menu aparece. Se eu clicar novamente no trabalho ou em qualquer outro lugar na tela, ele desaparecerá novamente. Então, agora eu posso simplesmente conectar qualquer um desses submenus aqui a uma nova tela. Vamos dar uma olhada em outro exemplo. Ao clicar no botão de inscrição, quero abrir uma sobreposição que permite que os visitantes assinem o boletim informativo. Ok, vamos selecionar o botão de inscrição e vinculá-lo à sobreposição e, em seguida, clicar em abrir sobreposição. Quero mantê-lo centralizado e fechá-lo ao clicar fora, porque na verdade não tenho o ícone de fechar aqui. Eu deveria usar isso para uma boa usabilidade, mas vamos clicar do lado de fora para este exercício. Eu também quero adicionar um plano de fundo. Na verdade, vou ter um pouco mais escuro, então com 50 por cento. Ok, vamos dar uma olhada. Então aqui está minha tela. Eu clico em Inscrever-se e a sobreposição é aberta. Se eu clicar em qualquer outro lugar, vai fechar novamente. Agora, tenho mais algumas etapas à medida que meus visitantes adicionam seus endereços de e-mail. Assim que alguém clicar aqui, direi que, assim que alguém clicar no campo de endereço, vou fingir que está preenchido. Então, vou trocar a sobreposição por essa sobreposição para. Então, assim que eles clicarem no botão Enviar aqui, novamente, vou trocar a sobreposição e só quero que ela vá para esta tela confirmada aqui. Isso apenas confirma que tudo foi enviado, mas não quero que o visitante precise fazer outra ação. Então, o que eu vou fazer aqui é conectar isso, por enquanto, de volta a aqui e dizer depois de um atraso. Portanto, nenhuma ação é necessária após o atraso de, digamos que eu vou colocar apenas 2 s. Ele vai voltar enquanto eu, na verdade vou configurar isso para fechar essa sobreposição. Ok, vamos dar uma olhada se isso funciona. Então clique em assinar. Então eu adiciono meu e-mail, vá. E depois de 2 s, a sobreposição desapareceu. Só tem uma coisa que eu não gosto se eu clicar aqui, se eu trocar a sobreposição, você pode ver esses pequenos flashes. E isso é porque aqui estou usando isso e há um atraso de 300 milissegundos. Vou trocar isso por instantâneo. E agora vamos voltar e dar uma olhada. E isso deve resolver o problema. Sobreposição perfeita feita. 16. BASICS: 11 vinculação a páginas externas: Com a prototipagem de figma, você só pode criar links para outras páginas em seu design, mas também para páginas externas. Então, digamos que na minha navegação, tudo está vinculado ao meu design, exceto o blog aqui. Quero vincular isso a um bloco externo existente. Então, uma maneira de fazer isso é simplesmente selecionar isso. Se for um elemento de texto, clique no link aqui e cole o URL. Se eu der uma olhada nisso no modo de apresentação, você pode ver que agora é um link. E se eu clicar nele, ele abre o site real. Se você quiser ter outro estilo de link , isso não é problema. Basta selecionar o texto e, em seguida, o menu de texto VOCÊ, você pode alterá-lo de acordo com suas necessidades. Agora, isso funciona muito bem para texto. Mas o fato é que, se eu, por exemplo , tiver outro elemento, digamos que eu tenha esse cartão que eu quero vincular a um artigo de blog, então eu não tenho a opção de vinculá-lo porque não é um texto. O que eu poderia fazer é usar meu menu de prototipagem. Então, com essa carta selecionada, vamos pular para a aba de prototipagem. Agora, aqui vou clicar em mais ao lado da interação. Então, isso está abrindo uma nova interação. Se eu clicar nele novamente, ele abrirá a janela de interação deles. Agora, vou deixar isso na Qlik por enquanto. Mas você já pode ver que isso também me dá a vantagem poder abrir um link externo com qualquer outra ação, como pressionar uma tecla específica no teclado, inserir o mouse e assim por diante. Então, para obter orientação, vou adicionar um link aberto na parte inferior do meu menu. E agora, aqui eu posso simplesmente copiar o link que eu queria abrir. No modo de apresentação. Se eu clicar neste cartão, agora serei redirecionado para a página externa. E, a propósito, isso também funciona ao contrário. Você também pode copiar o link de compartilhamento de prototipagem. Você pode fazer isso por meio do menu ou simplesmente pressionar Command L e, em seguida, vincular de qualquer página externa ao seu protótipo. Essa também é uma ótima maneira de vincular protótipos que estão em arquivos ou páginas diferentes. 17. BASICS: 12 gatilhos de ação: Vamos examinar mais de perto os diferentes gatilhos para animação. Então, aqui temos nossa configuração padrão que também usamos até agora. E funciona perfeitamente se quisermos apenas configurar um protótipo clicável. Então, aqui usamos o onclick e navegamos para um novo destino, que seria nossa tela de detalhes. Agora, com esse pequeno menu suspenso aqui, podemos ver outras opções. Então, arrastar é algo que, nesse caso, não faria muito sentido. Então, arrastar é algo que você encontra muito nas telas dos celulares. Então, aqui, por exemplo, temos essa alternância entre artigos e vídeos. E, portanto, estou usando para arrastar. Então, se eu arrastar até aqui, eu vou ver a tela. E isso geralmente é combinado com uma animação push, algo sobre o qual aprenderemos mais tarde. Então, inação, será algo assim. Eu arrastava para um lado, pegava os vídeos e arrastava até aqui para pegar os artigos. Então, temos muitas interações, como mouse e o mouse: deixar o mouse para baixo, o mouse para cima e também pressionar faria parte disso. Na verdade, essas são todas as suas diferentes interações com o mouse. Digamos que o mouse entre e navegue até a nova tela. Isso também funcionaria aqui. Então, ao entrar, pulei para a nova tela, mas não faria muito sentido. Então, um lugar onde você usaria isso e teremos um capítulo inteiro sobre isso são os componentes interativos. Então, aqui estão os componentes definidos com duas variantes, um botão e, em seguida, eu digo enquanto passo o mouse ou digamos que o mouse enter. E, na verdade, é usado ao passar o mouse. Estou usando o Smart Animate aqui, que também é algo que abordaremos mais tarde. E você verá que ele não navega, mas também muda porque está dentro desse conjunto de componentes. Agora eu posso retirar uma instância. Vamos desenhar uma moldura ao redor dela para que possamos vê-la melhor. E agora, quando clicamos em Jogar, podemos ver que aqui está meu botão e, quando eu passo o mouse sobre ele de forma estranha, ele tem um pequeno efeito de passar o mouse. Um gatilho que é usado muito pouco foi realmente muito impressionante, é o gatilho do teclado. Então, para mostrar um exemplo, aqui eu tenho uma barra de pesquisa e o onclick que será preenchida. Isso também é algo que normalmente resolveríamos com componentes interativos, mas vamos ficar com uma versão simplificada por enquanto. Agora estou selecionando esse campo no formulário agora, agora, ao pressionar Enter, quero que isso vá para o resultado. Então, o que posso dizer é que, em vez de onClick, eu digo tecla ou gamepad. E agora, basta selecionar esse campo aqui e pressionar qualquer tecla do teclado e ela será salva. Então, no meu caso Enter, eu também poderia ter pressionado um, por exemplo , então ele navegará aqui e você também poderá escolher a animação. Então, vamos fazer uma animação de dissolução. Então, vamos ver isso em ação. Aqui. Eu clico em Pesquisar. Agora eu o tenho preenchido. E agora, quando eu pressiono Enter no meu teclado, o que você não vê, ele está me dando os resultados do teste. O último que eu quero te mostrar é depois de um atraso. E talvez você nem sempre tenha isso para todas as situações. Mas se sim, então você o encontra aqui depois de um atraso. E isso basicamente simplesmente se move de uma tela para outra após um atraso. E isso se torna muito poderoso quando mais tarde, aprenderemos sobre animação inteligente. Então, vamos dar uma olhada aqui. Podemos definir a velocidade. Vamos definir isso para 2 s para que possamos realmente ver nosso atraso. E vamos pressionar Play. Você pode ver que ele demora e depois muda a tela. E isso também é muito bom porque você pode conectá-lo para ter ações diferentes. Ou você também pode configurar algo como um problema de boletim informativo que surgiria após um certo período de tempo. 18. BASICS: 13 opções de animação com figma: Vamos ver as diferentes animações que temos disponíveis no Figma. Vamos começar com a primeira , que é instantânea, e essa é, na verdade, sua animação padrão. Na verdade, eu não uso muito esse, mas um bom exemplo em que eu o uso é uma dica de ferramenta. Então, aqui eu tenho um ícone de informação se eu passar o mouse sobre ele. Então, vamos dizer o que está pairando. Quero abrir uma sobreposição e vou abri-la instantaneamente. E deixe-me posicionar minha sobreposição aqui. E agora vamos dar uma olhada. Então, enquanto eu passava o mouse sobre isso, ele aparecia instantaneamente. E eu gostei que isso fosse inocente e não demorasse porque pense na rapidez com que as pessoas movem o mouse. Então, você realmente quer que eles percebam que há algo mais para explorar. Outro que eu provavelmente mais uso é o segundo. Então isso está aqui na minha lista. Dissolva, o sal desaparecerá lentamente na nova moldura. Você também notará que tem mais opções. Você pode escolher a forma como ele facilita a entrada e a saída, e também o tempo que levará. Então, se eu definir esse aqui, então isso é milissegundos, vamos configurá-lo para 5.000, então seria muito lento. E vamos dar uma olhada nisso. Então, vamos clicar nele e você poderá ver essa transição muito lenta acontecendo na nova página. Agora, quando você começa a adicionar animações para mudar de página, é muito tentador adicionar um número alto aqui e fazer com que pareça um pouco mais mágico. Mas, especialmente ao navegar entre páginas diferentes, recomendo que você a deixe em algum lugar próximo a essa configuração padrão de 300. Porque pense em como as pessoas navegam em sua página. Eles querem rapidamente pular para seções diferentes. Portanto, será um verdadeiro obstáculo sempre esperar por uma transição lenta. Vamos dar uma olhada no que mais temos aqui. A próxima é a animação inteligente, e essa é uma grande magia. O Smart Animate procura camadas correspondentes entre sua moldura original e o destino final. E reconhece a mudança e, em seguida, aplica uma animação perfeita. Por ser tão poderoso e muito importante quando se trata de animação e Figma, tenho um capítulo totalmente separado sobre animação inteligente. Mas só para dar uma pequena prévia, vamos pegar esse quadro e duplicá-lo porque precisamos de quadros realmente idênticos. E então o que eu vou fazer aqui, isso é configurar um layout automático. Vou apenas empilhar essas imagens aqui. Então, vou selecionar todo esse grupo conectado com um quadro. E se eu clicar nele, quero navegar até o outro quadro com o smart animate. E eu disse isso um pouco, contratei 800, para que possamos ver isso corretamente. Então, vamos pressionar Play. E eu posso ver aqui minha pilha de imagens. Se eu clicar neles, haverá uma boa transição. Você pode animar de forma inteligente entre diferentes cores, tamanhos e posições diferentes , e isso é muito, muito poderoso. Vamos dar uma olhada em nossa última transição, e essas são as transições móveis e você as encontrará aqui embaixo. Temos que entrar, sair, empurrar, deslizar para dentro e para fora. Observe como, com essas transições em movimento, você tem essas pequenas setas no lado direito e pode escolher para que lado deseja que elas se movam. Então, de cima para baixo, para a esquerda ou para a direita, entre e saia. Basicamente, é uma moldura deslizante para dentro e para fora da vista. Então, isso é muito bom para criar hierarquia. Empurrar é muito semelhante a entrar e sair, mas empurra a estrutura no mesmo nível. Deslizar para dentro e para fora é muito semelhante novamente, no entanto, ele deslocará levemente as molduras à medida que se dissolvem, enquanto o movimento as mantém estacionárias. O melhor é brincar com eles. 19. BASICS: 15 seções e design estadual: As seções no Figma são uma ótima maneira de organizar melhor nosso design e criar um design elegante. Vamos dar uma olhada no que isso significa. Então, no meu exemplo aqui, eu tenho uma tela inicial. E nessa tela inicial, posso pressionar um botão de inscrição que me leva a uma sobreposição com o processo de registro. Assim, posso escolher qual plano eu quero ter, adicionar meus dados pessoais, escolher um método de pagamento. E então, no final , tudo está confirmado. Vamos dar uma olhada no protótipo real. Então aqui está a casa. Eu clico em Inscrever-se. Eu posso então escolher qualquer plano. Eu adiciono meus detalhes. Eu me inscrevo, escolho um pagamento e ele está confirmado. Agora parece que está tudo bem. Mas digamos que eu esteja iniciando o processo. E então, dentro do processo, em algum momento eu estou fechando minha sobreposição. Agora, depois de algum tempo, quero voltar e terminar meu registro. No entanto, se eu clicar aqui, sempre serei redirecionado para a primeira tela. Agora eu não quero isso, quero voltar para essa tela à nossa esquerda e guardar todas as informações que eu já adicionei. Isso é chamado de design imponente. No entanto, se dermos uma olhada em nosso arquivo , não há como Figma se lembrar de onde eu saí. No entanto, existe uma maneira de contornar isso, e é aí que entram as seções. Você encontra seções aqui no menu de molduras. Ou você pode simplesmente usar o atalho Shift S. Assim como um quadro. Você pode desenhar uma seção em torno de um grupo de quadros. Agora podemos nomear esta seção, vamos chamá-la de registro. E se você pular para a guia de design, também poderá alterar a cor da seção. Como você verá aqui, você obtém alguns recursos básicos, mas não há restrições de layout automático e outros recursos que você veria com molduras. Portanto, as seções realmente existem apenas para organizar. As seções também são ignoradas pelo modo de apresentação. Então, se eu escolher uma seção e pressionar Play, ela sempre me mostrará a primeira tela dessa seção. Ok, ótimo. Agora só precisamos fazer alguns ajustes. Então, vamos voltar à prototipagem. E o que eu quero fazer é não querer que essa inscrição aqui se conecte à primeira tela, mas eu queria me conectar a toda a seção. Então, estou configurando um novo conector e estou dizendo na guia, navegue até, e estou saindo disso e navegue até a seção. Eu preciso usar. Navegar até a sobreposição aberta com uma seção não funcionará , embora dentro da seção eu possa continuar usando sobreposições. E agora uma última coisa que preciso fazer, o que é um pouco confuso, é selecionar todos os botões da minha roupa aqui. E eu vou mudá-los de uma sobreposição próxima para outra. Isso vai me permitir voltar à minha tela original. Você também pode simplesmente conectá-los diretamente a uma tela sem problemas. Então, vamos dar uma olhada no protótipo. Então aqui temos nossa casa, nos inscrevemos, escolhemos qualquer plano, preenchemos nossos dados. E então aqui, no pagamento, fechamos. E depois de um tempo, voltamos. E você pode ver que ele lembra exatamente o fiquei de onde paramos e podemos continuar a partir daqui. Agora que estamos trabalhando em nosso aplicativo e estamos adicionando mais áreas. Talvez tenhamos mais botões de inscrição de outros lugares, mas isso não é problema. Podemos simplesmente conectá-los à mesma seção. Agora, a única coisa que precisamos mudar é que, depois de concluirmos um processo, talvez não queiramos voltar para casa, mas também podemos querer configurá-lo novamente e, portanto, voltar para qualquer quadro de onde viemos. Vamos dar uma olhada se isso está funcionando. Então, aqui estou iniciando o processo de inscrição em casa. Eu já adicionei alguns detalhes, mas estou fechando minha sobreposição. Eu navego mais adiante no meu aplicativo. E então, de algum outro lugar, eu vou voltar e você pode ver que ele lembra onde eu saí e eu posso simplesmente terminar daqui. 20. BASICS: 14 animações de facilitação e primavera: Vamos dar uma olhada nas diferentes animações de flexibilização e primavera. atenuação determina a aceleração de uma transição entre dois quadros-chave. Isso pode ser a transição de uma tela para outra ou uma transição entre objetos únicos. Por exemplo, alterando a cor ou o tamanho ao clicar. Você verá que as transições geralmente são representadas por gráficos em que o tempo é o eixo x e a transição, como avançar ou deslizar ou qualquer coisa que você esteja usando é o eixo y. Linear é a aceleração padrão e é apenas uma linha reta em seu gráfico. Então, isso significa que ele simplesmente se moverá em uma velocidade constante. O Figma tem muitas predefinições embutidas que você pode usar. Se passarmos de linear para Ease In, por exemplo você pode ver que agora a animação começa lentamente e depois acelera até o final. Então, aqui eu tenho uma visão geral de todas as animações embutidas e do Figma. Então, essas são basicamente apenas instâncias e você pode ver que eu configurei todas elas aqui embaixo. Vamos dar uma olhada aqui neste exemplo de entrada e saída. Então eu coloquei um gatilho para After Delay. E então, ele animará de forma inteligente e usará a animação fácil de entrar e sair. E eu acabei de dizer 1 s para que possamos ver isso um pouco melhor. E uma vez feito isso, o mesmo está acontecendo de trás para frente novamente. Ok, vamos voltar à nossa visão geral que encontramos aqui. E eu vou simplesmente selecionar esse quadro e pressionar Play. Agora, vamos nos certificar de que definimos isso para caber na largura para que possamos ver todos eles. E eu posso ver todas as diferentes animações uma ao lado da outra. Não há uma animação tão certa quanto errada. É realmente sobre o que você está tentando construir. O que você vê aqui embaixo? Gentil, rápido, saltitante e lento. Na verdade, as chamadas animações de primavera. A diferença entre a flexibilização e a animação de primavera fica um pouco mais clara quando examinamos as opções personalizadas e o Figma. Aqui você pode ver que, na última transição de flexibilização, nos acostumamos mais ocupados. E se escolhermos isso, você pode ver que aqui você obtém a curva que agora pode ajustar às suas necessidades. Mas na verdade, sempre será essa curva. Agora, mais abaixo em meus exemplos, tenho a animação da primavera, depois tenho que personalizar as molas. Então, vamos dar uma olhada nisso. Assim como a rigidez, que é o número de saltos aos quais a animação pode ser ajustada. Posso ajustar o amortecimento que influencia o nível de mola na animação. E eu posso influenciar a massa. Isso influenciará a velocidade da animação e a altura dos limites. Então, podemos realmente fazer essa curva e adicionar muitos limites e muito movimento aqui. Vamos dar uma olhada em como isso aparece em nosso modo de pré-visualização. Então você pode ver que você tem um belo salto no final. A melhor maneira de dominá-los é, como sempre, prepare-se e explore. 21. BASICS: 16 fluxos em Figma: Você pode criar vários fluxos no Figma para se concentrar em diferentes segmentos do seu protótipo. É muito fácil. Deixe-me te mostrar. Se você tiver alguma configuração de design com conexões , encontrará pelo menos um fluxo lá. O Figma configura automaticamente seu primeiro fluxo. Assim que você desenhar seu primeiro conector. Você pode simplesmente selecionar esse fluxo e anexá-lo a qualquer outro quadro de sua preferência. Observe que ele não anexa duas seções, mas apenas duas molduras. Você pode clicar duas vezes no fluxo para renomeá-lo. Você também pode selecionar qualquer outro quadro e, em seguida, simplesmente em um painel de prototipagem na parte superior, clicar em mais e adicionar outro fluxo. Vamos chamar isso de lar. Se você clicar em qualquer lugar tela enquanto estiver no modo de prototipagem, poderá ver uma visão geral de seus fluxos aqui embaixo. Então, agora temos o registro e a casa, e anote esse pedido. Então, vamos pressionar Play e ver o que isso faz com nossa prototipagem. Agora, no lado esquerdo, você tem um pequeno menu que pode mostrar ou ocultar. Aqui, o primeiro fluxo é o registro. Então, ele vai me mostrar a tela primeiro. Se eu clicar em Início , estarei acessando a tela inicial. Eu ainda posso acessar meu protótipo da mesma forma que eu fazia antes. Mas isso capacita nossos usuários. Então, se você estiver fazendo testes com usuários para pular para diferentes regiões do seu protótipo. Sabe como também podemos adicionar descrições. Isso é muito útil para testes. Está um pouco escondido. Então, de volta ao nosso arquivo de design, selecione qualquer fluxo e, em seguida, você obtém este pequeno ícone de descrição editado no lado direito. Se você clicar nele, poderá adicionar texto. Então, agora vamos voltar à prototipagem e você pode ver que nosso comum estava aumentando esse fluxo específico. De volta ao nosso arquivo. Se você clicar na tela, também poderá reordenar todos os seus fluxos. Então, poderíamos voltar para casa, por exemplo , primeiro, se você clicar no pequeno quadro de seleção , ele saltará. Mostre esse fluxo para você. Isso é muito útil se você tiver muito fluxo configurado. Outra coisa é que você pode compartilhar um link direto para o seu fluxo. Portanto, se você quiser que alguém abra diretamente, por exemplo , no processo de registro basta copiar o fluxo diretamente daqui. Além disso, se você clicar em reproduzir em uma apresentação , ela saltará diretamente para esse fluxo específico. Os fluxos são uma ótima maneira de adicionar um pouco de estrutura ao seu protótipo. Se você estiver compartilhando diretamente a prototipagem , isso ajuda os visitantes a entender as diferentes seções do seu design e também com comentários Você pode orientá-los por meio de testes gerais. 22. BASICS: 17 Adicionando vídeos a protótipos: No Figma, você pode incorporar vídeos. Esteja ciente de que isso só funciona em um plano pago. Portanto, no InDesign, basta escolher qualquer preenchimento e, no menu Preenchimento, selecionar no vídeo suspenso. Você verá uma imagem prévia do vídeo e a pequena miniatura do vídeo no painel de camadas. Para que isso funcione, seu vídeo deve estar no formato MP4. A propósito, os presentes também funcionam e não devem exceder 30 MB. Como vídeos ou simplesmente preenchimentos em camadas, você também pode alterá-los da mesma forma que faria com qualquer outro preenchimento de camada. Você pode alterar o tamanho, adicionar outros elementos na parte superior. Você pode usar o recorte de máscara e assim por diante. Para ver o vídeo sendo reproduzido, você precisa entrar no modo de apresentação. Para alterar as configurações do local, selecione o vídeo e vá para o painel de prototipagem. E aqui no vídeo, você pode escolher se ele é reproduzido automaticamente ou não, se deve repetir e escolher onde o som deve ser reproduzido ou não. Para evitar alguma frustração, esteja ciente de que atualmente os vídeos não são suportados no aplicativo móvel Figma. 23. BASICS: 18 pré-visualização no seu celular: Figma tem um aplicativo fantástico que permite que você visualize seus protótipos no seu celular. Acesse o site da Figma e nos produtos, você encontra a guia downloads. Nos downloads, você pode baixar a versão iOS ou Android do aplicativo para o seu telefone. Depois de abrir o aplicativo móvel, você será solicitado a fazer login. Para o login, basta usar seu login padrão do Figma. Na verdade, é importante que você use exatamente o mesmo login que usa para seus arquivos de trabalho. Caso contrário, o espelho não funcionará. Em seguida, você verá uma visão geral dos arquivos em sua conta. No entanto, dê uma olhada no canto inferior direito e clique no espelho. Depois de clicar em Iniciar espelho, isso espelhará qualquer moldura que você selecionar neste momento em seu aplicativo de desktop. Todas as configurações do protótipo serão automaticamente visíveis aqui. Adoro ter isso aberto enquanto trabalho em meus designs móveis. Isso me permite ver e testar meu design de uma forma mais realista ao projetar. Apenas certifique-se de verificar se o tamanho da moldura em que você está desenhando é realmente o tamanho correto para o celular que você está usando. Então, no meu caso, eu tenho um iPhone 14 físico, portanto, minha tela também está configurada para aqueles que mencionei. O aplicativo ampliará e diminuirá seu design, para que pareça real mesmo se você estiver usando outro tamanho. No entanto, isso pode realmente causar erros quando, por exemplo, se trata de testar tamanhos de alvos sensíveis ao toque. Você também pode compartilhar seus protótipos móveis e, por meio do link, certifique-se de copiar o link da visualização da apresentação. Em seguida, ele será aberto automaticamente no aplicativo móvel Figma, se instalado em um telefone. Novamente, certifique-se de que, aqui, o tamanho do seu protótipo corresponda ao tamanho físico do telefone que está sendo usado. Você não precisa se preocupar com a resolução nesse caso, porque o link remonta à Figma, que cuida disso. 24. ANIMADO INTELIGENTE: 01 Entenda animato inteligente: Vamos dar uma olhada na parte mágica da prototipagem com Figma, que é sem dúvida uma animação inteligente. Então, o que o Smart Animate faz é pegar camadas correspondentes entre diferentes quadros e depois reconhecer as diferenças e animações entre elas. Então, vamos brincar um pouco com isso. Então, aqui eu tenho dois quadros e vou simplesmente conectá-los configurando animação inteligente para 2.000 milissegundos a segundos para que possamos realmente ver a animação. E estou retribuindo o favor para que possamos clicar entre eles. Então, a primeira coisa que vou fazer é mostrar como podemos mudar a posição. Estou simplesmente movendo minhas formas. Agora, vamos clicar no modo de apresentação. E você pode ver que eles se animarão muito bem para sua nova posição. Ok, vamos dar uma olhada no que mais podemos fazer. A outra coisa que podemos fazer é mudar o tamanho. Então, vou arrastar isso um pouco mais para baixo. E eu também vou fazer algumas mudanças aqui. Vou apenas ampliar esse triângulo e apertá-lo um pouco. E agora vou deixar assim. E agora vamos dar uma olhada. Vou clicar no meu quadrado e você verá que eles não estão apenas mudando de posição, mas também se adaptando e de tamanho. Agora, obviamente, o que também queremos mudar é a cor. E podemos simplesmente alterar o preenchimento em qualquer lugar entre nossos diferentes quadros aqui. E fará uma animação inteligente entre a nova cor. Então, vamos clicar aqui. E você pode ver o software de cores mudando de uma cor para outra. Também podemos adaptar rotação e esse é um efeito muito bom. Você pode usar. Apenas certifique-se de não abusar desse efeito. Deixe-me ajustar isso um pouco e vamos dar uma olhada. Então você tem uma reviravolta muito boa. Uma última pequena coisa que é realmente útil é que, se você quiser algo pareça que aparece do nada e o defina como zero, você precisa dele na primeira tela. Caso contrário, não vai funcionar. Mas se você definir como zero , parece que está aparecendo do nada. Então, em Figma, animações sofisticadas como essa, na verdade, são muito simples de realizar. E isso está em Figma, não como CSS. Então, tudo o que realmente precisamos para isso é, por exemplo , para esse menu distorcido que aqui temos um menu com duas linhas. E então nossa cruz é feita exatamente das mesmas linhas. Simplesmente deu meia volta e fiz um pouco mais de comprimento em uma extremidade. Então, nosso plano de fundo que aparece é simplesmente um plano de fundo oculto. Deixe-me mudar a opacidade aqui. E você pode ver que isso é simplesmente um quadrado que está crescendo em um fundo maior. E eu fiz isso invisível e, portanto, parece que está surgindo do nada. Em seguida, nossos links que parecem deslizar pela esquerda. Se eu soltar, você poderá ver que eles estão na moldura, mas foram movidos para fora da área visível. E com a animação é simplesmente movido volta para o quadro para essa posição. Então, tudo o que precisamos fazer agora é pular para a prototipagem e conectar esse menu aqui com nossa nova tela. E vamos deixar isso ligado, clique em Smart Animate. E eu tenho 1 s aqui. E então, se eu clicar no menu novamente, ele voltará para a moldura original. E isso é tudo que eu preciso para configurar essa animação chique. 25. ANIMADO INTELIGENTE: 02 animações inteligentes e animações em movimento: Também podemos combinar animação inteligente com transições em movimento. No meu exemplo aqui, você vê duas telas, uma contendo todos os artigos e a outra contendo todos os vídeos na parte superior como filtro. Agora, o que eu quero que aconteça é que, se alguém deslizar para a esquerda do que para os vídeos ou este lugar, e se estiver deslizando para a direita, voltaremos aos artigos. Então, vou selecionar a página do artigo e, em seguida, arrastar um conector. E eu vou dizer sobre travesti. E eu quero que isso seja introduzido. Eu poderia usar o movimento e, na verdade, mas vou usar empurrado neste caso e agora tenho que considerar que estou empurrando para a esquerda. Então, eu quero que isso se mova para a esquerda. Agora, a partir daqui, vou fazer o mesmo e vou conectar isso e vou dizer arrastado. E agora eu quero empurrar para a direita e depois mostrar os artigos novamente. Então, vamos dar uma olhada em nosso modo de apresentação, como seria. Então, estou arrastando para a esquerda e tenho meus vídeos. E se eu arrastar meus artigos para trás, isso ficará muito bom. Mas o que eu não gosto é da parte superior, aqui meus filtros também estão trocando. Na verdade, quero que eles permaneçam no lugar e simplesmente ativem o filtro correspondente. Se eu voltar ao meu design aqui e selecionar minha conexão, você verá que, assim que eu escolher uma seleção móvel, você verá que recebo essa pequena caixa de seleção aqui chamada camadas correspondentes do Smart Animate. E eu vou ativar isso. E preciso fazer o mesmo com a conexão voltando aos meus artigos. Então, vamos dar uma olhada no que acontece agora. Se eu deslizar agora, você verá que meu menu é inteligente, animando o resto do meu design ainda está usando a animação em movimento. Para que isso funcione, certifique-se de verificar duas coisas. Em primeiro lugar, os elementos que você deseja para uma animação inteligente, por exemplo, no meu caso, dois filtros são configurados exatamente da mesma forma. Então, eles usam a mesma hierarquia e usam exatamente o mesmo nome. A parte que eu não quero usar Smart Animate tem um nome diferente. Portanto, esse grupo é chamado de artigos, e esse grupo, que na verdade é bastante semelhante ao invés de instrutor, é chamado de vídeos. 26. ANIMADO INTELIGENTE: 03 limitações de animação inteligente: Portanto, a animação inteligente é uma verdadeira mágica, mas vem com algumas limitações. Então, como aprendemos, podemos animar cores, tamanho, posição, rotação e assim por diante. Mas o que não podemos animar é passar de uma forma para outra. Então, aqui eu desenhei um quadrado e aqui desenhei um círculo. E agora vamos ver o que aconteceria se eu animasse isso de forma inteligente. Então você pode ver que, quando eu clico nele, ele ainda se anima bem, mas na verdade não cresce na nova forma. Nesse caso específico, há um pequeno truque que eu poderia usar. Eu poderia simplesmente selecionar o quadrado, copiá-lo e depois colá-lo aqui novamente. Então, em vez de apenas desenhar um círculo, vou transformar esse quadrado em um círculo. Então, vou usar cantos arredondados para fazer isso. E agora vamos mudar a cor para que possamos ver isso um pouco melhor. E vamos voltar ao modo de apresentação. Agora, ao clicar, você pode ver que isso está funcionando, mas só funcionará para um quadrado se transformando em um círculo se eu quiser transformar isso em uma estrela ou em um triângulo, qualquer outra coisa que não funcione. O que também pode causar problemas é mudar o nome. Então, aqui eu tenho duas molduras contendo um grupo e uma moldura. Então esse aqui é a moldura, esse aqui é o grupo. E eles têm conteúdo idêntico. Se eu animar isso de forma inteligente , você pode ver que funciona perfeitamente. Agora vamos voltar e mudar o nome. Então, vou chamar esse quadro aqui de grupo X. E vou chamar esse quadro aqui, quadro y para aquele. E agora vamos jogar novamente. Então, apesar da hierarquia e tudo mais, todos os nomes dentro do grupo permaneceram os mesmos, não eram mais reconhecidos como os mesmos. E esse também é o caso. Se eu mantiver os nomes do grupo e do quadro iguais, mas alterar o nome do conteúdo. E vamos adicionar um pequeno x aqui na parte de trás, onde cada um deles. E agora você pode ver que, enquanto eu animo novamente, o grupo em si anima , mas não o conteúdo. Portanto, você precisa da mesma hierarquia, nomeação para que tudo corresponda. Um pequeno truque se você quiser ver se as coisas estão configuradas na mesma convenção de nomenclatura e hierarquia para serem animadas de forma inteligente, basta selecionar qualquer elemento e você verá nos outros quadros qual deles corresponderá. Então, aqui você pode ver que este agora é compatível. Agora, se eu mudar o nome e selecionarmos novamente, você pode ver que agora não corresponde mais. Vamos voltar ao nome original. E agora está aumentando. Portanto, essa é uma maneira muito boa, especialmente se você tiver centenas de telas para verificar rapidamente se algo está com defeito. Outra limitação que você pode encontrar é que, ao abrir uma sobreposição , não é possível animar essa forma de forma inteligente. Então, por exemplo , aqui, tudo é chamado elipse um e tem a mesma forma. Mas quando digo sobreposição ao clicar em abrir, você pode ver que, no menu de animação, posso escolher entre incidente e dissolver, mas não consigo selecionar o Smart Animate. Portanto, ao abrir e sobrepor, ela não pode transformar essa bolha na bolha da sobreposição. No entanto, quando as sobreposições são abertas e eu estou lidando com a troca de sobreposições, você pode ver que agora um Smart Animate está ativo. Então, deixe-me te mostrar. Então, aqui estou minha tela inicial. Eu clico no meu círculo e ele abrirá a sobreposição, mas não fará uma animação inteligente. Agora, no entanto, estou na sobreposição, estou apenas trocando sobreposições. E você pode ver que agora a animação inteligente está funcionando. Outra área que pode causar problemas são os preenchimentos de fundo com animações em movimento. Então, aqui eu tenho um exemplo simples. Se eu clicar nesse retângulo vermelho, ele moverá essa página de detalhes para dentro. E se eu clicar em x, ele o move de volta para fora. E observe que ainda não tenho o smart animate ativado. Então, vamos dar uma olhada em como seria. Então, se eu clicar aqui, isso o move para dentro, clique em x e o move para fora. Parece muito bom. Mas o que eu quero fazer agora é que, se eu clicar aqui, quero que o x permaneça no lugar e seja animado de forma inteligente com o menu. Então, isso é muito simples. Eu simplesmente seleciono meus conectores e configuro o smart animate. Então, simplesmente pegue essa caixinha aqui. Mas se eu jogar novamente, você pode ver que funciona para o menu. Mas estou tendo essa estranha transparência acontecendo na minha tradição. Para corrigir isso, vamos voltar aqui e selecionar a página de destino. E então eu simplesmente vou pressionar R e desenhar um retângulo como uma espécie de segundo plano de fundo. E você também pode nomear isso. O melhor é dar um nome a essa animação de fundo para que as pessoas não se confundam com ela. E agora vamos dar uma olhada novamente. Eu pressiono Play. E agora você pode ver que agora está funcionando perfeitamente. Então, isso é apenas um pequeno truque que você precisa usar para fazer com que as transições de fundo funcionem com o smart animate. Então, vamos resumir. Você pode animar, colorir, tamanho, posição e rotação de forma inteligente. E você pode combinar animação inteligente com animações em movimento. Você não pode animar de forma inteligente em outra forma. Então, por exemplo, um retângulo em uma estrela. Você não pode criar uma animação inteligente ao abrir uma nova sobreposição. Certifique-se de ter o mesmo nome e hierarquia para o smart animate entrar em ação e esteja ciente de que o plano de fundo é preenchido com a transição móvel e Smart Animate não será animado automaticamente. 27. ANIMADO INTELIGENTE: 04 Vamos construir um aplicativo de animação inteligente: Vamos colocar o que aprendemos em prática e criar esse aplicativo de filtragem de fotos com animação inteligente. Mas vamos começar do zero. Então, aqui temos as telas com as quais vamos começar. Temos uma tela inicial com filtro e imagens, além de um menu e uma tela detalhada. Então, o que eu quero primeiro configurar é uma tela inicial. Então, vou copiar a tela inicial aqui. E, na verdade, vou me livrar de tudo, exceto do meu menu. Agora estou selecionando meu menu, pressionei o botão K para dimensionar. Você também pode abrir a patinação no menu aqui. E agora vou ampliar esse botão do Menu e colocá-lo no meio. Vou selecionar os traços do menu e defini-los como zero. Então, vai parecer que eles vão gostar de uma espécie de desvanecimento com a animação. Agora, a outra coisa que quero fazer é copiar isso novamente. E aqui na minha primeira tela, vou distorcer isso. E agora vou transformar isso em uma animação. Então, vou passar para a prototipagem e pegar essa primeira tela aqui, conectada e depois dizer depois do atraso, porque essa é uma tela inicial. Então, eu quero que comecemos automaticamente. E vou configurá-lo para animação inteligente. E vou deixar isso nessa transição de 1,5 s que fiz de outra animação anterior. E eu vou fazer o mesmo aqui. Então, agora vamos dar uma olhada, isso vai parecer. Vamos apertar play. E você pode ver a tela inicial girando. E, na verdade, temos que voltar aqui. Vamos ver por que isso não está pulando por aqui. Então, isso ainda está configurado para tocar. Vamos definir isso para depois do atraso. E então vamos dar uma olhada novamente. E agora deveria estar funcionando. Então, girando, e então ele está subindo e meu menu está aparecendo. Certo? Ok, a próxima coisa que eu quero configurar são meus filtros. Então, primeiro, vou pegar a tela e definir meu comportamento de rolagem. Então, vamos dar uma olhada. Se eu definir uma rolagem vertical. Então, vamos dar uma olhada em como isso vai parecer. Então, isso moveria a tela inteira, exceto meu menu, que eu corrigi. No entanto, eu realmente quero isso, só quero que essa parte role. Portanto, há maneiras diferentes de abordar isso. Se você tivesse mais conteúdo aqui embaixo , faria sentido realmente corrigir essa parte superior como um cabeçalho. No entanto, como eu só tenho as imagens, eu poderia muito bem tirar a rolagem do meu quadro principal e configurar rolagem nesta parte aqui. Agora lembre-se de rolar para funcionar e você pode ver que eu já recebi um erro aqui. Preciso que a moldura seja menor que o conteúdo. Portanto, posso redimensionar isso e ter um pouco cuidado, porque na verdade tenho essa configuração como layout automático. Então, às vezes, ele está se comportando de maneira estranha e talvez você precise alterá-lo manualmente de abraço para altura fixa. Nesse caso, está funcionando muito bem. Então, agora, se eu voltar para minha prévia, você pode ver que agora está tendo o comportamento que eu procuro. Ok, ótimo. Vamos configurar o resto dos filtros. Então, estou copiando mais de duas páginas. Abra algum espaço aqui. E então vamos dar uma olhada. Ok, então o que eu quero fazer agora é ativar o mais recente. Então, estou configurando isso para 100%. E eu vou mover esse pequeno bar para cá. E estou definindo isso para 50. E vou fazer o mesmo com o último aqui, configurado como ativo um para 100% do que o inativo para 50. Você pode simplesmente pressionar o número e, como você pode ver aqui, ele o transformará em uma porcentagem. E também vou mover essa barra porque estou usando a mesma barra. Ele só vai se mover quando eu usar o smart animate nesta navegação. Também quero mudar a forma como as imagens são embaralhadas, então preciso selecioná-las aqui e soltá-las para poder ver todas elas. E agora, o melhor é que, como uma configuração com layout automático, posso simplesmente selecionar uma imagem e, com as teclas para cima e para baixo, posso movê-la. Então, vamos fazer o mesmo com a última tela e simplesmente misturá-las aleatoriamente. Vamos mover esse aqui. Ok, ótimo. Agora, esteja ciente de que acabamos de desclicar em todo esse conteúdo. Portanto, se eu entrar no modo de visualização e rolar, você obterá esse comportamento de rolagem. Portanto, certifique-se de selecionar todos eles novamente e recortar o conteúdo novamente. Agora, vamos fazer o mesmo novamente. E você pode ver agora que o comportamento está funcionando novamente. Ok, então agora o que queremos fazer é configurar essas conexões. Então, se eu clicar em Latest, gostaria de pular até aqui e usar o smart animate. E vou deixar isso também em uma animação bem lenta para que possamos vê-la corretamente. Agora vou fazer o mesmo com os populares, e também tenho que fazer com essas verduras. Então volte para mostrar tudo a partir daqui, vá para popular Na minha última tela. O mesmo. Na verdade , esse vai para o primeiro. E então esse vai para cá. Ok, então vamos dar uma olhada. Se isso estiver funcionando. Isso é configurado inteiramente no smart animate e você pode ver que não apenas a navegação aqui nossos filtros estão funcionando bem, mas também nossas imagens estão sendo reorganizadas. Também poderíamos medir um pouco a velocidade, mas vou deixá-la por enquanto para que possamos vê-la melhor. Então, a última parte que está faltando agora é nossa página de detalhes aqui. O que eu quero aqui é que eu quero algumas imagens em uma prévia, depois tenho meu texto e quero um pequeno botão de fechamento. Existem diferentes maneiras de configurar isso, então fique à vontade para jogar com ele sozinho. Ok, vamos começar com nossas imagens. Então, estou pegando isso aqui e copiando as imagens. Estou excluindo esse espaço reservado e os colando aqui. Mas eu quero que eles sejam empilhados horizontalmente. Portanto, S é uma configuração com layout automático. Estou simplesmente mudando a direção. Vamos descompactar o conteúdo para que possamos vê-lo melhor. E eu posso definir isso como um falcão. E agora temos todas as imagens aqui em uma fileira. Não quero exibir todos eles, apenas alguns. Então, vou deletar esses aqui. E agora, para configurar isso como rolagem horizontal, eu tenho que tornar a moldura pequena n. É disso que eu estava falando. Às vezes, isso pode ser um pouco estranho. Isso ocorre porque estamos trabalhando com layout automático. Então, o que podemos fazer é definir a horizontal como fixa e agora podemos ajustá-la. Nesse caso, eu também tenho que mudar o alinhamento, e agora eu posso mudar isso. Na verdade, quero adaptar um pouco o espaçamento para que possamos ver que há mais conteúdo chegando para rolagem. Na verdade, vamos colocar isso de volta aqui. E eu estou adicionando um pouco de preenchimento à esquerda. Agora estou selecionando essa moldura e pulando para o protótipo. E observe como isso está me causando um erro, porque obviamente não há conteúdo vertical para rolar. Então, assim que eu mudar isso para rolagem horizontal, agora vai funcionar. Então, vamos dar uma olhada que está fazendo o que queríamos fazer. Então, aqui está meu conteúdo e eu posso rolá-lo horizontalmente. Ok, ótimo. Agora eu quero adicionar meu botão aqui, e eu quero que isso não seja mais um menu, mas um botão de fechamento. Então eu copiei. O que eu vou fazer é selecionar, eu tenho que pular dois. Eu ainda estou no modo de protótipo. Eu preciso ir para Design. E agora eu estou ajustando essas linhas de um menu para um X, então para um sinal de encerramento. Então, o que queremos fazer agora é conectar essa imagem para abrir a página detalhada. Então, vamos pular para o protótipo, depois vamos selecionar isso e ir até aqui. Mas o que eu não quero, na verdade, não quero que tudo isso seja animado de forma inteligente. Eu quero que isso seja empurrado para dentro ou movido. Eu vou escolher. E ainda vou manter o Smart Animate aqui selecionado porque quero que o menu seja animado de forma inteligente. Agora, vamos ver se isso funciona. E uma pequena dica, não vai acontecer, mas vou te mostrar o porquê. Então, vamos orar. Vamos pressionar Play. E então eu estou pressionando esse detalhe e está realmente bonito, mas é inteligente animar tudo aqui. Eu não quero isso. Por que está fazendo isso? Então você pode ver aqui que esse grupo é chamado de imagens, e esse grupo aqui é chamado de imagens e na verdade, tem uma ordem muito semelhante. Então, eu preciso mudar o nome aqui para que nossa cor em uma chamada, seja o detalhe dessa imagem. Então, agora vamos dar uma olhada novamente. Então, agora vamos pressionar essa imagem novamente. E você pode ver que agora está entrando, mas está fazendo uma coisa estranha como essa transparência um pouco estranha e, na verdade, não está fechando. Então, vamos corrigir isso também. Ok, então, primeiro de tudo, aqui, vamos adicionar uma interação e, digamos, na guia, voltar para o lugar de onde você veio porque vamos conectar mais algumas imagens aqui. E então a outra coisa que queremos fazer é aqui, eu realmente queria que isso aumentasse, mas tinha uma transparência estranha. Então, o que você precisa fazer aqui é desenhar um plano de fundo separado. Então, eu estou desenhando um fundo branco aqui e vou simplesmente adicionar branco e mover isso. Isso, isso era uma espécie de fundo extra em meu pedido aqui, minha ordem de empilhamento logo atrás. Então, isso só existe para resolver essa pequena transparência estranha com minha animação. Ok, então vamos dar uma olhada. Se isso estiver funcionando, vamos pressionar Play. E agora isso parece ótimo. E se eu pressionar o X, veja como essa animação está funcionando bem. Então, aqui temos nossa animação em movimento. E como ainda temos uma animação inteligente definida na animação em movimento, nosso menu que tem o mesmo nome na mesma hierarquia está funcionando com a animação inteligente. Então, vamos dar uma olhada e configurar nosso design final. Então, a única coisa que eu quero fazer agora é soltá-los aqui novamente. E vamos realmente procurar essa imagem. Vou aumentá-lo um pouco. E agora eu também quero conectar isso à nossa página de detalhes. Então aqui That's ainda tem a animação que criamos antes. A partir daqui. Eu também estou me juntando a isso. E então eu vou recortá-los novamente, uma pequena dica extra. Às vezes, podemos querer ter pilhas de elementos e depois abrir. Portanto, você também pode fazer isso se estiver configurado com layout automático. Agora, posso ir até aqui e definir o valor como um valor negativo. Então minhas imagens estavam empilhadas. E você verá agora como em uma tela eles estão empilhados. E quando escolhermos qualquer outra tela , elas se abrirão. Ok, então acho que nosso aplicativo está concluído. Vamos analisar toda a configuração. Então, temos nossa tela inicial. Está se movendo até aqui, se transformando em uma animação. Aqui você pode ver nosso empilhamento. E quando eu vou para qualquer outro filtro, você pode ver que ele está empilhado. E então podemos clicar em nossa imagem e obter nossa página de detalhes, que podemos abrir e fechar. Portanto, também podemos acessar essa página de detalhes de qualquer outro ponto do nosso aplicativo. E como há um contratempo, também vamos voltar para a página de onde viemos. Então, como podemos ver, demoramos apenas 10 minutos para configurar todo esse aplicativo Smart Animate. 28. ANIMADO INTELIGENTE: 05 animate com propósito e código em mente: Agora é fácil se deixar levar pelo smart animate e Figma, porque é muito fácil e incrível, mas sempre anime com uma mente codificada por um propósito. Então, vamos nos certificar de que nos lembremos de algumas coisas importantes. Primeiro, projetamos com um propósito. Portanto, cada decisão que tomamos em nosso design deve ter um propósito e orientar nossos visitantes. Animações, especialmente microinterações, como estados do mouse para nosso botão e assim por diante, desempenham um papel muito importante em nossa experiência de usuário. Deixe-me dar um exemplo. O princípio do destino comum. Isso significa que dois ou mais elementos que se comportam da mesma maneira são percebidos como parte de uma unidade. Pense em um acordeão. Se eu clicar, quero que isso abra, clique novamente e feche. Eu aprendi que funciona dessa maneira e cliquei em um. Então, espero que todo o resto aqui funcione exatamente da mesma forma. Então, seria muito confuso se eu clicasse em uma e, de repente, uma sobreposição se abrisse. Isso é o mesmo para todos os elementos que estão usando. Portanto, todos os botões da sua página devem ter a mesma aparência e comportamento. Também. Não exagere. Eu sei que o Smart Animate é uma magia brilhante, mas não exagere. Não adicione um pouco aqui e um pouco ali, porque todo mundo diz, uau, quando você o usa demais, na verdade seremos encorajadores e contribuiremos para a sobrecarga cognitiva de seus visitantes. Certifique-se de que seu design funcione em um protótipo simples clicável em todos os momentos. E isso não significa que animação deva ser uma reflexão tardia. Pense em um menu rolável. Posso clicar e pular para a seção. Então isso funciona. Agora posso adicionar uma animação de rolagem suave guiando meus visitantes até esta seção. Isso me ajuda a entender onde estou e como voltar. Então, isso realmente melhora meu design. Preciso de elementos voando para dentro e para fora durante a animação? Provavelmente não são. Inteligente. Animate não é código. E isso é muito, muito importante por vários motivos, por exemplo, o que pode ser muito fácil e apenas um clique com Figma Smart Animate pode ser muito difícil se você estiver usando algo como animação CSS. E, ao contrário, podem ser grandes possibilidades que você simplesmente não pode mostrar no Figma. Então isso não significa que você precise de 20 reuniões sobre cada ajuda de colheita ou caixa clicável que você está criando com o Smart Animate. Tenha uma boa ideia de que, antes começar a falar com sua equipe de desenvolvimento, pergunte se há uma pessoa responsável pela animação e que vocês podem planejar juntos desde o início. Pergunte também se eles estão usando uma biblioteca de animação específica e se você pode se familiarizar com a documentação e obter uma ideia realista na vitrine da biblioteca. 29. COMPONENTES: 01 componentes interativos: Até agora, usamos animação entre diferentes quadros. E agora vou mostrar um dos meus recursos favoritos, componentes interativos. Basicamente, são animações reutilizáveis definidas dentro do seu componente. Então, como o nome indica para que isso funcione, precisamos de componentes ou melhor, conjuntos de componentes com variante interna. Se você não está familiarizado com isso, uma variante dita é basicamente dois componentes, dois ou mais componentes, na verdade. E você pode ver que eu uso a convenção de nomenclatura, barra de avanço do botão, botão padrão, barra para frente e barra ao passar o mouse. Então, eles são da mesma família que, na verdade, estão em um estado diferente da mesma coisa. E aqui no lado direito, posso dizer combinação como variância. E a melhor coisa sobre isso é que, se um braço retira uma instância aqui , você pode ver que, nesse botão, as duas instâncias são salvas apenas em estados diferentes. Em todo o meu design. Vou usar muitas instâncias desses elementos. Portanto, posso não apenas salvar os diferentes estados que eles têm nessa instância, mas também posso salvar em comportamento. Portanto, preciso estar nas configurações do meu protótipo e, por exemplo, salvar o comportamento de um botão. Então, quero adicionar um estado de mouse e simplesmente conectar meus dois botões, como faria antes, com qualquer outro quadro. E agora você pode ver que no meu menu está escrito OnClick ou vou mudar isso para enquanto passo o mouse. E mudou para set. Essa mudança para aqui só estará ativa nos conjuntos de componentes. Agora, posso usar a dissolução instantânea ou a animação inteligente. Vou usar o smart animate , pois é simplesmente uma cor. Agora vamos dar uma olhada no que isso faz, para que possamos ver isso em nosso modo de pré-visualização. Eu preciso desenhar uma moldura. E agora posso adicionar uma instância do meu botão a esse quadro. Agora vamos dar uma olhada. Ao passar o mouse sobre meu botão, você pode ver que eu tenho esse comportamento seguro e será o mesmo onde quer que eu use esse botão. Ok, agora eu quero o mesmo para o meu switch aqui, mas eu quero que isso seja arrastado até aqui e depois se transforme nesse switch. Agora, neste caso, eu não quero que o switch inteiro seja ativado, mas eu queria pegar essa pequena bolha aqui. Então, eu quero pegar, selecionar essa bolha, desenhar uma animação e você verá que ela dirá ao clicar. Nesse caso, eu quero arrastar para, e vou fazer uma animação inteligente aqui. Agora, neste caso, preciso retribuir o favor. Então, gabe-se, vai voltar ao meu estado original. Agora, o que vou fazer é arrastar uma instância colocada no meu quadro. E vamos ver se isso funciona. Então aqui está meu botão. Eu o arrasto e você pode ver que ele muda. A cor era uma animação inteligente. Agora eu posso animar entre mais do que apenas dois. Então, aqui eu tenho essa caixa de seleção e vou arrastar um conector. E eu vou dizer que altere com um clique para uma animação inteligente. E a partir daqui, eu vou dizer vá até aqui. E se eu verificar novamente, então vai voltar ao começo. Vamos arrastar para fora uma instância dessa caixa de seleção. Na verdade, vou arrastar alguns. E agora vamos dar uma olhada. Se eu jogar isso, aumentar isso, posso verificar. Se eu pressionar novamente. É assim. E então eu posso usar isso em todo o meu design. 30. COMPONENTES 02 Componentes interativos de agrupamento: Assim como com qualquer outro componente, você pode agrupar componentes animados e combiná-los. Então aqui eu tenho meu botão e meu interruptor. Se eu for ao protótipo, podemos ver que eles já têm sua animação configurada. E então eu tenho outro componente, um componente de lista. E o que eu posso fazer agora é arrastar qualquer instância dessa chave seletora. E agora estou criando uma instância do meu item da lista aqui. Então você pode ver que esse switch está aninhado. Então, se eu clicar no componente original, ele volta e me mostra o componente animado aninhado ou variantes nesse caso. E agora eu posso simplesmente arrastar alguns. E vamos combinar isso em uma moldura. Na verdade, você pode clicar com o botão direito do mouse e , em seguida, enquadrar a seleção. Então, vamos adicionar algum conteúdo e também adicionar uma instância do nosso botão aqui embaixo, Sita, preenchimento de fundo. Vamos adicionar isso aqui embaixo. E então você pode, é claro, sobrescrever isso. Vamos adicionar algumas imagens com o plugin Unsplash. Eu só vou tirar alguns retratos aqui. E agora vamos dar uma olhada e jogar isso. Agora você pode ver que eu posso ajustar individualmente esses botões de alternância. E meu botão também está funcionando. 31. COMPONENTES: 03 animações de pêssego e zoom fáceis: Portanto, os componentes interativos também ajudam muito na criação de estados de foco. Onde antes precisávamos criar muitos quadros, agora podemos simplesmente adicionar a animação ao nosso componente, caso qualquer substituição herdaria esse comportamento. Então, aqui eu tenho meu cartão, padrão e estado de flutuação. Então, agora vou simplesmente, no meu menu de prototipagem, adicionar um mouse amplo, mudar para e animar de forma inteligente. E agora vou extrair exemplos desse cartão. Agora posso substituir as imagens e o texto. Para as imagens. Estou usando o plugin Unsplash, mas você pode usar qualquer um. Vamos dar uma olhada nisso. Então você pode ver que, enquanto eu passo o mouse, todos eles herdaram a data padrão e a data de colheita. Mas ainda posso adicionar um pouco mais de mágica aqui, porque lembre-se, eu também posso usar o tamanho inteligente de animações. Então, tudo o que estou fazendo é deixar a imagem no tamanho original. E aqui, no estado do mouse, vou ampliar um pouco a imagem e mudar sua posição. E agora vamos dar uma olhada no que acontece. Enquanto eu pairo o mouse. Estou recebendo um pequeno zoom muito bom nas imagens. Trabalhar com componentes interativos quando se trata de auxiliares de colheita economizará muito tempo para criar um carrossel simples como este. Você precisava dessa quantidade de telas. Porque cada estado, então toda vez que isso aumentasse, caso contrário , teríamos que criar uma página própria e, em seguida, criar um link para frente e para trás. Agora, tudo o que precisamos é disso, porque o que temos aqui é que temos um componente interativo que tem uma animação de enquanto paira o tubo de mudança. E aqui temos simplesmente instâncias que ampliam o nó. Se você quiser usar imagens ampliadas usando animação inteligente com componentes interativos. E, em seguida, um ao lado do outro, você precisa adicionar um layout automático. Então, aqui você pode ver que eu não tenho um layout automático para resolver isso. Isso significa que quando essa imagem aqui aumentar , ela vai empurrar todas as outras imagens para fora do caminho. Outra grande vantagem é que, digamos que eu queira acrescentar algo a todas essas instâncias. Então, eu posso simplesmente adicionar isso à minha variante aqui, e então ela será representada em todas elas. Então, vamos jogar isso de novo. E você pode ver que eu tenho a vantagem, a única coisa que eu não gosto, é que está meio que desaparecendo de uma forma estranha em vez de simplesmente se dissolver. Então lembre-se de que somos animados inteligentes. Figma está procurando os mesmos elementos na hierarquia e nomenclatura desde o início até o fim. Então, isso é exatamente o mesmo entre quadros ou dentro de conjuntos de componentes. Vamos copiar apenas essa camada que é chamada de cruz. E também vamos adicioná-lo ao nosso destino, mesmo que não queiramos mostrá-lo aqui. Vamos ajustar o tamanho para caber. E eu vou definir isso como zero apenas para cruzar. Ok, vamos jogar isso de novo. E agora você pode ver que a cruz está desaparecendo perfeitamente porque a animação inteligente está funcionando dentro do conjunto de componentes. 32. COMPONENTES: 04 interações em vídeo: Também podemos usar componentes interativos para criar reprodutores de vídeo. Então, no meu exemplo aqui, você pode ver que eu simplesmente incorporei um vídeo. Então, no meu modo de apresentação, você pode ver que está tocando, mas sempre estará tocando. Quero mudar isso para uma imagem estática e somente quando eu passar o mouse sobre ela ou após um atraso ou qualquer gatilho que eu quiser, ela começa a tocar. Então, o que eu vou fazer aqui é criar um segundo. Vou desanexar a instância, chamá-la de hover. E eu vou transformá-lo novamente em um componente. E agora estou combinando esses dois em um conjunto de componentes com variantes. E vou adicionar um pouco de transparência. E o que eu quero agora é isso, o que ainda é reproduzir o vídeo igualmente porque eu tenho um vídeo no padrão e um vídeo e passo o mouse. Então, o que vou fazer agora é selecionar o vídeo e usar comando Shift e ver essas cópias em PNG. Agora, vou simplesmente substituir o vídeo por esse PNG. Agora, tudo o que preciso fazer é adicionar um pouco de prototipagem. Então, eu estou conectando isso, o padrão, com o aço, com meu vídeo e estou dizendo que, ao passar o mouse, mude para e anime de forma inteligente. Agora vou selecionar minha moldura. E vamos dar uma olhada. Aqui. Eu tenho meu aço e, ao passar o mouse sobre ele, você pode ver que o vídeo começa a ser reproduzido. Observe como isso sempre volta para onde eu o deixei. Então, se eu sair, ele vai voltar aqui de onde eu parei. Se você não quer isso e quer sempre começar do início. Então, o que você pode fazer é, enquanto define sua interação aqui, redefinir a posição do vídeo e, em seguida, ele sempre voltará do início. Portanto, essa é uma ótima maneira de salvar algumas telas e ter tudo dentro do seu vídeo real. Porque você pode definir isso para passar o mouse. Você pode definir isso para após um atraso ou quando uma determinada tecla é pressionada no teclado. Então, isso é muito, muito bom para trabalhar com vídeos. Lembre-se de que, no momento, os vídeos estão disponíveis apenas em planos pagos. 33. COMPONENTES: 05 componentes interativos e layout de automóvel: Um lugar onde os componentes interativos se tornam especialmente poderosos é combiná-los com o layout automático. Então, aqui eu tenho um componente dito com duas molduras, uma vermelha e uma azul de tamanhos diferentes. Vou pegar algumas instâncias aqui, e vou colocá-las na minha moldura aqui. E agora vou adicionar algumas prototipagens. Então, se eu clicar no vermelho, digo mudar para e animar de forma inteligente para a forma azul. E vou devolver isso da forma azul para a vermelha. Então, OnClick, mude para vermelho e animação inteligente. Agora vamos dar uma olhada em como isso parece. E até agora não há layout automático aplicado em nenhum lugar. Então você pode ver que, se eu clicar, isso muda. E você pode ver que aqui se torna maior. Mas eles meio que se encontram. E se eu clicar novamente, eles voltarão à forma original. E o Smart Animate está funcionando na animação This click. No entanto, vamos dar uma olhada no que acontece se eu selecionar todos eles. E agora, no InDesign, estou transformando isso em um quadro de layout automático. Na verdade, vamos mover esse quadro um pouco para cima e dar ele um pouco mais de espaço e você verá o porquê em um minuto. E agora vamos pressionar play. Então agora você pode ver minha moldura aqui. E quando eu clico, você pode ver que ele se move para cima e para baixo. E o motivo é que, lembre-se, o layout automático sempre ocupa todo o espaço disponível. É assim que eu posso animar de forma inteligente e criar outros conteúdos de acordo com o novo tamanho. Eu realmente posso levar isso ao extremo. Então, digamos que eu esteja avaliando essa forma azul aqui como zero. E observe como Figma nunca me dá zero, sempre me dá esse aqui. Então, um pequeno truque é ir 0,00 para algo assim, e então vai para zero. Então, ainda está aqui, meu elemento, mas está escondido. Então agora vamos jogar novamente. E agora você pode ver que se eu clicar nesse vermelho aqui, eles desaparecem. A única coisa é que você provavelmente se pergunta se pode adicionar um pequeno botão de adição ou adicionar novamente e depois adicioná-los. Bem, isso realmente não vai funcionar porque teoricamente, eles estão todos aqui em Figma. Não lembra qual. Basta clicar em qual, quando não o fez. No entanto, você pode simular. Então você pode adicionar, digamos, vamos adicionar um pequeno botão redondo aqui e dizer que este é o botão de adição. Então, o que podemos fazer é dizer que, uma vez que eles sejam excluídos e eu clique nesta, eu simplesmente copiarei a mesma aversão da já existente aqui. E então eu vou conectar essa navegação com um clique e uma animação inteligente. Então, vamos dar uma olhada nisso novamente. Então, agora estou excluindo. E então eu posso voltar ao estado original, mas não posso selecionar estados individuais para reaparecerem. Então, você pode realmente criar ações bastante impressionantes e realistas com isso. Então, aqui, por exemplo , ao arrastar, ele me mostra um pequeno botão Excluir e eu posso excluir um desses elementos aqui. Como eu fiz isso? Bem, é exatamente o mesmo princípio. Então, aqui temos nossos elementos que são usados aqui e eu simplesmente os preencho com meu conteúdo. E então, dentro dos meus componentes definidos aqui, você pode ver que eu tenho meu elemento padrão aqui e ele já contém o botão Excluir. Então, se eu desligar esse conteúdo aqui, você pode ver que já existe aqui e isso é muito importante. Porque lembre-se, a animação inteligente precisa de um começo e um fim para funcionar. Então, na minha exclusão aqui, tudo o que fiz, mudei esse rótulo para a esquerda. Então essa será minha animação de arrastar. E eu simplesmente os conectei com uma animação de arrasto. Então, em Arraste, mude para e anime inteligente. Então, uma vez clicado, observe como isso está vinculado apenas a esse ícone de exclusão, não ao resto do meu elemento. Então, se isso estiver vinculado, então vai ficar aqui. E este está definido, neste caso 21. Eu também poderia definir isso como zero. E é por isso que parece que está sendo excluída, porque aqui minhas instâncias são simplesmente configuradas com layout automático. E, portanto, se um deles for definido como zero, todos eles mudarão para cima. Eu realmente encorajo você a jogar com componentes interativos e layout automático, porque você pode realmente criar protótipos muito impressionantes com essa técnica. 34. COMPONENTES: 06 componentes de funil: Quero mostrar um pequeno truque que chamo de componentes do funil. O que eles basicamente fazem é conectar componentes na prototipagem em diferentes páginas e arquivos. Aqui está meu design , composto por uma página inicial Sobre a página, workshop e uma seção de boletim informativo. E como você pode ver aqui, eu posso navegar até todos eles a partir do meu cabeçalho. Agora, se clicarmos no cabeçalho, podemos ver pela cor roxa e pela forma vazia do diamante que se trata de uma instância. Se dermos uma olhada onde está nosso componente principal , saltaremos para uma página de componentes separada. Ou isso pode até estar em um arquivo completamente diferente. Porque geralmente é uma boa prática não armazenar seus componentes junto com seu design. Então, para nossa prototipagem, isso agora significa que eu tenho que passar por cada página e depois fazer as conexões correspondentes. Então, eu teria que acessar, antes de tudo, minha página aqui, minha página do blog. Então eu tenho que ir para minha página Sobre nós e fazer um link de volta. Eu teria que fazer tudo isso para cada uma das páginas. Agora, depois de fazer isso, o que dá muito trabalho se eu quiser fazer alguma alteração, digamos que, como o boletim informativo que notei, ele abre uma nova página, mas na verdade é uma sobreposição. Então eu teria que passar por cada página e mudar isso. Vamos excluir todas essas conexões e encontrar outra solução. A propósito, pequeno truque, clique com o botão direito na tela no modo de prototipagem e você pode remover todas as interações. Isso também remove esse fluxo aqui, e vamos dar uma olhada. Portanto, a primeira coisa que você pode querer fazer é ir para a seção de componentes principais. Então, o que eu realmente quero é ter esse mestre aqui, basicamente. E então, sempre que eu clico no workshop, digamos que eu adicione uma interação. Se eu clicar, quero navegar até o workshop. Mas como você pode ver, não consigo acessar atualmente no Figma nenhuma outra página. E como eu disse aqui, nós apenas armazenamos o componente e outra página, mas esse componente pode estar em um arquivo completamente diferente. Portanto, podemos usar um pequeno truque no qual você pode simplesmente copiar o componente ou também usar qualquer uma dessas instâncias que você já tenha aqui. Vou começar do zero e criar essa instância. Agora, eu poderia conectar essa instância, mas o fato é que essa instância não daria nada às outras instâncias. Ele precisa ser um componente principal. Então, estamos fazendo um pequeno truque aqui selecionando-a e empacotando essa instância dentro de outro componente. Então, estamos criando um novo componente e eu vou chamar isso de funil. Então, se olharmos dentro do nosso componente final, você pode ver que ele simplesmente contém uma instância de nossa navegação principal. Então, se voltarmos para cá, eu devolvo tudo o que está armazenado. Ok, então, em nosso design, o que precisamos fazer agora é substituir todas as nossas instâncias existentes por esse componente final. Então, eu vou aqui e depois os componentes. E então eu vou agora mesmo para ver uma página de componentes e vou para a página de design, e estou escolhendo a navegação por funil. Você também pode simplesmente excluí-los, fazer uma cópia disso, então é uma instância e substituí-los. Agora, se eu selecionar qualquer uma dessas instâncias e voltar para o componente principal , ela salta aqui para o meu funil. Agora tudo o que preciso fazer é conectar o funil minha prototipagem às minhas telas uma vez. Então, vamos definir isso como solução, para o blog. Este vai para a oficina. Então, este aqui vai para sobre meu botão Inscrever-se. Quero abrir uma sobreposição. Então, clique em Abrir boletim informativo sobreposto. Agora podemos ver se eu clico aqui e depois herdei todas essas conexões. Então, todas essas páginas têm automaticamente a conexão. E se eu mudar alguma coisa aqui, eles vão herdar isso. Vamos dar uma olhada nisso e isso funciona muito bem. Eu posso clicar neles e de qualquer lugar eu posso acessar meu boletim informativo. Então, na verdade, estou usando apenas esses componentes finais para configurar minha prototipagem. Eles não têm nada a ver com os componentes principais. Portanto, qualquer alteração no design do componente principal seria simplesmente captada pelo meu componente final. Desde que a nomenclatura e a hierarquia não sejam alteradas , até mesmo as conexões permanecerão em vigor. 35. VARIÁVEIS: 01 Prototipagem com variáveis: Prototipagem com variáveis. Vamos começar com o básico. Aqui eu tenho três botões e eu tenho um quadrado. Agora, quero preencher esses botões com tamanhos diferentes. E quando clico neles, quero que o quadrado mude de acordo com o tamanho que eu escolhi. Eu falei sobre Coleção, que chamei de Prototipagem de exemplo E você pode ver que eu disse o tamanho quadrado para 400, tamanho 100, tamanho para 300 tamanho 3600 Então, o que eu quero fazer agora é vincular, em primeiro lugar, esses números aqui às variáveis Então, vou simplesmente selecionar um número. E então, em nossos campos de propriedades de texto, agora posso encontrar isso, dependendo de quantos você tem, talvez seja necessário rolar um pouco Então esse é o meu tamanho um. Então eu tenho meu tamanho dois. E esse último botão será do meu tamanho três. Agora eu quero conectar meu quadrado com o tamanho do quadrado, então estou selecionando-o. E então, no painel Propriedades, você pode ver que ele já está definido como 400, 400, qual é o meu padrão? Mas eu quero vincular isso às variáveis para que eu possa pegar isso e alterar esse tamanho mais tarde Vou escolher a largura e também vou vincular a altura a essa variável Ok, ótimo, agora temos nossa configuração básica e podemos passar para a prototipagem Então, agora vou conectar esse botão. E o que eu quero fazer é dizer se eu clicar e, em seguida, alterar essa largura para o tamanho do quadrado para o novo valor. Então, no meu menu suspenso, vou escolher a variável definida e, em seguida, vou escolher o tamanho do quadrado Então, basta digitar o nome dessa variável e você a verá aqui. Ele já vai perguntar para o que você deseja configurá-lo E agora eu posso pesquisar no meu menu suspenso e quero configurá-lo para o tamanho um Então, antes de prosseguirmos, vamos ver se isso realmente funciona. Vou escolher esse quadro e agora vou abrir o arquivo Preview. Você pode usar um atalho, Shift e barra de espaço, ou pode simplesmente usar o Vou clicar no meu 100 e você pode ver que funciona, meus quadrados estão sendo redimensionados Agora eu quero configurar esses tamanhos e também quero configurar um botão de retorno para voltar ao tamanho padrão original. Vou escolher meu segundo botão. E, a propósito, você também pode copiar e colar interações. Vou passar por isso pouco a pouco novamente para nos acostumarmos um pouco com o processo. Então, o tamanho do quadrado, e queremos definir isso como nossa variável agora. E agora fazemos o último. Então, também queremos novamente escolher a variável definida. Escolhemos o tamanho quadrado e vamos defini-lo para o tamanho três. Agora eu só quero configurar meu botão de reset para voltar para 400.400. Agora, o que você pode ficar tentado a fazer é adicionar uma conexão E, a propósito, estou apenas me conectando à praça. Para voltar à variável definida, você também pode usar um menu de interação aqui para adicioná-la. Assim que você usar uma variável, você obterá esse pequeno sinal aqui e ele não estará mais se conectando ao quadrado. Então, o que você pode ficar tentado a fazer é dizer que o tamanho do quadrado é igual ao tamanho do quadrado Porque isso deveria ser 400, certo? Não é. Porque o que acontece agora? Se abrirmos nossa prévia, você poderá ver que ela muda em todos os tamanhos. Mas se eu clicar aqui, isso não muda. E isso ocorre porque estamos inserindo os novos tamanhos nessa variável de tamanho quadrado. Agora você não pode vê-lo dentro de sua coleção, mas no fundo, é isso que está acontecendo. Podemos resolver isso simplesmente adicionando outra variável, que chamarei de padrão. Vou definir isso para o meu 400 original. Então, agora estou alterando o tamanho do quadrado para igual e vou defini-lo igual ao padrão Então, agora vamos tentar isso de novo. Podemos usar os diferentes tamanhos. E se eu pressionar Reset , ele voltará ao meu tamanho padrão original. Se eu mudasse algum dos tamanhos aqui. Então, por exemplo, vamos definir este aqui como muito pequeno, apenas cinco. Então você pode ver que isso é atualizado automaticamente não apenas no meu botão, mas também na minha interação. 36. swap de 02 variantes com variáveis: Troca de variantes com variáveis. Com variáveis, podemos extrair variantes específicas de um componente e também podemos usar mortes para prototipagem Aqui eu tenho um conjunto de componentes com três variantes, a, B e C. E aqui eu tenho uma instância da variante a. E eu tenho três pequenas bolhas Então, se eu clicar em laranja, quero que seja exibido. Então o do meio aqui, vermelho é B e o azul seria C. Então eu montei uma coleção. E você pode ver que nesta coleção eu tenho uma variável de string que é chamada de seleção. E então eu tenho laranja, vermelho e azul. E esse é, na verdade, o nome da variação. Portanto, esse é o único lugar em que você realmente precisa ter cuidado com a nomenclatura, pois ela precisa ser a nomenclatura exata que você deu à sua variação Eu disse F sub com três modos diferentes e estou deixando isso no modo de adição 12.3 Observe que você provavelmente precisará um problema Figma ou superior para configurar a nota Antes de configurarmos qualquer interação, preciso vincular essa variável aqui, a seleção à minha instância Isso precisa estar ativado, pois a instância não funcionará dentro do conjunto de componentes no momento. Então, selecione a instância e , no lado direito, em um painel de propriedades, se você passar o mouse sobre o nome da instância, obterá esse pequeno símbolo, atribuição Agora, esse recurso é realmente novo. Então, isso ainda pode estar se movendo um pouco, mas deve estar em algum lugar por aqui. Então, use-o no menu suspenso e agora escolha a variável de seleção que acabamos de configurar. Então, ao conectar isso com a variável de seleção, agora ele sabe que dentro dela tem variação de laranja, vermelho e azul Vamos passar para Prototipagem e conectar isso. Então, estou selecionando a bolha laranja e estou usando o conector Você também pode simplesmente clicar em um sinal de mais aqui em Interação para configurar isso. E eu mudo para definir variável. E agora estou dizendo que defina a seleção como, vou precisar usar o nome da variante. Então, neste caso, a laranja indicada. E agora estou conectando o vermelho da mesma maneira. Então, vou definir a seleção de variáveis e simplesmente vou definir essa como vermelha, a azul. Vou fazer a mesma seleção de variáveis de conjunto e vou definir essa para azul. Vamos dar uma olhada. Se isso funcionar, podemos ir para o modo de apresentação ou para a pré-visualização do outono. Vou usar isso com um atalho Shift Spacebar. Agora, se eu clicar nos meus pequenos botões aqui embaixo, você pode ver que ele puxa a variante correta Então, isso é muito útil para configurar coisas como mostrar estilos diferentes do mesmo produto E observe que estou usando exatamente a mesma coleção para este exemplo. E estou vinculando essa variante aqui novamente à minha seleção de variáveis. E a única coisa que preciso ter cuidado é que minha variação tenha o mesmo nome Então este ainda é laranja, vermelho e azul. Então, se eu tentar isso, você pode ver que isso funciona tão bem quanto nosso exemplo anterior. 37. VARIÁVEIS: 03 expressões: Prototipagem com expressões. Na prototipagem Figma, agora podemos combinar o cálculo com variáveis, então mais, menos, dividir Isso pode ser algo bem simples, como uma variável mais ou menos outro valor ou outra variável Mas você também pode agrupar isso para obter configurações mais avançadas Aqui eu tenho uma configuração de um botão menos NA mais e simplesmente um número que atualmente está definido como zero Agora já configurei uma coleção. E você pode ver que isso é super simples. Tudo o que tenho é uma variável numérica e o valor está definido como zero. Agora vamos definir esse zero aqui como nosso contador de zero. Eu seleciono o zero e, no painel Propriedades do texto, vou aplicar variável. E eu vou escolher aqui embaixo, meu balcão. Então, se eu apertar esse botão de adição aqui, quero que um seja adicionado ao meu valor total. E se eu tiver menos, quero que um seja retirado da minha contagem total de um número Então, vamos pular para a prototipagem. Vou selecionar primeiro o botão de adição. Vou adicionar uma interação e vou dizer que, ao clicar, defina a variável com o nome do contador como E agora eu preciso reutilizar esse contador de variáveis. E agora eu posso adicionar mais um. Vamos ver se isso funciona. Vou selecionar o quadro e vou abrir minha pré-visualização. E se eu clicar em Mais, você verá que estou adicionando um. Então, agora quero fazer a mesma largura menos o contrário Então eu seleciono meu botão de menos e adiciono uma interação E eu vou definir variável para contador. E então o contador é menos um. Ótimo, ok, vamos dar uma olhada. Abra o Preview mais e menos. Eu posso usar isso em praticamente qualquer coisa. Não precisa ser um número. Então, o que eu poderia fazer é desenhar uma forma aqui. E vamos apenas preencher isso. E agora eu posso vincular qualquer altura ou largura dessa forma ao balcão Observe como isso é zero, mas vai pular para um porque Figma não isenta zero como valor E vou aumentar meus passos um pouco maiores para que possamos vê-los melhor. Então, vamos definir duas etapas de dez. E agora, quando abrimos a pré-visualização, você pode ver que os números, assim como minha forma, estão mudando de acordo com os botões que eu pressiono. 38. 04 Expressões de encadeamento: Na prototipagem Figma, também podemos encadear expressões. No meu exemplo aqui, eu tenho um moletom, o preço de 60, e eu tenho um menos N, um Então, eu posso adicionar isso. Essa seria a quantidade total de moletons adicionados. E então eu quero ver qual seria o custo total. Então, 60 vezes qualquer número que eu tenha aqui. Já tenho meus pontos positivos e negativos configurados. A coleção que estou usando é contadora e tem um valor zero. E então você pode ver em Prototipagem que definimos este aqui como contador e, em seguida, contador mais um, o cálculo que estamos fazendo E então este aqui é definido como o total de contas é um número. Então, vamos dar uma olhada nisso em nossa prévia no arquivo. Então, podemos ver se tínhamos mais, então isso aumenta. E se tivéssemos menos, esse número volta a diminuir. Agora precisamos adicionar um pouco mais. Antes de tudo, precisamos adicionar o preço à nossa coleção e também precisamos de uma variável para manter o total. Então, vamos abrir nossa coleção. Então, vamos adicionar o preço como um número. E isso atualmente é 60. Então eu vou criar outra variável, que também é uma variável numérica, e esse será o total, e atualmente está definido como zero. Agora vamos vincular nossos números. Então, eu vou pegar esses 60 aqui e vou conectar com o meu preço. E este aqui será meu total. Vamos passar para a prototipagem. Agora, esses botões aqui, eu ainda posso acionar. Então, vamos abri-los. E atualmente tenho o botão de adição configurado para contabilizar mais um, então estou aumentando esse número. Agora, o que eu quero fazer aqui é adicionar outra ação. Quero definir outra variável. Porque o que eu quero fazer é definir o total como o total atual mais o preço. Então, vamos dar uma olhada nisso. Na prévia. Agora podemos ver que, se eu tiver um, então é 60. E agora eu sempre tenho que totalizar mais um. Ótimo Então, vamos configurar para menos também. Então, isso funciona praticamente da mesma maneira. Vou adicionar outra ação, definir a variável e definir o total, dois, total. E nesse caso, menos o preço atual. Se dermos uma olhada nisso em nossa prévia, então você pode ver que agora sobe e vai cair novamente. Se você está se perguntando, por que estamos usando variáveis e não simplesmente adicionando mais 60, então a melhor coisa sobre isso é que, se configurarmos tudo em variáveis, poderíamos simplesmente alterar o preço aqui. Então, digamos que estamos alterando esse preço para at e agora tudo seria atualizado. Portanto, não importa onde em seu arquivo esteja usando isso, tudo sempre usaria os valores corretos. 39. VARIÁVEIS: 05 instruções condicionais: Declarações condicionais com variáveis. Então, aqui temos nosso contador novamente. Portanto, temos mais e menos. E vamos dar uma olhada na configuração rapidamente. Portanto, o sinal positivo configurado para contador aumenta toda vez que eu pressiono em 100. E o mesmo vale para o negativo, só que diminui 100 Agora aqui eu tenho meu zero. E isso é dito para a variável do contador. Aqui embaixo, eu tenho uma barra, e aqui eu tenho uma forma. Vamos pegar essa forma. E você pode ver que isso é x2 zero. Então, essa é na verdade a variável que eu apliquei aqui. Então eu apliquei o contador em zero. Se dermos uma olhada em uma coleção, estou usando uma coleção anterior aqui, mas na verdade estou usando apenas essa variável de contador. Agora, o que eu quero que aconteça é que, se chegar a 500, o que significa que minha barra aqui está cheia, então eu quero pular para a tela que diz u1 hover Quero que esse número aqui que ganha seja definido como o número que aciona Agora, eu poderia fazer isso manualmente porque sei que quero que sejam 500, mas é muito mais suave Se eu configurar isso como uma variável, adicionarei outra, que chamarei de limite Então, neste limite atual, eu sei que quero que sejam quinhentos Isso vai ser quando eu vou acionar meu novo evento. E, na verdade, vou vincular este aqui, dois a 500, só para ter tudo bem e arrumado Vamos limpar isso por um momento. Aqui vamos nós. Vamos ver como isso ficaria atualmente. Então, vou abrir a pré-visualização com shift e barra de espaço. E eu posso ver que se eu adicionar mais e se eu adicionar menos, isso vai em etapas de 100s E com 500, isso é o que eu quero. Esse bar está cheio. No entanto, agora simplesmente ultrapassaria esse número. E eu queria, assim que chegasse, passar para minha nova tela. Vamos passar para o protótipo e selecionar nosso botão de adição Ou o que temos atualmente é que, se clicarmos nele, ele aumentará em 100. Então, vamos clicar em mais e adicionar uma ação, e queremos adicionar uma ação condicional Agora, aqui posso dizer se o contador e você pode ver que recebo algumas predefinições é igual ao meu limite Então, o que eu quero que isso faça é adicionar uma ação, qual eu queria navegar. E agora eu posso escolher aqui a página quando eu configurar. Também posso escolher como quero que naveguemos. Tão inteligente, anime isso. Vou deixar isso imediatamente, por enquanto. Agora você pode se sentir tentado a adicionar algo assim, definir a variável aqui e, em seguida, realmente usar essa parte Então use contador e depois contador mais 100. E então você pode simplesmente excluir essa parte aqui. No entanto, não faça isso. Ainda funcionaria, mas o que aconteceria é que ele pularia para 500 e só então, da próxima vez que você clicar, ele pularia para o nosso vento. Então, o que você pode fazer é simplesmente deixar isso vazio porque importa em que ordem as coisas acontecem. Então, primeiro vamos para o balcão para aumentar se clicarmos. E então queremos que a Figma verifique se já estamos atingindo nosso limite Vamos experimentar isso. Vamos selecionar essa área aberta no Fire Preview e você pode ver que pulamos nas etapas de 100. O retrocesso ainda funciona. Não precisamos fazer nada aqui. E quando chegamos aos quinhentos, estamos pulando para o nosso novo E observe como isso realmente aumenta no momento em que atingimos esse número Quero ressaltar algo que você pode encontrar ao trabalhar com declarações condicionais Então, aqui eu tenho um exemplo e é quase idêntico. E, na verdade, estou usando exatamente a mesma coleção para isso. Então, o que está acontecendo aqui é que eu tenho um contador. Vamos pular para a prototipagem. E usamos este antes que você possa ver o conselho subir um a um. O total aumenta de acordo com o preço. Então esse será o total. Eu queria dizer. Se o preço total atingir o limite, que ainda está em 500 , pule e diga que é frete grátis No entanto, se dermos uma olhada nisso , você verá que isso realmente não está funcionando. Estou ultrapassando meu limite de 500 e nada muda. Se você está trabalhando com declarações condicionais , precisa ser muito, muito preciso Portanto, toda a configuração está correta. No entanto, diz que é igual ao limite. Portanto, antes que isso funcionasse, no entanto, nunca alcançaremos exatamente 500 como múltiplo de 60. Então, vamos nos livrar disso e dizer que o total é maior que. E agora podemos usar nosso limite novamente. E agora vamos voltar atrás e ver se isso está funcionando. Você pode ver que estamos subindo, estamos chegando a 500 e estamos pulando para a nova tela com frete grátis E agora também precisaríamos considerar nosso ponto negativo. Então, se eu clicar em chorões, também tenho uma declaração condicional aqui agora e estou voltando para minha Sim, podemos até sair com uma página se adicionarmos alguns booleanos à equação 40. VARIÁVEIS: 06 instruções condicionais e booleanos: Prototipagem com booleanos e variáveis. Então, atualmente, temos uma configuração como esta, onde temos Vamos executá-la. Temos um moletom com o preço de 60. Podemos adicionar isso à nossa cesta. Isso aumentará o número e aumentará o preço total. E então, quando atingimos esse limite de 500 pulando para esta nova página, com frete grátis E se reduzirmos os valores , estaremos recuando. Então, isso funciona bem, mas podemos realmente reduzir isso para apenas uma página se usarmos booleanos Então, aqui estou uma página que já inclui o frete grátis e, o mais importante, tudo isso está configurado como layout automático. Vamos dar uma olhada no que está acontecendo atualmente aqui. Então, se eu clicar em mais, adicionarei um item e o preço total aumentará de acordo com o preço dos moletons Agora, vamos abrir nossa coleção. Podemos ver que temos o contador, que é este aqui. Então temos o preço, que está aqui, nosso total, que vinculamos a este. Como você pode ver, temos o limite, que dissemos em 500 Agora vou adicionar outra variável, e vou chamá-la, que será um frete grátis booleano por padrão Vou definir isso como falso. Agora, primeiro de tudo, preciso vincular esse frete grátis a esse valor booleano Vamos selecioná-lo. Em seguida, no painel Propriedades abaixo da camada, clique no olho, mas não clique nele. Assim, certifique-se de que clique com o botão direito do mouse e, em seguida, você obterá as propriedades E agora clique em frete grátis, que está definido como falso. E essa parte do frete grátis vai desaparecer. Você ainda pode vê-lo no menu Camadas. Ok, agora vamos configurar um pouco de lógica. Então, vamos passar para Prototipagem e apertar nosso botão de adição aqui Então, o que eu quero fazer agora é adicionar uma declaração condicional E quero dizer que, se o total for maior que o limite, o que eu quero fazer é definir a variável de frete grátis de dobras Se eu voltar para menos, eu queria fazer o mesmo Então, eu quero adicionar uma declaração condicional. E eu quero dizer que se o total for menor que o limite definido, o que eu quero fazer é definir a variável de frete grátis de volta como falsa Agora vamos fechar isso e dar uma olhada. Se isso fosse. Se eu clicar em mais, estamos subindo, atingindo nosso limite e o frete grátis E eu posso ir mais longe. Mas quando eu desço e alcanço o limite novamente, desligo o frete grátis 41. DOCUMENTO: 01 protótipos de documento com fluxos: Então, depois de terminar seu protótipo, você deseja compartilhá-lo com outras pessoas. Vamos dar uma olhada nas maneiras pelas quais podemos fazer isso. Então, aqui eu tenho um exemplo de protótipo, e você pode ver que estou trabalhando na mesma página no meu design móvel e no design do meu desktop. E você também pode ver que eu já tenho diferentes configurações de fluxos. Se eu clicar no fundo cinza durante a prototipagem, você poderá ver aqui embaixo uma visão geral de todos os meus fluxos. Então, o que eu gosto de fazer é dar a eles um pouco de estrutura. Então, eu uso mop para fluxos móveis e mortes para fluxos de desktop. E então eu posso ter o mesmo fluxo, então faça o login, então eu tenho um login móvel e um login de mesa. E então dois estariam em navegar e adicionar. E você pode ver que atualmente só tem essa configuração para dispositivos móveis. Eu também posso fazer isso aleatoriamente aqui, por exemplo, eu posso simplesmente movê-los e depois classificá-los na ordem ou renomeá-los da maneira que eu preciso. Agora, vamos entrar em nosso modo de apresentação. Você pode ver aqui no lado esquerdo que eu os tenho bem ordenados e, portanto, posso vê-los no celular e no desktop um ao outro, basta clicar em todos eles e, obviamente, eles se conectarão com o protótipo inteiro. Mas ainda posso pular para seções específicas que quero destacar. Agora, isso é muito bom, mas posso adicionar uma camada adicional de visão geral para todos que estão inserindo meus arquivos. Observe que, quando passamos o mouse sobre um desses fluxos, obtemos um link aqui para que possamos clicar em Copiar link. Então, por exemplo, para o login móvel. E então o que eu gosto de fazer é criar uma pequena visão geral. Aqui eu tenho uma página para minha visualização móvel e outra para meu desktop. E, a propósito, você pode ter apenas um se estiver trabalhando em nosso aplicativo móvel ou também pode ter vários tablets para pés. Isso realmente depende do que você está trabalhando. E então tudo o que eu faço aqui é digitar os diferentes fluxos que eu quero, ou talvez alguns deles eu ainda não tenha trabalhado. Em seguida, basta selecionar seu texto, vinculá-lo e copiar o link que acabou de copiar do lado direito aqui a partir dos fluxos dentro desta pequena visão geral. Portanto, qualquer pessoa que entre no meu arquivo pode clicar diretamente nesses links para não precisar entender que precisa acessar o Preview ou algo assim. Eles simplesmente clicam aqui e , em seguida, a pré-visualização abrirá. E isso dará uma visão geral do meu protótipo. Ele sempre começará diretamente no fluxo ao qual eu adicionei o link. As pequenas bolhas ao lado estão algo que eu gosto de usar. Então você pode ver aqui na minha guia de design, isso é como se fosse de um arquivo externo. Então, vamos pular até lá. Vamos abrir esse arquivo. E aqui eu simplesmente tenho as variantes configuradas. Assim, posso ver em que fase está o teste e em que fase está o protótipo. Então, aqui está o primeiro: o protótipo está em andamento. Então, por exemplo, veja o livro, ainda não terminei esse fluxo e, portanto, ele precisa ser testado. E aqui você pode ver que o login no protótipo sempre foi, já foi concluído e está sendo testado no momento. Você pode absolutamente personalizar isso de acordo com suas necessidades. Você pode adicionar um nome de responsabilidade, você pode adicionar uma data, o que você precisar aqui. Gosto muito disso porque, dessa forma, já podemos planejar todos os fluxos e ordenar diferentes etapas que queremos construir como um protótipo. E também podemos ver o que acontece nos testes. E aqui, por exemplo, o teste já foi feito e, portanto, precisamos voltar e o protótipo precisa de adaptação. Portanto, provavelmente há algum feedback do teste e vou reformular meu protótipo adequadamente. Além disso, como isso está configurado em um quadro, posso simplesmente pressionar Play e usá-lo como um slide de apresentação. E lembre-se também do nosso pequeno truque de que podemos incorporar molduras animadas na apresentação. Então aqui, esses são meus protótipos inteiros, então esta é minha moldura de rolagem vertical, e eu simplesmente coloquei isso em minha apresentação aqui. E agora eu posso jogar isso. Vamos desligar esse. E eu posso ler isso. Posso clicar em elementos individuais e posso realmente configurar meu design assim. E também posso mostrar minha visão geral com os fluxos. Assim, posso fazer uma apresentação que inclua minha prototipagem. 42. DOCUMENTO: 02 links de protótipos de compartilhamento: Você também pode convidar pessoas para seu arquivo ou apenas seu protótipo enviando um link para elas. Há algumas coisas a considerar ao fazer isso. Você pode convidar pessoas diretamente por meio do link de compartilhamento para seu arquivo de prototipagem. Eles precisariam então apertar o botão play e poderiam ver o protótipo em ação. Agora, na maioria das vezes, você pode não querer pessoas em seu arquivo de design. Você só quer apresentar a eles o protótipo. E isso pode estar apenas no seu protótipo, embutido na visualização da apresentação com alguns fluxos diferentes. Ou pode ser uma apresentação que você configurou e pode ser visualizada e clicável na visualização da apresentação. Então, em vez de compartilhar o arquivo inteiro, na visualização de prototipagem, observe como o botão muda para compartilhar o protótipo. Então, em nosso arquivo de design, você verá que ele se chama simplesmente Compartilhar. E então, em nossa visualização de prototipagem, Compartilhar protótipo, se clicarmos nela, compartilharemos apenas o link para essa visualização de prototipagem. Ele incluirá todos os fluxos que você configurar. Agora, antes de compartilharmos nosso protótipo, queremos ter certeza de que ele está configurado exatamente da maneira que queremos que a pessoa do outro lado o veja. Portanto, na opção, podemos escolher o tamanho que queremos exibir nosso protótipo. E então também podemos escolher se queremos mostrar ou ocultar nossos fluxos. Então, tudo o que configuramos aqui será armazenado em nosso link de compartilhamento. E então a pessoa do outro lado obterá exatamente essas configurações. Isso não inclui apenas as configurações na visualização de prototipagem. Se voltarmos ao nosso design, lembre-se de que poderíamos, no protótipo, mostrar as configurações do protótipo para que você possa ouvir a cor de fundo definida. E o mais importante, poderíamos configurar um dispositivo. No entanto, você precisa ter um pouco de cuidado com isso se estiver apenas trabalhando, digamos, na visualização móvel. E agora vamos voltar atrás. Em seguida, podemos adicionar um dispositivo ao redor, o que é realmente muito bom para uma apresentação. No entanto, se você estiver misturando dispositivos móveis e desktops, observe o que acontece aqui, porque, em nossa visão de desktop na verdade seremos reduzidos a esse dispositivo. Portanto, se você estiver misturando dispositivos, certifique-se de que seu dispositivo esteja configurado como nenhum. Vou voltar para o primeiro fluxo onde eu queria começar. E agora posso pressionar compartilhar protótipo. Então, aqui eu posso convidar por e-mail, ou também posso definir a preferência pelo link. E aqui você pode escolher entre editar, visualizar e ser um protótipo. Agora, se você convidar com pode editar, isso significa que as pessoas têm acesso total ao seu arquivo e podem editar seu design. Isso também pode acarretar custos adicionais para novos editores. Portanto, tenha muito cuidado quando e se você compartilhar este. A visualização é gratuita, mas significa que as pessoas podem ver todo o seu arquivo de design. Agora, queremos ficar em Kent View prototypes, então estamos compartilhando apenas a visão de prototipagem , incluindo nossa visão geral do fluxo. E agora eu posso convidar por e-mail ou definir o link também, e simplesmente copiar um link e enviá-lo. Assim que as pessoas entrarem em seu arquivo, você também poderá editar seus direitos. Portanto, qualquer pessoa com o link agora pode simplesmente abrir esse link em seu navegador ou ele acessará o aplicativo Figma se ele estiver aberto. E você verá que, mesmo que eles não estejam logados, eles têm uma pequena prévia e ainda podem dar uma olhada no seu protótipo. Com o link. Você também pode abrir o protótipo se tiver um aplicativo FIG my instalado em seu dispositivo móvel. Agora, com este, você só precisa ter um pouco de cuidado, pois tamanho da tela que você configurou no Figma deve ser do mesmo tamanho que cabe no dispositivo físico que você está usando. Caso contrário, será esticado ou unido. E isso pode levar a resultados estranhos. 43. DOCUMENTO: 03 Documentação de componentes interativos para entrega: Vamos falar sobre como podemos documentar as interações e o Figma. Até agora, vimos como comunicamos nossa configuração para prototipagem em geral. Então, como podemos mostrar essas interações de uma página para outra. Mas acho que também precisamos realmente nos comunicar e, especialmente, documentar as microinterações. Então, o que acontece ao passar o mouse e todos os diferentes estados que estão embutidos em nossos componentes interativos. Seus componentes podem estar armazenados no mesmo arquivo em uma página separada, ou podem estar em um arquivo completamente diferente e você os extrai em bibliotecas compartilhadas por fio. Então, como estou trabalhando com um exemplo realmente simplificado apenas para mostrar como configurar a documentação, eu só tenho alguns componentes aqui e simplesmente os salvo em sua própria página. A propósito, se você quiser mover componentes de uma página para outra, não poderá simplesmente copiá-los e colá-los. Você precisa selecionar o componente ou componentes indicados, clicar com o botão direito do mouse e ir para a página. E você pode selecionar o destino para onde deseja enviá-los. Então, vamos usar este cartão aqui como exemplo e vou mostrar como documentar isso e como comunicar a interação e a pequena animação que estão acontecendo dentro do componente para você começar o desenvolvimento. Portanto, este é um conjunto geral de uso, mas você pode absolutamente ajustá-lo às suas necessidades. Mas vamos passo a passo. Então, antes de tudo, estou pegando todos os componentes e os movendo para essa estrutura que eu configurei. E observe como ainda é um conjunto de componentes. Mas assim que você o mover para uma moldura os pequenos componentes inscritos aqui desaparecerão. Então, estou me mudando para cá e você pode ver que eu tenho essa configuração. Então, eu tenho um cabeçalho que os dados sempre usam. Nesse caso, é um cartão legal, vou dar um número. E essa é a documentação. Eu tenho um pequeno selo aqui. Portanto, essa também é uma variante que diz que eu configurei abridores para você em outro arquivo. E como você pode ver aqui , há diferentes estágios. E então eu posso partir de uma prova muito difícil, que acontece um pouco, e progredir e assim por diante. Então, este aqui seria aprovado. Então, porque movi meu componente principal para dentro desse quadro. Se formos ao painel Ativos, você pode ver que ele tinha meus componentes locais, aquele que eu não movi em uma moldura que está flutuando por aqui. E assim que você a move para a moldura, esse é o nome da moldura aqui em cima. Depois, você pode abri-lo e ele ficará bem guardado por dentro. Então, isso vai dar uma ordem muito boa para todos os seus componentes. Então, o que eu gosto de fazer é simplesmente retirar uma instância. Então, eu também posso ter a instância aqui porque aqui, por exemplo, se reproduzíssemos esta folha de documentação , já veríamos a animação acontecendo aqui nesta instância. Você também pode adicionar outras informações. Então, por exemplo , eu gosto muito de fazer uma captura de tela. Então, aqui você vê todas as propriedades do seu componente. Vou adicionar isso aqui, adicionar um pouco de efeito e, em seguida, você poderá ter uma visão geral muito boa. Então, mesmo que todos possam ver isso, se clicarem em um componente, ainda estou deixando bem claro que esse componente contém propriedades diferentes. E uma dessas propriedades são os estados diferentes do padrão e você pode trocar para passar o mouse. Então, estou apenas destacando isso novamente. Não quero falar muito mais sobre documentação geral porque esse é um tópico diferente em um curso diferente que você pode fazer. Mas só para te mostrar, então eu vou dar uma olhada. Então, eu tenho minhas especificações configuradas aqui. Assim, você pode ver todas as medidas, como tudo se comporta. E eu sempre posso dar algumas informações sobre textos. E isso é, na verdade, uma parte do interesse no momento. Então aqui eu tenho minha animação. Então, o que eu faço é simplesmente ter uma instância aqui. Então, um padrão e , em seguida, o estado do mouse. E eu digo aqui, ao passar o mouse , diminuirá 800 milissegundos. E aqui nas minhas caixas de informações, posso simplesmente adicionar mais algumas informações. Aqui eu falo sobre o gatilho. Então, no meu caso, passe o mouse e descrevi a ação um pouco mais. Agora, já estou descrevendo isso com um pouco de CSS em mente. Isso não é necessário. Você também pode simplesmente descrever o que acontece. Mas se você quiser um pouco de notação CSS ou qualquer outra notação de código, basta ir para a guia Inspecionar. E observe também que você está compartilhando com o modo de visualização somente com seu desenvolvimento. Então, isso é o que eles vão ver automaticamente. E assim que eles selecionam qualquer elemento, essa é a informação deles. Então, o que eu fiz foi simplesmente copiar a notação CSS de backshadow, por exemplo , a partir daqui, você também pode mudar para iOS ou Android, dependendo do que está trabalhando. Se você está se perguntando de onde eu vim para a escala de transformação , quero te mostrar um pequeno truque. Então, agora, em meus componentes, disse aqui que as imagens têm exatamente o mesmo tamanho. E então, em vez de apenas alterar isso manualmente, você pode selecionar a imagem e pressionar K. E o botão K abrirá o menu de escala. E agora aqui você pode escolher um tamanho. Você também pode escolher por onde começar. Então, eu estou começando de baixo no meio, e depois estou adicionando 1,2, por exemplo e ele vai escalá-lo em 1,2. E agora você pode simplesmente usar essa escala, que será a mesma e CSS. E então, o que eu gosto de fazer é adicionar um pequeno botão de reprodução, porque na verdade não há nada como uma demonstração da coisa real para transmitir sua ideia. E como eu configuro isso é que o IS simplesmente desenha uma moldura e eu adiciono uma instância a ela. Portanto, a instância contém toda a interação com a qual você configurou um novo componente, disse Deixe-me mostrar. Se eu pulasse para a prototipagem , você pode ver aqui minha interação é configurada e, obviamente, como todas as outras instâncias, herdará esse comportamento. E agora, se eu clicar aqui no fundo, você pode ver que isso se chama animação do carro e o fluxo é chamado de cartão. E eu posso simplesmente copiar o link. E agora posso adicionar o link para exibir textos de animação. Então, assim que alguém clicasse em play, ele abriria nesse fluxo e eles podiam ver a Micro Interação como uma pequena demonstração. Obviamente, você também pode criar um link para todo o seu documento. Então, eu tenho um fluxo separado aqui. E, a propósito, se você pressionar Z, poderá alternar entre a exibição. Assim, você pode ter uma visão geral da página ou apenas uma visualização detalhada. E você pode ver que, na instância, todas as instâncias que você realmente está usando em seu design. Você também veria a interação deles. Eu configuraria uma página para cada componente que estou usando. E se houver uma animação, eu adiciono a parte da animação. Se você não tem nenhuma interação e, obviamente, não precisa disso. Se você está se perguntando, esta última parte aqui é simplesmente o comportamento responsivo. Portanto, é exatamente assim que meu componente e meu design se encaixariam no design, pois o tamanho da tela está mudando. Então você pode ver aqui que estou usando uma grade para meu design e ela sempre seria o mesmo componente simplesmente alterando o número de colunas que ela ocupa. Testar e documentar o comportamento responsivo é um grande tópico separado. Se você estiver interessado, tenho um novo curso de aprendizado totalmente separado sobre isso. 44. DOCUMENTO: 04 incorporação em documentações externas: Você pode usar um sistema externo para documentar seu design e código no arquivo Figma e no compartilhamento Você também pode selecionar obter código de incorporação e simplesmente copiar esse código para incorporar. Alguns aplicativos também se conectam diretamente com o Figma. Você pode obter uma lista dos aplicativos atualmente suportados site da Figma. Em seguida, clique em Começar, conecte o Figma a outros aplicativos e incorpore o Figma. E então, no final desta página, você encontrará uma lista de todos os aplicativos atualmente suportados. E observe que geralmente são aplicativos baseados em navegador. Assim, você pode ter sua documentação externa no Notion, confluência do Dropbox. E o que eu realmente gosto é zero máximos. Então, vou mostrar um pequeno exemplo como a incorporação funciona com sua altura. Portanto, um dos meus favoritos absolutos para documentação era zero height , o exemplo do sistema de design de uma década que você pode acessar por meio do design de pontos de gramado de uma década. Agora, aqui, clicaremos em digital. E essa página que você está vendo aqui, tudo isso tem altura zero embutida. Então, queremos ver como eles documentaram suas interações. Então, vamos clicar em Componentes e em um detalhe muito bom aqui também. Primeiro, você obtém uma visão geral de todos os componentes e seu estado atual para diferentes versões. Vamos clicar no primeiro, um botão, e você verá que podemos escolher entre web, Android e iOS. Então, vamos usar a web agora mesmo. Então, aqui eles configuram sua documentação. Assim, obtemos uma anatomia geral do botão, exemplos de uso, especificações e assim por diante. E são hidratados, dão a você a oportunidade construir isso da maneira que você quiser. Você pode ter páginas separadas para design e código, ou pode ter tudo junto. Realmente depende de você. E agora o que queremos ver é como eles nos mostram os auxiliares de colheita. Então você pode ver que eles chamam isso de vitrine. E na vitrine, há uma incorporação. E você pode ver as diferentes ajudas de colheita desse botão. Agora vamos voltar aos componentes e você pode ver isso, por exemplo, vamos colocar isso no cartão. Eles também vinculam tudo isso à Figma. Assim, ele pode ver novamente o uso da anatomia. E aqui, infelizmente, não vemos o comportamento. Mas o que eu tenho é muito bom para mostrar um pequeno vídeo sobre como usar isso no Figma. Então, aqui eles também descrevem como diferentes estados são usados. E, claro, eles também têm uma seção que explica como os membros da equipe se conectam aos arquivos do Figma. E, a propósito, você também pode ter uma cópia desses arquivos do Figma e jogar com eles Se não fizer parte da equipe terrestre da década, basta acessar a seção da comunidade Figma, pesquisar Decadron e duplicá-los e jogar com eles. Então, vamos experimentar nós mesmos. Em sua altura. Podemos obter um projeto gratuito e experimentá-lo gratuitamente. E este é meu projeto gratuito e eu posso personalizar tudo sobre isso aqui. E aqui você vê a vista que já é bem parecida com a que vimos com o Decadron. Então, o que eu fiz foi nos componentes, adicionei apenas uma nova página chamada cartão e você pode personalizar todas essas seções de acordo com suas necessidades. Então aqui você pode ver que eu já fiz upload de algumas coisas e como isso funciona é que você pode se conectar diretamente ao seu arquivo Figma. E então eu já configurei isso aqui. Você pode ver que basta adicionar o link ao seu arquivo em zero. Isso vai te ensinar como fazer isso. E então você pode examinar todos os seus elementos. Então, aqui eu posso ver minhas cores, estilos, importantes, meus componentes, minhas diferentes páginas. Então, tudo o que fiz aqui foi selecionar o cartão e você pode ver que isso já está editado. Se eu quisesse adicionar o avatar, eu poderia simplesmente selecionar esta impressora para adicionar. E então você pode ver que ele carregaria todos os estados do avatar. Portanto, ele também carregaria um estado padrão e o estado de foco para mim. Vamos nos livrar disso porque não queremos isso neste exemplo. Então aqui você pode ver que eu tenho meu cartão, então eu tenho meus diferentes estados. E também com as configurações de layout aqui, você pode personalizar isso. Então, eu poderia ter maneiras diferentes de mostrar isso. E também posso acrescentar que gosto muito das propriedades do componente. Então, aqui você tem o mouse e o padrão agora e também pode adicionar mais e adicionar nós e assim por diante. Então, eu adicionei minhas especificações aqui, mas na verdade eu nem precisaria delas porque você pode simplesmente clicar em qualquer uma das que você importar do Figma e, em seguida, ele abrirá seu próprio modo de inspeção. Então, aqui você pode simplesmente clicar nos diferentes elementos e obter todas as informações diferentes na visualização de inspeção. Então, aqui você também pode ver que nesta página eu estou configurando tudo, desde o design, da Figma. E então eu teria uma página separada aqui, onde, a partir do código, poderíamos conectar agora o componente da placa que está codificado. Então, é realmente uma maneira fantástica de reunir tudo em uma página. E como eu disse, essa é uma configuração que a altura zero sugere. Você também pode misturar tudo isso em uma página para que você possa ter seu design Figma e, em seguida, a conexão de código abaixo que realmente depende de você. Então, mais abaixo, você pode ver que eu enviei alguns exemplos. Então, aqui eu tenho as imagens, para que você possa ver como esse componente está sendo usado. Não temos e o que queremos acrescentar agora é o comportamento de interação. Então, primeiro eu quero adicionar meu protótipo. Então, se eu clicar em Jogar, esse é o protótipo que eu quero adicionar. Então, se eu clicar aqui, isso vai para uma nova página e também tem minhas microinterações incorporadas. Então eu vou para o Share Prototype e agora preciso copiar o link para a altura zero. Eu não preciso de uma incorporação. Ok, vamos voltar para a altura zero. E eu já consigo ver para exibir um protótipo, usar seções embutidas. Então, eu clico aqui e preciso selecionar não o código, não o upload do design, mas na cama. E agora eu simplesmente insiro meu link Figma aqui. E você verá que ele está carregando diretamente meu protótipo. Agora posso puxar a janela para o tamanho que eu quiser. Vamos deixar isso um pouco maior, porque você pode ver que está meio que espremido na parte superior. Então, agora você pode ver isso bem. Agora você pode ver que ele está incorporando meu protótipo e eu posso simplesmente clicar nele. A propósito, se você tiver mais fluxos, copie o link com uma guia Fluxos aberta no Figma. Em seguida, ele também mostrará os fluxos nesta prévia. Agora também queria adicionar essa pequena animação aqui do componente de forma isolada. Portanto, não preciso de toda essa documentação porque posso configurar tudo isso em altura zero. O que eu gosto muito de fazer não tenho em Figma e, por exemplo, copio esses elementos com mais de 20 de altura para explicação. Mas, por enquanto, tudo que eu quero é esse. Então, vamos pressionar play para acessar a guia Prototipagem. E agora vou fechar meus fluxos porque, caso contrário, isso apareceria e eu só quero mostrar isso. E vamos para Share Prototype, copie o link. Alguns realmente vão adicionar isso primeiro. Então, novamente, eu preciso usar o Embed. E então eu copio o link que acabei de receber da minha prévia. E é o mesmo que fizemos antes. Então agora podemos abrir a janela aqui. E isso vai continuar do jeito que você configurou isso. Então agora eu tenho essa pequena interação e então você pode ver meu componente em ação. Portanto, essa é a aparência de nossa página para qualquer pessoa que a visitasse , para que ele pudesse ver que temos nossos componentes com o Inspect. E aqui embaixo temos nossos exemplos. E, no final, temos nossas microinterações mostradas, bem como nosso protótipo rolável clicável aqui. 45. Obrigada: Parabéns por terminar este curso. Sinta-se à vontade para entrar em contato conosco no moon learning dot io, estamos sempre interessados em ouvir seus comentários. Você também faria um grande favor se pudesse dedicar um minuto e deixar um comentário aqui. Se você gostou deste curso , certifique-se de dar uma olhada em nossos cursos adicionais. Na Moody Learning dot io. Cobrimos todos os assuntos, desde os fundamentos do design de UX UI até o Figma e até mesmo alguns conceitos básicos de código. Não deixe de visitar nosso site no Moody Learning dot IO, onde você também pode se inscrever em nosso boletim informativo.