DO ZERO AO PRIMEIRO PROJETO NO FIGMA 2024 🔑

hoje você vai aprender o que que é o figma Como que você deve utilizar e como criar o seu primeiro projeto e a gente vai colocar a mão na massa aqui então bora lá seja para você que é um Dev front end mobile ou para você que quer focar em experiência do usuário em ux ui design System então o figma é essencial para você é uma ferramenta uma das mais utilizadas no mercado que é muito bacana para você criar a interface do seu projeto O protótipo antes de pro código para você criar o fluxograma do

seu projeto fluxo as interações as animações tudo isso antes de você partir pro código né então desenvolver a ui toda a parte de Style guide né que a gente chama também construir o guia de estilo tudo isso a gente consegue conf figma aqui e gratuitamente Bora lá então vamos lá se você é novo por aqui ou se você não conhece o nosso canal eu tenho certeza que você vai gostar e fica tranquilo Se você gostar desse vídeo você deixa o seu like aqui se inscreve aqui embaixo e para você que já é inscrito eu nem

vou pedir que eu tenho certeza que você deixou o seu like senão a gente vai ter que ter uma conversa depois vamos lá então pra gente começar aqui ó tô no site do figma.com tá só mostrando antes da gente começar a conhecer a ferramenta dentro aqui da parte de preços tá ele tem Claro né como toda ferramenta aqui você tem o plano pago mas você tem o plano gratuito também que é o que a gente vai usar e todo gratuito dá para você usar tudo sem problema dá para você usar ilimitado aqui a parte de

files de páginas dá para você também ter colaboradores trabalhar com mais pessoas para você ter acesso a plugins que a gente vai ver também e também você pode é criar projetos profissionais com ele então não precisa pagar para criar projetos no figma tá Fica tranquilo então bora lá só você vir aqui ó se você não tem conta no figma faz o login aqui gratuitamente faz com o Gmail por exemplo ou cria uma conta lá e aí você escolhe o figma aí sem pagar nada o plano free aqui beleza que é free para sempre não precisa

colocar cartão nem nada tá E aí o legal do figma é que ele possibilita a gente desenvolver os nossos protótipos os projetos tanto online quanto baixar ele né então a gente pode tanto desenvolver aqui ó dentro do site só fazer o login já habilita aqui pra gente poder fazer todo o fluxo desenvolver no site mesmo Então isso é sensacional do figma E caso você queira baixar como a gente vai usar aqui você pode baixar também seja para Windows Mac Linux pode baixar e usar ele baixado também tá E agora então no meu caso quando você

baixar você faz o login aí e aí o que a gente vai fazer aqui é criar um projeto você pode vir aqui no maizinho E aí você pode vir aqui em cima ó em design file New E aí você pode criar um novo design file aqui beleza então aqui a gente pode colocar um nome eu vou colocar aqui para app YouTube tá só pra gente dar um nome para esse nosso projeto aqui e aqui na parte então da esquerda a gente vai ter os nossos layers e os assets já já a gente vai conhecer o

que que são cada coisa e na parte da direita aqui no nosso canto Zinho aqui da direita a gente vai ter duas Abas né basicamente a aba de design onde vai ter as propriedades dos elementos que a gente vai manipular e também aba Prototype que é quando a gente for rodar um protótipo fluxo emulando como se fosse rodar num iPhone ou num desktop a gente vai fazer isso também tá então aqui dentro ó na esquerda a gente também tem a nossa página um eu vou dar dois cliques aqui na nossa página um para app tá

só pra gente renomear mesmo para ficar bem organizado e aqui no nosso layers e assets a gente ainda não tem nada por layers são as camadas que a gente tem por exemplo formas e frames elementos que a gente vai ter no nossos design então não tenho nada por enquanto e os assets a gente pode ter por exemplo plugins componentes coisas que a gente tem espalhado na aplicação que eu posso reutilizar Então por enquanto também não tenho nada tá E agora aqui em cima nas nossas ferramentas aqui em cima a gente tem várias primeiro que é

o nosso Mouse padrão o segundo que a gente vai ter que é um mouse de scale pra gente aumentar elementos sem perder a proporção ou seja aumentar e reduzir em proporção sem perder né Sem esticar ou quebrar a proporção do elemento então o mouse normal nesse carinha aqui é o frame o frame nada mais é do que a gente criar elementos e frames que vão ser por exemplo Ah eu quero criar um frame de um iPhone ou de um desktop ou de um tablet ou de um Samsung a gente pode criar aqui ou frames Livres

tá então você pode clicar nesse frame e a hora que você clica no frame ele já habilita aqui do lado na nossa aba de design alguns tipos de frame pré-definidos tá Você pode muito bem ó clicar e arrastar aqui criar um frame ó do tamanho que você quiser você pode tá vou deletar mas se você clicar no frame ele habilita aqui pra gente ó já criar no tamanho padrão por exemplo Ah quero criar um aplicativo né então vamos montar o design baseado no tamanho do iPhone 14 15 pro por exemplo então vou clicar aqui ó

