como usar o FIGMA: aulão gratuito do absoluto zero para iniciantes [2024] 🎉

se você nunca teve contato com figma não sabe como começar como criar a sua primeira tela como entender aquele tanto de ferramenta e os painéis dentro do figma essa aula aqui foi criada especificamente para você então é uma aula onde eu abordo do zero absoluto para você instalar o figma começar a usar desmistificar aquela interface né E todos os segredos ali para você ter a segurança de criar a sua primeira tela Inclusive a gente vai criar também uma tela aqui rápida Mas vai ser muito bom vai ser um exercício muito bom para você entender alguns

componentes bem principais que a gente usa ao construir interfaces dentro do figma e muito dessa a estrutura dessa aula aqui vai seguir o princípio 8020 ali do figma né onde 80% dos resultados são é consequências ali de 20% do nosso esforço Então a gente vai focar nesse esforço do figma né o que de fato é mais necessário mais importante ali para você sair do zero e entender o principal dos recursos do figma dito isso então antes de ir pro figma Não esquece de curtir o vídeo de se inscrever no canal é o que eu sempre

peço aquilo que é muito importante não esquece tá o botãozinho aqui embaixo é bem fácil isso ajuda muito fortalece muito o meu trabalho para eu continuar eh produzindo conteúdos aqui para vocês tranquilo dito isso então você já se inscreveu no canal Bora lá pro figma então bom pra gente começar a gente vai acessar o figma.com tá é o site em português tem tudo tem todos os idiomas inclusive o figma tem até a Parte Educacional de conteúdo Educacional também em português não tem muito segredo a gente vai acessar esse site aqui para começar a baixar o

figma né então é a homepage aqui primeiro de tudo antes de a gente começar aqui no no comer grátis a gente vai clicar em preços PR últimos mostrar uma coisa o figma para essa aula aqui e o caso que vai funcionar é muito bem pro seu começo é o plano grátis o plano grátis resolve aí muitos dos problemas os planos pagos aqui vão começar a fazer mais sentido quando você estiver trabalhando em colaboração com outras pessoas com envio de arquivo com compartilhamento envio pro time de desenvolvimento mas por enquanto vai funcionar muito bem o arquivo

grátis para você pegar o inicial do figma até mesmo criar os seus primeiros projetos então não se apega nisso e sair pagando pelo figma agora inclusive se você tiver trabalhando em uma empresa sem empresa vai pagar pelo figma né E espera-se aí né por por padrão que ela pague pelo figma e que você entre já com essa licença também então não é algo para você se preocupar nesse momento só que a minha recomendação se você faz parte de algum curso de design algum curso de figma você pode clicar nessa opção aqui ó grátis para estudantes

e educadores aqui o figma vai pedir para você enviar você clica aqui no no verificado o figma vai pedir para você enviar alguma comprovação algum certificado algo do tipo que comprove que você esteja em algum curso que tem tinha feito algum curso um recibo ou algo do tipo e o figma libera o acesso para você gratuitamente desses planos mais e mais profissionais aqui então é uma maneira ótima aí para você conseguir também o figma de graça tá então por enquanto tá bem tranquila essa validação é só enviar ali eles aprovam no mesmo minuto se eu

não me engano dura um ano e um ano depois eles pedem para você enviar de novo você renova e assim vai tá por enquanto tá dando certo com todo mundo que eu conheço Tenta aí que se você tiver fazendo algum curso né Eh vai dar certo para você também é porém aqui pra aula eu eu não vou me inscrever em plano nenhum tá a gente vai começar no grátis que vai resolver muito bem o problema Outro ponto importante é que o figma tem duas modalidades ele funciona no navegador e funciona por aplicação você pode instalar

o figma também né os dois vão ser absolutamente iguais em quisito de interface e tudo mais funcionalidade O que funciona no na aplicação vai funcionar no navegador então uma escolha sua é aqui para essa aula eu vou eu vou navegar no figma pelo navegador Mas você pode instalar também tanto faz como preferir eu sinto que a versão instalada do figma tem uma performance melhor do que no navegador não sei se é algo só comigo eu acho que pode ser depende do do da memória RAM que você tem e tudo mais porque o Chrome o navegador

já consome mais memória RAM né porém fica como algo de teste aí para você eu sei que no começo mal vai fazer diferença os dois Porque você vai estar trabalhando com arquivos mais leves então eh tanto navegador quanto aplicação aí tanto faz para você começar a usar Beleza então eu vou clicar aqui no selecionar plano no grátis Vou Fazer login com a minha conta tá se você não tem uma conta ainda pode clicar em continuar com Google ou vem aqui nessa opção inferior para criar sua conta bem rapidinho coloca seu e-mail senha tudo mais pigma

vai fazer umas perguntas chatinhas ali no começo de onboarding de número de de pessoas que você tem na empresa se trabalha em alguma empresa se e enfim vai pedir um monte de coisa ali paraa você então eu vou pular esse essa etapa aqui porque eu já tenho conta criada mas depois que você fazer esses Passos você vai ver a tela inicial do figma que a gente vai navegar agora e bom se deu tudo certo com você Você conseguiu passar pelo temível ambor do figma você chegou nessa tela aqui essa tela aqui é a cara Inicial

é dentro do figma né então criou sua conta essa aqui é a homepage do figma a parte de gerenciamento o figma por padrão ele já criou três arquivos aqui três e três arquivos de template de para você começar a aprender a usar o figma é um pouco da Parte Educacional do figma né pra gente limpar essa área porque eu não gosto de coisas que eu não vou usar eu vou selecionar os três e vou enviar os três pra lixeira tá ponto importante você consegue recuperar todos os arquivos do figma então apagou eles é só clicar

aqui na lixeira nessa parte inferior você vai é pros arquivos que estão na lixeira pode clicar de novo com direito e restaurar arquivo que ele volta lá pro seus drafts Tranquilo então aqui a gente tem a base de onde ficam os arquivos parte superior você consegue criar um novo arquivo Então você vai criar o seu novo site novo aplicativo novo material Criativo o que seja pode clicar aqui que você vai criar esse novo arquivo é equivalente a um novo arquivo no Photoshop ou no Illustrator qualquer coisa do tipo aí dos programas da Adobe esse aqui

é um padrão bem comum no mais são itens que a gente não vai focar porque o foco é o figma em si como ferramenta de prototipagem mas o figma tem alguns recursos como o fig Jen que ele facilita a parte de pesquisa de colaboração para você colocar uns postites ali né Eh divergir ideias com o time também então é a parte mais colaborativa do pré-processual o processo mais de pesquisa figma também tem a ferramenta de slides tá então assim como PowerPoint assim como Google slides você consegue criar slides dentro do figma ferramenta bem boa também

