Curso de Figma 2025 do básico ao avançado

saber o figma é o passo número um para você começar na sua carreira de IX e o melhor você não precisa pagar para começar a usar e também ele é fácil de você aprender meu nome é adressa AD e seja bem-vindo a esse curso grátis de figma que eu vou te ensinar tudo que você precisa para começar a criar as suas primeiras interfaces a gente vai do básico até o avançado desde o zero até o protótipo e no final a gente vai criar essa interface aí que você tá vendo Beleza então vamos direto aqui pra

tela antes de im nada eu quero falar para vocês que eu criei um material com todo o conteúdo aqui desse curso eu criei uma apostila bem legal que você pode ter acesso para que caso você tenha alguma dúvida Futuramente você consulte essa apostila e também você pode viver a aula aqui toda de novo não tem problema eu vou deixar o link aqui embaixo Aqui na descrição antes da gente entrar aqui em toda a parte aqui falando das funcionalidades do figma quero falar um pouquinho sobre ele o figma é um software que a gente usa para

criar as interfaces ele é o software mais pedido no mercado se você for olhar Qualquer vaga aí qualquer coisa que esteja oferecendo uma oportunidade de emprego ou algum tipo de contrato você vai ver que tá pedindo figma eu sei porque eu já trabalho com figma há bastante tempo eu já trabalhei em vários projetos em várias outras empresas e sempre vejo o figma rodando por aí para você começar a usar o figma você tem que entrar no site aqui figma.com e você pode criar a sua conta Direto você pode dar uma olhada aqui no site né

para ver como é que todas as coisas funcionam o site do figma é bem legal mas O interessante é que você crie aqui a a sua conta ó get started for free Você vai clicar aqui para criar a sua conta e depois você vai botar o seu e--mail você pode fazer login com Google pode fazer da forma com que você quiser eu vou fazer o login aqui e daqui a pouco a gente se vê assim que você criar a sua conta você vai dar de cara com isso daqui isso aqui é como se fosse a

homepage aqui do figma Onde Você Vai ter todo seu gerenciamento de arquivo você vai poder criar arquivos novos também vou dar uma pincelada rápida aqui no figma aqui na nossa esquerda a gente tem toda a parte de conta que tem aqui ó meu nome aqui e tudo mais toda a parte de search for anything Você pode buscar por qualquer coisa normalmente eu uso isso aqui para buscar arquivos e aqui logo abaixo a gente tem alguma parte de gerenciamento aqui dos arquivos a gente tem os drafts que são os rascunhos arquivos que você já trabalhou e

tudo mais e você não organizou em nenhuma pasta e aqui a gente tem todos os nossos projetos Conforme você for trabalhando em mais coisas você pode criar mais projetos vamos dizer que você seja um freelancer Ah eu fiz um trabalho pra Apple eu fiz um trabalho pro Spotify cada projeto ele vai ser uma pasta diferente que lá vão ter vários arquivos ali dentro só que aqui eu tô numa conta de graça e você tem umas certas limitações também no caso para você criar mais projetos você precisa de uma conta paga então você pode começar aí

como você tá experimentando figma vendo se você gosta vendo se você não gosta de graça já serve bastante pra gente principalmente para essa aula e aqui eu tenho toda a parte dos meus projetos conforme eu for criando os mais projetos aqui dentro da pasta de projetos ele vai aparecendo aqui embaixo Aqui eu tenho a parte de Trash né que é como se fosse AL lixeiros você mover um arquivo pra lixeira você deixa ele lá de uma forma mais organizada Você pode até depois se que você quiser deletar ele definitivamente da lixeira e aqui embaixo a

gente tem a parte de comunidade que eu vou explicar um pouquinho mais pra frente então vamos aqui paraos nossos arquivos recentes E aí eu vou simplesmente criar um projeto aqui eu tenho essas quatro opções né eu tenho a opção de importar criar um slide deck né que é o figma slide você pode criar o figgen também que ele funciona como se fosse um whiteboard assim ele basicamente um quadro negro onde você pode de rabiscar várias ideias Mas não é isso que a gente tá focado aqui agora nem no figma slide né você não vai criar

slides aqui o que a gente precisa agora é criar um arquivo de design a gente vai criar a nossa interface e vai aprender como é que o figma funciona então vamos lá aqui eu posso clicar aqui e criar o meu arquivo mas antes de criar o meu arquivo Eu queria falar uma outra coisa para vocês você tem a opção também de fazer o download do aplicativo do figma e utilizar dentro do seu computador no caso aqui se você olhar aqui em cima eu tô usando ele dentro do browser né do navegador Eu normalmente gosto de

fazer o download para dentro do meu computador porque acaba que eu tenho um acesso mais rápido ao figma ali eu não preciso entrar no no Browser ali no navegador digitar o endereço do site do figma entrar na minha conta então tem alguns passos aí que eu gosto de pular e também muitas vezes dependendo do usuário dependendo do site eu ativo notificações do browser e acaba me distraindo Então prefiro baixar o aplicativo do figma e trabalhar ali dentro e para você fazer o download desse aplicativo você simplesmente vem aqui na conta e get desktop app que

você vai baixar ele na hora ele vai entender o sistema operacional que você tá usando se tá usando Mac ou se você tá usando Windows e vai baixar a versão certinha para você e agora que eu criei o meu arquivo a primeira coisa que eu gosto de fazer é o quê é renomear esse arquivo e como é que a gente faz isso vou dar dois cliques aqui eu vou botar aqui ó curso grátis de figma 2025 e logo aqui embaixo a gente tem a pasta que esse arquivo tá localizado no caso ele tá nos drafts

nos rascunhos E por que que é importante renomear os seus arquivos porque agora você tá trabalhando com um arquivo só então a chance de você ter uma bagunça é praticamente nula mas daqui a pouco você vai estar trabalhando com 5 10 15 20 100 arquivos e aí é importante que você bote nome neles e Organize eles empastes e tudo mais porque esse arquivo fica mais fácil de ser achado Então você vai lá no na busca dos arquivos vai digitar o nome do arquivo que você tava trabalhando e vai ser simplesmente fácil de você achar então

a importante que você mantenha essa organização para você ter um fluxo de trabalho melhor agora nós vamos falar de duas coisas uma é o canva e outro é o frame o canva é tudo que você tá vendo aqui dentro dessas duas laterais aqui a gente tem a nossa barra aqui da direita que é basicamente a nossa barra de edição tudo que a gente tem aqui na esquerda é responsável pela organização do seu arquivo né e os suas camadas também e aqui embaixo a gente tem toda a parra de ferramentas Ou seja você vai acessar todas

as ferramentas que o figma tem para você conseguir executar né Criar o seu design e o canva tá bem aqui no meio delas tenta pensar no canva como tipo um fundo infinito e aí a gente tem o frame o frame ele é basicamente a sua folha em branco ou seja você tivesse pintando um quadro ele seria basicamente a tela para você poder pintar onde você vai criar ali todo o seu design como é que a gente tem acesso ao frame você pode apertar F no seu teclado eu tava aqui Eu apertei F ele já trocou

para cá você pode clicar e arrastar E aí você já cria o seu primeiro frame ó tá frame um ou se eu apertar f de novo eu posso selecionar alguns tamanhos pré-estabelecidos que o figma já botou então aqui ó tem o desktop tem aqui Um MacBook Air Eu tenho um desktop normal tenho outro MacBook Pro tem até TV e aí eu tenho o tablet Ten o fone também que é o telefone que a gente usa muito para fazer um design mobile né um design de telefone a gente utiliza vários formatos que estão aqui e tem

outros aqui né que é de social media paper Como eu faço muito design pra interface eu acabo focando mais nessa parte aqui de cima onde tem telefone tablet e desktop aí se eu quiser escolher uma delas por exemplo Ah beleza eu gostei desse iPhone 14 15 pro aqui Eu só clico ele na hora já cria para mim sem o menor problema e sem o menor trabalho aí agora como é que a gente consegue Navegar aqui dentro do nosso canva para você conseguir imagina que você tem um frame aqui ó eu vou clicar e vou arrastar

aqui ele aqui ó só ó clicando e arrastando eu já joguei ele aqui pra tela eu quero ver esse frame aqui como é que ele tá eu vou apertar espaço e vou ó a clicar e arrastar tá vendo que quando eu aperto o espaço ele troca para uma mãozinha aqui ó pressiono o espaço e ele vai arrasta para uma mãozinha aqui então fica muito mais simples de eu conseguir Navegar dentro do meu canva agora eu vou manter esse frame aqui eu vou selecionar isso aqui e vou deletar né É só para você deletar um frame

ou deletar alguma coisa dentro do figma você seleciona que você quer e você pode apertar delete no seu teclado e agora se eu selecionar o meu frame eu vir a parte aqui da esquerda eu vou explicar um pouquinho mais detalhadamente o que que é cada parte aqui a primeira a gente tem tudo relacionado ao seu arquivo depois a gente tem os asset os asset vai ser como se fosse uma biblioteca onde você vai ter todos os seus componentes a gente vai aprender um pouquinho mais no final da aula sobre isso mas você vai ter os

seus botões os seus inputs de texto coisas que você vai criar e repetir várias vezes dentro do seu design e aí depois que você componentizar isso ele vai começar a aparecer a listinha dos seus componentes aqui e logo abaixo aqui a gente tem as páginas que você pode renomear a página aqui aí você pode botar aqui ó design se você quiser renomear sua página é como se fosse você renomear o seu arquivo você deu dois cliques escreveu L design sem problemas super fácil de entender se você quiser criar uma nova página é só você clicar

aqui no mais aí você pode renomear para alguma coisa que você for usar eu vou criar uma que eu normalmente faço para estocar os arquivos ou design que eu não estou mais usando que se chama arquivados E aí eu vou deixar ele já separado aqui e logo abaixo a gente tem uma coisa muito importante que são os layers os layers são as camadas Então a gente tem aqui a nossa primeira camada aqui tá com iPhone 14 15 pro porque foi o tamanho que eu selecionei ali naquele template que L tinham lá e se eu quiser

renomear também eu posso botar aqui ó design mobile apenas Dei dois cliques escrevi e apertei enter no decorrer da aula a gente vai aprender como é que as camadas né funcionam dentro dos frames cada objeto tem o seu comportamento e sua forma de aparecer se eu clicar aqui se eu selecionar esse esse frame na nossa parte aqui da direita eu tenho toda a parte das propriedades do elemento que eu tô selecionando no caso desse frame aqui eu tenho a parte de posição tenho a parte de layout a parte de aparência que a gente vai aprender

algumas coisas mais detalhadas no decorrer da nossa aula tá vendo tenho 594 que é a posição dele em relação ao canva e eu tenho aqui ó o posição também no eixo X que é relacionado ao câo então se eu chegar aqui mudar para zero ó zero e zer E aí ele já muda a posição dele dentro do canva agora eu tenho o tamanho aqui de 393 por 852 que é o tamanho pré-estabelecido aqui do Design do iPhone 14 e do 15 e se eu quisesse simplesmente mudar isso eu posso botar aqui ó ó vou botar

400 eu posso botar 600 para vocês conseguirem ver melhor ó e aí eu consigo botar o tamanho que eu quiser se eu quiser chegar aqui no cantinho do frame aqui ó clicar e arrastar que aí o tamanho fica mais livre né E também tem opção também de eu chegar aqui na lateral que aí eu mexo na largura e na altura ao mesmo tempo agora vou dar um CRL Z que é simplesmente para eu voltar todas as ações que eu estava fazendo Inclusive eu falei do contrl Z que é um um outro atalho eu vou sempre

tentar dar algumas dicas de atalhos para você porque eu gosto de ensinar as pessoas influenciar as pessoas a usarem os atalhos porque o seu fluxo de trabalho Fica mais rápido e você na hora Ah eu tenho que criar um frame vou apertar F eu tenho que voltar à ação que eu tinha feito vou apertar o CRL Z eu tenho que mexer rapidinho aqui no mouse ao invés de eu chegar aí na barra de ferramenta clicar na mãozinha eu só pressiono o mouse aqui e as coisas funcionam muito mais dinâmicas Por falar em dinâmico essa barra