cliquei e ele já vai criar ó se a gente puxar aqui pro lado né A parte do tamanho já de largura e altura desse frame Então vou dar dois cliques aqui ó nele ou aqui em cima no no nosso layer ó tá vendo que agora a gente tem um layer Então vou dar dois cliques e vou dar o nome aqui para página login ou só login Beleza então nesse vídeo aqui a gente vai criar uma página de login simbolizando para um aplicativo aí beleza então aqui dentro a gente tem a nossa frame login seria representando

a tela de login do nosso aplicativo e quando eu clico nele Ó você pode perceber que agora habilita aqui na aba design várias propriedades que a gente vai conhecendo primeiro né a gente conhece essa primeira sessãozinha aqui que ela é do tipo Frame M maravilha o x e o y é a posição que ele tá o w é o wid Ou seja a largura do elemento então você pode ver que ele tem 393 de largura largura nada mais é do que a largura do frame tá o h é o r ou seja a altura do

nosso frame esse cara aqui é para rotacionar ele ó se eu quiser rotacionar vou deixar em 0% né não quero rotacionar o nosso frame e esse outro cara aqui é o corner radius ou no nosso e se você for desenvolvedor né Ele é o border radius né arredondamento de borda do elemento então se eu colocar aqui só pra gente ver ó 24 e eu dou um enter pode ver que a bordinha ó fica arredondada dos nossos frames ó tá vendo maravilha né vou voltar aqui se eu clicar nesse cara eu posso arredondar cada borda separado

também tá no nosso caso eu vou deixar até aqui ó quatro de borda arredondada só para ficar legal um pouquinho ali ó Beleza então a gente arredondou a borda do nosso frame vou clicar nele de novo a gente tem mais alguns elementos que a gente vai ver na prática aqui e aqui também a gente tem um carinha chamado fio o fio nada mais é do que o preenchimento do item ou seja o background a cor dele tá tá vendo que ele veio Branco se eu pegar e mudar aqui a cor ó posso mudar a cor

para que eu quiser aqui ó tá ele vai ter a cor de preenchimento tá vou deixar aqui mais ou menos um branco meio meio um cinza ali ó e aqui a gente tem a cor hexadecimal Beleza então a gente já tem aqui esse outro cara é o stroke que é a borda do elemento e o outro é efeitos e Export que a gente já vai ver tá então vamos começar criando um elemento só pra gente ver então aqui do lado do frame a gente tem elementos tá como um retângulo uma linha uma setinha uma elipse

um polígono um star ou colar alguma imagem tá então nessa nesse vídeo aqui eu vou usar duas imagens que a gente pode manipular Então vou até pegar minhas imagens aqui que eu esqueci de pegar vou copiar ela vou dar um cont CRL C eu vou deixar para vocês na descrição para baixar essas imagens e vou dar aqui ó um cont CRL V então colei essas duas imagens aqui ó olha que legal e eu vou deixá-las aqui de canto já já pra gente utilizar e criar o nosso projeto tá e do lado aqui ó além dos

nossos retângulos aqui das nossas formas a gente tem a caneta né pra gente poder desenhar livremente aí o texto ou você pode clicar o t do seu teclado e escrever algum texto aqui dentro vou dar um Ask E aí eu posso manipular o texto tá E aqui do lado a gente tem componentes e plugins e aqui a mãozinha é para você mexer no seu board agora caso você não queira deixar ela sempre habilitada você pode voltar pro seu Mouse aqui e pode usar o atalho espaço você pode segurar o espaço do seu teclado ó tá

vendo quando eu seguro o espaço ele fica com a mãozinha seguro o espaço e aí você pode movimentar aqui legal então ó Segurei o espaço e eu movimento se eu não segurar o espaço aí eu seleciono os itens dentro dos meus elementos tá Vou segurar o espaço aí eu posso alinhar aqui outra coisa que eu gosto de usar muito é segurar o control do meu teclado e rodar a bolinha do mouse para cima e para baixo ó segura o control roda a bolinha para cima ele dá Zoom Roda a bolinha para baixo ele tira o

zoom segurando control ó Posso rodar a bolinha do mouse legal seguro o espaço e aí eu movimento e aí eu posso usar esses dois atalhos basicamente para ir me posicionando dentro aqui do nosso é da nosso figma aqui do nosso projeto Beleza então agora vou dar aqui um Ask se a gente clicar T escrever alguma coisa por exemplo entrar e eu dou um esc aqui ó Criei um texto agora quando eu clico nele eu posso ver aqui do lado que agora eu tenho as propriedades dele por exemplo eu tenho na propriedade de text Qual que

é a fonte que eu quero usar então eu quero usar por exemplo a Poppins Opa deixa eu clicar aqui nele clicar aqui Poppins vou selecionar a fonte Poppins aqui do lado eu tenho regular que é o peso dela se eu quero ela quero ela medium ou Itálico vou deixar aqui bold por exemplo aqui qual que é o TAM tamanho dela por exemplo Ah eu quero deixar ela aqui 30 E2 por exemplo tá olha só que legal eu posso deixar a altura da Linha altura da Linha É quando eu tenho mais de um texto por exemplo

