Como usar o Figma? Curso grátis! Tutorial do ZERO para iniciantes [ATUALIZADO 2024]

seja muito bem-vindo muito bem-vinda nesse vídeo eu vou te mostrar como dar os primeiros passos dentro do fígado Então a gente vai fazer um tour geral na plataforma e o objetivo é que tu saia dessa aula desse vídeo sabendo criar teus primeiros projetos lá dentro se tu nunca ouviu falar sobre o fim me caiu de paraquedas nesse vídeo deixa eu te dizer quais são algumas das vantagens de utilizar essa ferramenta de design primeiro ele é gratuito então tudo que eu vou mostrar aí a maior parte das funcionalidades dele estão disponíveis para pessoas físicas Como eu

como tu gratuitamente então a gente não tem custo nenhum o que já é uma grande vantagem se a gente for comparar por exemplo com o pacote da Adobe Illustrator Photoshop que tem um valor bem salgadinho ou até mesmo programas mais amadores como canva que cobram uma mensalidade se a gente quiser utilizar algumas funções Como instalar fontes ou remover fundo no Sigma a gente pode fazer essas mesmas coisas sem nenhum custo o segundo ponto usar e reforçar aqui é que o pigma ele é colaborativo o que que isso quer dizer que tu pode trabalhar ao mesmo

tempo com todo o teu time no mesmo projeto e funciona mais ou menos como o Google Docs então a gente pode ter várias pessoas no mesmo arquivo e a gente consegue ver o mousezinho da pessoa trabalhando em tempo real o terceiro ponto que é que ele funciona na web a gente pode simplesmente acessar o site criar nossa conta e sair utilizando Como eu vou mostrar daqui a pouco a gente não precisa baixar nada ou seja se tiver um computador mais antiguinho não precisa se preocupar que ele vai rodar de qualquer forma o armazenamento dele é

todo feito em nuvem então além dele funcionar sem pesar no teu computador os arquivos também ficam salvos todos num servidor do próprio filho e esse armazenamento é ilimitado Então não precisa se preocupar com criar várias versões de um mesmo arquivo enviar para um cliente receber de volta enviar para alguém e criar várias versões ali ou algo assim também não existe a preocupação com o computador tá com a memória cheia por exemplo porque fica tudo armazenado na internet antes da gente entrar na parte prática e eu abrir aqui minha tela com vocês eu acho importante destacar

que o figma ele foi criado foi desenvolvido com o intuito de ser usado por iox e White designers o que isso quer dizer por pessoas que desenvolvem interfaces de sites aplicativos nem limpages porém com o tempo ele foi evoluindo tanto que hoje eu considero ele o programa mais versátil do mercado a gente tem como fazer lá post para rede social e-book animação ilustração lettering interfaces Enfim uma série de coisas e vocês vão entender logo mais como tudo isso funciona antes da gente começar a futricar dentro do figma queria dizer que para vocês acessarem ele é

só entrar em Sigma ponto com e clicar neste botãozinho para criar conta de vocês bom como eu comentei com vocês o filme ele é gratuito então aqui ó sempre vai ter o plano disponível gratuitamente free e para sempre aqui uma galera fica em dúvida quando vê que só tem três arquivos gratuitos para serem criados e eu queria tranquilizar vocês se vocês vão ver isso aqui logo mais mas dentro da pasta de rascunhos a gente consegue criar arquivos ilimitados Sem problema nenhum e eles não são excluídos com o tempo nem nada disso então não precisa se

preocupar as versões pagas elas são mais para pessoas que têm grandes times empresas muito grandes por exemplo o figma organization ele é utilizado por empresas tipo a Uber Spotify airbnb Microsoft todas essas empresas que eu citei são clientes do firma e utilizam essa versão mais cara aqui se vocês quiserem baixar o firma no computador de vocês vou deixar o link aqui na descrição também é firma.com/download E aí é só vocês clicarem aqui no arquivo para desktop tá daí vocês escolham o sistema operacional de você se é Mac se é Windows tá ou com o meu