aqui na lateral aqui da direita ela também é muito dinâmica de acordo com o objeto que você esver selecionando ela vai te mostrar algumas coisas aqui diferentes se você tiver um botão ela vai te mostrar de uma forma diferente se você tiver uma imagem ela também vai te mostrar outras opções a gente vai ver alguns desses parâmetros diferentes no decorrer também da nossa aula e é uma coisa legal de falar sobre os atalhos se você quiser saber todos os atalhos você simplesmente vem aqui nesse pontinho de interrogação que que tem aqui na direita dá um

clique aqui e você vai ver aqui ó keyboard shortcuts e quando você clicar você tem aqui ó toda a opção aqui dos seus atalhos você tem ó Tools que são as ferramentas aí você tem viw que são todas as opções de visualização Zoom então tem toda a lista aqui de atalhos para você aprender aí para você voltar é só clicar no x aqui do lado uma coisa legal do figma é que ele é uma ferramenta extremamente colaborativa por exemplo se você tá trabalhando num projeto você tem às vezes um gerente de projeto junto com você

que vai te dar todo aquele guia de como é que tem que ser a funcionalidade que você tiver fazendo e você também tem um desenvolvedor que vai executar né fazer aquilo tudo funcionar no código então é importante que você inclua essas pessoas também no arquivo e como é que você faz isso você tem essa opção de share aqui de compartilhamento se você clicar no compartilhamento você vai ter várias opções aqui de compartilhamento você pode digitar o e-mail da pessoa aqui e convidar ela você pode copiar o link e mandar para ela também e aqui você

tem mais algumas opções avançadas aqui do figma que já inclui Dev mode link você pode copiar aqui ó o link do protótipo que é algo básico né que você tem que mandar às vezes pro desenvolvedor para ele entender Até você apresentar para ele mas essa parte aqui de Dev mode de publish to community que é você publicar na comunidade que a gente vai aprender já já e o get embed code todas essas coisas aqui são um pouco mais avançadas que não vão acrescentar muita coisa aqui na nossa aula Beleza então vou acabar passando por isso

e aqui a gente tem esse Ezinho que é a parte de gerenciamento de arquivo Então você tem todas as suas ações você tem file que é o seu arquivo tem editar visualizar toda a parte de gerenciamento de arquivo tá aqui então se você quiser fazer alguma coisa no seu arquivo é dar uma olhada aqui que você vai conseguir ter acesso a tudo e agora vamos falar sobre a nossa amiga barra de ferramentas a gente tem essa Barrinha aqui embaixo que tem todas as opções aqui todas as funcionalidades do filme tem aqui ó O Mover Hand

to scale serve para você escalar assim você diminuir e aumentar de uma forma única que eu vou explicar isso mais paraa frente né para você ver a diferença de você diminuir usando isso daqui e diminuir usando as propriedades normais ali diminuindo o Pixel e aqui do lado a gente tem o frame né que a gente já viu como é que ele funciona a section que é uma sessão que você cria por exemplo você trabalhou num fluxo de login e dentro desse fluxo de log né você tem a primeiraa página que vai ser ah Faça o

seu login ou crie sua conta você vai apertar o botão de fazer login e depois vai ter uma outra tela com todas as credenciais que ele tem que botar e depois você vai ter a outra tela que é a homepage desse seu projeto que você tá trabalhando Então só aí eu falei de três telas E aí isso é responsável pelo fluxo de login sendo bem cru aqui para vocês conseguirem entender e você pode criar uma sessão chamada login e botar esses frames dentro dela eu vou mostrar aqui para vocês depois quando a a gente estiver

fazendo para você entender certinho como é que ela funciona mas é bem simples de você entender é basicamente um agrupamento de frames e a gente tem a opção de Slice Slice é é basicamente você partir né selecionar uma parte ali do seu frame da sua imagem e você quer exportar aquilo ali e para ser bem sincero nem uso muito esse slce aqui a gente tem a opção de você criar objetos você tem retângulo linha e seta elipse né que pode ser um círculo aí você tem um polígono um estrela e você pode importar uma imagem

em o vídeo e se eu clicar aqui a gente tem a pentu a pentu basicamente vai criar um objeto da forma que você quiser então deixa eu mostrar para vocês rapidinho se eu quiser clicar aqui ó for clicando de um lado pro outro ó ele vai criando um objeto e se eu quiser fazer uma linha curva por exemplo eu clico em outro lado aqui sem soltar o ponto eu vou arrastando o meu mouse e aí eu já vou conseguindo fazer uma curva se eu quiser continuar essa curvatura aqui eu simplesmente posso soltar o botão do

mouse e continuo com a minha curva aqui se eu quiser editar essa curva eu vou apertar o v que é a setinha de edição E aí eu vou aqui ó essas ruinhas aqui né eu tenho todos esses pontinhos que eu posso mexer na curvatura dela então isso serve muito pra gente vetorizar alguma coisa específic Às vezes você quer criar um ícone específico às vezes você quer fazer uma ilustração isso aqui é bastante usado para isso e a gente a gente tem aqui o pencil o pencil basicamente é um lápis aqui você pode simplesmente clicar e

arrastar super simples de usar temos as nossas Fontes né que esse aqui é responsável pelo t o text a gente vai aprender a manipular o texto durante a aula e logo em seguida a gente tem os comments lembra que eu falei para você que o figma é um software extremamente colaborativo os comentários servem exatamente para isso porque normalmente você vai criar um comentário Ah pô Claro que aqui a gente não tem uma interface né mas aí eu boto aqui ó gostei desse frame e eu vou apertar enter e aí ele já cria aqui o nosso

comentário e deixa para alguém ver entendeu À vezes você quer deixar algo específico pro seu desenvolvedor deixar uma anotação pro seu gerente de projeto então é importante que você faça essa comunicação e os comentários ajudam bastante nisso e tanto você contra a outra pessoa pode vir aqui e responder também e para eliminar esse comentário Você pode marcar como resolvido e por fim a gente tem essa parte aqui que são as Actions as Actions eu tenho que falar algo específico para vocês algumas funcionalidades aqui você não vai ter acesso por quê Porque essa aqui é uma

conta paga mas fica tranquilo para tudo que eu for mostrar aqui dentro do figma que tem algum tipo de funcionalidade que está no pago eu vou mostrar um jeitinho que você consegue fazer da forma de graça também tá e nessas Actions aqui você tem acesso a todas as funcionalidades que utilizam Inteligência Artificial né do figma e você também tem acesso a outras coisas como os seus assets que lembra que eu falei para você que pode ser a biblioteca ali com todos os componentes que você tá criando com os botões os inputs de texto Então aqui

também você tem acesso a isso de uma forma mais rápida e também você tem os plugins e os widgets os plugins no figma São extremamente importantes porque eles fazem com que você trabalhe de uma forma mais ráp eu gosto de falar que o plugin não vai fazer nada por você ele vai servir como um apoio Às vezes você tá precisando pegar uma imagem criar uma sombra fazer algo que você conseguiria fazer normalmente mas você precisa daquela agilidade então O plugin ele te ajuda muito com isso e a gente vai ver alguns plugins aqui no decorrer

da nossa aula e por fim a gente tem essa parte aqui do Dev mode o Dev mode eu não vou entrar em detalhe nele agora porque ele é uma parte bem mais avançada que funciona uma colaboração entre o desenvolvedor e o designer eu acredito se eu começar a entrar nisso daqui já vai ficar muita coisa você vai acabar vendo umas paradas muito avançadas que podem deixar a sua cabeça ali um pouco confusa e não é isso que eu quero eu quero passar para você a simplicidade do figma Então agora que a gente já falou bastante

aqui sobre o figma né sobre as funcionalidade sobre como funciona a interface vou começar a botar um pouquinho a mão na massa vou selecionar aqui isso daqui e vou aqui ó deletar agora o que eu vou fazer vou dar um control menos né vou dar um zoom menos então para eu mecher com o zoom eu posso apertar control menos ou control mais eu posso vir aqui também na lateral tá com 50% eu posso chegar e botar de zoom de 100% Mas como eu gosto de trabalhar com os shortcuts né que são os atalhos eu posso

botar aqui ó control menos ou control mais e se por acaso você tiver no Mac o que for control é o comand então no caso como eu estou no Mac eu aperto comand menos e comand mais então se eu fal fá alguma coisa aperta comand não sei o qu é control e não sei o qu Beleza agora vamos aprender a manipular objetos eu vou criar aqui um retângulo então para eu criar o retângulo eu vou selecionar a opção aqui ó só posso selecionar aqui ou apertar o r que ele já tá aqui do lado já

mostrando aqui o atalho e eu posso fazer de duas formas ou simplesmente clicar que ele já simplesmente cria aqui um retângulo ou eu posso de novo vou apertar o r aqui dessa vez clicar e arrastar E aí eu crio um que pode ser com qualquer tipo de tamanho né Ele fica mais um retângulo fininho ele fica um retângulo mais tipo Fino na vertical e eu posso fazer do jeito que eu quiser aí depois eu só soltar aqui certinho aqui eu basicamente Criei um quadrado né quando eu dou esse duplo clique ele cria o mesmo tamanho

de largura e de altura agora vamos aprender a movimentar esses objetos eu vou pegar esse grande aqui e vou deletar esse daqui para ficar mais focado vou dar um zoom mais para que a gente consiga ver legal mesmo vamos dizer que eu quero girar esse quadrado eu eu vou aqui na lateral você vê que a minha setinha ela já fica até meio que uma curvatura então ó se eu chegar aqui no cantinho dela e ó clicar e arrastar eu já consigo rotacionar esse quadrado e se eu segurar o shift eu começo a fazer ângulos mais

certos né não fica aquela coisa quebrada ele se move se eu não me engano de 15 em 15º André Como é que você sabe disso tá vendo ó olha aqui ó aqui na lateral ó tá vendo como até mudou algumas coisas já ofereceu umas outras opções aqui para eu poder editar aqui a gente tem a opção de rotacional então ó se eu segurar aqui o shift ó tá com 15 30 45 60 75 então ali já vai mudando automaticamente entendeu e eu também posso aumentar da mesma forma que eu fiz com o frame anterior então

se eu quiser aumentar de uma forma igual eu seguro shift e ele vai aumentando aqui ó certinho proporcionalmente né e agora vindo aqui pra nossa barra aqui lateral Eu tenho algumas opções eu posso mover esse objeto dentro do frame que uma coisa importante de saber é que ó quando eu criei o meu retângulo Eu tenho um objeto aqui dentro do frame se eu tirar ele para cá ó tá vendo como é que ele muda aqui a posição agora se eu arrastar para dentro do frame ele entra de novo ou seja ele virou uma dependência ali

então a gente tem o nosso frame principal e o nosso objeto ali que é o retângulo dentro dele então isso é uma coisa que você tem que sempre ficar ligada para fazer todo o seu design dentro do frame E aí se eu quiser manipular isso daqui ó ele tá na posição no eixo x 68 e no eixo Y aqui ó 268 eu posso botar ó zer e zero lembra que a gente tinha o nosso frame aqui o nosso frame principal ele tá uma posição em relação ao Canvas ele tá com zero e zero agora eu

botei o nosso quadrado aqui né o nosso retângulo na verdade na posição z0 e zero em relação ao frame então se eu botar aqui por exemplo 200 e 200 tá vendo ele já se move Então essa posição que tá aqui é em relação ao frame e não em relação ao Canvas e também uma outra coisa que eu posso fazer é diminuir e aumentar por aqui né Posso botar 200 por 240 então eu já consigo botar um tamanho mais específico eu utilizo até bastante aqui mais essa parte aqui porque busco utilizar tamanhos específicos até para manter

uma proporção no meu design agora o que que a gente pode fazer também você quer criar uma forma geométrica você quer mudar o shape aqui do seu retângulo você dá dois cliques você entra no modo de edição que aqui a gente tem algumas opções e aí o que que você pode fazer só clicar e arrastar da forma com que você quiser Ah eu quero virar fazer com que isso aqui vire não sei uma seta tá vendo tá aparecendo uma seta apontando pro lado esquerdo para baixo né Aí eu quero fazer com que esse retângulo aqui