mais de uma linha né então por exemplo alguma coisa escrita aqui para exemplo vou dar um es aqui então vou pegar aqui vou reduzir o tamanho do meu texto ó tá vendo que ele tem mais de uma linha essa Auto aqui ó é aura entre a linha se eu colocasse por exemplo é 90% ó ele vai ter uma uma altura menor Se eu colocar 100% vai ter uma altura um pouquinho maior por exemplo 150% que é de um parágrafo né a gente tem uma altura um pouco maior Beleza então vou deixar aqui al ó vou

apagar e vou dar um enter e vou deletar esse texto aqui se eu clicar aqui de novo a gente tem o espaçamento entre uma letra e outra então eu posso espaçar ó entre uma letra e outra vou deixar aqui zero também Zero aqui beleza a gente tem a altura entre um parágrafo e outro também e aqui a gente pode posicionar o nosso cara o nosso texto se a gente quer no começando é alinhamento na esquerda no meio ou também quer alinhar ele aqui na parte da direita beleza aqui embaixo a gente tem o fio igual

a gente tem pro nosso elemento então eu tenho o preenchimento dele qual que a cor que eu quero para esse meu cara ó posso dar a cor que eu quiser para esse meu texto no caso eu vou deixar meio Preto aqui perfeito e Bora lá então vamos começar a criar a nossa tela como se fosse uma tela de login de um aplicativo então a gente já tem aqui o nosso frame que vai simbolizar Então esse nossa tela nossa página do fluxo de login dentro do desse frame como a gente já colocou um texto aqui ó

tá vendo que o texto já tá aqui dentro você pode ver que dentro do meu frame Ó tem uma setinha e dentro dela eu tenho um layer Ou seja eu tenho uma camada que é o entrar tá que é um texto entrar ali que que a gente tem dentro de uma tela de login a gente pode colocar é dois inputs né o campo pro cara digitar o e-mail e o campo o cara digitar é a senha lá então vou criar outro texto aqui embaixo ó digite seu e-mail Maravilha Vou colocar aqui que eu quero o

alinhamento na esquerda Vou colocar aqui que ele vai ser 14 o tamanho dele ele vai ser regular então ele não vai ser um peso Grosso né porque vai ser um input aí Maravilha e dentro desse cara aqui eu quero também ó deixar ele um pouquinho mais apagado aqui ó porque ele vai ser aquele Place holder né quando não tem nada digitado e eu também quero criar ó uma linha vou dar o zoom aqui só pra gente ver ó segurando o shift eu vou criar aqui uma linha ó beleza e essa linha vai ser mais ou

menos aqui ó show de bola tá um pouquinho apagadinho então a gente criou esses dois aqui agora o que a gente pode fazer fazer é criar algo que a gente chama de auto layout dentro do nosso projeto o auto layout nada mais é que a gente pensar como se fosse o flexbox dentro do desenvolvimento né então ele tem um alinhamento horizontal e vertical dentro do elemento Então olha só que legal vou selecionar esses dois e eu vou vir aqui ó tá vendo al layout eu vou dar aqui um mais ou você pode dar um shift

a do seu teclado e a mesma coisa ó pode ver que os elementos aqui ó virou um frame e agora mudou tá vendo que agora eu tenho um alo layout aqui ó olha que bacana se eu vou vou renomear aqui para text input email ou só text input né só para ficar legal e a gente já tem o auto layout aqui ó olha que bacana então o auto layout ele vai fazer o quê ele vai facilitar alinhar e posicionar os elementos pensa por exemplo que eu quero criar um botão Olha só eu vou vir aqui

vou criar um texto e vou criar um botão por exemplo entrar ou acessar acessar vou dar um esc vou vir aqui vou dar um nosso shift a vou vir aqui no nosso carinha e eu vou dar aqui no fio eu vou colocar por exemplo uma cor cor de azul ó colocar uma corzinha de azul para ele beleza essa cor legal aqui vou colocar aqui o texto Dentro a nosso fio vai ser o branco então a gente tem o ao layout que é um botão clico nele vou renomear ele aqui para Button a gente renomeia o

layer aqui para ficar bem organizado as nossas camadas e aqui agora a gente tem um alo layout olha só que bacana tá vendo que ele tem um quadradinho aqui ó esse quadrado é o quadrado de alinhamento do item dentro se eu pegar esse meu botão e puxar ele mais para cá por exemplo eu posso clicar alinhar no começo alinhar no final em cima embaixo posso olhar onde eu quiser e aqui a gente tem alguns espaçamentos de forma bem fácil por exemplo esse espaçamento aqui é o between é caso você tenha mais de um item dentro

é o espaçamento entre os itens dentro vamos supor que eu tenho outro texto aqui ó é teste vou pegar esse meu teste e vou arrastar aqui para dentro ó teste vamos mudar ele para Branco só pra gente ver tá vendo que agora ele tem um espaçamento entre o acessório e o teste esse é o valor 10 você pode colocar o valor que você quiser por exemplo Ah eu quero 30 ó entre o teste e o coisa ele tem 30 Ah eu quero é que cada um fique lá num canto eu posso ao invés de 30

usar o alto e aí cada um vai ficar lá no seu canto Beleza vou deletar esse teste aqui que a gente não quer e outro que a gente tem né o nosso horizontal é caso a gente alinhe por exemplo vamos alinhar aqui deixa eu colocar aqui ó 30 espaçamento 14 espaçamento caso a gente alinha aqui no começo ó ou no final tá vendo que ele não tá grudando Por que que ele não tá grudando porque ele deixou pra gente ó 10 de espaçamento na esquerda e na direita se eu colocar 30 por exemplo tá vendo

