youtube video #evX Bbdk-Gc
Transcrito por [Link]. Atualize para Ilimitado para remover esta mensagem.
Olá, pessoal, meu nome é Luana Sperling Santana, sou estudante de Engenharia de
Computação, e agora a gente vai ver um pouco sobre como utilizar as ferramentas do Figma.
Essas aqui são duas telas que eu fiz como exemplo, e agora a gente vai replicar elas. Então,
inicialmente, eu vim aqui em cima, seleciono um novo quadro, escolho o tamanho dele aqui do
lado, eu vou utilizar o Google Pixel 2, arrastar ele para ficar juntinho.
Para criar outra tela, faz o mesmo trajeto, ou clica aqui nela, copia e cola, vai colar aqui do lado
já. Para replicar as nossas telas, eu vou arredondar aqui em borda de raio para 15 para ficar
com os cantinhos arredondados. Para replicar a primeira tela, eu vou começar fazendo o texto
de título, então, eu clico no T lá em cima, aqui embaixo eu digito o que eu quero, seleciono o
texto, agora eu mudo a fonte, o tamanho, e aqui em preencher eu mudo a cor.
Clico no texto, arrasto para centralizar com a tela e para ficar alinhado. Para fazer a parte de e-
mail e de senha, eu vim aqui em cima, vou selecionar retângulo, vou fazer um retângulo aqui
mais ou menos do tamanho que eu quero, arrasto para centralizar ele, vou arredondar a
borda, vou acrescentar em golpe aqui no maisinho para colocar uma borda nele, vou colocar
azul, o tamanho eu vou deixar 1, o preenchimento eu vou mudar para branco, e agora o
textinho vem de novo aqui em cima no T, digita, ele vem com a formatação anterior, mas agora
a gente muda a fonte e o tamanho, e aqui em preencher muda a cor. Clica nele e arrasta para
centralizar com a tela e com o retângulo, seleciona os dois, copia e cola, ele cola no mesmo
lugar, dá para ver aqui do lado que ele colou ali já dentro da tela, ele colou no mesmo lugar,
então só seleciona os dois, clica, arrasta para baixo, clica duas vezes no textinho para mudar o
texto, mudei para senha, para fazer a parte do login vou copiar de novo, vou colar em cima, vou
arrastar para baixo para fazer o botão de login, o botão de login eu vou mudar o
preenchimento para laranja, a borda eu vou remover aqui no menos, o textinho vou mudar
para login, vou selecionar ele para mudar a cor e o tamanho, vou arrastar ele para centralizar,
vou selecionar o textinho ali de cima de novo, copiei, colei e arrastei para baixo, para mudar ele
para cadastro, seleciono ele de novo para aumentar a fonte, perfeito, agora a nossa segunda
tela, vou vir aqui em cima, pegar um retângulo para ele ficar do tamanho da nossa tela, vou
preencher ele com azul, mudar a porcentagem para 50% para ele ficar meio transparente, vou
vir aqui em cima de novo, dessa vez eu vou escolher uma elipse, não precisa se preocupar em
ela ficar perfeitinha, dá para mudar aqui em cima a largura, vou botar 150 e a altura em 150
também, que daí ela fica proporcional aos dois lados, arrasto, centralizo onde eu quero, e
agora para colocar uma imagem dentro de um quadro, como que funciona? Vim aqui no
cantinho, aqui em arquivo, você seleciona aqui em colocar imagem, ele vai aparecer a opção
para você pegar a imagem do seu computador, no caso a minha imagem ela já está aqui, então
eu só vou arrastar ela para cá, vou redimensionar ela um pouquinho, vou selecionar agora ela
e o quadro, clico nela e vem aqui em usar como máscara, aí ela foi para dentro dele, clico duas
vezes na imagem para poder ajustar da forma que eu quiser, posso aumentar, posso diminuir e
arrastar para os lados que eu quiser, vou copiar o título, vou colar aqui, arrasto, vou mudar a
cor, vou fazer a mesma coisa aqui com o cadastro, copiei, colei aqui na segunda tela, mas agora
vou mudar ele para voltar, para a gente poder fazer uma interação, agora a gente está na parte
de design, então agora a gente vai vir para a parte de protótipo, cliquei em protótipo, agora ele
vai me dar a opção de fazer ligações e interações entre as telas, então eu clico no botão que eu
quero que tenha uma interação, no caso eu vou escolher o de login, aqui no ladinho do botão
ele aparece um mais, eu clico nele e arrasto a setinha para a tela que eu quero que ele vá,
então quando eu clicar em login ele vai vir para essa tela, agora nessa segunda tela, quando eu
clicar aqui em voltar, eu quero que ele volte para a primeira tela, eu posso voltar para design
agora, venho aqui em cima, clico em play, ele vai carregar o nosso design em um celular de
exemplo, aonde se eu clicar em outras coisas não vai acontecer nenhuma interação, apenas no
botão que a gente escolheu, então quando eu clicar em login vai para a segunda tela, quando
eu clicar em voltar, volta para a primeira tela.
Transcrito por [Link]. Atualize para Ilimitado para remover esta mensagem.