JORNADA - AULA BÔNUS FIGMA

[Música] fala pessoal vamos começar agora com nosso curso básico de figma para os alunos da da bom esse aqui é o curso bem básico mesmo que mostra os feramentas principais do F e o necessário que você vai precisar para utilizar durante as beleza bom o primeiro passo que a gente vai fazer é entrar aqui no site do entrando no site S da marca do goog que você vai achar ele lá também beleza entrando aqui primeiro passo gente clicar em entar dentro da ferramenta quando eu clico aqui ele vai me dar duas opções continuar já ten

uma conta aqui do figma ou criar uma conta criar uma conta bem rapidinha você pode usar a sua conta do geralmente US souo assim e é um processo bem simplezinho então eu vou dar uma pada nele Beleza vou estar aqui minha conta com continuar então se você não tiver conta clique em criar beleza bom acessar e ele vai entrar aqui comoel fosse uma pastinha on Ficam todos meus arquivos aqui do que eu já fiz a gente não vai perdo muito tempo dessa PG vamos direto para criar um arquivo você vai vir aqui nesse botão superior

direito clicar ele e clicar em TR lembra sempre de clicar nessa TR beleza clicando aqui ele vai aparecer essa tema para mim bom vou dar explorar já aqui no pid que me aparece para mim aqui no canto superior esquerdo temos uma listagem de ferramentas Quais são as ferramentas que a gente tem aqui em baixo eu tenho uma coluna que vai ser a coluna de cabar se falar n e daí depois aqui na direita eu tenho Tod as propriedades são as propriedades elementos propriedades mes tudo que eu vou colocar aqui dentro e nesse meio aqui é

a minha telinha de produção vaias que eu estou fazendo beleza bom primeira cois que é bem interessante fazer é criar o frame o frame é uma coisa que engloba outros elementos tem botões imag tudo mais bom vamos clicar aqui e na hora que clicar n vai perceber que aqui do lado el vai aparecer um monte de opções eu tenho de tenho de ta desktop apresentação dentro da jorn criar alum coisa ou de telefone ou de computador ou ou deskt final você po criar problem masar somente um Bel então eu vou s vaier ST aqui de

des tops para mim que já são PR aqui para mim fazer me bom tem o MacBook Air MacBook Pro tem pro 16 Ness nessa jornada a gente não vai se aprofundar tanto nessa parte aqui porém você pode escoler qual que um deles que vai beleza eu vou escolher aqui nesse caso o Macbook quando eu clicar ess ele vai criar um par aqui PR mim a parte esse quadrado fre ele é do tamanho exato da tela de que então ele me ajuda mundo nessa faz tão pequeno e para mim ajudar também a posicionar meus elementos aqui

beleza antes da gente começar vou dar uma dica boa para vocês que é me habilitar as regas dentro do V para fazer isso você apha vir aqui e aqui no meu habitada ou seguret e apertar a tecla e do seu P daí se você fazer isso ela fica aparecendo e desaparecendo aqui vendo uma coisa legal toda vez que eu clicar aqui onde estamos aqui quando aparecer essa platinha para m aqui é só clicar em cima dela e arrastar pro canto que ele vai criar uma reg então eu vou criar aqui uma margen pro meu site

Isso é muito bom também pra gente alinhar elementos pra gente saber se as coisas estão na regua posso colocar aqui posso pux aqui cima aqui então posso criar Reginas meu PR então normal se eu brar ess fica toda aqui e eu posso deletar ela também clicando no botão bom aqui tá uma coisa bem simplesinha que como se fosse uma parelha ou uma coisa bom a primeira coisa que a gente vamos falar sobre elementos bom aqui nesse quadradinho tem esse quadrado aqui se eu clicar na feixa vai aparecer para mim diversas opções retângulo linha C bolinha