que agora ele fica 30 na direita e Caso chegue algo na esquerda ele deixa 30 também Então olha que legal então aí você pode tip lular uma barreira né vamos se dizer para isso vou colocar por exemplo aqui ó 14 tá E esse outro aqui é o vertical pading que a gente chama né o espaçamento interno ao elemento em cima ou embaixo você pode delimitar ah quero zero beleza não vai ter nada quero 14 ó ele vai dar um espaçamento em cima e embaixo de 14 tá sem problema então uma coisa que a gente pode

fazer aqui ó eu vou deixar oito em cima e embaixo eu vou arredondar nossa essa bordinha desse botão para oito também olha que legal já tá começando a ganhar forma e eu posso manipular também o tamanho fixo aqui tá não precisa ser só com as propriedades eu posso vir aqui manipular o nosso botão por exemplo assim ó vou dar o zoom aqui ó 100% de zoom e a gente tem o nosso botão ó posso clicar aqui no nosso acessar mudar elhe aqui ó para bold ou até um semibold né para não ficar tão aí e

a gente tem aqui ó o nosso botão beleza posso deixar aqui 14 em cima e embaixo também posso também ó Sem problema nenhum Olha que bacana que fica então agora a gente já criou aqui conhecer o auto layout E começamos a desenvolver também um input através do auto layout então agora clicando no nosso input aqui pra gente continuar a nossa tela aqui fazer a nossa tela de login aqui baseada num tênis num Nike aqui no no aplicativo deles então bora lá a gente já tem aqui o nosso carinha que vai ser o input que a

gente já deu um auto layout Então posso alinhar ele eu quero fazer o quê Vou dar um zoom aqui a gente vai puxar mais ou menos daqui até aqui uma outra coisa que a gente pode fazer alinhar eu quero que ele seja alinhado na esquerda e eu quero que dentro dele ó dentro do text input aqui ó essa linha ela vá até o final também então eu posso vir aqui na nossa linha eu posso vir aqui ó clicar nessa nossa linha e falar olha ao invés de você ter um tamanho fixo você vai ter um

fio container tá vendo que o fio container Agora ele foi lá pro final e agora se eu pegar o meu text input e for mexendo nela a nossa linha vai sempre acompanhar esse cara Maravilha outra coisa muito importante quando a gente vai desenvolver o layout é a padronização de espaçamentos de alinhamento dos itens então se eu vier aqui e eu segur o alt do meu teclado e apontar para fora ó cliquei no nosso text Segurei o alt ele vai mostrar Olha você tá dando 36 na esquerda 51 na nossa direita e aí em cima e

embaixo ele mostra o espaçamento então ele já ajuda a gente com o alinhamento mas mesmo assim fica muito complicado né a gente alinhar Será que tá no centro eu posso vir aqui alinhar na mão ou você quiser eu vou trazer ele meio pro lado a gente tem aqui em cima alinhamentos também então eu posso por exemplo clicar no nosso item eu posso alinhar na esquerda ó grudado posso alinhar na direita grudado posso alinhar no centro ou eu posso também ó alinhar aqui ó lá em cima ó tá vendo ele gruda no frame Ou posso aqui

ó lá embaixo ou aqui no centro do frame então a gente pode também mas mesmo assim a gente ainda não tem uma referência do item como que eu posso posicionar E aí que a gente entra Grid eu posso usar as grids dentro dos nossos frames para poder ajudar no alinhamento no posicionamento dos itens dentro do nosso layout então eu posso vir dentro do nosso login ó layout Grid clica aqui no nosso login layout Grid vou dar um mais tá vendo que ele criou agora umas bolinhas vermelh Eu quero um layout Grid a gente vai fazer

um aqui ó de coluna eu vou falar a gente pode geralmente usar quatro colunas ou oito né eu vou usar oito aqui ó oito colunas e aqui a gente vai ter algumas coisas por exemplo a margem que é o antes e depois eu vou dar aqui 16 espaçamento antes e depois ó para dar essa margem e o gutter é entre uma coluna e outra eu vou dar 16 também tá então 16 aqui e aí essa cor vermelha é só pra gente nos localizar tá vou deixar aqui ó 7% para ser um pouquinho mais apagadinho olha

agora que legal né Eu posso vir aqui pegar o nosso cara eu vou alinhar ele aqui no começo dessa Grid e vou alinhar ele no final dessa Grid perfeito já tá alinhado aqui vou pegar aqui o nosso entrar deixar ele um pouquinho mais para cima aqui ó legal maravilha olha que bacana já facilita muito e aí caso você queira desabilitar o Grid só pra gente ver ó posso clicar aqui no login de novo aqui no nosso Grid ó tá vendo o olhinho clica no olho ele tira clica no olho ele aparece eu vou clicar já