e a opção de importar arquivos do figma Então você consegue Salvar arquivo ou outra pessoa salvou esse arquivo você carrega o arquivo né clicando nesse botão aqui outro ponto importante dessa área eu vou subir aqui senão não vai dar para enxergar aqui na parte inferior esquerda a gente tem o botão escrito explorar comunidade esse aqui é um recurso que eu acabo vendo que ele é pouco utilizado pelas pessoas que usam figma mas que é muito importante é muito rico isso aqui porque ele tem muitos templates prontos tem materiais prontos tem estruturas já prontas que inclusive

você consegue duplicar e acessar gratuitamente grande maioria gratuito para você ver como que foi montado aquele aplicativo aquela interface e já fazer um pouco daquela engenharia reversa para entender como que funciona como que é construído padrões e tudo mais a gente já tem aqui por exemplo o ui kit do material design Então tudo pronto para você não Reinventar é só duplicar os arquivos aqui você já consegue esses esses componentes de design prontos né do Com base no material design tem parte de iconografia pronta o iOS kit também né o kit do de design do iOS

material design 2 o material design antigo e parte de plugin também que resolve vários problemas dentro do figma tá não é algo para você se preocupar também nesse momento não é o foco aqui mas é bem importante você saber que existe aí porque eu vejo que é uma área que a galera acaba pulando e que é bem importante poupa bastante tempo né ajuda bastante mesmo a nossa rotina no nosso dia a dia e bom eu vou voltar aqui pro figma e agora a gente vai criar um arquivo pra gente começar a trabalhar para te mostrar

como funciona de fato a prototipagem como que a gente cria a Telas dentro do figma então vou clicar nesse botão aqui pra gente criar um novo arquivo de design a gente chega agora na na cara inicial de um arquivo Limpo né no figma sem sem design nenhum por enquanto o que eu vou fazer nessa parte é para apresentar primeiro nessa parte da esquerda aqui a gente tem a barra de páginas e camadas ou seja todas as páginas da estrutura do seu arquivo ficam organizadas aqui aqui nesse caso Olha só eu tenho a página um a

página um se eu tivesse fazendo um site ele poderia ser por exemplo homepage né se eu quero trabalhar só com a home page aqui ele poderia ser homepage a outra página poderia ter também é página de blog do do meu site ou se fosse um aplicativo poderia ser um fluxo de cadastro no outro fluxo de login fluxo de recuperação de senha essa estrutura Vale já abrir um um parênteses aqui Ela depende muito tá eu vejo que varia muito há quem goste de de separar páginas por fluxos específicos por momentos da jornada e há quem gosta

de separar páginas pro eh para um aplicativo inteiro né então aqui por exemplo você teria app bancário né o nome do seu aplicativo aí o aplicativo inteiro você trataria os fluxos eh aqui dentro dessa página o problema disso é que ele fica mais pesado o arquivo fica menos eh eh menos organizado fica mais confuso mais difícil para passar isso pra frente pro time que vai desenvolver né então el é um pouco vai ficando o cenário mais caótico tá mas tô trazendo esse ponto aí para você saber até fugindo do tema da aula né Eh mas

é para fazer para você saber que as pessoas organizam isso aqui de maneiras diferentes então é algo que também vale aí de acordo com a sua estrutura de acordo com o time que você está inserido ou inserida também então bem simples não tem muito segredo tem uma coisa aqui bem legal tá que se você digitar três tracinhos e apertar enter Olha só o figma trouxe um traço aqui né ele ele segmentou essas páginas ele deu um agrupamento melhor ali e por quê porque antigamente antigamente até pouquíssimo tempo atrás para separar a gente de fato usava

um monte de tracinho assim ó agora o figma nem deixa mais usar ele completa automaticamente para esse para esse traço aqui né mas para separar a página a gente fazer isso aqui porque o figma não tem nada para você criar uma pasta em páginas não tem nada melhor do que isso então esse tracinho aqui já é melhor do que muita coisa pra gente organizar aí nossas páginas é na parte superior a gente tem o nome do arquivo é só clicar e dá para colocar aqui o o nome aula para o YouTube por exemplo e aqui

mais superior ainda a gente tem o logotipo do figma que é o menu principal então tudo que se refere a configurações do figma fica aqui dentro tá não é objetivo da aula Navegar por tudo isso aqui porque levaria um bom tempo tá mas sempre que você tá procurando por alguma configuração específica de configuração de objeto Dark mode Light mode essa parte mais mais customizável do figma também você vai encontrar aqui não é algo pra gente se preocupar nesse momento na parte inferior Olha só o bug eu fiz um seletor aqui ele subir automaticamente na parte

inferior aqui a gente tem a barra de ferramentas do figma então eu gosto de fazer analogia com Photoshop até mesmo com Pain ali porque a grande maioria já Conhece essas ferramentas né então no Photoshop Enquanto essa parte fica na na parte esquerda ali da tela você tem aquela Barrinha fixa ali de pincel de borracha tudo mais o figma mantém agora nessa parte centralizada é inferior Então o que a gente tem aqui né primeiro que fica selecionado por padrão é essa ferramenta V que é a ferramenta movimentar ou seja eu vou apertar R para criar um

retângulo aqui com o v selecionado eu consigo de fato movimentar né Qualquer arquivo qualquer item que eu tenha nessa tela então não tem muito segredo nisso clicando nessa setinha para baixo no lado da seta maior a gente tem os recursos dessa dessa opção aqui da do movimento né então você tem também clicando apertando h a ferramenta de Hand Tool né o ferramenta de mão isso aqui é equivalente a gente apertar Não sei se vou conseguir mostrar mas equivalente a apertar esse do meio aqui ó porque aí você só movimenta no arquivo mas não movimenta o

o item que tá ali em C né você só visualiza você navega ali eh pelos eixos da página para ver o que que tem nesse arquivo por completo então uma movimentação menos arriscada ela não vai destruir nada do seu arquivo e por último ou apertando k você tem a ferramenta de escala Então qual é a diferença para que que serve Olha só se eu tô na ferramenta move e clico nessa setinha aqui para aumentar o o tamanho desse board Olha só como ele pode se quebrar todo né ele pode ficar mais estreito mais largo ele

não vem necessariamente de maneira eh de maneira responsiva né ele não vem equilibrando o seu tamanho com a ferramenta de escala ativa você pode fazer o que for ele não vai quebrar esse tamanho ele vai escalar proporcionalmente ele vai escalar certinho e não vai quebrar o que tá dentro inclusive se você tem Fontes dentro desse grupo ou tudo mais ele vai fazer essa escala ali é mais correta tá é diferente de você simplesmente pegar aqui com o move e querer escalar porque geralmente a fonte vai ficar menor ou a parte que tá fora vai sair