Tri O estrela e colocar uma imagem ou um vídeo ó Beleza vou dizer que eu já não ente ou eu peguei alguma diferença eu vou colocar in loin aqui vou colocar menu nesse canto aqui vou colocar uma um testinho aqui e vou colocar aqui min e vou colocar um Luta então aí vai ser uma coisa bem simples isso ainda vai passar por todas as etapas que eu tem aqui dentro do beleza bom vamos começar a primeira coisa que dier colocar minha imagem bom a imagem ela pode estar tanto na internet como ela pode estar no

meu computador para mim colocar M meu computador eu venho aqui na set n e nesse último item Place e Clique nele ele vai abrir imagem computador ele fica acompanh o mouse e na hora que eu clicar ele vai colocar exatamente no lugar fou que Poxa mas essa imagem aqui tá ruim né Tipo ela não tá no lugar que eu quero e ela não está no também que o quer Beleza se eu clicar fora e se eu clicar aqui a imagem não fica com esses quatro quadradinhos aqui em volta dela dizendo queem tá selecionar se eu

clicar dentro dela e arrastar eu posso posicionar onde F quer então Ó que bacana o uso de régua aqui toda vez que eu coloco uma coisa que ela tá bem alinhada com a régua vocês vão ver que a é ela muda de cor fica mais forte quer dizer que ele tá ali pertinho e vou soltar ela aqui e depois eu quero para deixar essa imagem um pouco menor bom tem dois jeitos de fazer isso o primeiro jeito é eu alterar o valor dela aqui lembra que a gente falou já aqui são as propriedades então aqui

ele aparece para mim width e height de largura e altura o que que eu posso trazer posso vir aqui e digitar o número 100 elá já diminuiu e tem Cadinho do lado e a me diou na escala que quis ótimo mas eu quero fazer isso mais no ômetro se eu não quero fazer n porque se eu vou ficar um inteiro se c s que que eu quero fazer eu quero fazer no olhômetro mesmo quando fica aqui você Pode esticar a signal e colocar pro canto segurando um dos quadradinhos percebendo que na hora que eu fiz

isso aqui a que ela Pou dentro desse quadrado e ficou esse F aquio E aqui quando eu clicar nesse quadradinho aqui vou segurar a tecla Shift do meu computador segurei a tecla shift eera M então aqui vai esse tamanho aqui bom esta aqui é minha tratativa com imagens se eu quiser deixar imagem com torta também posso vir aqui e perto do quadradinho pouquinho longe dele você vai ver que o m vai parecer parece uma banana parece uma banana se eu clicar n esse estado e Gir Gir ó agora como eu falei no C direi aqui

eu quero colocar um menor que vai ter TRS PG principal contato e e bom esse texto Tim essa aqui texto e vou clicar aqui onde que quero mais ou menos que el óo vou escrever aqui então vagina inícial Poxa mas a minha fonte ela tá pequena essa leit aqui eu queria vamos dar uma olhadinha aqui de novo n nossas propriedades vocês vão ver aqui embaixo que tem algumas propriedades a f que tem esse texto aqui ó vai Inter aqui que vai aparecer para m tem lugar que eu posso um monte de fontes existem inúmeras Fontes

aqui que são fontes lado Google são fontos de graça e tudo então beleza dentro dessas fotos aqui agora eu vou selecionar uma chamada Open S que eu gosto de trabalhar posso pesquisar ela aqui também ótimo se você quiser ver mais ou menos como S Font Você tá no site do Google f Google FS e ele mostrar todas as que tem aqui dentro do site del então el mostra tem ele vai mostrando por teologia cois que você quer por tamanho de grossura dease bom asações Estão são que estão aqui então vou clicar aqui nesse página inicial

e agora eu quero aumentar vocês estão vendo que tem o número 12 aqui do lado After que eu coloco onde que qual que é o tamanho dessa eu vou colocar aqui 24 ótimo tamanho aqui do ladinho também tem um posso escolher se eu quer eu posso se passa o mouse aqui por cima dele mostrando como que tá ficando PR mim eu vou colocar el agora achei que fou muito grande então vou reduzir ótimo Pessoal lembrando também que dentro do noso desafio a gente não vai ficar olhando muito essa questão do lout você consiga ausa coisa