Fique extremamente assimétrico né ele não pareça exatamente um retângulo você pode aplicar esses conceitos de mexer em todos os vértices que são esses pontos também para polígonos para círculos para qualquer objeto que tem aqui dentro do fig agora a gente vai aprender a mexer com texto texto é super simples de a gente poder usar deixa eu dar dois cliques aqui fora eu vou selecionar o t aqui né que é o de text ou eu posso apertar o t e quando eu apertar aqui eu vou simplesmente clicar dentro do frame e vou escrever qualquer coisa esse

é um exemplo de texto depois que eu digitei eu vou apertar ASC E aí ele começa a entrar no modo edição aqui eu consigo ver todos os pontinhos aqui e para eu editar esse texto eu tenho que vir na nossa barra lateral aqui que ele tem posição layout aparência e typography que é tipografia e aqui eu posso escolher toda a tipografia aqui eu posso simplesmente passar o em cima que ele já vai automaticamente trocando então tenho várias Fontes aqui aqui eu tenho ó todas as fontes que podem estar dentro do meu computador mais dentro do

figm e eu posso selecionar alguma específica imagina que eu tenho uma fonte específica para o meu time então normalmente eu posso fazer essa filtragem aqui eu posso usar Popular Fontes Google Fontes que é um site onde você pode achar várias e várias Fontes eu vou manter a inter que é uma fonte fácil de ler e a gente consegue entender ela rapidinho e logo abaixo você tem a opção de corpo da fonte às vezes você quer botar ela mais grossa às vezes você quer botar ela Itálico de acordo com a fonte ela vai ter essas variações

então presta bem atenção para você aprender o nome direitinho porque se você tá pensando entrar na carreira de ywx design você tem que começar a aprender as nomenclaturas Você não vai falar uma fonte Grossa ou botar na fonte é importante que você aprenda a nomenclatura né a gente tem uma fonte aqui no caso da Inter a gente tem várias variações aqui a gente tem a them que é super fina Extra Light que continua bem fina mas um pouquinho mais grossa e aqui a gente tem a light a regular que é a regular né que é

usada basicamente pra fonte de texto medium que é média semibold que normalmente as pessoas falam que Ah eu queria botar a fonte então você não precisa usar esse nome você pode usar simplesmente bold ou semibold aqui a gente tem Extra bold você vai aumentando ali o peso da sua fonte de acordo com a configuração que você for selecionar e também tem todas essas partes também de Itálico aqui ó que funciona bem para algum caso específico que você for fazer Ah André Por que que isso aqui é importante é muito importante na parte de hierarquia que

isso já é uma dica sim para ui design né mas a gente vai ver um pouquinho sobre isso ali quando a gente estiver fazendo a nossa interface e depois a gente tem aqui a configuração de tamanho eu tenho com 12 eu posso botar aqui ó 16 e se eu apertar o tab eu venho logo para o nosso Campo aqui de baixo e ele tá com 19 aqui por default eu vou botar 24 para aumentar um pouquinho esse espaço Eu normalmente gosto de trabalhar com alguns tipos de proporções assim que não vale muito a pena ficar

falando aqui porque entram em muitos detalhes de ui e tal pode confundir um pouco a sua cabeça só para explicar um pouquinho né Se eu tivesse esse texto quebrado em duas linhas cliquei aqui no meio e vou apertar enter aí eu tenho um espaço interessante entre a primeira linha e a segunda tem um espaço de respiro de texto porque se você tiver um um espaço muito pequeno vai acabar difícil do usuário continuar na segunda linha por exemplo então é importante que você tenha esse respiro para que seja confortável pro usuário ler as informações da sua

página agora a gente vai aprender uma parada bem legal que são as formas booleanas que eu sei que é um nome até um pouco meio esquisito mas eu vou mostrar aqui para vocês ó eu vou criar alguns retângulos aqui eu vou duplicar ele usando o alt e o shift se eu só duplicar com alt ele vai ficar soltão aqui ó se eu segurar o shift ele vem na mesma linha E já começa a mostrar mesma distância né entre os elementos tá vendo ali tá 102 de um lado e 102 do outro e aí agora que

eu já fiz aqui ó quatro que que eu vou fazer eu vou pegar agora um [Música] círculo e eu vou ó segurando o shift também eu vou botar ele bem aqui quase meio que um em cima do outro como não tá aparecendo eu vou trocar a cor então eu vou vir aqui na parte da direita não vou entrar muito em detalh so sobre a cor que eu vou falar um pouquinho mais pra frente vou dar um clique aqui e aí eu posso enfim escolher a cor que eu quiser que que eu vou fazer eu vou

escolher um preto aí eu vou fazer a mesma coisa ó vou duplicar vou duplicar e vou duplicar e agora que eu seleciono dois objetos eu tenho uma opção de fazer algumas coisas eu posso ó fazer a união dessa seleção imagina que eu criei tô criando uma forma aqui para adicionar no background do meu site e aí eu seleciono ó União selection né que eu Uni as duas coisas agora elas viraram Um Só se você olhar aqui nos nossos layers a gente tem aqui ó um chamado Union que se eu apertar aqui do lado eu vou

conseguir ó manipular ele aqui dentro Beleza mas se eu selecionar ele tá como se fosse um só uma outra forma boana também é o subtract que no caso ele vai cortar um com o outro se eu selecionar o subtract tá vendo ele pegou o C cortou o quadrado então eu continuo tendo aqui um quadrado né se você olhar mais ou menos da forma geral mas eu tenho aqui um semicírculo aqui cortando e eu posso também fazer da mesma forma aqui ó Ten o subtract aqui eu posso selecionar o círculo e posso mover e Eu movi

o meu corte para outro lado agora vamos para a nossa próxima operação boana e eu tenho aqui ó o intersect que que é o intersect na interseção entre os elementos ele ele vai simplesmente ficar aquela parte que tá ali encostando em um e encostando em outro no caso ficou só o semicírculo que é o oposto ali do subtract né do subtrair e eu também posso fazer a mesma coisa tá vendo ó mudar aqui de lado Ah eu quero botar aqui ó no meio ó certinho tá vendo eu já fiquei aqui só com um semicírculo bonitinho

Então ele me dá bastante aqui liberdade para botar onde eu quiser vamos mas pra nossa outra aqui opção que é o exclude que no caso é o oposto do intersect tá vendo eu consigo manipular aqui o meu círculo e todo o espaço que eles estão se encostando acaba ficando vazado aí agora pro último deixa eu duplicar Aqui para baixo para poder mostrar para vocês eu tenho aqui ó flat selection que que o flat selection faz ó eu tenho aqui a interseção e eu consigo mexer em todas as minhas coisas certo se eu decidir que eu

não quero mais mexer né que eu não quero ter essa opção eu venho aqui no flatting selection que ele basicamente achata e une aquelas duas formas e de uma forma que você não consiga mais editar E aí você tem basicamente aqui uma nova forma se der dois cliques ó tá vendo eu tenho aqui os pontos deles para poder editar e eu não tenho mais aquela opção aqui para eu poder abrir igual eu tenho nesse aqui de cima tá vendo Então deixa eu botar aqui do lado pra gente conseguir entender isso aqui não faz muito parte

do nosso Design em sim né mas é importante que você saiba disso aqui para que você consiga construir alguns elementos customizados dentro do seu design agora tem uma outra parada que eu gosto de usar bastante an que eu vou vir com o retângulo aqui e vou mostrar para vocês já viram né você já aprenderam a mexer na parte de posição no eixo X no eixo Y na rotação aqui do próprio elemento né do próprio objeto e aqui eu também tenho a opção de flip horizontal flip vertical também posso rotacionar 90º para a direita tem algumas

outras opções aqui bem fáceis de eu conseguir manipular uma coisa que eu quero mostrar para vocês aqui é a nossa parte de aparência que é a opacidade que eu posso botar aqui ó por exemplo 60% Deixa eu botar uma cor para que vocês consigam ver ó vou botar aqui um vermelhão se eu botar aqui ó 100 de novo tá vendo que ele fica bem chamativo porque é a cor que eu escolhi aqui né E aí eu vou duplicar isso daqui segurando aqui o alt e o shift selecionei os dois e eu vou botar 60% E

aí se eu botar aqui ó um por cima do outro você vai ver que eles começam a ficar translúcido tá vendo por qu eu adicionei um pouco de Transparência nele de uma forma com que eles fiquem translúcido e que você consiga até criar um efeito de filtro e tudo mais fica bem interessante às vezes você quer botar num site uma foto assim de plano de fundo com um texto em cima a gente utiliza bastante a opacidade para conseguir fazer com que você consiga mostrar a foto sem prejudicar a leitura então essa parte da opacidade é

bastante importante pra gente aprender e também você tem alguns filtros pré-estabelecidos Ó tem normal aqui como onde já tá tem Dark multiply Plus tá vendo de acordo com a cor que você tiver usando você vai poder também entender como é que esses filtros funcionam e é bem mais fácil de você conseguir ver quando você tá utilizando isso em cima de uma imagem e por último aqui eu vou selecionar esse daqui e vou mexer no round corners que é o corner radius aqui que que é o corner radius tá vendo que a nossa pontinha aqui do

nosso quadrado ela tá bem pontiaguda imagina que você quer fazer isso aqui mais arredondado então eu posso vir aqui e vou botar 24 E aí eu já consigo ver a diferença entre um e outro porque ó tá vendo tá bem pontiagudo e aqui tá bem aqui arredondado isso é muito utilizado em designs mais modernos assim se você olhar um iPhone um sistema operacional do iPhone ele é todo arredondado por quê Porque ele busca essa modernidade agora vou duplicar aqui de novo para mostrar mais uma paradinha pra gente eu vou botar com 100 de opacidade eu

vou botar branco eu vou ensinar vocês a adicionar um stroke que é um Contorno você tem essa opção aqui do add stroke e aqui você pode escolher a cor que você quiser vou deixar Preto para fazer com que você consiga ver de uma forma mais fácil e eu vou de cara aqui já aumentar né Vou botar aqui ó quatro até botar mais um pouquinho oito e aqui a gente tem ó inside o que que é o inside é você criar o stroke para dentro ele tá aumentando para dentro então se eu continuar aumentando ele aqui

ó se eu clicar e arrastar ó ele vai aumentando sempre para dentro só dar um cont Crol Z pra gente voltar e se eu mudar eu posso botar Center que aí ele vai aumentar para dentro e para fora então se eu aumentar aqui você vê que ele tá aumentando para dentro e para fora cont CRL Z de novo e a outra opção que a gente tem é o outside que é o inverso do inside né você vai crescer só para fora então para mostrar para vocês também Então essa é uma forma que você pode aplicar

contornos nos seus objetos agora eu vou aqui ó duplicar de novo que eu vou mostrar uma parada que eu utilizo bastante vou aqui ó tirar um stroke pra gente conseguir ver melhor ainda vou adicionar um efeito aqui ó já vou deixar ele com drop Shadow o drop Shadow é sombra você tem alguns efeitos para você poder fazer mas inicialmente eu vou botar o drop Shadow e dentro do Drop Shadow você tem a posição X e Y né que você pode ah eu quero que a sombra vá mais um pouco pra esquerda quero a sombra vá

um pouco mais pra direita Então vai de acordo com o seu objetivo eu vou deixar ela com quatro aqui ó ah eu quero que a Sombra Vai um pouquinho mais para baixo Então eu vou deixar lá com 10 eu quero aumentar o Blur que é esse borrado ó eu vou aumentando aqui tranquilamente e logo depois a gente tem o spread que é basicamente você espalhar a sombra eu quero que ela seja mais espalhada ou menos espalhada tá vendo bem interessante a gente utilizar esse mecanismo e por último a gente tem aqui a opção de cor

se você quiser botar uma cor no seu na sua sombra ó posso botar vermelho Vou botar aqui bem bem grotescamente para vocês conseguirem ver Às vezes é importante que você dê um pouco de cor pro seu pra sua sombra para que dê um pouco mais de contexto e fique mais ambientado por exemplo com a cor primária do seu aplicativo né do projeto que você estiver trabalhando Digamos que a cor principal do seu aplicativo é o roxo Então você adiciona um pouquinho de roxo na sua sombra também até PR as coisas ficarem um pouquinho mais harmônicas