ele vai tirar ó olha que legal vou dar um zoom aqui de 100% e a gente já começa a ganhar forma outra coisa clicando no nosso text input que a gente pode controlar é entre o nosso é digit e seu e-mail e outra coisa que a gente pode ver é a altura entre o e-mail o texto e a linha se eu clicar nele como a gente deu o ao layout ó posso posicionar o nosso item conforme o ao layout Olha a facilidade né E a gente tem esse nosso três três é o espaçamento que ficou

entre eles eu posso colocar por exemplo 20 ele vai dar um espaçamento grande entre eles mas daí fica feio né eu vou dar aqui o espaçamento de quatro ou oito ó vamos ver oito oito fica legal Maravilha outra coisa que a gente pode fazer é colocar um ícone do lado desse nosso input para aparecer mais um input eu posso vir aqui Ness nossas nesse iconeinstagram aqui ó vou usar esse ar Maravilha ó tá vendo que ele veio aqui e uma coisa importante tá vou dar um zoom aqui ó Cuidado para não clicar dentro clica no

frame dela ó e aí você arrasta para cá e solta tá outra coisa que a gente precisa perceber é tá vendo que o nosso login tá aqui e ele colou aqui fora aqui em cima no nosso layer ou seja ele não está dentro do nosso login Então os itens precisam estar dentro da nossa tela do nosso frame login pensa que o nosso frame login é a tela de login Então eu preciso pegar ele ó clicar e arrastar tá para dentro da nossa tela de login ó Pronto agora tá vendo que o nosso login tá aqui

agora o iconeinstagram né vou dar um cont Crol Z pra gente voltar aí a gente tem duas coisas que a gente pode fazer eu posso clicar shift segurar o shift e puxar com isso ele mantém a proporção e não quebra né eu não faço assim ó não quebro né dá um Ctrl Z de novo e a outra coisa é se eu quiser realmente manter o scale desse elemento aí a gente vem no mouse e muda pro scale ou aperta a tecla k mudei pro scale tá vendo que agora mudou aqui o mouse Zinho então agora

ó se eu puxar ele aumenta seguindo a proporção legal vou dar um cont CRL Z aqui é a mesma coisa com imagens tá voltar aqui pro Mouse Se eu vir no mouse e eu mexer na minha imagem ó tá vendo eu quebro toda a proporção da nossa imagem tá olha só quebro toda a proporção deixa eu dar um Ctrl Z deixa eu dar um cont control Z aqui para voltar original agora se eu vir aqui mudar para o scale e eu puxar aqui ó tá vendo que agora ó ele só mantém a proporção aumentando e

diminuindo Então deixa eu dar um cont Crol Z aqui de novo só para vocês entenderem isso que é an tá então agora eu quero colocar esse nosso ícone do lado aqui ó esquerdo Desse nosso input só que se eu pegar ele e eu arrastar aqui para dentro ó olha o que que vai acontecer o que que aconteceu Ele ficou um embaixo do outro ao invés de ficar do lado então isso acontece porque a gente está usando o a layout o auto layout ele tem duas direções né vertical seria um embaixo do outro e horizontal um

ao lado do outro se a gente olhar aqui ó e eu clicar aqui nele tá vendo que se a gente voltar aqui pro nosso Mouse ó move a gente tem o nosso Auto layout e ele ele tem duas setinhas aqui tá tem a setinha que é para toda vez que eu colocar um item ficar um embaixo do outro e tem a outra setinha que é cada vez que eu coloco um item é um ao lado do outro no nosso caso ele tá clicado aqui então toda vez que eu adicionar algo dentro desse text input ele

vai sempre colocar um item abaixo do outro se eu mudar para cá ó ó o que que acontece né ele vai colocar sempre Um item ao lado do outro não é o que eu quero eu quero que seja um embaixo Mas eu quero que esse nosso aroba ele fique do lado então o que eu vou fazer eu vou pegar meu arroba e vou tirar para fora deixa dessa forma do jeito que tá eu vou pegar dentro desse text input clicar na nossa linha segurando shift segurando control eu vou clicar também no nosso texto ó então

peguei a linha segura o control clica no nosso texto aqui dentro os dois selecionados a gente vai dar aqui um contrl g ou clica com o botão direito e muda aqui ó para group tá ou control mais G tá CRL G ele vai criar aqui um grupo um eu vou criar aqui para Campo de texto Então esse é um grupo que vai ter o campo de texto agora dentro aqui a gente vai pegar o nosso ar de novo eu vou puxar ele aqui ó tá para dentro do nosso Auto layout beleza puxei tá vendo que

agora dentro do nosso text input a gente tem esse nosso ar e tem o nosso grupo que dentro do grupo aí tem né a linha e o texto lá que é o nosso abaixo do outro Olha que bacana que ficou né tenho aqui dentro do campo de texto o nosso texto e a nossa linha e do lado eu tenho aqui o nosso arroba então a gente já tem ele dessa forma aqui outra coisa que a gente pode fazer é vira aqui dentro da nossa linha segura o shift e diminui aqui um pouquinho a largura dessa

nossa linha e agora a gente pode adicionar o Grid novamente pra gente poder alinhar vou colocar o Grid e a gente pode alinhar Ah já tá alinhado mais qualquer coisa ó a linha no Grid pega a sua linha caso você precise manipular a linha clica aqui na sua linha segura o shift Ó manipula sua linha até o final aqui do nosso Grid Beleza eu vou pegar aqui o nosso carinha o nosso e-mail e eu vou descer ele um pouquinho então vou clicar aqui no texto do e-mail com a setinha do teclado para baixo ó vou