vai ficar bizarro tá então quando você quer escalar algo essa aqui apertando a ferramenta apertando a letra k do teclado ou clicando em scale é a melhor solução que você vai ter perfeito na sequência o que a gente tem essa grade zinha aqui tá que é o frame isso aqui é super importante do figma isso aqui é basicamente o que norteia o nosso trabalho por quê vamos supor que você recebeu a missão de criar um site ou de criar um aplicativo O que que você vai fazer primeiro passo primeiro passo contando que você e já

já pulou as etapas de entender o que que você vai ter que desenvolver né então primeiro passo prático dentro do figma visual vai ser clicar aqui na ferramenta de frame e olha só que aqui no lado ele já abriu alguns templates de tamanhos prontos pra parte de telefone pra parte de tablet desktop e tudo mais supondo que eu esteja criando uma aplicação eu posso clicar no phone e vir aqui no iPhone 13 Mini é um tamanho que eu tô usando bastante ultimamente iPhone 13 e automaticamente ele já criou aqui a estrutura pra gente trabalhar dentro

Então imagina isso aqui como uma tela do aplicativo vamos supor que isso aqui é a tela de login você vai ter ali a a parte do logotipo né parte do texto também parte de botão de tipografia e tudo mais então é Aqui é onde fica a estrutura em si do que vai é criar a sua aplicação né do que vai ir pra frente depois e eu já vou navegar melhor aqui sobre como que a gente faz a configuração para começar a criar uma tela aqui dentro não se preocupa com isso agora tá Outro ponto aqui

na setinha no lado da da do nosso frame ali a gente tem a parte de sessões isso aqui eu raramente uso Tá mas basicamente ele divide o arquivo é até para facilitar a parte de desenvolvimento ou a parte de você identificar por exemplo se você tem um site muito grande é uma Landing page Então você tem a primeira dobra você pode separar uma sessão como primeira dobra Então você organiza melhor só o que é primeira dobra Você pode ter uma outra sessão por exemplo como página eh de rodapé né ou só rodapé por exemplo então

ele facilita para a parte de organização também do arquivo Outro ponto importante é que ele facilita se você tá com e com partes de um protótipo pronta e quer determinar isso como pronto pro desenvolvimento então se você terminou numa ling page a primeira dobra você pode vir aqui na sessão que você criou e marcar como pronto para desenvolvimento Tá então não não necessariamente o site inteiro está pronto mas a primeira sessão está então uma maneira de você organizar melhor esse trabalho tá nada que uma conversa com o time de desenvolvimento não resolva mas é um

recurso Extra aí também para organizar o seu arquivo tá outra coisa que eu não me preocuparia muito agora e essa última opção é a opção Slice tá ela é útil se você quer exportar uma parte é específica de um recurso de imagem por exemplo de recurso de um frame de um componente que você criou eu raríssimas vezes precisei usar isso aqui eu acho que eu usei se eu usei uma vez na minha vida foi muito tá um recurso bem bem específico mesmo do figma a galera que vem do Photoshop já tem mais costume mas o

figma eu usei para pouquíssimas coisas na sequência o que a gente tem a gente tem as ferramentas que e criam as as nossas telas né que sabendo utilizar isso aqui a gente transforma as telas em algo que que tenha propósito que tenha utilidade Então a gente tem ferramentas como o retângulo a gente tem aqui a linha né Tem a parte oval também de elipse polígono estrela e tudo mais tem inclusive até umas setinhas aqui pra gente trabalhar então quando a gente tá lidando com formas geométricas é nessa área aqui que você vai encontrar inclusive você

tem também o recurso de imagem tá então clicando aqui você consegue fazer uma e uma importação de ali de uma imagem Eu nunca usei essa ferramenta imagem por aqui eu sempre clico na imagem e movimento direto ela para cá nunca precisei usar mas tá aí aqui a gente tem mais algumas ferramentas criativas então tem a caneta né clássica aí de toda ferramenta tem esse recurso aqui você consegue customizar é fazer a customização vetorial igual nas outras ferramentas aí de Illustrator da vida e tudo mais e tem também a ferramenta pense o lápis tá eu raramente

uso isso aqui tá usei também outro recurso aí que eu usei pouquíssimas vezes na sequência temos a ferramenta texto não tem muito segredo aperta texto clica na tela e você consegue começar ali a digitar né então aqui por exemplo aula de figma digitei um texto posso movimentar para dentro do frame né e na parte e direita aqui da minha tela eu tenho a barra de propriedades então aqui eu consigo customizar o tamanho dessa fonte né propriedade de espessura dela e tudo mais outro ponto que a gente vai entrar daqui a pouquinho também mas para te

mostrar como tá associado nessa parte né em uma Você adiciona o texto na outra você customiza essa parte visual desse texto aqui dando sequência na barra de ferramentas a gente tem esse essa área de comentários aqui então Outro ponto muito útil até a nível pessoal mas principalmente colaborativo do tipo arrumar este botão porque está com contraste ruim você pode colocar um comentário pra pessoa né e o time envolvido ali a pessoa envolvida consegue ler esse comentário aqui depois que ela resolveu depois que resolveu esse problema pode clicar nesse cheque Zinho aqui e pronto marcou como

resolvido esse comentário some e ele pode ser resgatado depois caso você queira indo aqui na parte de filtros dos comentários tá pode clicar em mostrar comentários resolvidos ele volta para cá é por padrão a gente raramente usa isso depois que resolver o comentário Só se tiver algum motivo muito importante para querer resgatar ele de novo mas é bem importante ali pra parte colaborativa por último aqui de itens mais importantes do figma a gente tem essa opção de ações tá aqui é outro ponto onde ele traz algumas e alguns pontos mais importantes do sistema alguns atalhos

do sistema mas que eu raramente uso que eu mais uso aqui é esse menu de plugins e widgets porque esses plugins são é são extensões que resolvem problemas dentro do figma para mim vamos supor eu quero usar imagem sem ter que abrir o One Splash que que eu faço pesquiso por One Splash clico para rodar esse plugin e olha só ele já traz as imagens para mim aqui tudo certinho dentro do mesmo e sem eu ter que ficar abrindo né o site ali externamente para usar essas imagens e tem um recurso bem legal também aqui