mas a parte mais legal assim é você tentar mexer aqui mesmo uma Sigma dá uma olhada na internet tem diversos tutoriais sobre mais esse aqui é bem Bas essenciais para você conseguir completar o jord bom toda vez que eu tenho um elemento também se eu clicar aqui como se fosse T sabe vocês vão perceber quando ele cheg parte do ele vai criar essa linhazinha verm é uma linha de alinhamento aqui se eu colocar aqui ele tá exatamente no meio desta imagem PR outra aqui beleza eu quero agora clicar criar uma [Música] página menu de projeto

Então seria clicar aqui no texto e criar de novo ele ali Às vezes isso daí pode ficar um pouco mais Cante qualquer coisa dentro do F ela é duplicada então eu posso duplicar elementos que eu já tenho que nem esse aqui eu vou clicar emtr ctrl v Parece que nada aconteceu e ficou a mesma coisa mas vamos dar uma Ninha aqui neste Campo eu tenho três elementes da minha P in Opa e outro P Inicial que será que aconteceu Ele coloc B em cima dele então a gente já pode dar uma olhadinha aqui toda vez

que eu colocar um texto colocar uma imagem qualquer coisa na tela ele vai aparecer o nome dele aqui para mim e eu posso até mesmo para melhor organizar isso renomear essas questões que nem eu posso clicar nesse logo expf logo nesse texto aqui ó V trocar n para esse texto de palha inicial para editar texto só em Onde Aqui tem texto eicar duas vezes ele vai aparecer desse jeito não quer dizer que eu possa escrever dentro nele vou escrever aqui ó ótimo tem o texto de projet sinal beleza tá bem fácil de organizar vou copiar

o prin e colar de novo e colou bem em cima ti Sea dele né e eu só arr estarei pro canto aqui para mim fazer o meu Olha que bacana tem coisa muito legal do fil toda vez que eu tá arrastando além de aparecer aqu ele vai mostrando para mim outras informações Vocês estão vendo aqui que eles estão mostrando esse 27 27 ele tá falando que tem uma distância de 27 aquele e 27 esse aqui então El já tá falando para Olha se você soltar ele vai est alinhadinho doos espaços vão est iguais Opa ol

aí salvou para mim e você ver com Poxa mas eu queria que tudo isso aqui fosse mais no cantinho l então deixa nar cada um Ah mas se eu tiver C 10 vai ficar de arrastar o que que eu posso fazer posso clicar com meu mouse sem tem uma selecionada e selecionar todos eles de uma vez por todos eles Poxa mas tem um elemento aqui perto que eu não queria posso selecionar eles por aqui também seguro aqui até com a shift e clico em cada elemento que eu quero selecionar com shift apertar ou eu posso

vir aqui com shift apertar também selecionar cada um que eu quero então tem diversas formas de fazer isso e agora arar isso lá ó uma outra coisa que eu queria fazer aqui é Colocar S aqui dentro desse meu desse meu menu desse cabeçalho que eu tô fazendo aqui bom para isso colocar um quadrado atrás então colocado quadrado L atrás já V dar uma ideia que eu vou precisar de uma forma P um clique esse ass e ele vai aparecer todas essas aqui para mim nessas eu quero Quad clica e quadr quando quando eu fica esse

Mouse aparecendo aqui tá falando para mim clicar e definir que tamanho que eu quero porque não D aqui ó Prontinho e agora eu vou vir em propriedades como Tod eles têm essa oportunidade que ele fil propriedade de cor você clicar nesse quadradinho aqui ele vai aparecer seletor de cores aqui que posso ligar cores colar minha cor aqui também e eu vou selecionar um cinza bem claro bem bem clarinho Olha que beleza selecionei O que eu quero Então agora é só colocar aqui oa um pequeno problema ti aqui para cima e ele tampou todas as minhas

