Curso de quebra-cabeça super fácil

1. Introdução: Olá a todos. Sou o Ruanda vai bem. E eu gostaria de lhe dar as boas-vindas ao curso intensivo super fácil da Figma. Neste curso, estaremos aprendendo todos os conceitos básicos da Figma, essa é a parte de design, as várias características do Pigma. E também estaremos aprendendo a criar protótipos na Figma. E tudo isso será feito dentro de 16 minutos. Agora vamos ver o conteúdo deste curso. Agora, esses são os conteúdos deste curso. E eu criei este curso de tal forma que é muito amigável para iniciantes. que significa que se você não tem ideia do que é Figma, ou se você é novo na Figma, você quer aprender como funciona. Você é novo em projetar e criar protótipos como um todo. Não se preocupe, estaremos aprendendo do zero. Vou abordar todos os aspectos de design e prototipagem usando o aplicativo Figma. Primeiro, estaremos cobrindo a parte de instalação do sigma, como instalar o aplicativo de desktop. Em seguida, seguiremos em frente com alguns controles básicos como criar o quadro usando o comando zoom in, zoom out, usando a ferramenta manual, que são as necessidades básicas para usar o aplicativo Pigma. E então seguiremos em frente com a parte de design. Aprenderemos sobre formas, componentes de massa, layout automático, todos os recursos da Figma que são necessários para criar projetos na Figma. Em seguida, seguiremos com o uso de plugins. Existem tantos plugins na Figma, que facilitam nosso trabalho. Aprenderemos como usar plugins para tornar nosso projeto ainda melhor. Em seguida, seguiremos com a parte da comunidade Figma. Vocês são vários criadores carregam seus próprios projetos e podemos duplicar esses projetos e modificá-los. Para criar nosso próprio projeto. Podemos copiar os vários elementos dos criadores e podemos usar nossa própria criatividade e nos inspirar neles. Aprenderemos como usar a comunidade Figma para tornar nosso projeto ainda melhor. E seguindo em frente, também aprenderemos como criar protótipo na Figma, aprenderemos os vários recursos envolvidos na prototipagem. E então implementaremos o protótipo para criar um projeto simples, um aplicativo móvel. Então, é assim que o fluxo do curso vai ser. Primeiro, aprenderemos a parte de design. Vamos cobrir vários recursos do Pigma, como quadros, componentes de massa que vamos olhar sobre eles um a um. Depois disso, aprenderemos como usar os plug-ins e os recursos da comunidade Figma para tornar nosso projeto ainda melhor e nosso trabalho muito mais fácil. E depois de aprender como a prototipagem funciona, criaremos um projeto que implementa o protótipo sem mais atrasos. Vamos começar. 2. Instalação na App de Desktop Figma: Olá, todo mundo tem Walker e eu gostaria de lhe dar as boas-vindas a este figma, as pontuações de QI de alguém. Agora Figma é uma ferramenta de design gráfico e prototipagem. Agora, neste curso, vamos abordar todos os conceitos básicos da Figma que você precisará para design gráfico, design de interface de usuário ou prototipagem. E se você é completamente novo na Figma ou se já instalou o Figma, mas não sabe como funciona, então este é o lugar certo para você. Vamos cobrir rapidamente todos os conceitos básicos do magma que você precisa. Vamos começar. A primeira coisa que você vai precisar é o aplicativo de desktop Figma. Se você já estiver instalado, ele avalie. Vamos voltar para você em um minuto. E se você não instalou ou o aplicativo de desktop Figma, basta acessar qualquer navegador e procurar por download Figma. Aqui você pode ver o primeiro resultado que aparecerá aqui. Figma.com. Basta clicar nele. Agora você pode ver que há uma opção para aplicativo de desktop. Você pode baixar isso para Mac OS ou Windows. Agora, estou usando o Windows, então basta clicar no Windows e esse é um processo de instalação simples. Basta baixar o arquivo e instalar o aplicativo Figma. Depois de instalar o aplicativo de desktop Figma, a interface ficará parecida com isso. Agora somos duas opções. Você pode fazer login com sua conta Figma ou criar uma nova. Agora eu já tinha uma conta Figma, mas só para ir junto com você, vou criar uma nova. Vou clicar em Criar uma orelha direita. E agora seremos redirecionados para o navegador. Agora aqui você pode criar na conta Figma usando seu e-mail ou senha. Ou você pode simplesmente entrar com o Google. Então, basta clicar em continuar com o ouvido direito do Google. Agora, existem algumas opções que você pode simplesmente preenchê-lo. E depois de terminar, basta clicar no botão Criar conta. Agora, o processo de inscrição está concluído. Você pode ver que há uma opção, abra o aplicativo para desktop. Vou clicar nele e apenas clicar em abrir Figma. Agora estamos inseridos no aplicativo de desktop Figma pela primeira vez. E está nos pedindo um nome de equipe. Você pode clicar em fazer isso mais tarde. Por padrão, o nome da equipe será o nome do seu e-mail. Então aqui você pode ver que diz que Rona é a equipe do Goggles. Então, vou clicar nisso mais tarde. E aqui há duas opções. Basta clicar no Explore sozinho. Agora você está fora. Alguns arquivos padrão fornecidos pela Figma simplesmente os ignoram e vão para a parte de design. Agora, se você quiser criar algo ou criar algo, a primeira coisa que você precisa fazer é clicar no sinal de mais aqui. Então, vou clicar neste sinal de mais. E ele abre na página Sem título. Agora estamos na seção de design. Você pode ver que o nome é sem título e processado como rascunhos. Se você quiser alterar o nome, você pode apenas fazer um único clique nele e agora vamos dar um novo nome a ele . Basta clicar do lado de fora. 3. Controlos básicos no Figma: Agora, se você quiser projetar algo na vida real, digamos que você queria desenhar pintura. A primeira coisa que você precisa é de um papel ou uma tela. Da mesma forma na Figma, precisamos de uma tela para nossos projetos. Agora essa tela é chamada, Vamos molduras. Se você quiser definir um quadro para seus projetos, basta clicar no quadro ou simplesmente apertar a tecla F no teclado. Vou apenas apertar a tecla F no meu teclado. Agora, no lado direito, você pode ver que vários quadros estão aparecendo agora essas são as dimensões padrão para vários quadros. Você pode ver para o telefone, há o iPhone 13 Pro Max. Estas são as dimensões da tela do iPhone. E, da mesma forma, se você quiser para a área de trabalho, você pode ver que essas são as dimensões de quadro padrão para a área de trabalho. Agora acabei de selecionar essa opção de área de trabalho para uma malha exibida. Agora, antes de começarmos a criar qualquer coisa, existem alguns comandos e chaves que eu gostaria que você soubesse. A primeira coisa é o comando zoom in e zoom out. Seu próximo quadro superior. E se eu quiser diminuir o zoom a partir deste outono, tenho que fazer é segurar a tecla Control e rolar para baixo no mouse. Você pode ver que estamos diminuindo isso. E da mesma forma, se você quiser ampliar, você pode segurar a tecla Control novamente e rolar o mouse para cima. Agora, as teclas de controle para o usuário do Windows, se você tiver um dispositivo Apple, então acho que será a tecla Command em vez da tecla Control. Portanto, as funções são semelhantes no olhar de líder, controle e comando diferentes. Agora, o próximo comando é a ferramenta manual. Agora vamos dizer que eu quero arrastar essa coisa e mantê-la no lado esquerdo. Até agora, tudo o que você precisa fazer é segurar o botão de espaço no teclado. E agora você pode ver que o cursor é não faça um ícone de mão usando o mouse, você pode simplesmente clicar e arrastar essa coisa qualquer um que quiser. Então eu vou arrastar isso para o lado esquerdo. É assim que você pode arrastar vários elementos. Esses dois são muito importantes, ferramenta Mão e zoom in, comando de zoom out. Agora eles podem parecer insignificantes, mas enquanto você está projetando vários elementos no quadro estão fora do quadro. Portanto, a ferramenta de arrastar, ampliar a parte do modo de zoom é muito útil. Portanto, lembre-se de que se você quiser ampliar e diminuir o zoom, mantenho pressionado a tecla Control ou a tecla Command para usuários da Apple e basta rolar o botão do mouse para baixo. Para a ferramenta manual, você precisa segurar o botão de espaço e apenas arrastar seu quadro ou vários elementos do seu arquivo Figma, qualquer um que você quiser. Isso é tudo para a sessão de introdução. Na próxima sessão, aprenderemos vários recursos motores do sigma. Então, isso é tudo. Obrigado. 4. Como criar designs no Figma: Na Figma, se você quisesse fazer alterações em qualquer elemento específico, você precisa selecioná-lo primeiro. Então, selecione qualquer elemento em particular, digamos moldura ou forma ou qualquer coisa. Você precisa clicar nele. Agora você pode ver a área de trabalho um quadro foi selecionado. Agora, se você quiser desmarcar esse quadro, basta clicar fora. Agora, há outra maneira de selecionar esses elementos também. Você pode ver aqui no lado esquerdo na seção da camada, há a área de trabalho. Você pode simplesmente clicar aqui. Isso é eleito. E cada elemento que você adicionar em sua página de design será adicionado na seção de camada. Cada elemento atua como uma camada individual. Então, vamos passar por cima disso na parte posterior com um exemplo. O nome do quadro que adicionamos na sessão anterior por padrão é desktop um. Se você quiser alterar o nome, basta clicar duas vezes aqui no estoque um na seção de camada. A partir daqui, você pode alterar o nome do elemento. Então, vou mudar o nome desse quadro para nos dizer. Quando terminar, basta clicar em Enter. Agora você pode ver que o nome desse quadro foi alterado. Vamos adicionar outra página da porta do quadro. Você pode apenas apertar o botão F no teclado. Agora, se você der uma olhada no cursor, você pode ver que há um sinal de mais. Então, se eu apenas segurar o botão esquerdo do mouse e arrastar essa coisa de qualquer maneira, eu quero, posso adicionar um quadro de minhas próprias dimensões. Você também pode ver as dimensões ao vivo. Então, vou deixar este botão do mouse. E aqui está meu outro quadro. Agora, se você quiser mover esse quadro para qualquer lugar, basta puxar o botão esquerdo do mouse e arrastar este quadro para qualquer lugar que desejar. E você pode apenas alinhar essa orelha direita. Ok, Então as dimensões padrão deste quadro ou 1576 e em 1053, se você quiser alterar essas dimensões, tudo o que você precisa fazer é apenas do lado direito, você pode ver que há a largura e a altura. Então, a partir daqui, você pode fazer alterações em suas dimensões. Você pode adicionar dimensões personalizadas próprias. Vou apenas adicionar algumas dimensões. Vou mudar a largura para 1080 e mudar a altura para 109 para 0. Você pode usar o botão zoom in, zoom out e a ferramenta manual que disse a tela de uma forma que você se sente confortável para editar. Então, vou mantê-lo assim. Agora, se você der uma olhada na seção da camada no lado esquerdo, você pode ver que há o quadro um. Este foi o segundo elemento que adicionamos. Agora vamos em direção à parte de design. Então, vou selecionar este quadro um aqui. Agora, se você der uma olhada no lado direito, você pode ver que existem várias opções para a peça de design. A opção de largura e altura que acabamos de ver. Há outra opção que é a opção de ângulo para rotação. Você pode simplesmente inserir o ângulo da linha. Você quer girar essa coisa. Se eu tiver acabado de inserir dez e clicar em Enter, você pode ver que é assim que ele gira. Agora você também pode girar essa coisa manualmente. Você só precisa levar o mouse perto de uma das bordas. E você pode ver as alterações do cursor no ícone Rotação. E a partir daqui você pode segurar o botão esquerdo do mouse e arrastar essa coisa de qualquer maneira, você quer girá-la. E no lado direito na parte do design, você pode ver uma visualização ao vivo das mudanças de ângulo que você está fazendo. Eu vou entregá-lo para 0 mais uma vez, que ele está seguindo em frente. Há também o recurso de raio de canto. Então você pode evocar idéias comuns para essa coisa. Agora, o que é raio de canto? Agora vamos ampliar e dar uma olhada nessa borda, essa ideia. Então aqui você pode ver que este é um retângulo perfeito. As bordas são linhas retas. Então agora vou selecionar este quadro e adicionar um raio de canto aqui. Então, vamos adicionar um raio de canto de 50. Agora você pode ver que há um raio de canto em direção ao quadro. Isso também sobre o raio do canto. Agora, o recurso de layout automático e grade de layout, explicarei na parte posterior com um exemplo. Agora vamos falar sobre a seção de campo. Preencha exatamente como o nome diz, aqui está a sensação de seus elementos. Atualmente, selecionamos o quadro, então vamos alterar o preenchimento desse quadro. No momento, o preenchimento deste quadro foi selecionado como branco. Agora, se eu clicar nessa cor aqui, você pode ver que somos várias opções para a cor desse elemento. Você pode selecionar qualquer cor que quiser. Você também pode ajustar a opacidade dessa coisa mudando aqui. Basta selecionar a cor que você deseja. Você terá uma visualização ao vivo, bem como fará as alterações, apenas começando como verde por enquanto. E há muitas outras opções para esse campo também. Se eu apenas expandir essa opção aqui, você pode ver que há preenchimento linear, radial , angular, diamante e imagem também. Você pode simplesmente explorá-los um a um. Existe essa opção de preenchimento linear. Você pode alterá-los da maneira que quiser. Há essa opção de imagem também, o que significa que você pode adicionar uma imagem como uma sensação do elemento. Então, vamos selecionar a opção de imagem. A partir daqui, você pode fazer upload de uma imagem do seu dispositivo. Adicionamos uma imagem como preenchimento do quadro. Agora, há os traços, efeitos e opções de exportação, então vamos dar uma olhada neles um a um. Portanto, atualmente, a opção Stroke não está ativada. Portanto, se você quiser ativar a opção traçado, você pode ver que há o sinal de mais. Basta clicar nele. E agora a opção de traçado foi ativada, é a cor do traçado. Assim, você pode selecionar qualquer cor que quiser. Vou apenas tomá-lo como lido. E o download é o tamanho do traçado. Você pode simplesmente arrastar essa coisa e selecionar o tamanho do traçado. Ou você pode simplesmente inserir manualmente o número desejado. Acabei de dizer que o garoto tem dez. Então, agora adicionamos um traço vermelho ao nosso quadro. E seguindo em frente, há a opção de efeito. Portanto, atualmente, isso não está ativado. Então, vamos clicar no sinal de mais. E agora há Drop Shadow, camada de sombra interna borrada e assim por diante. Você vai explorar esses recursos por conta própria. Agora vou dar-lhe um exemplo de, digamos soltar sombra. Basta selecionar este ícone aqui e alterar os valores da maneira que você quiser. Adicionamos uma sombra agora. Agora, se eu apenas ampliar, você pode ver que há a sombra aqui. Depois, há o recurso de exportação. Então, vou clicar neste sinal de mais. Você pode ver atualmente eu selecionei o quadro um. Estamos falando de explorar este quadro um. E agora há opções que vamos exportar esses tipos de arquivo. Portanto, há PNG, JPG, SVG, PDF e assim por diante. Vamos selecionar PNG. E agora vou clicar em Exportar quadro um. Agora você pode salvar isso em seu dispositivo. Então, vou clicar em venda. Agora, esse quadro foi exportado como PNG em nosso dispositivo. Ok, então aqui está o quadro. Você pode ver que esse foi o quadro que exportamos. É assim que ele vai parecer como uma imagem. Agora vamos adicionar alguns elementos a esse quadro. Então dê uma olhada na opção superior esquerda. A primeira é basicamente a ferramenta de movimento que estamos usando, que é o cursor do mouse. E o segundo é a ferramenta de escala. Agora, a ferramenta de escala é basicamente para redimensionar os elementos em sua página. Então, selecione a ferramenta de escala que você pode selecionar ou você pode pressionar o botão J no teclado. Agora, antes de selecionar a ferramenta de escala, vou apenas diminuir um pouco porque é assim que me sinto confortável em editar. Agora vamos dizer que vou selecionar este quadro um aqui. E eu quero redimensionar esse quadro. Então, para isso, eu precisava da ferramenta de balança. Vamos apertar o botão no nosso teclado. Então, agora a ferramenta de escala foi ativada. Agora, se eu levar meu mouse em direção a uma dessas arestas, você pode ver que o cursor mudou. Agora isso é um bool de redimensionamento. Então, se eu apenas clicar com o botão esquerdo e arrastar essa coisa, posso redimensionar meu quadro um. Ok, então é assim que a ferramenta de redimensionamento funciona. Agora, da mesma forma, se eu quiser redimensionar esse quadro, então vou apenas selecioná-lo. E eu levo meu cursor em direção à borda, e vou arrastar essa coisa. Agora, se você der uma olhada enquanto eu estou redimensionando esse quadro, parte dele está atrás desse quadro. Agora, se você quiser essa ideia correta do quadro por trás disso, nosso primeiro quadro, então tudo o que você precisa fazer é apenas ir para a seção da camada e, em seguida, mantenha pressionado o botão esquerdo do mouse no nosso primeiro quadro e arraste essa coisa sobre o quadro um. Ok, então é assim que as camadas funcionam. Agora vou colocá-lo de volta onde estava. E vou apenas mover essa coisa aqui. Ok, então agora se eu selecionar esse quadro e eu ir em direção à borda, você pode ver atualmente a opção de escala ainda está ativada. Então, se você quiser desligar isso, basta pressionar o botão V no teclado. Agora, se eu levar meu cursor em direção à borda, você pode ver que ainda podemos redimensionar essa coisa, mas ela não será redimensionada de acordo com uma dimensão fixa. Você vai redimensionar essa coisa aleatoriamente, ok, então eu só apertei Control Z no meu teclado. Se você levá-lo de volta à dimensão original. E agora vamos apertar o botão novamente. Agora você pode ver que estamos redimensionando essa coisa em cada dimensão, redimensionando proporcionalmente. Ok, então eu só apertei o botão V no meu teclado novamente. Para voltar para a opção Mover, você pode selecioná-la no seu valor. Você pode mover ou selecionar a escala. Agora, vamos passar para a segunda opção. A segunda opção é frame. Já cobrimos essa parte. E agora a terceira opção são as ferramentas de forma. Então, se eu expandir isso, você pode ver que essas são as ferramentas de forma de vídeos. E algumas dessas ferramentas também têm um atalho. Assim, à medida que você fica bem versado com Figma, você pode selecionar diretamente usando atalhos. Não precisa selecionar neste menu todas as vezes. Vamos primeiro com um retângulo. Agora vou apenas clicar neste retângulo. Agora, assim como o quadro de estilo livre, você pode simplesmente puxar o botão esquerdo do mouse e arrastar essa coisa. Crie um retângulo. E quando você deixa o botão do mouse, o retângulo foi formado. Então, vou clicar no lado de fora. Agora, há outro recurso dessa ferramenta retangular também. Vamos selecionar a ferramenta retângulo novamente. E agora digamos que eu queria adicionar um quadrado em vez de um retângulo. Se você quiser adicionar um quadrado em vez de um retângulo, você pode adicioná-lo usando essa mesma opção. Essa é a ferramenta retângulo. Para isso. Tudo o que você precisa fazer é apenas puxar o botão Shift no teclado e arrastar essa coisa. Agora, se você der uma olhada enquanto você está arrastando essa coisa, está entrando em uma forma quadrada perfeita. Só deixo o botão do mouse e deixo a tecla Shift. Então, ele permanece perfeito. Ok, então os seus overs ao quadrado e o seu sobre o retângulo. E ambos foram adicionados usando a mesma ferramenta de retângulo. Assim como a opção de quadro quando selecionamos o quadro, conseguimos fazer alterações na seção de design. Da mesma forma, se você quiser fazer alterações seu retângulo ou quadrado ou em qualquer elemento que você seja. Você só precisa selecionar esses elementos e, em seguida, você pode fazer alterações aqui. Ok, então vamos mudar o preenchimento deste quadrado. Vou mudá-lo para azul. E vamos ficar no campo desse retângulo também. Vou mantê-lo como branco. E vou apenas adicionar um traço a isso. Basta alterar a cor do traçado e alterar a largura do traçado. Vamos explorar mais algumas ferramentas de forma. Aí está a linha. Vou apenas selecionar essa coisa de linha. Da mesma forma, você pode segurar o botão esquerdo do mouse. E você pode arrastar essa coisa. Agora, se você quiser que isso seja exatamente a 0 graus ou 45 graus ou 90 graus, você pode apenas segurar o botão Shift no teclado. E a partir daí você pode simplesmente arrastar essas coisas para que você possa ver qual permanece em proporção. E então eu vou mover o botão do mouse. Então, lá temos uma linha reta. Aqui está a linha. Você pode selecionar essa linha e fazer alterações na seção de design. Vamos alterar a largura do traçado dessa linha. Aí está ele. E vamos mudar a cor do traçado, vermelho. Agora, seguindo em frente, também existe essa opção de seta. Semelhante à linha. Agora vou segurar minha tecla Shift e arrastar essa coisa aqui. Se tivermos um anúncio ou seu reservatório, e vou mudar a largura do traçado e alterar a cor do traçado. Existem algumas opções aqui também. Você também pode alterar o ponto final. Certo? Então, há o diamante estreito, há a seta de linha. Portanto, isso é útil para fazer fluxogramas e assim por diante. Seguindo em frente, há esse eclipse. Agora você pode segurar o botão esquerdo do mouse e arrastar essa coisa, mas vou deixar essa coisa como está. Agora você também pode adicionar um círculo perfeito usando esta ferramenta Eclipse. Tudo o que você precisa fazer é selecionar a ferramenta Eclipse. E antes de começar a arrastar essa coisa segurando o botão esquerdo do mouse, basta segurar a tecla Shift no teclado, que obtenhamos um círculo perfeito. É assim que funciona e conhecia o botão do mouse primeiro e, em seguida, deixe a tecla Shift para que ela permaneça Perfeita. Agora, selecionarei meu primeiro quadro mais uma vez. Se eu tentei redimensionar essa coisa, você pode ver que estamos redimensionando em tridimensional. Agora, se eu segurar a tecla Shift enquanto estou redimensionando essa coisa, você pode ver que ela se move em proporções perfeitas. Não podemos fazer o estilo livre que queremos. É assim que a caixa de teclas Shift, acho que eu tinha algum campo para o nosso círculo também. Agora, seguindo em frente, vamos falar sobre as outras ferramentas. Só vou expandir essa coisa. Aqui você pode ver que há uma ferramenta de caneta e há uma ferramenta de lápis. Vamos selecionar a ferramenta Caneta primeiro. Agora, a ferramenta de caneta é semelhante, conecte os pontos. Se você quiser criar um vetor, você pode usar a ferramenta caneta. O primeiro passo é clicar em algum lugar. Agora esse será o ponto de partida. E agora, se você clicar novamente, esses serão os outros pontos. Portanto, é semelhante à criação de pontos e linhas. Estamos criando um vetor aqui. Agora, vou levar isso ao ponto de partida, ou você pode levar isso para qualquer ponto que quiser. Depois de terminar, basta clicar em Concluído ouvido direito. Agora vamos selecionar nosso vetor. E você pode ver que nossos vários recursos adicionados que podemos usar para vetores também. Então, vamos adicionar um preenchimento a esse vetor. Atualmente, o campo não foi adicionado, então vamos apertar o sinal de mais. Agora você pode ver o vetor como um campo também. Vamos alterar o preenchimento desse vetor. Estes são agora, isso é apenas para sua referência. Os vetores são muito úteis. Você pode criar qualquer forma que quiser. Agora, seguindo em frente, há a ferramenta lápis. Vou apenas selecionar esta ferramenta de lápis. Agora é para um estilo gratuito. Você pode apenas o botão esquerdo do mouse mais cedo e desenhar o que quiser. Se você quiser desenhar uma linha reta, basta segurar o botão Shift no teclado para que ele desenha uma linha reta. Então, é assim que a ferramenta lápis funciona. Depois de terminar a ferramenta lápis, basta pressionar o botão do teclado para que você volte para a opção Mover. Se você quiser excluir qualquer elemento específico, tudo o que você precisa fazer é selecionar esse elemento específico. Ok, agora digamos que eu queira excluir isso que é desenhado com um lápis. Basta selecionar esse elemento e pressionar o botão backspace no teclado. Ok, então agora essa coisa se foi. E se você quiser desfazer as mudanças, agora digamos que eu tenha diluído esse desenho a lápis e queria trazê-lo de volta. Basta pressionar Control Z no teclado, que ele desfaça as alterações, dá um passo atrás. Você pode fazer isso muitas vezes para voltar à etapa anterior. Então, vou selecionar isso novamente e excluí-lo pressionando o backspace. Então, vou excluir essa coisa também. Este também. Ok, então isso é tudo sobre a ferramenta Penicilina Caneta. Agora vamos seguir em frente com o outro. Essa é a ferramenta de texto. Basta selecionar o texto aqui. E agora vamos adicionar texto em algum lugar em nosso quadro. Então, vou descer usando a ferramenta manual. Vou aumentar o zoom. Agora vamos adicionar texto nesta caixa. Só vou clicar aqui. E agora a partir daqui, você pode simplesmente adicionar qualquer texto que quiser. Então, digamos que, quando terminarmos, basta clicar em algum lugar do lado de fora. Aqui está nosso texto e eu vou arrastar essa coisa para o centro. Você pode ver que Figma é uma ferramenta muito inteligente. Ele também lhe dá dimensões. É nosso ponto, aqui você pode ver que diz que está perfeitamente no centro. E agora você pode personalizar esse texto também. Você pode ver no lado direito na opção de design, existem várias opções. Vocês são os estilos estrangeiros. Você pode alterar a fonte daqui. Vamos mudar o estilo da fonte também. Vou mudá-lo para ferver. Agora seguindo em frente, há o manual que já abordamos. Você pode apenas ferver o botão de espaço no teclado e arrastar essa coisa para onde quiser. E o último recurso é adicionar um comentário. Então, vou apenas selecionar essa coisa. Você pode selecionar onde deseja adicionar um comentário. Acabei de selecionar este círculo aqui. Vou adicionar um comentário. Agora o comentário foi adicionado, e agora vou apertar o botão V no meu teclado para voltar. Agora, digamos que você esteja trabalhando equipe e queira verificar os comentários que seus colegas de equipe deixaram neste design específico. Os usuários precisam clicar neste comentário aqui. E no lado direito você pode ver os vários comentários que seus companheiros de equipe foram retirados. Aqui você pode ver que há um comentário, o Yoda é. É assim que os comentários são úteis quando você está trabalhando em equipe. Certo, então isso é tudo para esta sessão. Estamos cobertos com o básico de Figma. Na sessão posterior, seguiremos em frente com os recursos mais avançados da Figma e também analisaremos a parte de prototipagem. Isso é tudo. Obrigado. 5. Alguns recursos do Advance para saber antes de prototipagem: Olá e bem-vindos de volta a todos. Nesta sessão, vamos aprender alguns recursos mais avançados da Figma e estaremos inclinados para a parte de prototipagem. Então, antes de começarmos com a prototipagem, há algumas fotos de Pigma que você precisa saber, que são mais comumente usadas na Figma. Então, vamos começar. Então, primeiro vou adicionar um eclipse. Agora você sabe como adicionar um eclipse. Basta ir para a forma, selecionar a opção eclipse. E se você quiser adicionar um círculo perfeito, tudo o que você precisa fazer é segurar o valor da tecla Shift ou arrastar essa coisa. Aqui está. Então, temos um círculo perfeito. Agora vou apenas selecionar este círculo aqui. E se você olhar para a seção superior, há três opções. Editar, objetar, criar, componente e máscara de usuários. Agora, todos esses três são bastante interessantes e importantes se você for criar vários designs ao criar um protótipo ou apenas para o diário básico figma. Vamos passar por eles um por um. O círculo já foi selecionado, então basta clicar na opção Editar objeto. E agora podemos editar esse círculo da maneira que quisermos. Você pode ver que existem quatro pontos aqui, para que você possa ajustá-los e projetar da sua maneira desejada. Ok, então este é um dos recursos da Figma para criar algum design. E depois de terminar, basta clicar em Concluído ouvido direito. E você também pode alterar o preenchimento dessa forma. Agora, isso era sobre o recurso de edição de objeto. Vou apenas excluir isso. Para excluir qualquer objeto na Figma, basta selecionar esse objeto específico e pressionar Backspace no teclado. Então, agora a forma se foi. Agora, antes de seguir em frente com outro recurso da Figma, vou apenas adicionar um retângulo. Então, basta ir para Shapes, clicar no retângulo. E agora vou segurar a tecla Shift porque quero um quadrado perfeito. É que temos um quadrado perfeito. E agora vamos seguir em frente com outra característica interessante do magma chamada como componente de criação. Ok, então essas eram a opção Criar componente. Agora, antes de explicar a você o que é Criar componente, mostrarei a diferença entre usar opção Criar componente e sem ir com a opção Criar componente. Agora, a opção Criar componente é muito útil ao criar designs e também na prototipagem. Então agora você ouviu que temos um quadrado. Vou apenas duplicar isso agora para criar cópia de qualquer elemento, tudo o que você precisa fazer é selecionar esse elemento específico e pressionar o controle D no seu teclado. E diz Seleção de Duplicates. Agora existem dois retângulos. Você só tem que arrastar este aqui. Aí está. E agora vou pressionar Control D no meu teclado mais uma vez para criar outra cópia. Agora, se você notou, a Figma criou automaticamente o espaço entre os dois. Portanto, o sigma é um aplicativo muito inteligente. E agora somos três quadrados. Vou apenas selecionar o primeiro quadrado aqui. Agora, se eu tentar mudar o preenchimento deste primeiro quadrado, vamos mudá-lo para vermelho. Agora, se você notar, eu mudei o apelo da postagem ao quadrado. No entanto, o apelo dos restantes quadrados da piscina é o mesmo , apesar de ser a cópia do primeiro. Agora, mesmo sendo a cópia do primeiro quadrado, eles não estão de forma alguma relacionados com o primeiro porque eles são simplesmente copiados e ambos os quadrados são um elemento individual ou diferente do primeiro. Agora é aqui que a função Create component é útil. Porque quando você cria qualquer projeto ou qualquer projeto na Figma, haverá muitas reputações. Os designs precisam seguir um padrão de cores específico ou digamos um formato específico. E em tempo morto, você não pode continuar editando cada objeto individualmente apenas para manter um padrão específico. Naquela época, o componente Criar é muito útil. Agora vamos aprender como criar funções de componentes. Agora acabei de criar uma cópia desse retângulo vermelho. Acabei de apertar Control D no meu teclado. E vou arrastar essa coisa para cá. Agora temos uma cópia deste quadrado. E vamos mudar o apelo deste quadrado apenas para fins de demonstração. Mas vou mudá-lo para, digamos verde. Agora aqui está. Temos um retângulo, outro retângulo, é retângulo verde. Agora temos um retângulo verde. E agora vou mostrar como o recurso Criar componente funciona. Selecionei este retângulo verde e vou pressionar Create component. Se você observar que a cor dessa camada específica é alterada para roxo. Aqui temos um componente, esse retângulo verde agora é um componente do componente pai. Agora, se eu for criar uma cópia desse elemento ou E5 vinculado a duplicar esse retângulo verde. Basta ver como ele funciona. Vou pressionar Control D no meu teclado mais uma vez. Agora, avaliamos uma cópia desse retângulo, e vou pressionar Control D no meu teclado mais uma vez. Então agora eu tenho três retângulos verdes. Agora, se eu tentar mudar qualquer coisa com o primeiro, esse é o retângulo pai. Você pode ver que este é o retângulo pai. Se você der uma olhada na seção de camadas, poderá ver que esse não foi o primeiro componente que criamos. E o retângulo seis e retângulos sete são as cópias do primeiro. Você pode ver a diferença entre os ícones. Então, mostra que o retângulo cinco do componente pai, e esses são os componentes filho. Agora eu selecionei o arquivo retângulo e vou tentar alterar o preenchimento desse elemento específico. Vamos clicar em Preencher. Vou mudá-lo para, digamos amarelo. Então, agora, se eu tentar mudar qualquer cor ou fazer alterações com este arquivo retangular, as alterações também ficarão visíveis nos dois restantes. Há as cópias do arquivo retangular. É assim que o recurso Criar componente funciona. O que quer que você faça com o primeiro componente, o componente filho segue. Isso não é apenas elegível para formas, mas também para textura. Vou mostrar como isso funciona para texto. Vamos adicionar algum texto. Sobre o texto. Vou apenas selecionar esse texto e aumentar o tamanho dele. Então, vamos aumentar um pouco o tamanho. Assim como nossos textos e acabarei de clicar em Criar componente. Agora, esse texto também é um componente. Agora não é necessariamente que assim como as formas são semelhantes, os textos também tendem a ser semelhantes. Textos podem ser qualquer coisa. Então, vou apenas apertar Control D no meu teclado. Criamos uma duplicata desse texto em particular. Agora, vou mudar esse texto aqui. Yoda é, este é o segundo elemento e Figma é fácil é nosso componente pai. Agora eu selecionei o primeiro texto. Agora vou mudar o preenchimento desse texto em particular. Portanto, é assim que o recurso Criar componente funciona. Mesmo que ambos sigam um padrão semelhante, não é necessário que eles sejam exatamente os mesmos. Ele vai para o exemplo do retângulo. Mais uma vez, vou diminuir o tamanho desse retângulo em particular. E vou mantê-lo aqui. Agora, se eu fizer alterações no componente pai, vamos alterar o campo mais uma vez. Você precisa clicar duas vezes sobre isso para alterar o preenchimento. Agora acabei de mudar, vamos fazer, digamos rosa. Então aqui você pode ver que a cor agora mudou para todos eles. No entanto, não é necessário que a forma, o tamanho de todos eles, tenha que dizer exatamente que eles também podem ser de qualquer forma. Ok, então agora vamos passar para outra característica interessante do sigma. Acabei de limpar tudo isso. Eles apenas selecionarão todos eles e pressionarão Backspace no teclado para que ele seja excluído. Agora vou adicionar outro eclipse. Basta ir para o Eclipse. Vou segurar a tecla Shift para que tenhamos um círculo perfeito. Agora vamos aprender outro recurso interessante da Figma chamado como máscara de usuários. Então agora temos um círculo perfeito. Vou mantê-lo ao lado e não adicionarei uma imagem em algum lugar aqui. Então, vou apenas para as formas e vou clicar em Colocar imagem. Exibe esta imagem aqui, para que você tenha uma imagem específica. Vou expandir isso segurando a tecla Shift no meu teclado e arrastando as bordas. Portanto, temos uma opção de redimensionamento simétrico aqui. Agora, o que eu quero fazer é que este logotipo do WordPress aqui esteja exatamente neste círculo. Quero que ambos façam parte da mesma coisa. Então, vou colocar essa imagem sobre esse círculo. Agora basta ir para a seção da camada, colocar em negrito a tecla Shift no teclado, selecionar o eclipse e a imagem. E uma vez feito isso, basta clicar no recurso Máscara de usuários no canto superior do menu para que seja. Agora você pode ver que usamos o elemento não mascara. Então, isso é tudo que o recurso Máscara juvenil funciona e você pode arrastar essa coisa para qualquer lugar que quiser. E quando estiver satisfeito, você agrupa esses elementos e cria um único elemento desses dois. Então, vamos para a seção da camada, mantendo pressionada a tecla Shift no teclado, selecione o eclipse e a imagem e basta pressionar Control G no teclado. Depois de terminar, você pode ver agora que este é um único grupo. Eles não fazem mais elementos diferentes. Aí está. É assim que o recurso Máscara de usuários funciona. Então agora temos dois círculos e despedidas. Este segundo círculo sobre o primeiro círculo seguirá em direção a outra característica interessante do sigma. Então você pode ver aqui selecionado um segundo círculo. Vamos selecionar o primeiro também simultaneamente. Então, mantenha pressionada a tecla Shift no teclado e selecione o primeiro círculo. Agora selecionamos esses dois círculos. Se você olhar para a seção superior, poderá ver essa opção que diz grupos booleanos. Basta expandir isso. Agora você pode ver que existem várias opções, como Seleção de união, Subtrair, Intersect, delete. Você também pode experimentar esses grupos booleanos. Então, vamos clicar na seleção de sindicatos e ver o que obtemos. Acabamos de clicar na seleção de sindicatos e você pode ver que temos formas diferentes. E agora, esta é uma união dos dois círculos que criamos. Então, vamos explorar as outras opções também. Se você quiser ir em direção a um passo atrás, basta pressionar Control Z no teclado. Você pode ir para a etapa anterior. Então, vou pressionar Control no meu teclado mais uma vez. Agora temos dois círculos mais uma vez. E não é necessariamente que ambos tenham que estar em uma forma idêntica. Eles podem estar em qualquer forma que você quiser. Então, vou mudar a forma desse círculo em particular aqui. Vou mudá-lo para algum eclipse. E agora vou tocar isso sobre o primeiro círculo. Vamos selecionar os dois. Mais uma vez. Basta segurar a tecla Shift no teclado e clicar na primeira. Então, agora selecionamos esses dois objetos. E vamos tentar alguns outros recursos, como, digamos subtrair a seleção que agora é que essa seleção foi subtraída. Então é assim que o recurso de grupo booleano funciona na Figma. Agora que estamos cobertos dessas partes, vamos seguir em frente. Acabei de adicionar algum texto aqui. Se você quiser criar uma duplicata desse texto, tudo o que você precisa fazer é selecionar esse texto e pressionar o controle D no teclado. Lá você criou uma cópia desse elemento específico. E essa também é outra maneira criar uma duplicata desses elementos. Basta selecionar o texto que você deseja, o texto ou qualquer forma que você quiser, e você não precisa pressionar Control D todas as vezes. Basta segurar a tecla Alt no teclado. Então você pode simplesmente arrastar essa coisa para qualquer lugar que quiser. Ok, então agora você pode ver a cópia desses textos em particular foi colocada aqui segurando a tecla Alt no meu teclado. É assim que funciona. Da mesma forma, você também pode criar cópias das formas. Eu selecionei essa forma aqui. Acabei de segurar a tecla Alt no meu teclado e arrastarei essa coisa para baixo. Você pode criar uma cópia duplicada fácil de todos os elementos que desejar. Se você quiser voltar às etapas anteriores, isso significa que, se você quiser desfazer, basta pressionar Control e Z no teclado várias vezes. 6. Prototipagem e criação de um projeto: Agora vamos seguir em frente com a parte de prototipagem. E ao fazer a parte de prototipagem, onde aprenderemos mais algumas funções e ferramentas na Figma. Vamos começar. Agora vamos criar um protótipo básico, digamos criar um protótipo de um aplicativo móvel. Então, primeiro o que precisamos fazer é adicionar um quadro-chave, vá para a opção de quadro. Clique no quadro. Você pode selecionar a tela do celular que você deseja. Aí está, você é nós temos um cérebro. E vamos ampliar. Basta segurar a tecla Control no teclado e rolar o botão do mouse para cima. Aí está. Então agora vamos criar uma duplicata desse quadro porque queríamos criar um protótipo. Então, vou mostrar como a prototipagem funciona. Quanto mais antiga a tecla Alt no meu teclado. E arraste essa coisa aqui. Vou segurar a tecla Alt no meu teclado mais uma vez e arrastar essa coisa que TI, ou. Vamos criar um protótipo simples de aplicativo móvel usando esses três quadros. Vou mudar a cor de preenchimento desta pós-impressão. Vamos mudá-lo para preto. Agora vamos adicionar algum texto ao primeiro quadro. Então, vou digitar. Bem-vindo ao nosso aplicativo. Se você perceber que o tamanho do texto é muito grande, então vamos reduzir o tamanho do texto. Primeiro de tudo, vou apenas selecionar o texto e reduzirei o tamanho de baixa tecnologia de você. Agora, reduzimos tamanho do texto e vou apenas escrever, bem-vindo ao nosso aplicativo. Vou colocar essa coisa, essa ideia. Agora vamos adicionar alguns campos de texto na forma de um botão. Quando alguns usuários clicam nesses botões, eles serão redirecionados para outra página. Isso é o que vamos criar neste protótipo. Adicionamos um texto e estaremos aprendendo sobre outro recurso importante e mais popular do Pigma chamado de layout automático. Basta selecionar este texto aqui. Então tudo o que você precisa fazer é clicar em Shift a no teclado. Você pode ver isso diz que o layout automático foi adicionado e você também pode adicionar isso. Só habilitarei a opção de preenchimento para esse layout automático específico para que seja. E podemos simplesmente alterar o preenchimento desse elemento em particular. Vamos mudá-lo para amarelo. E agora estamos avaliados como um botão para esse aplicativo específico. E agora vou apenas selecionar isso e reduzir o tamanho segurando a tecla K no meu teclado e arrastando essa coisa um pouco para cima. E agora vou criar uma duplicata desse recurso. Então, vamos selecionar este. Mantenha pressionada a tecla Alt no teclado e arraste essa coisa para perto. Agora não estou criando exatamente um aplicativo bonito. Estou apenas mostrando como o recurso de protótipo funciona e agora vamos editar o texto desse elemento em particular, nomeará isso como lá está. Agora criamos dois elementos para esta página específica. Agora esta será a página inicial do aplicativo, e vou colocá-lo aqui. Agora, neste segundo quadro, nossa ideia será a página Sobre nós. que significa que se algum usuário clicar neste botão Sobre nós aqui, ele será redirecionado para esta página específica aqui. Ok, então vamos adicionar os detalhes neste segundo quadro. Acabei de mudar o preenchimento deste segundo quadro também. Vamos adicionar alguns textos. Você pode copiar o texto exatamente do seu também. Basta colocar em negrito a tecla Alt no seu teclado e arrastar essa coisa aqui, e então você pode editar esse texto mais tarde. Vou apenas editar o texto. Vou criar uma duplicata desse texto, a tecla Alt no meu teclado. Arraste essa coisa aqui e vou adicionar uma linha simples. E agora outra característica importante da Figma ou dos plugins. Então, vamos ver como o recurso de plugins funciona. Agora, vou apenas adicionar uma forma essa ideia. Vamos adicionar um quadrado na estrada na página Sobre nós. Agora, se eu selecionar este quadrado e clicar com o botão direito do mouse, você pode ver que obtemos certas opções. E entre essas opções há um recurso chamado de plug-ins. Agora você sabe o que são plugins, mas vamos ver como os plugins negociam Figma. Plugins na Figma realmente facilitam seu trabalho. Existem tantos plugins para muitas funções. Vamos explorá-los. Você pode ver que somos plugins gerenciados e navegar por plug-ins na opção da comunidade, basta clicar em navegar plug-ins na comunidade. A partir daqui, você pode instalar os plugins que você quer, não apenas plug-ins sendo mais comunidade é uma comunidade muito grande. Você pode ver que existem vários recursos. Há topografia que é design móvel bem como ilustrações para crianças Dui e assim por diante. Você também publicará seus próprios projetos. Então, atualmente, estamos procurando plugins. Assim, você pode ver que a opção de plugins foi selecionada. Agora vamos pesquisar o que é um plugin. Vou procurar o plugin Unsplash. Agora, o plugin Unsplash nos ajuda a acessar facilmente imagens sem direitos autorais. Seja qual for o design que você possa dizer, este é o plugin Unsplash. Então, vou clicar em Instalar. Basta clicar em instalar o plugin. Agora, o plugin Unsplash foi instalado. Vamos voltar para projetar a página. Agora, se eu clicar com o botão direito do mouse neste quadrado mais uma vez, você pode ver se eu vou para os plugins, você pode ver que há o plugin Unsplash que acabamos de instalar. Então, basta clicar nele. Você pode ver que o plugin foi aberto. Então, a partir daqui, você pode procurar uma imagem que você deseja. Então, há a imagem da lua que eu quero, então vou clicar nela. Aí está. Aqui você pode ver que adicionamos a lua ao retângulo. Então, é assim que o plugin Unsplash funciona. Agora, a página Sobre nós foi criada. Vamos criar a página Fale conosco também. Vou mudar o preenchimento desse quadro em particular. Então, basta segurar a tecla Alt no teclado e arrastar essa coisa aqui. E se você quiser ter certeza de que ambos estão perfeitamente alinhados, você também pode verificar as dimensões. Ok, então basta selecionar o cartaz sobre nós ou a tecla Alt no seu teclado. E então você pode simplesmente mover o cursor em direção às bordas. Você pode ver que há a distância, as dimensões desse texto específico. Então diz 1996. Agora você pode se certificar de que isso sobre nós também está na mesma distância. Então, basta segurar a tecla Alt e depois aponte para as bordas. Aqui você pode ver que não é exatamente semelhante. Agora, mantenha pressionada a tecla Alt no teclado e use os botões de seta no teclado para bordas das dimensões. Certo, então vou mudá-lo para 1986. Ok, então agora esses dois estão perfeitamente alinhados. Vou mudar o texto para entrar em contato conosco. Então, agora vamos adicionar outro plugin a esta página Fale Conosco. Então, vou apenas apertar o botão direito do mouse. Vamos para Plugins e clicar em Procurar plug-ins na comunidade. Agora vamos adicionar novamente um plugin de mapa que é localização. Acabei de instalar o primeiro plug-in aqui. Clique em Instalar. Agora o plugin foi instalado, então basta pressionar o botão direito do mouse, ir para Plugins. E agora selecionaremos uma função de mapeador de domo. Então, a partir daqui, você pode adicionar qualquer local que desejar. Então vou digitar qualquer aleatório, mesmo este está bom. Você pode inserir o endereço de entrada aqui e, em seguida, você pode adicionar o local. Vou clicar em Make map. Aí está. E agora você pode redimensionar isso também. Então, basta ir para as bordas e o botão k no teclado. Do seu, você pode redimensionar essa coisa em particular e arrastá-la. Certo? Agora, quando você apertar o botão V no teclado, volte para a opção Mover. Aí está. E você não precisa criar coisas manualmente todas as vezes. Vários designers profissionais criaram os protótipos de aplicativos e vários kits de interface do usuário e assim por diante. E todos eles já foram carregados na comunidade. Tudo o que você precisa fazer é apenas apertar o botão direito do mouse. Vá para Plugins e navegue por plug-ins na comunidade. E aqui você pode procurar por aplicativos móveis. Isso não é que estamos criando apenas busca por aplicativos móveis. Então você pode ver que esta é a seção do plugin, e essa é outra seção chamada como arquivos. Basta clicar em Arquivos aqui. E aqui você pode ver esses são os vários projetos, vários projetos criados pelos usuários e eles foram carregados na comunidade. Então, todos esses são arquivos, o que significa que você pode copiar e modificar esses arquivos. Você pode copiar cada elemento desses arquivos e usá-lo em seu próprio projeto. O que significa que você não precisa criar coisas manualmente todas as vezes. Tudo o que você precisa para criar uma página de login automático beta e de aplicativos, você pode apenas pesquisar na comunidade , inspirar-se nessas pessoas e copiar os elementos individuais também. Você pode literalmente importar esses projetos em seu próprio aplicativo Figma e, em seguida, você pode modificá-los. Agora digamos que eu queira a página de login do meu aplicativo. Então, tudo o que vou fazer é apenas procurar por login aqui. E então você pode clicar em Arquivos. Você pode ver que esses são os vários arquivos disponíveis para a página de login. Você pode ver que elas estão em páginas de login criadas para aplicativos móveis ou digamos que ações tecnológicas. Você pode selecionar qual deles deseja, qual modelo você deseja. Seu, este é o primeiro projeto. Então, vou clicar nele. Aqui você pode ver que esse criador criou página de login simples para o aplicativo móvel, uma única página de login. Tudo o que vou fazer é clicar em duplicar porque queremos copiar esses elementos. Então, tudo o que você precisa fazer é clicar em duplicar para que você possa importar o projeto em seu próprio porco meu aplicativo. Então, aqui você pode ver que este projeto que foi criado pelo usuário agora está sendo importado em nosso próprio aplicativo de desktop. Então, a primeira coisa que eu quero fazer é que eu quero essa guia de login no meu próprio design. Então, vou apenas selecionar esse login nem o texto, mas o retângulo também junto com ele, porque quero toda a guia de login. Então, basta selecionar o retângulo também usando a tecla Shift e, em seguida, criar um grupo usando o Control G no teclado. Depois de pressionar o controle Z, você pode ver os dois elementos são agrupados em um. Acabaremos de pressionar Control C no nosso teclado para copiar esta guia de login. E então voltaremos ao nosso próprio projeto. E então vamos apenas selecionar o quadro um e depois colá-lo aqui. Agora, a guia de login também está disponível em nosso projeto. Simplesmente copiamos do usuário. Agora queremos esses ícones também, os ícones de login social em nosso projeto. Apenas selecionaremos esses ícones inteiros. Vamos pressionar Control G em nosso teclado mais uma vez para criar um grupo. E vamos apenas pressionar Control C para copiar todos esses ícones, o grupo juntos. Então vamos voltar para o próprio projeto dela, e então vamos apenas apertar o Control V no nosso teclado. É assim que funciona. Isso torna nosso trabalho muito mais fácil. É assim que toda a função de cópia funciona. E é muito útil. Agora que terminamos com a parte de design. Este não é exatamente um design bonito. Eu só queria mostrar um design básico que podemos continuar com o protótipo. Agora você pode ver que terminamos com a parte de design. Então, vamos passar para a seção de protótipo. Lá você pode ver que esta é a seção de protótipo além do design. Agora vamos entender o fluxo desse protótipo. Quando um usuário clica no botão Sobre nós, queremos que o usuário seja redirecionado para o segundo quadro. Essa é a página Sobre nós. Esta é a primeira parte. E quando o usuário clica no botão Fale Conosco, queremos que ele seja redirecionado para o terceiro quadro. Essa é a página Fale Conosco. Este é o fluxo do nosso protótipo. Agora, o que faremos é criar esse protótipo. O fluxo do projeto agora está claro. Vamos criar o protótipo. Agora vamos para o botão Sobre nós. Aqui você pode ver que há um ponto aqui perto do botão acima deste. Então, basta clicar nele e arrastar essa coisa para o segundo quadro. O que significa que quando um usuário clica no botão Sobre nós, você será redirecionado para o segundo quadro. Obrigado da mesma forma pelo botão Fale Conosco, o que precisamos fazer é arrastar essa coisa que está perto do botão Fale Conosco. Precisamos arrastar essa coisa para o terceiro quadro, Essa é a página Fale Conosco. É assim que o protótipo funciona. É bem simples, é bem fácil. É assim que a estrutura do protótipo funciona. Você também pode editar as animações sobre como você quer fazê-lo. Então aqui você pode ver que criamos duas interações para o protótipo. O botão Sobre nós e o botão Fale Conosco. Agora você não pode vê-los porque eles são bem próximos, então eu vou fazê-los daqui a pouco. Então você pode ver que essas são duas interações separadas. O botão sobre este vai para o segundo quadro, Essa é a página Sobre nós. E o botão Fale conosco passa pelo terceiro quadro. Essa é a página entre em contato conosco. Você também pode criar animações aqui. Agora, essa foi apenas uma interação unidirecional que aprendemos. Precisamos criar uma interação inversa também. Vou apenas adicionar um texto que diz anterior porque aprendemos como podemos ir do botão Sobre nós para a página Sobre nós. Mas e se o usuário quiser voltar para a página inicial da página acima desta página. Então eu criei um texto que diz Anterior, vou apenas adicionar o layout automático fazendo o botão direito do mouse nele. Então, agora adicionamos um layout automático também, e vou apenas alterar o preenchimento. Vamos dar uma cor a este filme que criamos um botão anterior também. Então, também usaremos esse botão para o protótipo. Agora vou apenas copiar esse botão para o terceiro quadro também. Aí está. Agora temos o botão anterior com o terceiro quadro também. Você pode ver além do botão anterior, há um ponto ali. Vamos apenas arrastar essa coisa e levá-la de volta ao primeiro quadro que mostra uma interação que, quando você clica no botão anterior, você é redirecionado para o primeiro quadro. Essa é a página inicial. Então, da mesma forma, para o próximo botão Anterior fará a mesma coisa. Você pode ver que há o ponto. Basta arrastar essa coisa e levá-la de volta ao primeiro quadro. Essa é a página inicial. Agora acabamos totalmente com nosso protótipo. Criamos uma interação direta e também criamos uma interação inversa. Para sempre o aplicativo. Agora vamos ver como nosso protótipo funciona. Então, agora que terminamos o protótipo, você pode ver que há o botão Reproduzir. Então, basta clicar nele. Aqui. Esta é a nossa página inicial. Se você clicar em Sobre nós, você será redirecionado para a página Sobre nós. Esta é a página Sobre nós. E se você quiser voltar, basta clicar em anterior. Se você clicar em anterior, lá está, você está de volta à página inicial. Da mesma forma para o botão Fale Conosco, se você apenas clicar no botão Fale Conosco, você será redirecionado para a página de contato. E se você clicar em anterior, você será redirecionado de volta para nossa página inicial. Então, é assim que a pré-visualização do protótipo funciona e você também pode compartilhar esse protótipo. Basta clicar no botão Compartilhar. Você pode enviá-lo para qualquer amigo. Você pode enviá-lo para qualquer e-mail ou qualquer usuário da Figma também. Você também pode publicá-lo na comunidade Figma também. Basta clicar em Compartilhar. Você também pode publicar na comunidade Pigma. Eles também podem se inspirar no seu projeto. Eles podem copiar os elementos do projeto, assim como podemos duplicar o projeto de outros e depois modificá-lo. Então isso é tudo sobre Figma. Este é o básico do sigma. Aprendemos alguns recursos básicos, aprendemos alguns recursos avançados. Aprendemos a fazer prototipagem também. Isso é tudo para esta sessão, e isso é tudo para este curso. Eu recomendo a você ou às pessoas que você visite regularmente a comunidade Figma, aprendam várias coisas outros usuários que publicaram seus designs. Sempre há coisas novas para aprender em Figma. Você sempre pode visitar a comunidade Figma. Em seguida, você pode duplicar seus projetos e entender como eles criaram esses projetos e projetos. Então isso é tudo para este curso. Espero que vocês se saiam bem em Figma. Boa sorte e muito obrigado.