já fugindo do tema Mas vamos supor que você tenha várias e grids de imagens aqui né E você queira Popular várias imagens de uma vez só você pode selecionar os os retângulos que você criou vem na aba de presets do Plugin e seleciona um tema específico vamos supor eu quero animais é só clicar nesse botão aqui e automaticamente ele preenche todas as imagens que eu selecionei né com animais randômicos ali tá fugindo um pouquinho mas é para você entender o quanto é importante essa parte de plugins né eu tô falando só de um plugin porque

existem milhares aí milhões de plugins pro figma que resolvem muitos problemas Mas é por isso que o figma é a ferramenta mais utilizada atualmente e aposentou o adu XD bom e agora para mostrar para vocês essa parte do menu é da direita aqui eu diria que é um dos menus do figma que mais possuem recursos eles que vão dar muito eh o visual né vai vai definir se vai ficar bonito ou se vai ficar feio o design que a gente cria basicamente e eu vou fazer um desafio aqui de recriar uma tela com vocês que

eu acho que é a melhor maneira possível de explicar os recursos dessa área aqui para isso eu vou acessar o ux Archive tá que ele tem vários templates prontos vários né tem template né ele tem vários print screens né de e de aplicativos prontos e para começar eu vou fazer um exemplo nessa página aqui do un Splash também nosso querido One Splash aí tá da página de debor aí a primeira página do aplicativo pra gente começar a explorar então eu copiei dei um cont control V aqui e já é bem interessante que eu vou conseguir

explicar alguns conceitos para vocês principalmente de replicar interfaces né então eu sempre falo que uma maneira muito legal de aprender ferramenta ou criar repertório de design é replicar interfaces só que existe existe uma maneira que vai ser muito mais proveitoso para você fazer isso né E essa maneira é quando você tira um print de uma tela e cola aqui Tenta fazer ela tenta fazer por cima de um template que Já exista no figma um uma estrutura de tela que Já exista no figma por exemplo esse print screen quando a gente clica nele ele tá em

400 por 866 ele não é um padrão de nenhum dispositivo iOS até então então o que acontece se você tenta replicar aqui por cima Pode ser que o tamanho das fontes fiquem mais regulares porque a gente não sabe a origem dessa imagem se ela foi escalada se ela foi muito reduzida né então pode acontecer de você recriar ela e os tamanhos ficarem nada a ver ali então o que que a gente vai fazer eu já tenho aqui o iPhone 13 mini Mas você pode apertar F para habilitar os frames vem phone e seleciona a opção

do iPhone 13 mini aqui para você ter um frame para começar a trabalhar depois disso eh nessa tela aqui eu vou dar um cont CRL x um ctrl v dentro dessa área aqui e vou redimensionar Olha só de modo que ela feche certinho dentro do frame aqui do iPhone 13 Agora sim eu tô garantido que o tamanho tá ideal que tamanho existe né E que tá funcionando que eu não vou ter risco nenhum dessa imagem ter sido ali distorcida num tamanho nada a ver e acabar ferrando toda a minha organização e bom tem duas formas

de fazer isso tá ou você diminui a opacidade da camada de imagem e faz por cima dela ou você vai no no olhômetro mesmo né deixa no lado ali a imagem e no outro lado só o frame de onde você vai trabalhar eu vou fazer desse modo aqui que eu acho que fica mais fácil então bom primeira estrutura eu tenho o meu arquivo meu frame selecionado bonitinho é aqui que vai acontecer o design e principalmente pra gente explicar esse menu da direita aqui na parte superior pelos pontos mais importantes né a gente tem a parte

de posição ou alinhamento Tá vendo como eu clico aqui e nada acontece por quê Porque a posição ela precisa de um item em relação ao outro para posicionar por exemplo vou criar uma forma oval dentro desse frame aqui quando eu clico na fma oval e seleciono os alinhamentos Agora sim ele tá alinhando Por quê Porque ele tem uma relação ele tem um arquivo P ali né que tá norteando esse espaçamento outro item que a gente tem é a posição tá você você tem a posição x e y nunca usei isso aqui para nada sempre movimentei

e manualmente né acredito que possa existir motivos para fazer a posição aqui no minuciosa Tá mas eu sempre fiz ali no é Ou dou um zoom e movimento na setinha Enfim nunca precisei usar a parte de posição depois na parte inferior aqui a gente tem rotação se eu rotacionar isso aqui vocês não vão notar só que se eu rotacionar isso aqui agora dá para notar né que a gente tem uma rotação dessa forma tá então funciona com imagem funciona com qualquer coisa do tipo para você trabalhar com a parte de rotacionar e aqui também na

sequência a gente tem opções de espelhamento tem o rotate aqui né para rotacionar o espelhamento e também a parte do flip vertical aqui tá na parte inferior depois você tem layout as dimensões né então ele tá 100 por 100 você pode dimensionar ele segurando sempre o shift né para ele ir proporcional Senão ele pode ir tudo errado olha só pode virar uma bola achatada e segurando aqui o shift out ou shift option se eu não me engano no Mac você tem ele é proporcional na parte Central tá então você não perde A Âncora Central dele

olha só ele faz esse movimento proporcional para você não perder o a posição original de onde estava esse elemento né então ele vai crescendo a partir do centro mas se você quer um alinhamento minucioso vamos supor quero 80 por 80 não precisa ficar vindo aqui ó pode vir direto na dimensão coloca o 80 com a chavezinha aqui com o o link ativado aqui né ele já deixa essa dimensão é proporcional também depois na sequência temos a camada de aparência com opacidade então dá para diminuir ir aumentar essa opacidade aqui a gente tem o arredondamento da

borda como isso aqui é um círculo não vai ter arredondamento só que você usa uma forma retangular eu posso fazer o arredondamento aqui posso deixar completo posso deixar zero posso deixar mais ou menos né ou posso fazer também o arredondamento por e Cantos específicos então se eu quero oito na parte superior e zero na parte inferior também consigo clicando nesse nessa gridz inha aqui depois a gente tem os recursos de fio aqui né ou preenchimento você pode customizar a cor como toda ferramenta aí de prototipagem que se preze vai ter essa opção pode mudar a

opacidade também da cor por aqui pode mudar os modos de cores por RGB CSS hsl hsb para ter um controle mais minucioso dessa cor também na parte superior pode trocar por a maneira como você vai fazer esse preenchimento Então pode ter um Gradiente pode customizar a posição dele Pode criar um que no meio você quer mais claro e nos outros ali Mais e Mais Escuros você também consegue é tudo livre de acordo com a sua imaginação e necessidade o figma tem recurso para tudo por sequência tem também a parte de upload de imagem tá então