baixadinho aqui mas vocês podem usar sem problema nenhum direto no navegador Tá certo e vocês vão ver a mesma coisa essa aqui é a tela inicial do Sigma vocês vão ver os projetos que vocês já criaram se já tiverem criado aqui tá tudo dividido em times e algumas pastas Mas como eu comentei a gente tem arquivos ilimitados gratuitos basta que a gente crie aqui dentro de drafts que é rascunhos tá clico aqui no mais New file eu vou escolher se eu quero design Fire ou feeling Fire a gente quando tá trabalhando com projetos de design

utiliza essa primeira opção a segunda opção ela é mais voltada para mapas mentais tá então vou clicar aqui se vocês quiserem inclusive um conteúdo sobre o filho já deixem aqui nos comentários que eu considero fazer o vídeo no futuro bom então aqui a gente já tá dentro da nossa área de criação e Fiquem tranquilos que por mais que pareça ter bastante coisa acontecendo aqui é muito simples uma vez que vocês pegam o jeito entendem onde é que tá cada botão as coisas fluem muito mais espaço eu gosto de dizer que usar o firma é tipo

dirigir um carro primeira vez que a gente entra a gente pode se assustar um pouco mas depois que a gente pega o jeito a gente dirige no automático né não precisa nem mais pensar onde é que acelera onde é que freia Então vamos lá que eu quero passar mais ou menos botão a botão para vocês entenderem onde é que cada coisa tá e como a gente cria aqui as coisas que a gente mais vai utilizar no início da nossas criações são os frames que são como se fossem as molduras dentro dessas molduras a gente vai

criar os nossos designs tá então aqui nesse botão eu vou clicar e ele vai me dar as opções de tamanho tá então arquivos de tamanhos pré-definidos ou eu posso simplesmente vir aqui e do tamanho que eu desejar eu vou vir aqui e vou escolher um tamanho de social mídia Eu quero um tamanho de Instagram post ele sabe exatamente ó 1080 por 1080 que é o tamanho que eu preciso para esse projeto de Instagram só escureci o fundo aqui para vocês verem melhor tá então aqui tá o nosso frame Nossa moldura e é dentro dessa moldura

que a gente vai criar o nosso projeto Inicial vamos lá aqui do lado do frame eu tenho a forma do retângulo se eu clicar na setinha para baixo eu vou ver algumas outras formas então linha seta elipse polígono estrela Enfim uma série de coisas aqui vou deixar aqui no retângulo mesmo e vou criar um retângulo aqui atrás tá vocês vão ver que não tá totalmente Centralizado aqui ele tá mais próximo dessa borda do que dessa que que eu vou fazer vou clicar aqui ó aqui são alguns botões que vão direcionar esse elemento dentro da minha

moldura então eu posso centralizar na vertical e centralizar na horizontal também aquele ficou exatamente no meio depois a gente vai ter a caneta tá que atento também tem lá no Illustrator exatamente a mesma coisa e com ela eu consigo criar formas totalmente diferentes então aqui ó criei isso aqui a partir da onde dos pontos que eu fui clicando Eu também poderia pegar e criar formas arredondadas tá simplesmente clicando e puxando tá então aqui tá uma das formas que eu criei com caneta e inclusive assim que as pessoas fazem ilustrações vetoriais OK depois eu vou ter

aqui o texto da minha ferramenta de texto Vou colocar aqui uma roupa Gil Tonel vocês vão ver que tá bem pequenininho depois eu vou mostrar como é que a gente Altera isso só queria passar aqui primeiro nesses ícones todos aqui depois do texto eu tenho aqui ó os componentes aqui vão ter os plugins isso aqui é tipo assim a cereja do bolo do figma Na minha opinião os plugins são mini programinhas que eles fazem as coisas pela gente então eu poderia vir aqui só para ver os últimos que eu usei tá poderia vir aqui em