precisa sempre ficar usando sempre preto e agora vamos para o nosso próximo filtro eu vou selecionar aqui ó eu tenho aqui ó Drop Shadow eu posso mudar outros aqui vou botar o Inner Shadow o Inner Shadow ele é basicamente o drop Shadow só que dentro do objeto então quando eu mudei aqui o Inner Shadow tá vendo que parece que agora ele não é mais um quadrado assim que tá saltando ele é algo que tá entrando dentro do Canvas né até se eu botar aqui uma cor um pouco mais escura você vai ter a sensação que

parece que é um buraco que tá entrando dentro do Canvas certo e aí você tem as mesmas configurações também do Drop Shadow você pode mudar a cor se você você quiser você pode mudar a posição né pode clicar e arrastar ou botar um tamanho específico dando dois cliques tem o Blur também que a gente pode aumentar então vai de acordo ali com o seu olho você vai treinando ali o seu olho para construir uma sombra tanto externa quanto interna de uma forma correta e vamos para o nosso próximo filtro que é o layer Blur o

layer Blur é basicamente você tá aplicando um Blur né um borrado no seu layer vou deletar aqui vou fazer até no vermelho que vai ficar mais fácil de você conseguir enxergar Ó vou botar aqui ó layer Blur e aqui eu vou aumentar o nosso Blur geral ó clicando e arrastando tá vendo ele ficou um borrão mesmo então esse é o objetivo do layer Blur por último eu vou mostrar para vocês como é que funciona o background Blur o background Blur para que você entenda bem como funciona o background Blur eu vou adicionar uma imagem e

para adicionar uma imagem eu vou utilizar um plugin eu vou utilizar um plugin chamado lum que é um plugin que utiliza inteligência artificial para criar imagens todas essas imagens aqui são criadas por Inteligência Artificial caso você tem a conta paga do figma você tem a opção de criar a sua própria imagem tipo ó make an image E aí você vai digitar tudo promp aqui que é o comando né Eu quero uma pessoa de cabelos cacheados que est usando uma camisa laranja e tudo Mais e aí ele vai gerar a imagem para você mas para ser

um pouco mais rápido Principalmente para o nosso exercício aqui e que você vai ter acesso ao plugin e vai acabar não tendo acesso ao a opção de criar a imagem porque talvez você não tenha uma conta paga porque você tá começando agora eu quero dar essa opção para você então eu vou aqui ó selecionar essa imagem aqui bem bonita ela né bastante cor essa foto tá bem legal vou diminuir aqui deixar ela aqui ó bem bonitinha o layer né aqui do nosso quadrado ele tá embaixo da imagem então o que que eu vou fazer ó

vou jogar ele aqui para cima que essa aqui é a nossa imagem e essa aqui é o nosso objeto aqui só que eu não tô conseguindo ver o meu background Blur tá vendo ele não tá aparecendo por quê Porque ele tá com a opacidade aqui né da cor né Tá 100% então eu vou botar aqui ó 10 Ó você tá vendo como é que ele já Cria como se fosse um borrado na foto de baixo Então isso é muito usado até no os né da Apple se você tiver um Mac você vai ver vários objetos

várias interfaces utilizando esse mesmo mecanismo que eles fazem isso para conseguir dar contraste às vezes com texto para dar uma beleza também pra própria interface então fica bem bem interessante e bem fácil de você aplicar e replicar esse efeito que eles fazem Então agora eu vou jogar isso aqui para cima vou botar ele aqui ó e vou deixar ele bem maiorzinho aqui na frente eu vou pegar essa imagem já que a gente tá falando agora de imagem e vou mostrar para vocês como você pode editar uma imagem dentro do fil você vem aqui no fio

você pode clicar na imagem você tem a opção de ajustar aqui cores exposição saturação tudo da imagem vai muito de Trein no seu e você pensar o que que é uma exposição exposição à luz Ah eu quero aumentar a exposição dela que ela esteja mais clara a imagem tá vendo ó CONSEG aumentar o contraste ou diminuir o contraste da imagem o contraste é a diferença em entre a cor de dois elementos Então você consegue por exemplo diminuir o contraste do background ali com a a pessoa né com a mulher aqui ou eu quero aumentar esse

contraste tá vendo o fundo fica um pouco mais claro e ela fica um pouco mais escura eu quero aumentar a saturação quero que fique mais laranja ainda então eu boto aqui ou eu tiro completamente a saturação e fica tudo Preto no Branco então tem várias coisas que você pode fazer aumentar a temperatura e diminuir tints né que você vai adicionar algum tipo de cor né Você vai pintar isso daqui pode aumentar os Highlights né que são todas as iluminações e as sombras também você pode diminuir e aumentar então você tem algumas opções que você pode

fazer aqui dentro do figma Que dá bastante para você conseguir consertar às vezes uma imagem ou às vezes manipular ela um pouco para que ela tenha uma melhor unidade dentro do seu design agora uma outra parada que eu vou ensinar para vocês agora é o alinhamento dentro do figma E para isso eu vou criar um outro frame vou apertar F aqui eu vou vir desktop e vou selecionar desktop Vou botar aqui no cantinho e vou dar um zoom mais pra gente conseguir isolar um pouquinho o nosso frame agora eu vou criar algumas elipses aqui ó

vou pegar aqui botar aqui A 160 vou pintar essa elipse botar ela com a cor roxa e aqui eu vou começar aqui ó a botar várias bolotas espalhadas por aqui e aí Digamos que eu queira alinhar essas bolotas eu simplesmente vou selecionar todas elas e E aí vou escolher a forma de alinhamento aqui embaixo tem posição tem o alinhamento botei tudo à esquerda aqui aí se eu quisesse ó vou dar um CRL Z eu quero tudo ao centro ele já vai tudo pro centro dar um cont contrl Z de novo se eu quiser botar tudo

à direita ele vai tudo à direita tudo para cima tudo pro meio tudo para baixo então tem várias formas de você poder organizar isso daqui então ó Digamos que você queira montar o seu Grid você iria clicar em up Mas aqui é dessa forma não ia usar porque tem muitos elementos um perto do outro sim né um muito em cima do outro você organizar ele um pouquinho aqui e você selecionar aqui botar tight up tá vendo ele já organiza o Grid direitinho aí você pode distribuir os espaços verticais e aí se você selecionar aqui ó

você vai ver que tem uma distância de 52 para cima e 52 para baixo 52 para cima 52 para baixo e aí Digamos que essa bolinha veio para cá para baixo eu essas três e eu quero distribuir os espaços verticalmente tá vendo ele já calcula a distância entre um e outro e já bota ali a distância igual se eu quiser fazer a mesma coisa ó joguei um pouquinho para cá selecionei esses aqui e vou distribuir horizontal ele já volta pro lugar certinho Posso jogar esse todo para cá que ele vai distribuir horizontalmente certinho as distâncias

então se eu chegar aqui a selecionar esse e e pressionar o alt e botar aqui em cima do objeto que eu quero ver a distância eu fico com 391 E se eu selecionar aqui para cá 391 também então as distâncias estão iguais você distribuiu as distâncias horizontais Então essas são formas de alinhamento dá pra gente fazer isso com texto com botões com componentes Então vai depender muito do seu objetivo do seu design essa é uma forma tipo mais prática de eu te ensinar como é que funciona os alinhamentos agora outra coisa que a gente pode

aprender a fazer é copiar e colar eu vou apertar o meu f de novo vou criar mais um frame selecionar aqui o iPhone 16 dessa vez e eu vou fingir aqui que eu tô fazendo um design eu vou selecionar aqui o meu retângulo vou criar como se fosse uma barra de navegação aqui sem me preocupar muito com o tamanho nem nada vou duplicar segurando o alt vou diminuir E se eu segurar o alt também ó quando diminuir só muda o tamanho horizontal e ele começa a alinhar com o centro se eu fizer isso também na

vertical ó tá vendo ele vai aumentando também do outro lado então vou deixar assim vou duplicar aqui também e como eu quero mais um retângulo desse eu vou dar um comand d e agora vou criar a nossa barra inferior aqui que tem aqueles ícones normalmente se você utiliza o WhatsApp você tem lá o chat os contatos Então a gente tem aquela Barrinha aqui embaixo e eu vou criar um outro frame aqui ó iPhone 16 Plus vou selecionar todos os elementos vou apertar ó Command C como eu tô no Mac Command c comand v que aí

eu já automaticamente já colo todos os elementos dentro daquele frame então fica super fácil e uma coisa bem legal de você aprender é fazer o paste to replace você vai basicamente substituir um pelo outro Digamos que você tenha uma imagem aqui você quer substituir ela no seu segundo frame aqui em cima para ficar mais fácil eu vou apertar o i para eu copiar uma cor e aí eu vou pintar essa aqui de roxo para que você consiga entender ó eu vou apertar comand c e aqui eu vou apertar ó Command shift R que eu vou

fazer o replace né vou substituir tá que se eu arrastar aqui ó o meu objeto não tá mais ali isso me ajuda muito quando eu quero substituir alguma coisa no meu design às vezes eu tenho um card e eu quero substituir esse Card por um botão aí eu vou seleciono o meu botão vou lá no card e simplesmente aperto o meu pce to replace né que a gente fala e uma outra forma de você fazer é você apertar o botão direito né você bota aqui ó paste to replace tá vendo e aí ele já Cola

automaticamente Ali no lugar daquele outro e agora nós vamos aprender as restrições para que que servem as restrições você começa a atribuir regras pros objetos que estão dentro dos frames E aí isso ajuda muito na responsividade quando você for fazer um design desktop mobile você começou no design desktop tem que fazer uma adaptação para mobile se você configurar as restrições da forma correta você consegue fazer uma adaptação de tamanho mais fácil Vamos aprender aqui vou fazer mais um frame dessa vez eu vou fazer um desktop E aí eu vou botar aqui ó desktop vou começar

aqui pela nossa barra de navegação aqui ó pá Vou reconstruir como se fosse o mesmo design até selecionar essas três aqui botar eles aqui ó pá dupliquei né segurando o alt e aqui embaixo eu não vou botar nada porque normalment no desktop a gente não tem essa barra inferior fica tudo lá em cima e aí beleza quando eu seleciono aqui a gente tem essas opções das restrições aqui ele tá configurado agora com a parte de Topo e a parte da esquerda ou seja se eu diminuir esse nosso frame tá vendo ó nada acontece aqui para

esse lado certo se eu diminuir pro outro lado ó tá vendo que ele começa a andar por quê Porque ele tá blocado aqui nessa parte então se eu selecionar aqui fizer ao contrário ó um tá pra direita agora e os dois de baixo estão pra esquerda Então essas restrições que eu botei ó tá vendo se eu começar a aumentar também ó ele só vem aqui pra direita ó Então são esse tipo de restrições que você tem que começar a pensar como você vai aplicar isso no seu design uma coisa que eu normalmente faço dependendo Claro

do meu projeto eu posso botar aqui ó algumas opções eu tenho a direita né como a gente tinha na esquerda Anes tem a direita tem left and right o left and right o que que ele vai fazer ele vai botar as restrições na direita e na esquerda então isso vai fazer com que esse elemento se adapte ao tamanho certinho entendeu então na responsibilidade já vou fazer um design mobile já fica muito mais fácil de eu conseguir adaptar claro que eu vou ter que mexer em algumas coisas margens etc que são essas margens laterais mas isso

já começa a me dar tipo um pontapé lá na frente para mostrar para vocês já vou deixar esse aqui com left and right eu tenho opção também de botar Center que o elemento vai ficar sempre no centro vai ficar com tamanho fixo ó tá vendo se eu diminuir parece que acabou fazendo a mesma coisa que antes né mas ó se eu for aumentando tá vendo que a barra fica sempre no centro então essa é uma forma também de você poder botar e você tem o scale o scale basicamente ele vai aumentar e diminuir proporcionalmente ele