você pode fazer upload de uma imagem para cá e também upload de vídeo o vídeo é para uma conta profissional tá então é recurso aí que a gente raramente usa dá para quebrar um galho de outras formas alternativas mas caso precise Infelizmente o recurso que só tá disponível no plano pago boa na sequência a gente tem mais três propriedades a gente tem stroke efeitos e exportar no stroke não tem muito segredo isso aqui é o contorno então no contorno a gente também consegue customizar cor consegue customizar se quer um Gradiente se não quer né consegue

customizar a posição se é Central se é externa o o tamanho desse o peso desse Contorno depois eu vou deletar isso aqui mas depois você tem os efeitos então efeito a gente tem quatro tipos sombra interna bem clássico do Photoshop também isso aqui para causar esse efeito de de pressionado né de sombra interna mesmo tem o drop Shadow que é a sombra Projetada então a sombra ali que é que ela pula para fora desse se objeto aqui você também pode customizar ele manualmente pode mudar opacidade de cor né a cor em si né então é

um uma parte bem customizável tem o layer Blur que é o desfoque de camada tá então quanto maior o número mais mais desfocado fica essa camada aqui e por último a gente tem o background Blur que é bem associado Inclusive a gente tem uma aula aqui que é bem associada ao efeito de vidro né então vamos supor que essa camada aqui tem o efeito background Blur eu vou deixar o preenchimento ali um pouquinho mais opaco vou tirar esse esse background Blur olha só a diferença né aqui sem background Blur e com background Blur como ele

ele dilui né de fato o que tá como background e quanto maior mais desfoque ele vai trazer para essa imagem de fundo é é um efeito aí também que ele foi bem comum no no Windows Vista né e por fim a gente tem o recurso exportar Então vamos supor que você terminou esse design aqui ou quer exportar algum arquivo só selecionar o frame clica no maizinho de Sport e você tem várias opções PNG JPEG svg e PDF se ele tá em vetor e você quer exportar isso de forma escalada sem perder a qualidade né Você

pode já selecionar aqui por exemplo em 3x ou em 2x por exemplo ele vai exportar o dobro do tamanho depois é só clicar aqui no botão de exportar e pronto não tem muito segredo aí ele vai exportar esse esse arquivo que você criou e bom eu dei essa volta aqui pra gente entender as propriedades principais do figma mas agora a gente vai recriar essa tela aqui para te explicar mais a parte da tipografia também que é o recurso que a gente tá usando a todo momento dentro do figma então bom primeiro o que eu vou

criar eu vou criar o botão né então eu vou selecionar T paraa ferramenta texto vou escrever o mesmo que está escrito ali né start browsing clicando no texto a gente vê as propriedades dessa fonte então aqui eu tenho a tipografia né olha que interessante como eu já posso filtrar só por exemplo por fontes do Google Fontes né então são fontes gratuitas ali que não vão te dar problema nenhum e usar então diferente de outras ferramentas já dá pra gente pegar diretamente pelo figma Sem problema nenhum aqui eu vou usar ent mesmo que é uma fonte

que eu gosto aqui a gente tem a a espessura né o peso dessa fonte inclusive Itálico bold Extra bold e tudo mais aqui eu vou usar um medium que é mais ou menos o que tá aparecendo para mim esse botão do do aplicativo Dan Splash e o tamanho por padrão eu chuto que é um 16 tá o tamanho a gente consegue movimentar ele aqui no lado da espessura da fonte pode digitar direto 16 e você tem o tamanho para ter a certeza pode passar ali para cima do do print screen que você tirou e dá

para ter uma noção melhorada também deve ser mais ou menos isso mesmo tá na verdade pode ser que seja um 15 pixels essa aqui do do aplicativo mas eu vou usar 16 que é um valor bem legível também e padrão não tem problema nenhum usar esse valor na sequência para criar essa forma de Botão o que eu vou fazer eu vou apertar shift a com shift a a gente cria um ao layout para esse botão que é a forma mais correta possível de criar botões na nas interfaces dentro do figma ele é a maneira mais

responsiva então com esse shift a a gente criou o a layout eu vou clicar no mais no fio para criar o preenchimento vou usar o conta gotas para pegar a mesma cor que tá ali no aplicativo e o texto eu vou segurar control para para selecionar o texto e vou movimentar pra cor branca um ponto pra gente se atentar é que esse botão e toda a estrutura da interface que a gente pegou no print Ela usa uma Grid específica né olha só como ela respeita essa Grid e vai ali basicamente borda a borda do conteúdo

né se a gente delimitar ele respeita toda essa área vermelha que a gente segmentou aqui e não foge dessa área e a gente pode e deve fazer o mesmo no nosso na nossa aplicação né para isso eu vou selecionar o frame vou lá no layout Grid na parte inferior direita eu vou trocar de Grid para colunas vou clicar no ícones das colunas a contagem vou selecionar quatro colunas tipo vou deixar Stretch mesmo e margem que é a área bem importante Onde você tá esse respiro lateral como a gente tem aqui ó esse aqui deve ser

um 24 pixels tá então eu vou deixar 24 pixels também geralmente 16 pixels 24 são valores ali comumente usados oito na minha opinião começa a ficar um pouco apertado apesar de ter esse essa folga eu já acho que a interface fica um pouquinho sufocada então eu vou usar 24 aqui nesse caso e o gutter que é o espaçamento entre as colunas eu vou colocar um 16 pixels aqui nesse exemplo Então por que que eu criei essa Grid para ter uma estrutura no arquivo dentro do figma então eu tenho agora é mais fácil agora tomar decisões

visuais porque eu sei até onde eu posso ir e até onde eu não posso para eu ter uma delimitação e agora aqui no botão eu vou segurar out né vou fazer o vou movimentar ele ali pros lados até ele alcançar a Grid Olha só ele tá dentro da Grid certinho que a gente delimitou e se eu clico no botão e seguro out enquanto eu deslizo o mouse ali para outro lado eu vejo 24 pixels né esse 24 aqui é o espaçamento certinho como a gente separou na Grid que ele tá mostrando que ele tem relação

à parte direita e aqui a parte esquerda da tela Então tá correto era isso mesmo que a gente queria Outro ponto importante de ter usado o auto layout é que ele habilitou pra gente algumas opções automáticas de resizing né e des espaçamento interno desse botão então aqui por exemplo a gente tem o pading horizontal e o vertical se eu quiser aumentar o tamanho desse esse botão eu posso aumentar o pading é vertical aqui posso colocar um 16 pixels por exemplo e eu tenho um botão ali maior na altura para esse caso Como tá Como eu

