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 [Link] 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 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