não fica igualzinho de cima porque ele vai aumentando e diminuindo proporcionalmente entendeu as até as distâncias aqui vão descendo proporcionalmente sabe não fica uma parada fixa Então deixa eu dar aqui um cont CRL Z eu vou botar aqui ó todos esses dois aqui com o mesmo ó left and right e ele tá alinhado ao topo o que que isso quer dizer se eu puxar daqui para baixo ele não vai mudar mas se eu der um cont CRL Z e puxar aqui ó você tá ver que ele vai começar a descer por quê Porque ele tá

preso lá no topo E aí no topo Eu tenho algumas opções né que eu posso fazer eu posso botar borom que aí vai ficar fazer uma confusão toda aqui no meu design ó tá vendo que agora ele só mexe quando for de baixo para cima eu posso botar também top and Bottom que aí ele vai mover tipo responsiv tá vendo ó se eu aumentar geral ele já vai começa a aumentar e se eu diminuir ele diminui e eu tenho também a mesma coisa opção de centro e escala né aumentar o scale né você aumentar proporcionalmente

o que é importante para mim eu quero manter ao topo por quê Porque eu quero que essa parada fique presa lá no topo pode ser um banner aqui falando de um filme eu não quero que isso fique esticando conforme o usuário vai navegando na página como a barra de navegação também a barra de navegação é importante que ela fique fixa no topo e também left and right que aí quando eu aumentar aqui ó a barra já aumenta junto comigo e aí eu também vou manter as mesmas restrições aqui do Topo porque eu quero que esses

três Filmes né que fiquem alinhados lá no topo e as opções ali vão aparecendo mais para baixo tô falando de filmes hipoteticamente né para dar um pouquinho de contexto para vocês uma parada aqui que eu tenho que falar do frame também é uma parada chamada clip contents se eu selecionar o meu frame principal eu tenho esses meus elementos aqui todos dentro do frame né e aqui eu tenho a minha barra de navegação todas as coisas eu sei que elas estão sem nome e tal mas e eu tenho esses elementos aqui dentro a gente já tem

essa ciência e aí eu tô com o meu clip content ligado o que que isso quer dizer eu vou selecionar aqui esse meu banner né esse meu filme eu vou aumentar ele e vou deixar ele maior que a largura do frame a altura tá menor mas a largura ela tá maior que o nosso frame mas ela não aparece por quê Porque o frame tá configurado com clip content então ele corta e não mostra nada que está além do frame E aí como é que a gente faz para mostrar aqui esse elemento que tá fora do

frame eu vou deselecionar aqui o clip content eu tenho layout né que eu tenho todo o tamanho do meu frame e aqui eu tenho o clip contents eu posso simplesmente ó tá vendo vendo ó pá pá de selecionar e selecionar E aí ele acaba cortando Eu muitas vezes utilizo o clip contents para deixar tudo bem condensado dentro do meu design não que apareça eu não sei que seja algo extremamente intencional e pensado para aquele projeto deixa diminuir aqui para manter Aquela nossa proporção segurando o alt né Tem uma pergunta que muita gente me faz é

como é que é a diferença entre um frame e o grupo porque a gente tem a opção de frame aqui mas eu posso simplesmente chegar pegar esses três aqui e ó eu posso criar um grupo eu vou apertar aqui ó comand g e aí como eu tenho aqui ó nos meus layers nas minhas camadas Olha a diferença visual aqui do meu grupo pro meu frame eu tenho aqui esse joguinho da velha que representa o frame e aqui eu tenho essa esse quadradinho pontilhado que representa um grupo Qual a diferença entre um e o outro dentro

do do grupo você não consegue atribuir as restrições Então quando você diminui uma uma coisa no grupo você diminui ela por inteiro tá vendo ela fica bem mais tipo maleável para você diminuir mas sem muita restrição entendeu as os espaçamentos entre um e outro não são mantidos vai uma coisa meio proporcional e mais freestyle assim que eu gosto de falar já o frame né já se você tá buscando alguma parada mais organizada até para você criar o seu design mesmo eu indico você criar o design dentro do frame nunca dentro de um grupo você consegue

atribuir essas restrições como a gente viu aqui tá vendo assim alguns elementos às vezes que eu utilizo um grupo pode ser Talvez um logotipo que às vezes eu faço ele dentro de um grupo que eu consigo redimensionar ele de uma forma mais livre se eu atribuir muitas restrições para dentro ali do frame no meu logo às vezes fica uma parada um pouco mais complexa então eu prefiro até às vezes botar um logo dentro de um grupo Mas no geral eu utilizo muito mais os frames mas é importante que você saiba a diferença de um pro

outro então antes da gente cair de cara que no nosso projeto né porque a gente já aprendeu bastante coisa aqui de várias ferramentas né de como a rede missiona como Mex com as restrições como rotaciona todas as principais ali mais básicas funções aqui do figma a gente já aprendeu o beabá agora a gente vai pegar esse Babá e vai fazer uma interface aqui de verdade a gente vai fazer um site bem legal mas antes da gente fazer esse site eu queria explicar para vocês a comunidade do figma o que que é a comunidade figma e

o poder que essa comunidade tem para você acessar a comunidade figma você tem que ali na sua homepage clicar ali embaixo como eu mostrei para vocês lá no início do vídeo quando você clicar você vai cair nessa página aqui aqui você vai ter vários recursos de design Às vezes você tá buscando uma biblioteca de ícones uma biblioteca de componente você consegue achar aqui dentro que outros designers Tem Seus perfis aqui configurados aqui na comunidade do figma e disponibilizam alguns arquivos por exemplo Ah eu quero aqui uma tela de login e vou começar a dar uma

olhada aqui ó tem várias telas de logins feitos por outros designers também que tá aqui disponível para eu poder clonar esse arquivo se eu gostar de algum arquivo eu venho aqui Ah beleza selecionei esse daqui gostei desse aqui vou apertar Open inigma e ele vai abrir direto na minha conta aí deixa eu dar aqui um voltar uma outra coisa que a gente tem para poder mostrar aqui é essa filtragem aqui na esquerda tem o files e template que você pode filtrar você tem plugins eu vou botar aqui ó icons que seriam os ícones e aqui

vão aparecer vários e vários e vários plugins relacionados a ícones a gente tem o icon a tem o icon scout tem e feather icons tem várias bibliotecas ícones que você pode usar acessando direto pelo seu arquivo do figma ou você pode simplesmente abrir aqui para você acessar pelo arquivo do figma ali no plugin a gente já viu como é que funciona né eu vou botar aqui ó icons aí vão aparecer todos eles aqui então se eu quiser por exemplo feather icons eu só vou botar aqui ó Run aí ele vai fazer o loading aqui vai

carregar e já vai começar a mostrar aqui vários ícones que eu posso usar então se eu quiser alguma coisa específica é só clicar digitar e arrastar esse ícone que eu tô procurando para dentro do meu arquivo e um aviso especial aqui eu vou deixar uma lista de plugins bem legais para você dentro da nossa apostila com todo o conteúdo do curso Então não deixa de baixar Beleza então vamos lá agora que a gente já teve essa visão Geral do figma já sabe como é que as coisas funcionam Vamos criar o nosso primeiro design a gente

vai fazer um site aqui para uma ótica como se fosse uma marca aqui de óculos e para começar daquele pontapé inicial a gente tem que criar um frame E para isso eu vou apertar o f no meu teclado vou vir aqui ó no desktop que já tá até aqui aberto e vou apertar aqui ó desktop 1440 por 1024 E logo depois que eu crio o meu frame que que eu faço eu crio um Grid o Grid vai ajudar a gente posicionar os elementos dentro do nosso design como é que a gente cria esse Grid tem

aqui a layout aqui na direita eu vou apertar aqui no mais e logo quando eu aperto mais a gente vê esse esse gridz inho Se eu der um zoom mais aqui várias linhazinha por quê Porque isso aqui é um Grid de ajuste fino Eu quero um Grid em colunas que vai me ajudar a posicionar muito mais fácil e aí o que que eu faço eu quero editar esse Grid em colunas que agora eu tenho cinco colunas mas no desktop normalmente a gente utiliza 12 é bem padrão isso eu não vou entrar muito em detalhe aqui

sobre tipo tipos de Grid alinhamento essas coisas porque senão vai complicar muito coisa que que eu vou fazer eu vou manter aqui o meu tipo de Grid Stretch né que ele tá esticando que que isso quer dizer ó se eu diminuir aqui aumentar o Grid vai aumentar e diminuir proporcionalmente Então deixa eu dar um CRL Z aqui eu vou botar uma margem uma margem lateral vou botar de 128 que são 128 pixels Eu Quero manter esses elementos que vão est dentro do meu site dentro desse gridz inho aqui e aqui eu tenho o gutter o

gutter é o espaçamento entre uma coluna e outra eu vou botar ele com 24 você vê que já aumentou aqui esse espaçamento aqui em branco aqui tá com 24 pixels e agora eu vou adicionar a primeira coisa aqui o primeiro elemento que é o logo aqui do meu projeto já deixei ele separado aqui eu vou arrastar né normalmente a gente vê o logo aqui em cima e aí eu tenho algumas formas de poder posicionar o elemento eu posso simplesmente apertar as setinhas né e pro lado e pro outro assim e eu também posso apertar a

setinha segurando o shift que aí ele vai mais longe Qual a diferença de uma paraa outra se você não apertar o shift ele vai de pixel a Pixel e se eu apertar o shift ele vai de oito em oito pixels se você tá abrindo figma aí pela primeira vez e tá vendo isso pela primeira vez você vai reparar que ele vai de 10 em 10 pixels e para mudar isso caso você queira mudar é só você vir aqui no figma Você vai vir em settings aí nudge amount is vi ó small nud é você mexer

os seus elementos assim Só usando a certinha então no caso a gente tem um aqui e o Big nud que é no caso segurando o shift tá com oito porque eu configurei para oito por um gosto pessoal E também porque eu sigo alguns guias de estilo aí de design espalhados por aí mas você não precisa se ligar nisso agora fica tranquilo Se você quiser botar com oito pode botar com oito mas também quiser ficar com 10 pode ficar com 10 não vai alterar em nada aqui no nosso exercício vamos aqui posicionar aqui o elemento no

nosso Grid e se eu quiser ver aqui os espaçamentos né distâncias desse elemento em relação ao nosso frame eu vou sem simplesmente aqui pressionar o alt tanto é que se eu tirar o mouse aqui e continuar segurando o alt ele não mostra mais nada ele só mostra quando eu boto o mouse em cima de algum elemento e eu acho que 39 tá demais eu vou botar aqui ó 32 e agora eu vou começar a criar os links aqui de cima Normalmente quando você entra alum site você tem aqueles linkzin lá em cima que levam para

outras páginas Então isso que a gente vai fazer agora deixa eu apertar o t e clicar na tela agora eu vou botar aqui ó óculos de sol não vou me preocupar muito com alinhamento agora que depois eu posso fazer isso e eu vou ó duplicar aqui segurando o alt vou botar Qualquer distância agora também depois eu alinho certinho e mostro para vocês como faz isso e uma coisa que eu quero mostrar para vocês né também além de duplicar assim segurando o alt Quando você vai fazer uma ação mais vezes né que seja repetida é só

você apertar o Command D ó ele já vai direto fazer essa mesma ação ele duplicou exatamente que você tinha feito antes e só uma pausinha aqui eu falei comando D mas caso você esteja no PC aí do seu lado você vai apertar o control E agora o que que eu vou fazer eu vou selecionar esses aqui eu vou posicionar ele lá no Grid lá no cantinho vou botar a mesma distância né que o outro tava tô segurando al eu consigo ver 38 vou posicionar aqui ó 32 eu acabei mexendo 12832 e também tá com 12832

lá no logo então isso é muito muito bom vou botar óculos de grau novidades e acessórios Eu já percebi que as distâncias não estão mais iguais como eu tinha feito a duplicidade aqui de todos os links seguindo o mesmo padrão eles estavam com as distâncias entre eles exatamente igual Agora eu tenho que fazer de novo esse alinhamento Eu tenho algumas opções de fazer né posso simplesmente clicar aqui que ele vai alinhar automaticamente ou eu posso clicar nesses três pontinhos aqui e botar aqui ó distribuir horizontalmente o espaço então cliquei distribuir horizontalmente e eu já posso