quero fazer o mais similar possível da aplicação eu vou usar um 12 pixels que parece o que ele tá seguindo aqui mais ou menos eu acho que é 12 pixels mesmo e bom vou seguir dessa forma o botão ele também tem um arredondamento de canto né eu vou tirar esse esse agrid olha só como ele tem um leve arredondamento eu vou fazer o mesmo aqui também eu vou clicar no botão no corner radius aqui eu vou colocar tá com cara de ser um quatro pixels tá quatro ou seis pixels eu vou colocar uns seis pixels

não seis ficou demais eu acho que era quatro pixels mesmo tá então agora eu tenho o botão ali mais similar né com o aplicativo do unsplash Lembrando que ele só não tá 100% porque o unsplash tá usando a fonte em 15 eu tô usando em 16 acho que eu vou deixar 15 aqui também então para para deixar certinho Apesar de que minha agonia esses números quebrados e bom na parte superior a gente tem os terços né Começando Aqui de baixo para cima a gente tem os textos então mesma coisa vou apertar a letra T do

teclado e vou começar com a headline ali vou escrever certinho como tá no aplicativo Então essa fonte ela tá alinhada à esquerda da minha Grid o tamanho dela deve est um 24 piels eu vou deixar um 24 pixels Deve estar um pouco mais mas vou deixar 24 e o peso dessa fonte ele tá um bold olha só tá uma fonte mais mais chamativa Então vou usar o Bold também já na parte inferior a gente tem os texos de tópicos né então eu vou duplicar isso aqui para começar a partir daqui vou escrever o tópico que

tá escrito ali embaixo vou colocar também o parágrafo de texto Olha só eu digitei tudo e ele passou tá eu fiz isso propositalmente para eu resolver depois no é usando a própria caixa delimitadora aqui então eu já tenho os espaçamentos corretos mas o tamanho Aqui tá tudo errado o tamanho aqui eu vou usar o mesmo que eles usaram no C Action então vou deixar um 15 de e de tamanho pro título e um 15 pro subtítulo eu vou diminuir um pouco mais aqui para ficar mais para quebrar melhor essa palavra né a espessura do subtítulo

é um regular e do título eu tô na dúvida ele parece até parece até um pouco menor do que o subtítulo ou parece um medium Tá eu vou deixar um medium o certo seria ser né um Vou deixar um semibold na verdade pra gente ter uma hierarquia um pouco melhor e pra gente entender um outro conceito de espaçamento que eu vou fazer ao invés de ficar e movimentando na setinha aqui Até bater o espaçamento certo eu vou selecionar subtítulo título e vou apertar shift a por quê Porque eu crio também um auto layout Então olha

só o out layout habilitou essas propriedades que a gente tá vendo aqui no painel da direita e é mais fácil eu fazer o espaçamento certo entre eles inclusive até se eu quisesse que ele ficasse ali um no lado do outro não é o que eu quero eu eu quero que ele fique um acima do outro e aqui mal tem espaçamento no aplicativo Então vou usar um dois pixels para deixar o mais parecido Apesar de que dói um pouco meus olhos com isso aqui depois pros outros tópicos fica mais fácil eu vou segurar o alt e

o Shift para duplicar ele no mesmo eixo e depois contrl d para duplicar ele de novo no mesmo espaçamento que eu usei e depois lembra que eu falei sobre o a layout que ele traz esse espaçamento automático eu vou usar agora dentro de desses três aqui que eu dupliquei e por nesse primeiro ele é um auto layout por si só né tanto é que eu consigo espaçar aqui nesse aqui também como eu dupliquei eu consigo e nesse aqui também eu consigo só que agora eu quero fazer o espaçamento certo entre esses três itens como um

como um grupo ou seja seleciono os três aperto shift a para criar outro outro auto layout e olha só agora eu tenho outro auto layout esse aqui tá de forma geral com os topos Então esse controla todos e se você clica em um específico você consegue também controlar só ele então ele não perdeu essa propriedade A diferença é que você tem auto layout filho que é esse aqui desse Card E você tem outro a layout piie que é esse aqui e poderia ter outro fora desse tá dá para fazer um um navegando só por out

layouts E como eu gosto de espaçar com múltiplo de oito vou deixar em 24 pixels e o mesmo dá para fazer pra gente adicionar outro auto layout agora com esse título então eu seleciono isso aqui aperto shift clico no título e dou outro shift a outra vez Então agora eu tenho esse espaçamento aqui observação isso aqui eu demorei para aprender Tá então não se preocupa com isso tá é mais questão de organização de layout que é importante mas você vai pegar isso muito com a prática não tem resposta por agora não tem resposta rápida isso

aqui é prática para aprender então também vou deixar aqui nos 24 pixels em relação ao título eu vou continuar aqui escrevendo certinho como tá ali o exemplo ó aqui eu terminei de de escrever os tópicos e olha só uma outra magia do ao layout como é legal né O que é legal é que você consegue movimentar sem perder essa estrutura tá Então tá aqui também o a importância de fazer isso né inclusive o título tá se você quisesse passar ele lá para baixo é errado mas para você entender se você quisesse né você também poderia

fazer isso olha só a parte de responsividade como tudo fica correto como a gente usa a layout essa mentalidade do auto layout é legal porque a estrutura dela funciona basicamente como o desenvolvedor a pessoa desenvolvedora vai implementar então é também facilitar o trabalho ali do desenvolvedor quando a gente customiza a interface usando out layout e um outro ponto bem importante aqui sobre responsividade né se você clica nesse frame e faz isso aqui olha só como a Grid ela acompanha Mas o conteúdo não tá acompanhando por quê Porque a gente não setou algumas constraints no figma

como que a gente faz isso para entender melhor Olha só vou começar com o botão aqui então eu clico no botão clico nessa opção aqui ó onde já tem uns dois azulzinho ali selecionado constraints quando a gente deixa o mouse em cima é um ícone bem bem pequeno aqui no lado da posição Y tá vou dar um clique e agora eu visualizo as constraints Então como que ele tá configur para alinhar no topo a esquerda Olha só como ele tá setinhas aqui e é exatamente o que acontece porque quando a gente movimenta pra esquerda ele

não pra direita ele não perde o movimento ele tá com uma Âncora ele tá fixo ali e para baixo mesma coisa ele não perde o seu movimento só que quando eu clico nesse botão e a parte de constraints horizontal eu seleciono pra left mais right ou esquerda mais direita olha só o que acontece quando a gente expande esse frame ele tá respeitando esse posicionamento à esquerda e direita e ampliando o tamanho dele respectivamente E por que que funcionou porque eu criei um ao layout então é diferente de você vi por exemplo e criar aqui um