Green e eu vou criar um Gradiente posso randomizar esse aqui é só um dos plugins tá existem centenas de milhares todo dia surgem novos só colocar aqui para a gente colocar de fundo vou gerar e fechar aqui o programinha ó ele criou aqui para mim isso aqui eu posso colocar dentro da minha moldura tá deixar aqui por enquanto então existem plugins gente para remover fundo de imagem para criar efeito neon para inserir ícones para criar gradientes como a gente fez aqui para colocar ilustrações tudo que vocês imaginarem existe um plugin para fazer aqui essa mãozinha

para a gente andar tá aqui é para adicionar um comentário porque como eu disse anteriormente o filho ele é colaborativo então tu pode deixar um comentário para alguém Altera isso aqui que eu não gostei ou para ti mesmo lembrar né de fazer alguma coisa dentro desse projeto Ok bom conforme eu fui criando as coisas aqui dentro deste frame aqui esse aqui é o nome do frame eu posso clicar duas vezes e trocar inclusive inclusive ó esse aqui é o meu Instagram Tik Tok enfim o meu usuário de todas as redes que vocês podem imaginar já

Me sigam lá se ainda não seguem e não deixa de se inscrever aqui no canal bom troquei aqui o nome do meu frame da minha moldura e vocês vão perceber que aqui na lateral foi aparecendo tudo que eu tava criando ali ó então aqui essa imagem de Gradiente ela tá na frente então quer dizer que ela tá em cima se eu puxar para baixo ó ela vai para trás posso fazer aqui pelas camadas que é exatamente o que eu tô fazendo aqui vocês são as minhas camadas como eu também posso clicar com o botão direito

em cima do elemento e dizer se eu quero trazer para frente ou enviar para trás tá um pouquinho vou criar também uma elipse um círculo aqui tá com essas cores meio nada a ver esse cinza mas a gente já vai aprender a trocar isso então aqui são as camadas cuidem sempre para os elementos não estarem fora da minha moldura tudo que eu tô criando dentro do meu projeto deve estar dentro da moldura ó a moldura ela sempre é representada por um texto em e fica com essa setinha aqui para eu esconder o que que tá

dentro dela porque porque se eu for salvar isso aqui ó e não tiver com o objeto no caso quadrado dentro dela vai salvar sem ele e quando eu mexer isso aqui dos lados ele não vai acompanhar então é muito importante que o meu quadrado Esteja dentro não só em cima tá vendo bom voltamos aqui entendido barra superior entendido camadas aqui só para comentar com vocês Tá aqui a localização aonde Tá salvo esse arquivo então rascunhos e aqui é o nome do arquivo vou trocar aqui já aulão aulão da arroba junto né bom que nos resta

ver e entender agora esse outro painel que é onde de fato a mágica acontece a gente já viu aqui a questão dos alinhamentos e vocês vão perceber que tem aqui a parte de design Tem a parte de projetar e a parte de inspect se eu clicar por exemplo no espectro eu consigo ver coisas de programação aqui praticamente consigo ver o CSS e IOS o código de Android mas a gente não vai entrar nisso nessa aula também não vamos entrar na parte de prototype que a parte de criar animações tá a gente tem como criar quase

um motion aqui dentro do fígado se vocês quiserem um vídeo sobre isso que eu fale um pouco mais deixem aqui nos comentários também bom vamos entender e destrinchar essa parte aqui do Design a gente tem aqui o x e o y que é exatamente na aula de matemática o eixo X e o eixo Y aonde que esse objeto vai estar eu quase não uso sinceramente isso aqui esses valores para isso já esses aqui ó o w e o h é a altura e a largura então a largura 600 ó largura 600 e altura se Manteve

928 posso colocar aqui 900 para ficar um número redondo E se eu quisesse que ficasse proporcional eu ficaria nesse cadeado aqui ó Nessa corrente na verdade então vou colocar aqui 200 e ele diminui tudo proporcionalmente já não é mais 900 aqui ainda com o meu elemento pressionado tá esse painel lateral ele aparece com as opções quando eu vou clicando nos elementos aqui tem a parte de constranges que a gente não vai utilizar nesse momento é uma função um pouco mais avançada depois a gente tem a parte de layer aqui a gente tem os modos de