coisas Por que que ele fez isso se EUA aqui olha o meu quendo ele é um alo que tá na tela também vou clicar com dois aqui paraar ótimo todo limite tiver mais na ponta quer dizer que ele vai tá em cima de tudo né então ele tá porque vamos dizer que seria com um monte de papel empilhado se esse aqui é último papelzinho que eu tenho e esse aqui é o primeiro esse aqui é maior el me tampa então o que que eu preciso fazer eu preciso colocar ele lá para trás vamos fazer um

teste vou clicar nesse meu aqui e vou arrastar ali para baixo aparece uma linhazinha preta aqui que mostra exatamente onde eu tô Opa o contact Já apareceu que eu jogar trso Ah agora ficou bonito agora eu vou terminar os ajustes dele aqui vou usar esses quadinhos aqui usar PR linha também e vou faz esse meu cabeç mim tá ok o cabeç e agora princi pró elemento que vou fazer que eu quero lugar que uma imagem do lado comear texto ferrament de texto texto e vou começar a escrever já salvou até a que eu vou escrever

aqui ó meu site mas essa pon eu queram muito maior Então quer dizer que só vi para cá Olha que interessante vocês perceberam que na hora que eu cliquei aqui ele o é porque p não é aqui nem imagem se quem aqui na imagem US ol aí ele vai vai aumentar mas quando é texto ele quer dizer quando faou ISO que tá aumentando a caixa texto gente vai ver que o lugar onde que você pode escrever até que ele quebre a nesse caso aqui Então como que eu faço isso se é que eu fiz eu

sempr vou ter que mudar por aqui essas opções Então vou colocar aqui uma f de 3S aqui e vou alinhar el cantinha ótimo agora eu quero escrever um texto aqui embaixo Poxa mas às vezes se a gente tá fazendo alguma coisa vai escrever um texto grande vai escever qualquer tipo de texto eu Tom cabeça paraar no texto bom a gente não pode não precisar ficar perdendo tempo vocês podem usar esse site que chama gloren vocês vão entrar nesse site aqui deixar o dele que chama lipson ó tá aqui o lips.com e ele vai criar um

texto que é uma convenção entre desir ele cria esse texto aqui ele vai criar esse texto aqui que ele vai mostrar paraele cri al uns Pará aluns tedos que são textos de exemplo e eles funcionam muito bem pra gente ver como ficar as palavras e tudo mais a maioria dos Sites que vocês entraram que são de texto mas não vi muito esse Lor são aqui mas beleza vamos fazer o quê Vou copiar ele aqui eu posso usar também pedacinhos dele como se fosse esse aqui o título vou dar um você e aqui vocês para editar

meu texto dois cliques vou colocar e aqui Olha que legal também PR gente pensar eu não quero desse tamanho quero que ele queb ali ó que Binha aqui então agora já legão Agora eu quero editar o espaçamento entre essas linhas tem essa ferramenta aqui também utom mas eu vou colocar aqui vamos des prisar de menor vou colocar 20 ih Jou demais então eu vou colocar 32 mesmo ótimo tá do então vocês podem também explorar essas questões Aqui é onde que o texto alinhado no centro se no canto se o corre para meia da linha Qual

o espaçamento entre as letras você aumentar o espaçamento entre as letras também e já mais então aqui a falar esse 32 na verdade tá 40 Opa o tamanho aumentar o aí eu vou usar aqui para mim copiar um texto que eu quero colocar lá de teste que nem eu fiz ali vou copiar restante nesse texto aqui imag Qual tamanho vai ter e vem coloca aqui que eu vou fazer aqui eu vou clicar minha ferramenta de texto Mas em vez se eu clicar aqui colar me texto que ele vai fazer ele vai esse texto num texto