ver aqui ó 36 Vou botar aqui 40 só para dar mais um um respiro entre um link e outro e vou alinhar aqui no meu Grid agora eu já consigo ver aqui que eu já tenho basicamente a minha barra de navegação feita e agora a gente vai começar a fazer a parte aqui da esquerda que é onde tem o título subtítulo e o botão Então como a gente tem uma marca de óculos que é bem focada num público mais Tropical assim eu vou botar aqui um título que é um termo que a gente usa bastante

principalmente em pessoas que moram em lugares quentes a gente fala um sol para cada um aí vou botar uma fonte mais legalzinha né botar essa serif né a dm serif eu tava usando pros links aí a dm SS mas eu vou usar a ADM serif que é a fonte já serifada com todo esse estilinho e agora eu vou botar uma fonte maior né eu vou botar aqui ó 56 com 64 acho que ficou pequeno ainda eu vou botar ó 72 com 80 e que que eu vou fazer eu vou diminuir que eu quero botar uma

imagem bem grande aqui do lado né que a gente tenha essa informação aqui desse bloco de informação bem visto mas uma imagem aqui bem estourada bem bonita para que chame bastante atenção e eu também vou botar uma Itá que aí dá um pouquinho mais de estilo já que a gente tá falando um pouco de moda essas coisas assim eu acho que vale a pena a gente adicionar uma parada legal para não ter que escrever aqui tudo de novo vou pegar esse mesmo tamanho aqui de fonte do link e vou escrever aqui embaixo conheço a nossa

coleção 2025 E aí eu vou ver a distância aqui V tá com 24 deixa eu ver se tá encaixada no Grid certinho daqui a pouco a gente vai tirar esse Grid pra gente começar a ver como é que tá ficando melhor aqui o nosso design eu vou ensinar para vocês como fazer isso antes de eu até botar o botão aqui que que eu vou fazer eu vou adicionar a imagem vamos lá pra gente fazer o nosso retângulo eu posso simplesmente clicar aqui né eu vejo aqui na minha setinha Qual o elemento que tá em questão

mas no caso eu quero o retângulo ou eu posso apertar o r Eu gosto de trabalhar com atalhos E aí eu vou clicar e arrastar eu vou segurar o shift porque eu quero um quadrado perfeito vou posicionar esse elemento aqui tô achando que esse quadrado ficou muito grande posso até dar uma diminuída nele aqui deixa eu encaixar ele no Grid cer certinho do outro lado também tá então tá perfeito e aí que que eu vou fazer vou esconder aqui o meu Grid rapidamente até para me ajudar a escolher uma foto vou apertar aqui em plugins

e vou escolher o unsplash o unsplash aqui tem várias imagens assim que você pode usar de graça eu vou botar aqui ó sunglasses no caso isso aqui é óculos escuro e óculos de sol em inglês vou botar free porque são todas imagens de graça e vou utilizar essa daqui olha que maneira ol já fica com aquela cara bem Tropical mesmo praia calor e é isso que a gente tá buscando agora eu vou escrever aqui o botão aí eu vou botar aqui ó conheça Nossa coleção mas PR um botão ter cara de botão ele precisa ter

ali um preenchimento né algo que dê uma cara para ele e para isso eu vou criar esse retângulo aqui em volta do texto e para eu criar esse retângulo né Eu simplesmente apertei aqui o r pra gente já começar a trabalhar com o teclado e eu vou dar aqui a posição aqui do layer tá com retângulo aqui 22 ele tá aqui embaixo e aí o texto tá aqui em cima agora vou posicionar esse daqui deixa eu ver tá com 65 eu vou diminuir para 64 agora que eu já diminuí vou alinhar aqui o meu botão

e eu vou começar a aplicar cor para ele para eu aplicar uma cor eu tenho que vir aqui no fio e aí Eu só clico aqui ó do ladinho na cor eu posso escolher aqui uma cor dentro da possibilidade de cores você tem vários jeitos de você trabalhar a primeira coisa que eu quero que você aprenda isso aqui é o círculo cromático então aqui você pode escolher todos os tons que você quer todas as cores você pode escolher o azul pode escolher o verde pode escolher o rosa pode escolher o vermelho amarelo enfim todas as

cores que você quiser e aqui em cima tem essa Gama da cor grande assim dessa tonalidade toda da cor a gente tem algumas regrinhas aqui se eu movo mais pra esquerda eu tenho menos saturação a cor fica menos pura se eu movo pra direita a cor fica mais pura ou seja aquele Azul fica mais forte se eu botar aqui ó o azul fica fortão E se eu for botando para cá o azul acaba ficando meio fraco fica mais acin fica um pouco mais opaco uma outra regra que eu quero que vocês aprendam é no caso

se eu mover para cima tudo fica mais claro e se eu Mover para baixo tudo fica mais escuro e isso influencia nessas numerações que tem aqui cada numeração é responsável por alguma coisa no caso essa numeração aqui a primeira se chama ru R é a numeração que vai de 0 a 360 que ela é responsável pela cor então se eu botar aqui ó 120 ele já troca pro verde e se eu botar 320 ele troca pro rosa e agora aqui do lado a gente tem a saturação saturação no caso eu tô com 56 ali né

nessa numeração Mas eu posso botar aqui ó 90 por exemplo a ele começa a ficar mais forte ele puxa mais para dentro do Rosa a gente não tá vendo isso direito né deixa até jogar aqui para cima pra gente conseguir ver melhor que aí se eu botar tipo 12 ele fica aqui mais opaco de novo e se eu adicionar cor que é a saturação botar 90 ele começa a ficar mais forte de novo e o último número que a gente tem relacionado a cor é a luminosidade se eu tirar luminosidade ela vai ficar mais escuro

e se eu botar luminosidade ele vai ficar mais claro se eu botar aqui ó 90 de luminosidade vai ficar mais claro e se eu tirar isso aqui botar 10 ele fica super escuro Então essa é uma forma de você trabalhar com essa modalidade aqui de cor essa porcentagem aqui é opacidade né se eu botar aqui ó 20% de opacidade ele fica transparente tant tá que se eu pegar esse texto aqui ó e botar aqui atrás você vê que ele começa a aparecer eu sei que tá difícil de ver porque tá muito escuro Deixa eu botar

aqui ó tá vendo ó eu botei o máximo aqui do rosa e você já consegue ainda ver o texto Lembrando que o meu texto ele tá aqui atrás do meu retângulo Então você consegue ver perfeitamente E aí se eu quiser mudar isso né Vou botar aqui com 90 Talvez assim dá pra gente ver até um pouquinho melhor que aparece só um pouquinho translúcido ali atrás ó deixa eu botar aqui e você também tem outras formas de você poder trabalhar com a cor Você pode adicionar um Gradiente né que você adiciona duas cores ou mais você

pode vir adicionando Quantas cores você quiser aqui para ter um Gradiente bem completo e tal ou você pode ter um Gradiente bem doidão assim botar um verde aqui também botar um azul e você vai aí testando da forma com que você quiser e eu posso também mover a direção dele aqui tá vendo ó do Gradiente Quero botar ele todo assim na vertical Quero botar ele na horizontal botar ele meio envasado assim né na diagonal fica ao seu critério e também a gente tem algumas formas de apresentar esse Gradiente aqui ele tá no linear tá vendo

que ele tá todo assim reto numa direção só eu posso escolher o Radial que é uma forma já mais circular Deixa eu botar aqui no meio para vocês conseguirem ver assim você vai conseguindo movimentar e posicionar o seu Gradiente se eu quiser ele mais arredondado aqui eu vou puxando essa bolotinha aqui então fica bem louco né do jeito que tá mas é tem outras opções também tem o ângul que ele dá como se fosse um ângulo Inicial e vem fazendo aquele aqui é 360 tá fazendo a bolinha certinha do Círculo e depois a gente também

tem o Diamond que é um formato de Diamante tá ser bem sincero assim eu quase nunca usei esse Diamond aqui só para algumas coisas muito específicas quando tava querendo algum tipo de ilustração etc mas é bem difícil e por fim a gente tem mais duas opções dentro do fio aqui que é o preenchimento a gente tem uma opção de fazer o upload de uma imagem ou também fazer um upload de um vídeo no caso aqui no no botão não ia fazer muito sentido você tem um vídeo ou você tem uma imagem né normalmente que que

o usuário tenha clareza do que que é aquele botão a gente usa muitas vezes uma cor chapada um Gradiente Zinho bem assim de leve para que dê uma realçada no botão mas nada muito extremamente chamativo e que não prejudique a leitura mas eu queria mostrar para vocês aqui a opção que você tem vou voltar aqui pra cor né eu vou botar uma cor preta eu quero deixar o nosso layout bem minimalista aqui vou selecionar o texto né e agora vou botar Branco vou alinhar ele aqui ó junto com o nosso conteúdo para isso vou selecionar

e vou habilitar o nosso Grid aqui só pra gente conseguir ver se tá tudo alinhadinho vou ver as distâncias vou selecionar aqui e apertar o alt e agora consigo ver tá 24 dos dois lados e 20 para cima e para baixo para mim tá ótimo agora imagina só pô André eu quero ter um outro botão aí eu vou escrever aqui ó saiba mais que é um botão bem comum da gente ver por aí agora eu vejo que as distâncias estão pô completamente quebradas eu vou ter que alinhar ele aqui de novo e dar uma olhada

aqui ó tá com 20 24 Ah eu vou ter que aumentar aqui o tamanho deixa eu vir aqui no layout 1 2 3 4 e Ah beleza agora ficou certinho tá vendo quanto tempo durou aqui para eu configurar esse botão se você for fazer desse jeito manual demora e acaba que seu design não fica assim extremamente profissional o que eu indico você fazer é usar uma funcionalidade chamada Auto layout o auto layout serve basicamente para você atribuir um parâmetro pro seu elemento e ele vai respeitar esse parâmetro automaticamente sempre que você duplicar e for editar

ele vai sempre respeitar o parâmetro que você estabeleceu E para isso a gente vai fazer o seguinte eu vou selecionar esses dois eu vou duplicar aqui você tem duas formas de poder aplicar o auto layout você pode simplesmente apertar aqui no use Auto layout ou você pode apertar shift a Eu normalmente gosto de trabalhar com atalhos eu vou apertar shift a e você vê que automaticamente ó se você olhar aqui no meu layer você vê que ele mudou o ícone dele tá vendo ó olha como é que funciona o retângulo olha como é que funciona

a fonte olha como é que funciona o frame agora a gente tem esse tipo de ícone aqui que representa o auto layout E aí para que que serve o auto layout eu vou escrever aqui ó conheça Nossa coleção mas André agora ficou tudo esquisito né não alterou em nada claro não alterou em nada por quê Porque você não configurou ainda direito o auto layout você só aplicou o autolayout E agora o que que você vai fazer Ó você vai selecionar ele você tem algumas formas de poder configurar o seu Auto layout eu vou apertar aqui

ó tem em fixed with que é a largura fixa e aqui eu posso botar hug contents que é abraçando o conteúdo então quando eu apertar hug contents Agora ele já abraçou o conteúdo e se adaptou automaticamente então só de eu fazer o hug contents eu dupliquei aqui segurando o alt e vou botar aqui ó saiba mais pô demorou só 2 segundos para eu conseguir editar o meu botão então fica muito mais fácil e mais inteligente de você trabalhar agora para você saber também um pouco mais sobre o auto layout eu vou mostrar aqui uma coisa

bem legal para você eu vou pegar um ícone e vou adicionar dentro do botão para que você entenda direitinho vou pegar esse plugin aqui do tablet icons vou trocar pra light para ser um Icone um pouquinho mais fino né e vou digitar ó Arrow que é uma setinha apertei aqui já tô com o meu Arrow aqui eu vou trocar ele para Branco né para fazer sentido e vou arrastar ele para dentro do meu Auto layout arrastei deixa eu fechar aqui que eu não vou precisar mais dele e agora eu consigo ver que tá tudo certinho