mesclagem também não vamos usar nesse momento o que eu queria mostrar a parte aqui do Fio quando a gente tá tratando de um objeto então aqui o meu quadrado Ele me disse que eu posso vir aqui ó escolher a cor que eu quero Então posso vir colocar vermelho branco preto a cor que eu quiser no elemento eu vou deixar aqui branquinho mesmo se eu quiser deixar mais transparente Como que eu faço eu venho aqui ó e diminui a opacidade poderia fazer isso por aqui ou direto aqui e aí ó ele fica podendo ver um pouco

da Transparência ali profundo Ok outras coisas que eu posso fazer aqui eu posso trocar a cor do modo sólido para o modo linear Isso aqui vai criar um Gradiente então poderia vir aqui e aqui criando um Gradiente que eu defino para onde que vai cada cor enfim tá mas a gente não vai criar esse tipo de coisa um pouco mais avançado nesse momento outras coisas que você já podem utilizar também é a parte de stroke a gente clica em mais para adicionar uma coisa tá que que ele adicionou aqui para mim uma linha de contorno

que é exatamente o que esses truque É tá se eu tirar aqui ele tirou aquela linha Aqui tem de outras cores ó posso trocar posso vir aqui e deixar mais grossa essa linha ou mais fina tá E daí vocês podem fuçar que tem uma série de funções se eu quiser deixar só o stroke e tirar o preenchimento interno desse retângulo eu posso vir aqui e clicar no menos dentro do fio o fio é o preenchimento e o stroke é a borda então eu posso tirar o preenchimento e ele fica só com a borda tá posso

vir aqui e colocar em cima de outros objetos Sem problema nenhum Ok ah uma coisa legal se eu quiser inclinar esse elemento eu posso vir aqui na Pontinha girar ou aqui ó junto com o w e o h tem aqui a inclinação também posso aproximar O meu mouse aqui da pontinha e ele vai me permitir arredondar ela puxando eu posso fazer isso direto por aqui direto pelo elemento ou aqui em cima na bordinha posso colocar um número direto também e assim por diante ok lá embaixo agora a gente tem os efeitos e a gente tem

o Export efeitos eu vou deixar aqui um branquinho para a gente conseguir visualizar melhor em efeito se eu clicar em mais ele me permite Olha só criar uma sombra drop Shadow aumentar aqui para vocês verem melhor ó ele tá criando aquela sombra ali atrás se eu aumentar aqui o percentual eu consigo ver melhor então tô criando aqui a minha sombra posso colocar aqui no eixo Y ou x para onde que eu quero o quão desfocar dessa sombra tá enfim é uma coisa bem simples que vocês vão pegar o jeito rapidinho vocês podem inclusive colocar outra

cor que não preto para sombra isso aqui funciona por exemplo se a gente quiser criar um efeito de Luz Neon além do Drop Shadow a gente tem aqui algumas outras opções mas eu não vou entrar nelas Agora se vocês quiserem comentem aqui peçam e pretendo gravar vários vídeos para o YouTube nos próximos meses Tá e por fim a gente depois vai ter ali o Sport que que vocês vão fazer para salvar vocês vão clicar aqui no mais e vamos selecionar aqui em qual formato vocês querem salvar então é png é jpg svg PDF que que

vocês querem isso aqui a gente tá criando Teoricamente um post para Instagram então faria mais sentido a gente só vai em png ou jpg Tá certo não vou salvar ainda porque eu quero modificar mais algumas coisinhas aqui só para a gente entender o funcionamento a gente tava trabalhando com um retângulo mas agora eu quero trabalhar com um texto vocês vão ver que tem uma possibilidade a mais aqui no painel lateral então entre a parte de layer e a parte de fio eu tenho aqui a parte de texto A propriedade de edição do texto posso vir

aqui e trocar a fonte que eu tô utilizando tá aqui tem centenas milhares de fontes mas vocês podem instalar qualquer fonte da internet sem custo nenhum fica não cobra para vocês instalarem Fontes tá bom só baixar de qualquer site instalar no computador de vocês e sair utilizando aqui eu tenho algumas variações da fonte se eu quiser aumentar aqui o tamanho do meu texto não adianta eu fazer isso aqui direto isso aqui só vai aumentar a caixinha de seleção tá como que eu vou fazer então eu posso vir aqui e dizer que em vez de 12