texto uma linha só se eu cont bolinha frente ele aprima do meu e Bolinha para trás ele vai para trás ol também ele vai ficar aqui não é esse que eu quero se esse que eu tinha aqui vou aproximar aqui da minha tela usando e que que eu vou fazer clicar aqui agora meu texto em vez de clicar S eu vou clicar se fosse quadrado em que a gente fez a mem cima e eu vou definir que tamanho que eu quero esse texto ó vai vir até aqui vou dar bess bonitão aqui só poar o

tamanho da fonte 16 às vezes isso aqui pode acontecer de você não ter ser missionar o texto e ele fica estranho você faz isso quando isso acontecer lembra de clicar fora elear de volta deixa colocar e daí você pode editar colocar 16 e agora meu he Ficou rocar ali que tá E daí esse aqui automático geralmente ele fica bem bom ass você colocar automático já faz tudo certinho não quero nemit Então vou vir aqui nas configurações aqui e vou colocar regular poxe mas eu qu mais Opa agora eu posso fazer isso aqui ele vai tto

perfeitamente da Caixa coloquei um pouquinho a taxa e tá perfeito era isso que eu quer testinho aqui ó se quiser lin m n vermelhas aqui lembra aqui ess M Dois sar aquiar ar selecionar os dois depois mexer ou eu posso selecionar segurar shift no outro e vai selecionar os dois também beleza coloca aqui ó tá fic e agora quero colocar min imagem aqui vou dar uma dica bem rápida para vocês sobre imagens toda vez que a gente tem um plan de imagem é melhor você clicar aqui no for imagina que eu quero min imagem e

criar o do tamanho que eu quero a imagem primeiro Por que que por que que é bom fazer isso porque ele já define para mim qual que vai tamanho da imagem arrando a imagem por muito tempo depois então se eu criar um quadrado aqui de imagem aqui fora e daí e vocês vão precisar de imagens também vez mais uma TI de S esse Splash ah Dev um monte de imagem deça mas totalmente de graça você pode usar toas imagens que tem aqui pode colocar bent do seu se vai ter problem Beleza então ruim uma parte

ruim é que ele s ing então tipo eu quero Ach fot de cas aqui para mim eu vou escrever eu possar essa imag que eu vou fazer esse processo também vou colocar aqui vou s e posso colocar essa imagem de p aqui lembra que no quadado nesse F aqui onde tá orizo aqui eu posso clicar aqui e escolher e clicar no link da imagem aqui então a gente vai ver vou até dar uma olhadinha já se vocês quiserem fazer alguma coisa que Gradiente seja quadrado que tem cores desf out vocês podem clicar aqui nesse ladinho

isso aqui em todas as formas elas vão ter esse essa solução também então eu posso clicar aqui que é cor súria né que coisa Sol Vermelho Preto tal colocar preta aqui e aqui nesse Gradiente eu posso colocar mais uma cor então eu deixar aqui o vermelho e o preto ótimo ele vai ficar grad gente mas isso aqui a gente Possivelmente a gente não vai nem usar nossos torvos Dent jo Mas eu posso escolher uma outra coisa que é bacana que esse imagem aqui então se eu clicar nesse botãozinho de imag aqui eu posso agora subir

a imagem eu peguei lá e olha uma coisa bem Você percebeu que ele ficou do tamanho do meu quadrado já E se eu esticar esse quadrado ele vai ajustando essa imagem para mim olha que beleza então não preciso ficar pensando muito ele vai lá e Ajusta a imagem para mim então é muito B essa for aqui e daí fica bem fácil dur Mission beleza bom vamos ver aqui se eu não quisesse subir a foto do meu computador aqui você eu pode fazer também bom como ele é um quadrado aqui lembra que eu cliquei aqui na

de form quadrado e coloquei essa imagem beleza que que eu vou fazer eu posso vir aqui ecar o botão numa imagem e copiar imagem e quando vir aqui clicar em meu quadrado e dar cont control V toda vez que eu clicar se eu clicar fora ele vai colocar imagem aqui então perit eu teria que vir aqui e ficar ajustando ela que eu quero e tudo pelo lado mas aqui como eu já sei o tamanho da imagem que eu quero cri quadr é isso se eu clicar no quadrado uma copiar e d ele já vai colar