aqui na horizontal e se eu quisesse mover esse ícone Aqui para baixo eu tenho essa opção aqui ó tá vendo que eu tenho essa setinha na horizontal eu posso botar o layout vertical e aí eu jogo isso mais para baixo imagina que você tem uma galeria de foto no desktop que é uma fotozine também de configurar distância entre os elementos que estão ali dentro se eu botar aqui ó 20 você vê que a distância aumenta aí eu vou voltar aqui para 8 eu tenho também as distâncias horizontais e verticais que são chamadas de pading essa

distância interna se eu quiser botar ó 120 tá vendo que essas distâncias aqui aumentam vou botar para 24 e eu também posso fazer isso na vertical botar aqui 120 só para vocês verem mas André não mudou em nada claro porque aqui a gente tá com tá vendo tá com 64 ele tá com tamanho fixo tem que botar ele para abraçar o conteúdo que aí ele abraça tudo que tá ali dentro então vou botar aqui ó com 20 como tava e uma outra coisa também que você pode fazer é as distâncias Independentes Ah eu quero botar

10 de um lado vou deixar com 24 do outro 32 em cima vou manter o 20 embaixo é is só para mostrar para vocês que você consegue fazer distâncias Independentes em alguns cenários específicos faz bastante sentido mas aqui pro nosso botão eu só utilizei para mostrar para vocês vou fechar aqui aí eu vou botar aqui ó 24 que a gente estava antes e 12 Não na verdade era 20 né uma última coisa do autolayout que eu quero mostrar para vocês eu vou até sair daqui eu vou criar um frame vou apertar o f vou clicar

e arrastar e agora eu vou criar aqui ó três retângulos criei o primeiro e vou duplicar aqui ó dupliquei aqui pro lado segurando o shift e o alt não vou me importar também muito com as distâncias vou criar um ao layout para esses três elementos aqui ó apertei shift a né ou eu posso ir aqui do lado também para apertar e criar esse auto layout agora que que eu vou fazer eu vou diminuir aqui para vocês verem o que acontece ó diminuir os elementos Eles continuam na mesma posição certo mas se eu chegar aqui e

apertar o wraap que é esse daqui ó essa opção aqui ó tá vendo ele vai empilhando um no outro então isso funciona muito bem quando você vai fazer um design mais responsivel que quera que funciona no desktop e também no mobile o rap ajuda bastante quando a gente tem alguma galeria de foto alguns cards assim alguns elementos que merecem ser empilhados no mobile essa é uma forma de você enfim aprender uma coisa aqui que eu também tenho que falar sobre o a layout vou aumentar aqui bem a grosso modo para você conseguir enxergar tá vendo

que a gente tem o nosso botão temos os nossos dois elementos vou também aumentar do lado aqui a gente tem um alinhamento do auto layout no momento eu tô centro e centro eu posso alinhar topo à esquerda centro ao topo topo à direita alinhar ele à direita alinhar à esquerda alinhar ao centro e na parte de baixo na parte de baixo à esquerda e na parte de baixo à direita então isso ajuda bastante a gente na hora que a gente tiver posicionando os elementos dentro do auto layout você pode atribuir um alinhamento para el agora

que eu já fiz aqui vários botões falei de auto layout vou selecionar todos esses aqui ó e vou deletar e esse daqui eu vou botar aqui ó hug content e hug content de novo aí fica mais fácil para eu editar eu vou botar aqui ó ver coleção e vou deixar essa set vou botar ele com 24 vou até aumentar um pouquinho 40 e esse daqui 24 para dar um pouco mais de respiro vou deixar com 16 fica mais perto e 40 agora a gente tem até uma boa hierarquia você consegue ler primeiro o texto depois

o subtítulo e depois você não tem Mas para onde olhar você vai olhar pro Seu botão Beleza a gente já tem aqui praticamente a nossa Hero section deixa eu até deletar esse frame aqui a gente tem a nossa Hero section já basicamente pronta vou selecionar esses três só vou buscar um alinhamento melhor ó Entre esses dois itens aqui eu selecionei tudo e vou jogar ele um pouquinho para cima tá com 67 botei el um pouquinho mais para cima só para ficar mais perto aqui da barra de navegação Então vamos lá agora eu vou criar uma

nova sessão aqui no nosso site E para isso eu vou selecionar o frame inteiro e vou arrastar ele aqui para baixo dar um pouco mais de espaço pra gente poder criar essa sessão que a gente precisa eu vou fazer uma sessão chamada de mais vendidos e agora eu vou apertar o t e vou escrever aqui ó mais vendidos vou botar a nossa fonte de título principal DM serif aqui ó display já selecionei ela e agora eu não vou botar o mesmo tamanho de fonte que tá aqui porque ele não precisa chamar tanta atenção quanto o

título lá de cima Então a gente tem a nossa fonte aqui grande que tá com 72 e80 né 72 de tamanho e 80 de tamanho entre linha que que eu vou fazer agora Primeira coisa eu vou ter que mudar aqui para italic E aí eu vou botar aqui ó 48 56 que aí é um tamanho grande também que você consegue ler certinho se você tiver scroll ali navegando pelo site mas não é algo que vai competir lá em cima então beleza vou botar isso aqui aqui alinhado aqui com o nosso Grid na esquerda só vou

botar ele um pouquinho mais perto aqui e agora eu vou começar a criar os elementos né que são responsáveis pelos óculos mais vendidos E aí agora eu vou apertar o r para que eu possa criar retângulos que vão ser responsáveis pelas imagens a gente vai fazer primeiro uma marcação aqui eu vou clicar e arrastar e vou botar uma altura de 336 nada muito programado aqui simplesmente botei aqui porque eu quero que ele tenha uma forma de um retângulo e agora a minha ideia é fazer o quê botar o qu o nome do óculos só aqui

ó nome do óculos verdade esqueci aqui o ó e aí que que eu vou fazer eu preciso botar a fonte que não tem serifa porque fica mais fácil a leitura mais fácil de você identificar ali aí eu vou botar o DM ó s e aqui eu vou botar ela com semibold e vou ter que diminuir né esse tamanho porque em comparação ao nosso retângulo principal aqui ela tá meio que competindo eu vou botar ela com 16 bem pequenininha mesmo com 24 para aqui a gente tem uma proporção legal ali entre o tamanho da fonte e

também a entrelinha aí do outro lado eu vou chegar aqui e vou botar o preço eu vou botar aqui R 345 só que o preço eu não quero que chame tanta atenção assim que que eu vou fazer eu vou diminuir aqui A Hierarquia vou botar regula que aí é uma fonte rula e eu também vou mudar o alinhamento Ó vou botar um aliamento à direita do texto por qu que aí toda hora que eu for escrever alguma coisa aqui um preço novo ele já se alinha certinho a posição que tá ali estabelecida pro preço Então

deixa eu dar um Ctrl Z pra gente voltar com o texto certinho vou selecionar esses dois eu vou ver uma distância aqui tá com sete vou botar com oito e vou selecionar esses três e eu vou agrupar eles dentro de um frame aí eu vou apertar aqui ó botão direito e eu tenho aqui ó frame selection e eu também posso utilizar essa mesmo mecanismo pelo comand Alt G que você vai adicionar dentro de um frame todos os objetos que você selecionou o importante que eu vou falar para vocês aqui agora né Depois que eu crio

você vê que até no meu layer aqui aqui em cima de mim ó eles se agruparam todos ó se eu tirar o olhinho dele aqui ó que eu consigo esconder e mostrar o layer tá vendo eu consigo mostrar mostar para vocês que de fato ele tá unido como se fosse um só isso aqui é o princípio de um componente que que é o componente para que que serve o componente um componente nada mais é que um elemento que você vai repetir várias vezes dentro do seu projeto ou seja esse componente Você sabe que eu vou

mostrar mais óculos aqui e ele vai ter os mesmos elementos vai ter uma imagem vai ter o nome do óculos e também vai ter o preço então para ajudar a gente trabalhar de uma forma mais rápida e também manter a consistência no nosso projeto é importante que você crie componente e a primeira coisa que eu vou fazer aqui ó mostrando para vocês é vou adicionar uma imagem para que fique um pouco mais claro e para adicionar uma imagem eu vou selecionar um plugin chamado Lumi aí eu vou vir aqui eu vou botar ó sunglasses vou

escolher aqui um óculos escolher esse daqui beleza tá vendo ó eu poderia fazer o quê selecionar aqui ó e duplicar né segurando o alt aqui pro lado e simplesmente apertar o ctrl d e duplicando com a mesma ação que eu fiz Se Eu arrastei pro lado duplicando com Alt ele vai simplesmente repetir essa mesma ação com o nosso contrl D se você tiver no Mac no caso vai ser o comand d mas agora para fazer mesmo o componente dentro do figma a gente tem que transformar isso no componente usar funcionalidade de componente eu mostrei para

vocês o conceito de um componente o que que é o componente mas agora a gente vai transformar isso de fato num componente que que eu vou fazer aqui eu vou pegar esse daqui ó eu vou arrastar aqui pro lado para vocês entenderem como essa funcionalidade É aí vamos lá o que que você pode fazer para criar um componente você pode fazer de duas formas você pode simplesmente apertar nessa funcionalidade aqui ó Create components ou como eu gosto sempre de usar atalhos eu aperto Command Alt k caso você esteja no PC de novo você ao invés

do comand você vai apertar o control cont control alt k beleza e aí você já vê que já mudou aqui o comportamento aqui do nosso elemento ele mudou de azul para roxo por quê Porque agora ele é um componente e aqui dentro do componente a gente tem algumas hierarquias que eu vou mostrar para vocês primeira coisa que eu vou fazer eu vou mudar o nome aqui vou botar óculos Dei dois cliques ali e mudei rapidinho para óculos e aqui nos nossos layers na esquerda você vê que tá tudo roxo então tudo que é responsável ou

relacionado a componente Ele sempre vai tá roxo e aí esse aqui o nosso componente Pie como é que você consegue identificar um componente P por conta disso aqui ó ele tem esses quatro losangos aqui bem preenchidos E aí como é que a gente faz um componente fil eu vou duplicar ele pro lado agora você vê que esse nosso componente ele não tem mais aqueles losângulos aqui e nem o nome então isso quer dizer que ele é um componente dependente ele é uma Instância do componente principal você consegue até identificar aqui pela forma dele como ele

representa aqui dentro dos layers ó tá vendo vendo aqui ele tem um losango Só a bordinha dele um losango grande se você passar o mouse em cima você vê que ele é uma Instância Se você passar aqui o mouse em cima do nosso componente principal ele tá como componente Ó você já vê que ele é o componente certinho Ele é o nosso componente principal Qual é a diferença entre um e outro todas as mudanças que você aplicar dentro de um componente principal vai afetar o seu componente dependente e nem todas as mudanças que você fizer

no seu componente dependente vai afar o seu componente principal eu sei ficou um pouco confuso mas eu vou mostrar rapidinho para vocês como funciona no nosso corner radios aqui né que é a nossa borda você vê que aqui a gente tem uma borda completamente quadrada assim completamente pontiaguda na verdade e se eu vier pertinho da aresta aqui né pertinho da extremidade aqui do nosso elemento eu clico e arrasto aqui e automaticamente você vê que o meu componente independente aqui já tá fazendo a mesma coisa ó tá vendo olha queele legal E aí se eu quiser

fazer isso no meu componente dependente ó ele automaticamente não muda o meu componente principal porque você tá aplicando uma mudança específica para uma Instância já existente cabba que você não aplica para uma mudança Global tudo que você for fazer no seu componente principal vai ser uma mudança Global imagina que eu tenho esse mesmo componente aqui distribuído em várias páginas do meu projeto e eu quero fazer uma mudança simples que é adicionar ali uma borda r arredondada ao invés de eu ter que ir em todas as páginas selecionando todos os mesmos elementos ali todas as mesmas