eu quero 13 14 enfim um número maior depois eu posso só ajustar aqui ou como eu considero a forma mais simples trocar para o modo scale então aqui a gente tá no modo de mover as coisas e eu vou trocar para o modo de aumentar a escala e daí se eu puxo na pontinha ele funciona certinho e vai aumentar ali para mim sem dificuldades então finalizei aqui vocês vão ver que eu não consigo mexer nas coisas direito antes de tirar do modo scail então do mesmo jeito que eu coloquei eu venho aqui e tiro os

atalhos são v e k então eu poderia ah quero aumentar isso aqui não tá funcionando agora o scale eu posso clicar aumentar e depois clicar em ver para voltar a editar normalmente tá desfazer para desfazer Ctrl Z exatamente como qualquer outro programa de computador e bom depois a gente tem aqui o espaçamento das Linhas algumas coisinhas mais avançadas aqui vai ser o alinhamento se é para direita esquerda ou Centralizado e nesses três pontinhos aqui eu tenho algumas outras configurações tipo Ai quero fazer sublinhado quero riscar Enfim vocês podem também o objetivo é não me alongar

muito com essa aula aqui tá aqui eu também tenho como trocar a cor exatamente como funcionou para os outros elementos vou deixar aqui só organizar as coisas se eu quiser colocar uma imagem aqui dentro eu posso pegar por exemplo aí eu quero essa imagem aqui eu posso copiar a imagem voltar para o fígado e colar tanto fora de qualquer coisa eu clico fora e colo e ela vem para cá quanto eu posso colar dentro de um elemento direto como que eu faço isso clico no elemento e colo com control V tá ele já vai trazer

aqui dentro para mim aí eu quero dentro desse círculo control V Ele trouxe para ali a gente tá na pontinha do iceberg tá tem muita coisa para fazer mas eu não quero complicar muito essa aula para ser um overview realmente da plataforma quero antes de finalizar mostrar para vocês como exportar tá vendo aqui seleciono sempre o frame porque daí salva exatamente no formato que a gente quis se eu tiver clicando nesse elemento aqui por exemplo ele vai salvar o que vou vir aqui no preview ele vai salvar o meu círculo retângulo aqui tá que eu

consigo ver o que que ele vai salvar agora se eu clicar no frame ele salva em Export o meu frame inteiro que seria um post de Instagram esse formato aqui né E se eu clicar em exporta ele vai direto salvar no meu computador vou clicar aqui em salvar e já tá salvo já posso postar tranquilamente ele foi lá para minha área de trabalho bom eu espero que tu tenha gostado da nossa aula rápida aqui só para a gente ter essa visão mais Ampla da ferramenta o que que dá para fazer com ela e onde é

que tá cada botão que que cada botão faz se tu achou esse conteúdo útil não deixa de se inscrever aqui no canal e se tu quer se aprofundar mais em Sigma eu vou deixar aqui na descrição da aula um link para o meu treinamento completo onde eu te ensino tudo do absoluto zero então lá a gente vai de fato pegar e instalar o firma juntos criar conta até as funcionalidades mais avançadas Então como trocar cor de roupa como criar elementos com alto layout que ele se ajustam sozinhos vão criar posts para as redes sociais como

o céu infinito lá para Instagram Tumblr aqui para o YouTube e-book lenta em peixes aplicativos ilustrações animações lettering Enfim uma infinidade de a gente ensina por lá todo passo a passo detalhado para que se torne um designer profissional que possa oferecer o teu serviço para outras pessoas e possa transformar o teu conhecimento em uma renda e é com muito orgulho que eu digo que esse treinamento é hoje o maior treinamento de firma do Brasil com maior número de integrantes também além de tu aprender tudo dentro do curso do Poder contato com uma comunidade enorme de

milhares de pessoas que estão ali para se ajudar tá certo eu acho que era um esses recados que eu tinha para dar Espero que tenha curtido a aula um beijo e até a próxima