um botão Create account por exemplo pegar um retângulo e passar por cima né Isso aqui é a maneira que todo mundo fazia aí até um até um tempo né fazia botões assim porque isso aqui vai ser mais difícil de controlar depois os constraints quando você pega o costume logo cedo a usar o playout você consegue ter uma interface responsiva como essa aqui né de maneira muito mais fácil o mesmo a gente pode fazer quando a interface ela aumenta ali o seu a sua altura tá olha só se eu aumento aqui ele já esse botão que

deveria ficar lá na parte inferior tá ficando fixo porque eu não setei para ele acompanhar se eu clico no botão E aqui onde tá o top eu coloco no bottom para ele ficar e fixo no no rodapé olha ali como ele já até trouxe os tracinhos ó mostrando que é ali que ele tá ancorado então agora quando a gente movimenta ele fica fixo ali na parte inferior então é bem mais fácil criar protótipo responsivo é dessa forma aqui né ah eu não mostrei mas o mesmo dá para fazer com texto tá ele tá aqui no

Left Olha só eu faço movimento ele fica ali fixo se eu movo para paraa Left mais right agora quando eu movimento ele acompanha também esse espaçamento ali direita mais esquerda se você quisesse que ele ficasse Centralizado você clicaria em center e olha só o que acontece Ele sempre vai ficar no centro mas ele não vai expandir o seu conteúdo né Então tá aí também mais uma dica de ouro para você começar bem agora pra gente concluir essa parte superior a gente tem uma composição de imagens né eu ia simpli ficar isso aqui mas eu acho

que eu vou tentar fazer exatamente como tá aqui mesmo porque agora eu levei a sério o a replicar interface inclusive vou até aumentar o tamanho da fonte que deve tá um 28 ali nesse título e bom aqui o One Splash tá trabalhando com conceito de modal né a gente tem uma um uma figura fundo aqui né Tem uma uma imagem que tá sobreposta que tá ocupando essa área principal só que a gente sabe que tem um conteúdo lá no fundo também então o que eu vou fazer eu vou apertar R paraa Nossa ferramenta de retângulo

e vou fazer isso aqui ó vou delimitar toda a área que é que a gente sabe que tá nesse Primeiro Plano aqui delimitei a área eu vou arrastar essa camada lá para baixo e a cor eu vou deixar a cor branca tá então esse frame aqui a gente sabe que tá com a cor branca quando eu clico no frame geral aqui no título eu consigo customizar a cor que vai ficar lá no fundo ó Então vou até pegar o conta gotas eu sei que lá no fundo é tá essa cor aqui agora então ele já

tá mais similar com o aplicativo né só que esse aqui ele tem bordas arredondadas também então vou selecionar esse retângulo no corner radius aqui eu vou clicar nesses quatro é quadradinhos para pegar o individual né Por quê Porque é só lá no topo que tem borda arredondada lá na parte inferior não tem então no canto superior esquerda eu vou colocar um seis pixels Na verdade vou colocar um oito e no direito também eu vou colocar um oito pixels então agora a gente tá com a mes mesma estrutura vou até esconder essa Grid aqui a gente

tá com a mesma estrutura do aplicativo e agora eu vou vou deixar da mesma forma essas imagens aqui tá pra gente levar a sério esse esse desafio aqui então eu vou criar alguns Alguns retângulos como eles estão e trabalhando ali num Splash mais uma as grids ali na parte inferior eu vou duplicar essas aqui também para ficar certinho na parte no terceiro bloco aqui agora o que eu vou fazer eu vou apertar k para escalar essa imagem aqui porque eu preciso que ela seja menor né como a gente tem ali no exemplo do do unsplash

vou movimentar para cá vou rotacionar né ali deve est mais ou menos um vou colocar um 8 g aqui parece que tá um 88° vou subir isso aqui dá até pra gente diminuir um pouquinho mais para ter essas imagens ainda é um pouco menores aqui olha só aqui bem importante ele tá fugindo né ele tá sobrepondo tá fugindo ali desse desse retângulo que a gente tem de fundo e por quê Porque a gente precisa delimitar a área que a imagem vai ficar e que não vai ficar para isso nesse retângulo nesse background aqui ó que

a gente criou da da modal a gente vai clicar com direito e depois vai em frame selection para transformar isso aqui num frame por quê Porque depois que a gente cria transforma isso aqui num frame você consegue clicar nessa opção de clip content e o clip content Corta tudo que tá fugindo desse desse frame aqui então eu vou ativar o clip content a imagem que eu criei o grupo de imagens eu vou movimentar para dentro desse frame e agora ele ficou cortado Como eu queria dentro desse desse retângulo aqui inteiro Olha só pra gente entender

melhor a estrutura né aqui no lado estão as camadas eu tenho o retângulo que é eu vou vou renomear ele como background branco que ele tá transformado num frame dentro dele eu tenho bloco de imagens mosaico que são esses aqui cinzas e depois o retângulo que tá sendo definido aqui pra cor de background Tá feito isso agora o que eu vou fazer vou acrescentar as imagens né então eu vou selecionar todas as imagens vou usar o mesmo plugin que eu usei ali com vocês no no começo da aula One Splash e vou aqui no insert

Random para jogar imagens randomizadas aqui nesses blocos e pronto ele fez o o trabalho fácil pra gente Claro falta os ajustes ainda o que eu preciso cortar esse fundo aqui né preciso e fazer esse preciso diluir essa imagem Aqui tem duas formas de fazer isso tá primeira forma delas eu vou duplicar aqui para mostrar primeira primeira delas a gente pode usar um retângulo aqui no fundo pode vir no fio no preenchimento e trocar PR opção de Gradiente linear então na parte inferior eu uso Gradiente branco né que é onde começa esse Fade aqui e na

parte superior branco mais com a opacidade em zero olha só então consigo controlar para esse Fade pegar aqui mais ou menos dessa dessa forma Aqui quanto mais a gente puxa mais diluído ele fica né Fica com esse aspecto menos é menos grosseiro né Olha só como ficou né deu para atingir ali o resultado o mais similar possível uma outra forma que a gente tem que inclusive é o que Vai facilitar quando você você precisar exportar essa imagem é já deixar a imagem da maneira certa ali né com o Fade e próprio dentro desse próprio frame

da imagem Então como que a gente faz isso seleciono o bloco de imagens mosaico aqui nas camadas Olha só eu tenho o grupo selecionado vou clicar com direito de novo e frame selection por quê Porque eu quero cortar ela assim como eu fiz naquela versão ali do do retângulo né Eu quero cortar essa imagem e não deixar ela vazar de uma área delimitada agora eu vou no cheque Zinho do clip content assinal ele e olha só quando eu seguro control e movimento ele vai cortando Se Eu desativo o clip content ele foge dessa dessa caixa