diminuir aqui um pouquinho beleza e maravilha agora a gente pode voltar aqui no nosso login eu vou pegar vou tirar aqui o Grid de novo e a gente já começa Ó a ter aqui o nosso primeiro input que seria pro cara digitar ali o e-mail agora a gente vai vir aqui eu vou vir aqui vou dar um contrl D pra gente duplicar trazer aqui para baixo ó segurando o alt 20 de espaçamento Beleza vou deixar aqui 20 de espaçamento agora aqui embaixo eu vou clicar até chegar no nosso texto e aqui vai ser Digite sua

senha maravilha eu quero trocar o ícone daqui então vou lá no nosso plugins o nosso feder aqui de novo e a gente pode pegar aqui o lock Vamos pegar esse cadeado Zinho aqui ó esse iconeinstagram você deletar ele clicar na sua tela de login e dar um cont Crol V aí ele vai vir aqui dentro ó e vai cair dentro da nossa tela de login ó tá vendo ele aqui ó aí o que a gente vai fazer é vou arrastar ele lá para dentro aqui ó eu vou clicar no nossoo ar que é esse nosso

Icone e vou deletar deixar só o nosso Lock Olha que bacana já começou a ganhar uma forma aqui vou dar um zoom de 100% vou dar um espaçamento até um pouquinho maior vou dar aqui uns 24 Beleza a gente já tem ele aqui legal outra coisa que a gente pode fazer é colocar aquele esqueci minha senha então colocar mais um texto aqui ó esqueci a senha ou esqueceu né Beleza vou dar um esc vou mudar aqui para 12 o tamanho da fonte e vou deixara um pouquinho mais apagadinho ó pouquinho mais apagadinho aqui ó não

tão preto e vou colocar aqui embaixo ó alinhado aqui na direita segurando o alt pra gente ver quanto que tá des espaçamento Vou colocar aqui oito e pronto a gente já tem aqui oito de espaçamento legal agora a gente já tem o nosso botão aqui eu vou arredondar esse botão mais vou colocar aqui UMS uns é uns 34 para ele ficar bem arredondado ó e vou alinhar ele também ó alinhar com o nosso texto aqui e vou puxar ele aqui ó até alinhar aqui também e aí a gente pode ó alinhar o texto Dentro no

centro e perfeito vou deixar ele até um pouquinho menor aqui a altura vou colocar oito aqui de espaçamento se quiser mudar a altura na mão a gente pode ó 40 aqui 40 por exemplo ó a gente pode também sem problema tá então mudamos aqui vamos segurar a o shift 24 de espaçamento ó apontando para cim aqui no nosso texto perfeito a gente pode colocar outro texto aqui ou aí eu posso colocar aqui ele um pouquinho mais apagadinho né deixar ele regular podemos alinhar ele aqui ó no centro ou ou clicar aqui para alinhar no centro

segurando o alt ó vamos deixar aqui 24 de espaçamento e aqui embaixo a gente pode colocar outro botão vou pegar esse botão contrl D pra gente duplicar trazer ele aqui para baixo ó 24 de espaçamento também e aqui a gente pode colocar por exemplo é entrar com Google né Google eu posso pegar até um Icone Zinho da nossa do nosso Google para pegar o ícone a gente pode ir n nossas plugins eu posso pesquisar outro plugin por exemplo icon fy aqui ó acho que eu escrevi errado né icon icon unify dessa forma assim vou clicar

nele vamos lá e aí eu vou pesquisar aqui ó nele ó já até tava já Google ele vai te dar vários plugins aqui ou vários ícones né eu vou pegar esse aqui ó vou dar aqui que a altura eu quero que ele seja 24 vou dar aqui o Import E aí eu vou fechar ó vou arrastar ele aqui para dentro do nosso botão e pronto a gente já tem ele aqui ó olha que bacana E aí Claro a gente não pode deixar os dois botões com a com a mesma cor com o mesmo fio né

com o mesmo preenchimento que daí vai dar a mesma importância pros dois botões Então posso vir aqui nesse botão do Google clicar no fio e deixar ele um pouquinho mais apagadinho aqui ó tá um pouquinho mais apagado aqui quase branco e aí eu vou mudar o texto Dentro para preto ou quase Preto aqui também ó beleza maravilha outra coisa que a gente pode colocar é aquele famoso texo ainda não possui uma conta cadastres Beleza vou dar um esc vou colocar tamanho dele vai ser 14 vou centralizar ele aqui vou mudar ele para regular posso deixar

ele até um pouquinho menor vou dar aqui ó 12 de tamanho centralizar de novo seguro o alt e eu vou com o meu tecladinho aqui ó setinha para cima chegar no nosso 24 de espaçamento que é o padrão que a gente tá usando aqui e aí como esse nosso cadastro ele seria um link para levar pra tela de cadastro eu posso vir aqui ó cliquei nele selecionei esse cadast posso vir nessas três bolinhas aqui e eu posso colocar que esse cadast vai ser um underline ó olha que legal E aí ele vai dar essa impressão