aqui certinho para mim no tamanho que eu quer no lugar que eu quer e depois um mais simples bom uma das coisas de quo de ver Não nessa uma das coisas queerer é mexer na borda dessa imagem aqui poxa isso aqui funciona também para quadrado funciona também para outros quero deixar aqui esse esse esse canto da imagem tudo redor lembra da propriedade que a gente falou vocês vão ter essa ult aqui que é o último do lado direito aqui de cima que são eu vou colocar aqui com 80 opa ele já deixou R mundinho para

mim certinho Olha que bacana que bonito que fica ou pela de novo eu posso clicar nesse cantinho aqui que ele vai colocar Dom só dos tempos que eu quero quero que se S os cantos na esquerda de B Olha que beleza que ficou e 0 é muito colocar de novo ficou super legal aqui poss meio dela posso colocar ela mais pro cantinho aqui e ele já tomando Format bom vamos ver uma outra coisa para gente mexer for Mex texto que são basicamente as coisas que a gente mais vaiar lembrando que esse curo muito muito L

mas muito mesmo L básic para F bom eu quero criar um botão então eu vou fazer primeira vou criar um meu botão se Quad e vou colocar aqui o tamanho mais ou menos do botão que eu quero aí eu quero que ele tenha de có Preto ótimo aí eu tenho que fazer um texto para ele de texto vou ccar aqui V escever meu botão nesse caso aqui o Sigma já percebeu esse fundana Preta você colocar cor preta do T de assumir aqui cantinho escolh cor preta ele vai mas vamos dizer que ele veio com essa

posso ficar aquiar vou comar gosto de botões e botões e negr regular colocar b e eu quero alinhar bem ao centro dele aqui uma dasas que é bem fácil de fazer para itens sim é você selecionar os dois itens que tem e vir nessas propriedades daqu de cima se eu clicar nesse ele vai vai colocar tudo à esquerda esse tudo no meio el na direita e aqui a mesma coisa só para dimensões horizontais se eu quero que ele V aqui verticais aqui pro topo clico nesse e clico nesse do Topo ou seja se quisar no

meio é meio e meio e agora eu quero aumentar aos fonte do meu botão também cheg opa ele escapou vou selecionar os dois elementos lembra posso clicar no elemento segura shift ele vai selecionar os dois posso selecionar aqui também shift ou simplesmente cli e pass Beleza já S ótimo o meu botão també vai ter arredondamento por trás eu vou colocar aqui eu posso ficar me aqui melhor Timo bot tudo certinho então já outra coisa que vocês utiliz projeto vocês lem que não fazendo coisas parecidas com o e fazendo todos os estudos que a gente passou

já está ótimo de ótimo tamanho é colocar sombrinhas Vou colocar aqui um solidão clicar o botão vou colocar efeitos aqui e ele geralmente já aparece um drop shad aqui para se eu segurar o con e PR frente já colocou uma sombrinha aqui vai deitar na sombra clicar nesse iconz parece solzinha aqui ele vai vai aparecer aqui quando tem sharem quando quando quer mais ah ó eu vi aqui e alguns me ass isso aqui é mais é É bem interessante vocês brincarem isso eu coloco a opacidade eu posso escolher a sobra então aqui é mais brincar

são cinco controlas que tem aqui que dá para brincar V tirar tudo aqui meso bom pessoal é basicamente isso e a gente encerra por aqui no super cab Lembrando que a gente tá esperando de vocês são coisas parecidas com textinhos com então botõezinhos menus com imagens que vocês podem brincar aqui esse tipo de coisa então nãoo mais que isso que é isso aqui o necessário para fazer uma coisa bem feitinho Beleza então boa Jada para vocês e bo est [Música]