imagens e ficar mudando ali a borda eu simplesmente vou no meu componente principal adiciono a borda que eu quero e ele vai aplicar em todo o meu projeto agora deixa eu dar um control Z aqui pra nossa Instância voltar o que ela é E agora o que que eu vou fazer ó eu vou pegar essa Instância aqui né o meu componente filho e vou jogar ele aqui dentro do meu design vou pegar esses aqui que não são componentes vou deletar eles e vou ó duplicar para que tudo fique como um componente filho todos esses filhos

sejam do mesmo pai e aí para vocês conseguirem ver uma mudança aqui em tempo real né para ver como é que isso pode afetar ó eu vou pegar aqui a o rádios aqui né que é essa borda arredondada Tá vendo como é que muda em tudo lá ó então fica muito mais fácil de você conseguir manter a consistência no seu design e editar caso você tenha um projeto muito grande agora para nosso design ficar um pouco mais legal o que que eu vou fazer vou adar uns outros óculos aqui eu vou abrir dessa vez o

One Splash que a gente já viu Vou botar aqui ó sunglasses vou botar uma licença de graça aqui ó esse daqui vou botar esse esse daqui vamos ver ó vou botar esse daqui vamos aqui embaixo escolher um outro modelo ó de óculos Beleza já dá um pouco de personalidade pro nosso site eu vou organizar Aqui as coisas vou selecionar todos esses elementos que estão aqui ó e vou botar aqui mais perto né da nossa Hero para que as coisas sejam um pouco uma mais perto das outras E aí eu quero entrar agora num conceito de

protótipo Por que que a gente usa o protótipo a gente usa o protótipo para duas coisas um para mostrar pro nosso time dar uma experiência real de como é que vai ficar o resultado final na hora que tiver publicado lá o seu site ou seu aplicativo e também a gente usa para mostrar pro desenvolvedor as interações como é que funcionam as animações de um botão de uma troca de página então é muito mais fácil de você mostrar para ele o que que é do que simplesmente falar aí para mostrar aqui como é que funciona aqui

um conceito de protótipo eu vou criar uma página bem rápida vou apertar o f aqui ó desktop selecionei o mesmo tamanho eu vou pegar aqui a minha barra de navegação vou selecionar ela toda vou apertar aqui ó cont CRL ctrl v vou pegar essa imagem aqui também eu vou duplicar rapidamente e vou fazer ela de ponta a ponta parece uma página de categoria sabe E aí eu vou deixar ela aqui com o tamanho certinho agora eu vou pegar as minhas instâncias aqui né meus componentes criança e vou jogar ele bem aqui eu vou criar mais

umas fileiras né só para dar mais volume na nossa página de categoria E vou apertar ó comando D para eu dar uma duplicada também para baixo eu selecionei todo esse grupo de elementos dupliquei segurando o alt então eu posso duplicar esses mesmos elementos para baixo repetindo o movimento que eu tinha feito e agora eu vou na aba de protótipo para eu conseguir aqui fazer essa micron navegação S entre páginas E aí quando eu abro a aba de protótipos eu tenho aqui toda a parte de configuração aqui do protótipo no início tá muito sem nada aqui

porque eu não tô clicando em nada mas o objetivo é que você selecione um ponto de ação né que você vai conectar com a outra página que no caso pode ser o nosso botão eu vou clicar e arrastar E aí eu já começo a pensar na interação eu vou manter a interação do jeito que tá a gente tem o Trigger que é como se fosse o Ponto de contato como é que vai ser esse gatilho da animação vai ser através do clique ele vai fazer a ação de Navegar para o desktop 4 Se você olhar

aqui ó desktop 4 é o nome do nosso frame e Animação instante não vou muito aqui entrar super detalhes de animações essas coisas que eu quero que você entenda o conceito aí quando eu fiz essa conexão aqui a gente criou um Flow que que é um Flow é um caminho basicamente que o usuário vai perseguir E aí eu vou renomear esse Flow para homepage e o que eu vou fazer agora eu vou apertar o play aqui para entender como é que tá funcionando esse protótipo vou apertar o play vou esperar carregar funcionou aqui direitinho e

aí eu consigo ver aqui o meu site de uma forma bem similar como se fosse num navegador e a partir daqui eu posso apertar aqui ó ver coleção e ele troca de página então isso aqui já ajuda o pessoal do meu time ou meu cliente a entender De que página vai para que página qual botão que vai levar para qual página entendeu ajuda a gente fazer uma navegação mais real e mostrar pro time como que aquilo vai funcionar e agora uma outra coisa que a gente tem que pensar é que o usuário nunca tem que

ficar bloqueado então para isso eu vou botar o logo aqui me trazendo direto para a homepage de novo e vou manter os mesmos parâmetros eu vou voltar aqui no meu protótipo e ó eu não consigo clicar aqui por quê Porque eu tenho que esconder a ui tá vendo ó Hide ui aí você fez o Hide ui e aqui você já consegue clicar cliquei Ó Maravilha consigo navegar perfeitamente ente volto para aquela página através desse botão volto paraa homepage clicando no logo tá vendo essa é a lógica do protótipo agora nós vamos para um conceito de

variantes eu te introduzi aqui no protótipo para você entender como é que funciona agora você tem O protótipo também entrec componente essa que é a parte legal ali do figma que você consegue deixar as coisas bem mais reais e para isso você tem que criar uma variante O que que é uma variante né a variante é basicamente uma variação ali do seu componente imagina um botão quando você passa o mouse em cima dele ele normalmente faz alguma coisa aumenta de tamanho muda um pouquinho de cor e quando você clica nele ele também tem algum tipo

de comportamento e reação ele pode ficar um pouco mais escuro pode escolher pode entrar um pouquinho na tela po de acordo com o objetivo ali do designer Então a gente vai fazer isso aqui com o nosso produto E para isso eu vou clicar aqui ó add variants que é adicionar uma variante tá vendo que eu cliquei e adicionei uma variante e que que eu vou fazer eu vou fazer uma variante simulando que eu tivesse passando o mouse em cima e aí eu vou simplesmente tirar aqui um pouco de opacidade eu vou botar com 60% até

botar com um pouquinho menos 40 e eu vou botar um texto aqui ó vou duplicar aqui e vou escrever aqui ó saiba mais Digamos que o usuário gostou desse óculos e quero ver mais sobre as descrições do produto eu vou tirar até um pouquinho mais de opacidade vou botar com 20 para que a gente consiga ver ainda mais isso quando você seleciona uma variante aqui ó a gente tem o óculos ele cria algumas propriedades aqui ó na nossa parte da direita e o que que eu vou fazer eu vou clicar aqui nesse Edit property para

eu editar a propriedade e eu tenho Qual o nome dessa propriedade eu vou botar ó status que aí você consegue identificar o status de cada componente esse primeiro eu vou chamar de default mesmo e o segundo que é esse que a gente tá passando o mouse em cima eu vou chamar de Hover que é como se estivesse passando Mouse em cima o nome disso dessa interação chama Hover e agora que que a gente vai fazer eu vou criar um protótipo ligando um e outro e o que que eu quero agora eu vou mudar o Trigger

o Trigger a gente tem alguns tipos de Trigger aqui também não vou entrar em detalhe aqui em todos os tipos de Trigger porque senão vai ser muita coisa na sua cabeça aqui para essa primeira aula a única coisa que eu vou mostrar para vocês ó while hovering que lembra que a gente botou o nome de Hover então enquanto você está fazendo Hover que que isso vai acontecer ele vai mudar para a ação vai ser mudar para o status de Hover que é o nome que a gente botou aqui E qual vai ser a animação instance

eu vou manter a animação básica aqui para que a gente consiga enxergar essa mudança ó Então vamos lá aqui no nosso design nada mudou certo Deixa eu fazer o seguinte eu vou lançar aqui O protótipo de novo vou aqui ó presents vou apresentar e agora eu vou ver como é que se comporta esse protótipo Lembrando que eu fiz Todas aquelas mudanças no componente principal Então ela automaticamente tem a obrigação de aplicar aqui em todas as outras inst passei o mouse em cima olha que legal você já consegue ver como é que funciona aqui a interação

entendeu se eu tivesse esse projeto já mais detalhado eu iria basicamente clicar aqui ia me levar pra página do produto ia me mostrar ali como é que funciona tudo direitinho e aí ia me mostrar toda a descrição com mais fotos então ia ser muito mais interessante mas aqui para nosso exercício isso aqui já tá mais do que suficiente e fica muito legal né esse tipo de Rover assim porque dá essa Sensação bem real assim do do site Beleza André agora entendi como é que o figma funciona quais são os próximos passos na minha opinião o

que você deve fazer agora é começar a praticar e treinar e replicar interfaces já existentes para isso você pode emite o dribble ou o behance e você pode lá entrar e ver várias referências várias coisas interessantes ou até aplicativos mesmo que você usa no seu dia a dia você tira aí uma foto da tela do nubank ou ver algum site que você gosta e que você entre todo dia Bota ele lá no figma e tenta replicar para você ficar craque na plataforma porque quer ver quando você tiver mais experiente na plataforma você vai poder fazer

coisas como essa daqui vamos pra tela que eu vou te mostrar se liga esse aqui é o mesmo exercício que a gente fez porém apresentando ele de uma forma mais avançada eu mexi um pouco nas estruturas aqui mas para dar um up assim né Para dar um levante nesse protótipo olha como que eu fiz esse Carossel aqui trocando de imagens tendo esse efeito que a gente tá dando um zoom assim nas imagens fica muito interessante e muito similar ao real isso aqui é tudo feito no figma eu fiz também aqui a animação dos links olha

como é que fica bem interessante tá aquela vontade de você clicar ali e que fosse te levar para uma tela se a gente scrollar aqui para baixo né descer você vê os mais vendidos aqui isso tudo dentro do filma você consegue trocar as imagens mostrar tudo direitinho ó Isso aqui é um detalhe também muito peculiar aqui muito importante de ver dentro do protótipo olha aqui cada bolinha como é que fica muito interessante você conseguir mudar isso E fora que eu também criei mais uma sessão aqui só para dar mais uma encorpada também no site e

além disso como é muito importante até eu mencionar essa parada quando você faz um projeto a gente tem a obrigatoriedade como designer de fazer esse projeto né em todos os Break points que a gente fala que são os tamanhos de tela aqui eu tenho num desktop aqui eu tenho num formato de tablet e no mobile E olha que legal que a gente consegue fazer no mobile deixa eu trocar aqui a câmera para que vocês consigam ver melhor eu consigo reproduzir exatamente o que tá dentro ali do figma através do aplicativo do figma mirror então eu

consigo ver exatamente como é que vai ficar esse protótipo no celular isso é muito importante para que você tenha um senso de estética de hierarquia e também de navegação como é que isso vai funcionar dentro do celular não só na hora que o desenvolvedor publicar lá mas você consegue prever todos os seus erros antes mas antes Deixa eu te falar uma parada você pode aprender tudo isso que eu mostrei né Essa parte avançada do figma toda sozinho a única coisa que vai entrar aqui na jogada é o tempo certo Por que que eu tô falando

isso porque eu trabalho com figma desde os primórdios então eu sei do que eu tô falando essas animações complexas demora um tempo para você aprender não é do dia paraa noite mas se você quiser encurtar esse caminho aprender o figma ficar crack mesmo num curto espaço de tempo eu tenho um curso que pode te ajudar muito nisso você vai aprender desde o básico do figma muito mais detalhado do que eu mostrei hoje até o avançado com animações complexas e além do mais você também vai aprender conceitos de ui e ux Como que você cria um

projeto desde o zero até entregar pro desenvolvedor existem vários processos e várias etapas que envolvem a criação de um projeto e se você quiser se tornar um yx de verdade você tem que saber esses processos e também eu dou dicas de como você entrar no mercado como que você monta um portfólio Quais são os melhores práticas de montar um estudo de caso Como que você monta o seu perfil no Linkedin de uma forma profissional para quando o recrutador chegar até você você tá bem preparado então se você quiser entrar de cabeça nessa profissão agora no

ano de 2025 não perde essa oportunidade beleza e para saber mais detalhes eu vou deixar o link aqui na descrição e também não se esquece de se inscrever no o canal e deixar seu comentário aí falando o que que você achou dessa aula de figma vou ficar Marão de trocar essa ideia contigo Beleza eu vou ficando por aqui fui