aí que isso é um link se eu usar aqui o nosso zoom de 100% a gente já começa a criar forma dentro da nossa página aqui de login tá outra coisa que a gente pode fazer é criar a parte de cima usando essas duas imagens que a gente pegou Então olha só que legal a gente pode criar por exemplo um retângulo ó clicar no nosso retângulo aqui ou posso criar até uma elipse ó criar uma elipse selecionar a elipse aqui ó segurando shift pra gente criar uma proporção legal E aí eu vou pegar a nossa

elipse eu vou aumentar ela maior que o nosso frame ó vai ser maior que o nosso frame aqui ó beleza legal coloquei assim mais ou menos e aí eu quero que isso aqui seja por exemplo eu quero vou copiar nossa cor do azul um pouquinho mais clara aqui ó só que eu quero que ela seja meio borrada então eu posso vir aqui nos nossos efeitos ao invés de ser o drop Shadow que seria uma sombra eu posso usar aqui o le Blur quer deixar ele com Blur que é esse esse efeito borrado eu vou usar

aqui um Blur de 100 vou deixar bem borrado até mais ó c e 30 vou dar um esque vou diminuir aqui ó um pouquinho segurando o shift diminuir um pouquinho aqui beleza aumentar aqui um pouquinho para cima legal um pouquinho aqui pro lado vou centralizar perfeito agora eu quero colocar por exemplo nosso tênis aqui dentro vou arrastar o nosso tênis aqui dentro vou centralizar aqui o nosso tênis e também eu quero escrever ver por exemplo um texto chamado Nike vou dar um esc a gente pode passar ele aqui para 44 né para ficar bem grande

ou 54 passar ele aqui para bol vou passar aqui para preto e aí a gente pode colocar deixa eu até aumentar aqui o nosso texto vou colocar 64 aqui ó colocar aqui atrás Centralizado e tá vendo que a gente tem o nosso Nike e atrás tá aparecendo o nosso tênis por quê Porque tudo isso é a ordem dos nossos layers lembra que a a gente tem os layers aqui a ordem deles importam olha só que legal deixa eu Minimizar Então se o nosso Nike tá em cima e o nosso tênis tá embaixo ou seja o

Nike Ele tá em cima ele vai aparecer sobre aquele elemento agora se eu pegar o meu tênis e eu arrastar para cima do nosso tênis Nike ó tá vendo que agora o nosso Nike ficou para baixo ele aparece ó se eu movimentar o texto embaixo do nosso tênis tá eu vou até aumentar mais ó vou vir aquii vou clicar no nosso Nike vou mudar aqui ó para scale e vou aumentar o texto do Nike aqui ó e eu vou centralizar ele de novo ó beleza pegar o nosso tênis puxar mais para baixo aqui beleza então

Maravilha outra coisa que a gente pode fazer é eu quero pegar aqui o nosso logo do Nike segurando o shift Ou a gente pode usar o nosso scale e eu vou reduzir na proporção ó bem pequeno aqui ó só para ficar um detalhe eu vou centralizar segurando o shift A gente desce um pouquinho aqui ó Posso trazer um pouquinho para cima e maravilha então vamos dar um zoom de 100% então aqui basicamente a gente tem né uma tela de login bem simbólica como se fosse da Nike para entrar em um aplicativo da Nike aí de

algum tênis Já conhecendo e usando aí os elementos do figma Então dessa forma a gente cria o nosso primeiro frame ou seja nossa primeira tela usando o figma Claro que dá pra gente avançar bastante em cada aspecto aqui e a outra coisa que a gente vai fazer antes de fechar esse vídeo aqui de hoje é Rodar esse protótipo então eu posso agora como eu tenho o frame ó tá vendo que todos os meus itens estão dentro do nosso frame login ó tá tudo aqui dentro criamos a nossa tela Mateus maravilha agora o que a gente

vai fazer é é deixa eu só abaixar aqui um pouquinho V segurar aqui ó clicar no nosso tênis segurando shift clicar aqui no nosso texto segurando shift clicar aqui no nosso Nike eu vou com a setinha do teclado trazer mais para baixo aqui ó tá beleza aqui já tá legal agora o que a gente vai fazer é Rodar esse protótipo Então vou vir aqui Prototype e o meu ele já veio selecionado ó iPhone 15 pro se o seu tiver em non você pode clicar selecionar o iPhone 15 pro que é o que a gente colocou

que é o tamanho desse nosso frame ó clica fora seleciona o iPhone phone 15 pro o background vou deixar Preto aqui mesmo agora o que a gente vai fazer é clicar no nosso frame e a gente vai vir aqui ó Flow starting Point é da onde que vai iniciar o fluxo do nosso projeto vai ser aqui então vou dar um mais ele deu Aqui ó Flow um eu vou chamar de inicial Tá só pra gente ver Maravilha e aqui o que a gente tem é eu posso agora clicar nele clicar aqui em cima nesse nesse

iten Zinho de play ó e eu vou dar um play E aí ele vai rodar esse nosso frame esse elemento dentro da nossa tela ó como se fosse usando um iPhone como é como é que ia ficar essa nossa tela né às vezes demora um pouquinho para carregar né porque ele vai carregando como a gente usou imagens aqui eu peguei uma imagem aleatória da internet aí só pra gente usar mesmo nesse projeto então o Nike aqui ó a gente tem o campo aqui a gente teria então é toda a nossa tela eu posso fazer até