da limitadora então clip content é basicamente isso ele segmenta o que fica dentro da caixa da limitadora ou deixa ele vazar ali né caso você deixe ele no é desabilitado então habilitei ele vou deixar ele mais ou menos aqui e essa aqui é uma outra versão né assim já Ficaria legal mas a gente consegue também implementar aquele Fade e aqui dá para fazer a mesma coisa tá dentro desse frame dá para também usar a camada ali de de Gradiente fazer um linear aqui e usar aquele Fade da mesma forma que eu expliquei para vocês aqui

Inclusive eu vou clicar nesse Fade que tá pronto vou no copiar copiar propriedades copiei agora eu vou nesse aqui vou clicar com direito e colar propriedades Porque daí eu já copio e colo todo aquele esquema de Gradiente que eu tive que fazer ali então aqui a gente também consegue ali um resultado é bem similar ao aplicativo original da unsplash olha só tem teria mais formas de fazer isso tá Então são duas ali resumidamente que eu trabalhei para te mostrar como a gente pode atingir esse efeito aqui cara também deu pra gente desmistificar muito sobre o

figma se tá fazendo sentido para você não esquece de se inscrever no canal de curtir o vídeo comentar se inscrever principalmente porque é muito importante pro meu trabalho e me impulsiona muito para continuar aí criando tutoriais criando conteúdos para vocês futuramente beleza pra gente finalizar eu quero mostrar uma outra aba do figma que é ABA protótipo ou seja o figma permite que você consiga criar protótipos interativos para você navegar navegar entre eles mudar entre tela a até o ponto b fazer essas interações ali né conf figma então aqui eu vou criar um exemplo bem bem

breve tá bem rapidinho mesmo muito meio sem propósito tá para mostrar para vocês o o potencial do que que a gente pode fazer com isso então eu quero fazer um exemplo onde esse botão leva para essa tela aqui para dar uma uma cara diferente pra gente entender que vai que mudou de tela eu vou tirar isso aqui vou expandir essas imagens aqui vou apertar k para escalar ele proporcionalmente né Eu acho que vai ser um exemplo legal bom primeiro passo eu vou renomear paraa tela um e dois aqui para eu saber para onde eu vou

levar elas não é não é é é primordial isso Tá Mas é mais paraa organização pessoal mesmo vou lá na aba protótipo lá no canto superior direito da tela aqui eu tenho as configurações de protótipo eu vou trocar pro iPhone 133 que que é isso aqui né Isso aqui é o visual do protótipo quando você tá compartilhando então ele vai ficar com mocap certinho do dispositivo que você selecionou então vou selecionar iPhone 13 eu vou clicar nesse Play Aqui tá o play é o arquivo que é o é ação que inicia esses protótipos interativos vou

vou clicar no Play e olha só aqui a gente tem a cara do protótipo que a gente pode começar a tornar ele interativo dentro do figma nota como o mocap externo ele não encaixou certinho na tela que a gente tem tá Por quê Porque esse iPhone que a gente pegou ele não é o mesmo tamanho que a gente usou para criar a tela então eu vou usar esse 375 por 8812 ele tá como o iPhone x aqui tá então troquei ele atualiza sozinho e agora sim ele fechou certinho dentro do mocap se você viesse aqui

selecionasse por exemplo uma uma web eu vou selecionar um Macbook aqui olha só ele vai ficar mais errado ainda porque ele sempre se adapta de acordo com o o dispositivo que você selecionou tá então vou voltar para iPhone x aqui dá para customizar o fundo também tá então se você quer que o fundo ali seja branco da apresentação ele pode ser branco também ele atualiza sem problemas bom vou voltar pro pro iPhone certinho aqui e bom agora o que eu quero eu quero que quando eu clique nesse botão start browsing aqui que ele leve para

essa segunda tela que eu vou fazer com a aba de protótipos selecionada eu vou dar um clique no botão e olha só como o botão ele cria delimitações ao redor E ele cria inclusive umas bolinhas com o mais no meio né Essa bolinha com o mais no meio é basicamente o ponto inicial de ancoragem para onde você quer levar é para onde você quer enviar né o destino desse desse ponto aqui então eu clico no maizinho aqui seguro não solto o O Clique né deixo segurado arrasto até a segunda tela e solto lá então agora

eu tô configurando de modo que quando eu clique ele me leve pra segunda tela e é exatamente o que acontece aqui quando eu clico nesse botão ele vai pra segunda tela e o figma tem alguma alguns pontos de interação bem de animações bem interessantes né porque aqui ele foi instantaneamente mas tem esse dissolve que olha só como ele vai um pouquinho mais lento né ele dá essa transição mais suave PR pras telas tem o Smart animate que é basicamente a configuração inteligente do figma Olha só como ele fez essa faz essa movimentação assim mais e

mais escalada né Por quê Porque ele entende que essa imagem que tá de fundo aqui pelo nome da camada ele entende que é a mesma coisa na outra tela E aí ele só escala ali automaticamente para dar esse efeito AL ali um pouco mais é mais divertido ali pro protótipo enfim tem várias outras aí que daí a gente foca mais em animação né algo que fugiria muito da aula inclusive no intuitive pixel no meu curso eu tenho módulo só focado em prototipação interativa ensina a usar animação em Gif todo tipo de transição horizontal vertical slide

tudo que dá para fazer tudo que não dá a gente tem lá também no curso de boas práticas beleza e pessoal era tudo isso que eu queria passar para vocês nessa aula a ideia dessa aula era ser bem rápida tá mas não dá para falar do figma de maneira rápida então e eu quero que sirva também como uma maneira de aprendizado a maneira de servir como pontapé inicial para você começar a aprender figma né eu sei que pode ser um pouco mais assustador no começo mas ao longo dessas práticas como a gente viu aqui pode

ser cada vez mais fácil para você mais natural beleza de novo não esquece de se inscrever no canal Não esquece de curtir o vídeo que é muito importante fica à vontade também para conhecer o meu curso para saber aqui a gente a gente descobriu sobre o figma né você entendeu sobre o figma o meu curso ensina muito sobre boa prática de usabilidade de Face para você saber como criar essas essas telas mais bonitas né Como que você cria telas que tenha usabilidade que faça sentido pro negócio pro usuário e tudo mais tá no curso tela

página eu explico muito mais sobre sobre como funciona as aulas também no site que você pode encontrar aqui na descrição show de bola Espero que tenha curtido um abraço e até a próxima aula valeu