interações nesse cara né então posso fazer mais telas só pra gente ver isso aqui ó vou fechar eu vou vir aqui para nossa aba design de novo vir aqui na nossa tela de login cont contrl D pra gente duplicar ela eu vou renomear dando dois cliques para signup vamos supor que aqui que eu tô construindo a tela de cadastro vou clicar aqui vou mudar a orientação para alinhado na esquerda e eu vou colocar aqui novo usuário só pra gente ver esse fluxo funcionando tá aqui em novo usuário eu vou mudar aqui para cadastrar o nome

do texto Esse esqueceu a senha não tem né então vou tirar ele daqui vou selecionar aqui o nosso digit seu e-mail CRL D subir ele aqui ó e eu vou trazer esses dois ó para baixo aqui ó trazer ele aqui para baixo pegar aqui o que eu eu dupliquei ó deixa eu ver quanto que a gente deixou de espaçamento 11 vou até melhorar isso aqui que ficou 11 vou deixar aqui 12 e aqui também eu vou subir Um só e vamos descer aqui ó até chegar em 12 12 beleza e agora aqui embaixo é 24

24 e agora aqui embaixo também vou selecionar esses itens aqui tirar Aqui para baixo 24 de espaçamento agora eu vou selecionar de novo sub aqui até dar 24 24 beleza vamos supor que o primeiro aqui é digite seu nome completo tá E aqui eu vou mudar o ícone vamos pegar outro ícone só pra gente fechar com chave de ouro aqui esse vídeo vamos aqui no feather user vou pegar aqui ó esse iconeinstagram cadastrar e aqui eu vou mudar o textinho para Já possui uma conta e aqui vai ser faça faça o login vou dar um

Ask e vou clicar aqui no alinhamento ó para centralizar o texto perfeito então a gente criou dois fluxos aqui né aqui eu teria do novo usuário que a gente criou aqui só pra gente ver como é que funciona e aqui eu tenho também o do login agora como é que eu faria o fluxo Entre esses caras eu posso então vou deixar mais longe aqui ó clicar na nossa aba Prototype e agora tá vendo quando eu passo sobre os elementos eu tenho uma bolinha então quando eu clicar por exemplo no nosso itzin ó cadastres eu quero

puxar até essa tela de signup Então quando você clicar Ou seja ontap eu vou navegar você pra nossa tela de signup E aí a animação que eu quero eu quero que seja uma animação é slide in e aqui embaixo ele mostra como é que é o slide quero de da esquerda pra direita direita pra esquerda de cima para baixo de baixo para cima eu vou usar aqui o de da direita pra esquerda aqui ó e aí a animação eu quero que seja linear e eu quero que seja 500 msos que ele vai demorar para completar

essa animação e quando eu estiver na tela de signup se eu clicar aqui no nosso texto faço o login eu quero clicar aqui ó e trazer aqui pro back ou eu posso clicar e trazer aqui de volta pro nosso login ó ontap navegate para login e aí eu vou fazer ao invés do slide in eu vou usar o slide out eu vou usar o slide out que ele vai voltar para a nossa direita tá mesma anima mesma animação e 500 msos aí legal então agora vamos testar ó cliquei fora ele já tem dois fluxos aqui

eu vou dar aqui um play pra gente ver esse cara funcionando aí vamos lá legal agora a gente tem a nossa tela se eu clicar nesse nosso texto ó cliquei no texto Olha que legal ele já redireciona pro fluxo aqui com animação que a gente colocou se eu clicar o faço login ó ele volta então a gente já criou o nosso primeiro fluxo usando né o figma aqui também já conhecendo figma Deixa eu voltar pro design aqui já criando o nosso primeiro fluxo primeiro protótipo conhecendo a ferramenta e o poder dela para construir interfaces seja

de aplicativo sites sistemas web também usando o figma aqui e lembrando vocês que se você quer aprender desde o extremo zero a dominar o figma passo a passo aí e também aprender sobre ui ux como criar projetos profissionais com experiência do usuário pensando como desenvolver paleta de cor componentes criar layouts profissionais aprender design experiência do usuário A nossa turma do Ui Master já tá com as vagas abertas Então aproveita porque as vagas são limitadas pra gente atender todo mundo se você quer realmente aprender dominar o figma ou às vezes entrar para essa carreira de ui

ux e Aprender todo o poder do figma fluxos animações O link tá aqui embaixo e aproveita que é exclusivo até a turma encher aí então ó tá aqui embaixo te vejo lá dentro da turma também e se vocês querem mais vídeos sobre figma sobre ui ux como criar aí ou até a gente pode pegar agora esse protótipo que a gente criou e criar O código dele desenvolvendo com react Native com o projeto completo A gente pode também comenta aqui embaixo que a gente pode trazer para vocês então vou ficando por aqui e eu vou deixar

aqui do lado ó nesse cantinho aqui dois vídeos para vocês assistirem então vai lá que são sensacionais te vejo aí no próximo vídeo