← Voltar para o blog

Guia do Figma: Tutorial Completo para iniciantes

Guia do Figma: Tutorial Completo para iniciantes

De acordo com uma pesquisa feita pelo UX Tools, entre 2017 e 2021, o Figma deixou de ser uma das ferramentas de design gráfico menos utilizadas e se tornou a principal, superando softwares com anos de popularidade como Sketch e Adobe XD. 

Há uma série de razões para essa popularização do Figma, mas a principal delas é o fato de ser um programa completo para quem estuda ou trabalha em diferentes áreas, seja em empresas e times robustos ou individualmente. E é por isso que aprendê-lo tem sido um requisito para todo profissional de design.

Neste guia, reunimos tudo o que você precisa saber sobre como usar o Figma e para que ele serve, além de dicas para começar a utilizá-lo. Aproveite a leitura!

O que é Figma?

O Figma é um editor gráfico de vetores utilizado na criação de designs e interfaces gráficas. Um dos seus grandes diferenciais é o funcionamento online, já que pode ser acessado diretamente pelo navegador, sem precisar de instalação. Dessa maneira, duas ou mais pessoas podem trabalhar em um mesmo projeto simultaneamente.

Ele possui versões online e desktop, com suporte para Windows, MacOS e Linux, e também pode ser instalado em smartphones Android e iOS por meio do Figma Mirror — um cliente que espelha os designs criados na plataforma.

mulher designer gráfica trabalhando no figma com tablet
O Figma é uma ferramenta de design gráfico que se popularizou nos últimos anos e se tornou a favorita de profissionais de diferentes áreas, como UX e UI Design.

O programa foi lançado em 2016 por Dylan Field e Evan Wallace, e sua rápida popularização se deu graças à função colaborativa, que outros softwares (como Sketch e Adobe XD) não ofereciam, aliado à facilidade de não precisar de instalação.

Um dos seus grandes atrativos é o plano gratuito, que inclui uma grande variedade de funcionalidades, e excelente para estudantes ou até mesmo profissionais que atuam sozinhos. Além desse, há outros dois planos (Professional e Organization), com preços entre US$ 12 e US$ 45 mensais.

Graças a todos os seus benefícios, rapidamente ele se tornou um dos programas mais utilizados nas áreas de UI e UX Design, design gráfico e Social Media. Para produtos digitais, é uma excelente solução, e permite que tudo seja criado colaborativamente, de maneira rápida e fácil de testar.

Vantagens do Figma

O Figma pode apresentar uma série de vantagens para quem o utiliza. A seguir, enumeramos alguns dos principais benefícios que esse programa apresenta, explicando por que são essenciais.

  • Plano gratuito: O Figma é gratuito em seu plano básico para estudantes e profissionais. 
  • Web-based: Você não precisa instalar o programa no computador para utilizá-lo, já que ele pode ser operado pelo navegador. Isso o torna compatível com qualquer sistema operacional e mais leve que seus concorrentes.
  • Acesso à biblioteca online: Não é necessário compartilhar arquivos pela nuvem. Ao iniciar um projeto, você pode enviá-lo a outros com facilidade e sem demoras;
  • Criação simultânea em tempo real: Nos projetos do Figma, duas ou mais pessoas podem trabalhar simultaneamente no mesmo arquivo, o que acelera a criação em equipe e à distância;
  • Fácil de utilizar e intuitivo: Ao navegar pelo programa, é possível descobrir suas funcionalidades de forma intuitiva;
  • Possibilita diferentes integrações: O programa pode ser integrado com Maze, Notion, Confluence, Slack, Axure, entre muitos outros;
  • Facilidade na prototipação e testagem: Em um mesmo design, é possível criar diferentes frames e fazer o teste na própria ferramenta;
  • Ferramentas para auxílio dos desenvolvedores: Por ser um programa adaptado à criação de interfaces, ele oferece uma série de facilidades para ajudar os programadores na hora de escrever os códigos;
  • Gerenciamento de times: O sistema do Figma permite que sejam criados diferentes times, e que as permissões sejam concedidas individualmente por usuário. Dessa forma, fica mais fácil gerenciar todo o time a partir da mesma ferramenta.

Figma, Adobe XD ou Sketch?

Essa é uma das dúvidas mais comuns entre os designers, e a verdade é que não há uma resposta definitiva para ela. Entretanto, é possível comparar todas as ferramentas e averiguar a que mais faz sentido para o seu caso.

No caso do Figma, é possível citar uma série de vantagens. Além de todos os benefícios que mencionamos há pouco, a ferramenta tem a seu favor a popularidade, já que atualmente é a mais utilizada no mercado. Por isso, ao aprendê-la, você aumenta suas chances de conseguir vagas de emprego ou até mesmo trabalhar colaborativamente com outros profissionais.

Por falar nisso, os recursos relacionados ao trabalho colaborativo são um diferencial muito relevante, bem como o funcionamento web-based, já que o Figma foi o primeiro a trazer esse recurso. Isso poupa espaço nos computadores, acelera a operação e facilita o desenvolvimento.

Em comparação, a precificação do Figma também é uma grande vantagem. O plano gratuito é bastante completo, e costuma ser o suficiente para muitos. Já as versões pagas possuem preço competitivo, além de uma série de benefícios e aprimoramento constante da ferramenta.

A maior desvantagem do Figma com relação aos concorrentes é a necessidade de conexão com a internet. Embora o programa funcione de forma offline, algumas funcionalidades podem ter uma pequena queda de rendimento. Essa situação pode ser driblada com facilidade, e só passa a ser um problema efetivamente em casos em que a conexão é muito ruim.

Como utilizar o Figma?

As possibilidades de utilização do Figma são infinitas, e você pode começar a explorá-las hoje mesmo. Para isso, comece criando sua conta e reconhecendo o layout do programa e suas ferramentas.

Ao entrar no site do Figma, seu primeiro passo será criar uma conta. Para isso, basta entrar no site e clicar em Sign Up, no botão direito superior. Se preferir, você pode integrar seu Log In com uma conta no Google, simplificando o cadastro. Durante a criação, basta selecionar o plano gratuito para utilizar o programa.

A interface do Figma é bastante intuitiva e descomplicada, e similar a de outros programas de design gráfico, como pacote Adobe, Sketch, Corel Draw e Canva. Se você já está familiarizado com algum desses, será ainda mais fácil de utilizá-lo; caso contrário, a partir de comandos básicos e com a prática, você pode desvendar todas as funcionalidades da ferramenta.

Para começar, clique em New Design File e escolha o tamanho pretendido do arquivo. Se preferir, você também pode selecionar tamanhos pré-definidos, como o tamanho de uma tela Desktop, de um smartphone ou de um tipo de banner.

Ao trabalhar em um arquivo, na lateral esquerda, você verá os layers, que são todos os elementos gráficos (imagens, textos, formas, vetores) separados em camadas. Para editar alguma delas, basta selecioná-la.

Assinatura Awari | Cursos Design

Já à direita, é possível ver os detalhes sobre a camada que você selecionou e editá-los. Nesse menu, estão as opções de ordenação, posicionamento, cores, fontes, efeitos, opacidade, 

Página do figma
As páginas do Figma são simples de compreender, e todas as funcionalidades são nomeadas, proporcionando uma experiência intuitiva ao usuário.

Na barra superior, você terá acesso às diferentes funcionalidades, como corte, criação de formas, caneta e textos. Também é possível mudar o posicionamento da tela e criar uma anotação clicando no ícone de balão.

Um recurso muito valioso que o Figma apresenta é a possibilidade de criar diferentes designs lado a lado, basta inserir um novo frame ao lado do atual. Para quem está fazendo diferentes versões de um mesmo arquivo ou desenvolvendo uma aplicação, seja site ou aplicativo, essa pode ser uma grande vantagem.

Funcionalidades e botões do Figma

Agora que você já conhece o básico, confira alguns dos recursos disponíveis que serão muito úteis e vão enriquecer sua experiência com o Figma.

  • Páginas: No Figma, as páginas são um pouco diferentes de softwares como Photoshop e Illustrator, por exemplo. Nesse caso, dentro de um mesmo projeto, você pode criar ilimitadas páginas e navegar por elas sem precisar mudar de aba ou alternar o arquivo.
  • Botão Share: Lembra-se quando falamos que no Figma, é possível compartilhar tudo em tempo real? Ao clicar nesse botão, você pode enviar um projeto para outra pessoa, e ao clicar no link, ela pode editá-lo junto com você.
  • Botão Play: É utilizado para gerar uma apresentação dos designs criados.
  • Botão de Zoom: Serve para regular sua visualização. Você também pode controlar esse recurso com o comando Cmd ou Ctrl + barra de rolagem do mouse.
  • Estilos: Uma das facilidades disponíveis no Figma é a criação de estilos personalizados, com padrões de cor e tipografias. Para acessá-los, basta clicar no ícone com quatro pontinhos, similar a um quadrado.
  • Effects: Assim como no Photoshop, nesse programa, é possível alterar o comportamento de uma camada. Para isso, vá até o campo Effects (canto inferior direito) e confira as opções, como Drop Shadow e controle de opacidade.

Outros recursos do Figma

Além das funcionalidades básicas de design, o Figma pode oferecer uma grande variedade de recursos. Confira alguns deles a seguir!

Figma Community

O Figma oferece aos seus usuários o acesso a uma comunidade exclusiva, em que é possível se conectar a outros criadores e trocar arquivos diretamente pelo próprio programa para inspecionar, reutilizar e remixar.

No Figma Community, você poderá descobrir inúmeros plugins, templates e widgets, e descobrir quem está por trás de cada trabalho. 

FigJam

O FigJam é uma ferramenta do Figma que pode ser utilizada para brainstorming, planejamentos e ideação de projetos. Trata-se de um quadro em branco em que é possível inserir arquivos de mídia, textos e adesivos.

Na hora de criar um novo projeto, você pode optar por um arquivo de design convencional ou um FigJam. 

Vector Networks

O Figma possui a própria ferramenta de vetorização, chamada Vector Networks. Isso faz com que você pode criar designs e vetores na mesma plataforma, ao contrário dos softwares concorrentes. 

Biblioteca de plugins

Há uma grande variedade de plugins que podem expandir suas capacidades e enriquecer suas criações. Para conferi-los, basta acessar a biblioteca do Figma, diretamente no próprio programa.

ux designer utilizando plugins do figma
O Figma conta com uma grande variedade de plugins com funcionalidades avançadas, disponíveis na biblioteca do programa.

Entre os plugins mais populares para o Figma, podemos mencionar AutoFlow, Unsplash, Fig Motion, Wire Box, Blush, Iconify, entre muitos outros.

Versionamento automático

Com o Figma, as versões do projeto são salvas automaticamente por até 30 dias na nuvem. Dessa forma, você tem mais segurança e evita a perda de arquivos.

Prototipação

Para dar vida às suas criações, você pode utilizar o Figma e animar os seus projetos, sem que seja necessário saber sobre programação. Basta selecionar o recurso de prototipação para ver o design aplicado e com animações pré-definidas.

Como aprender a usar o Figma?

Saber usar o Figma é determinante para quem quer seguir carreira como designer, já que é uma ferramenta muito difundida no mercado, e com uma enorme variedade de possibilidades e benefícios.

Como mencionamos, o Figma é uma ferramenta intuitiva, e é possível aprender a utilizar muitos dos seus recursos por conta própria se você tiver uma boa base. Entretanto, a melhor maneira de saber como trabalhar com essa ferramenta e aproveitar todos os seus recursos é estudar sobre ela.

Na Awari, você encontra uma Trilha de Aprendizagem de Design com cursos de UX Design, UI Design, UX Research e UX Writing. Entre os módulos, você encontra aulas sobre Figma, ensinando a utilizar as principais ferramentas do programa em seus designs.

Além disso, você tem acesso a materiais de todos os cursos e pode participar de aulas ao vivo com professores especialistas para tirar dúvidas, aprender com exemplos práticos e fazer networking com colegas.

Outra vantagem da plataforma da Awari é a possibilidade de agendar mentorias individuais com grandes profissionais do mercado para auxiliar no seu desenvolvimento. Nesses encontros, você poderá receber feedbacks e conversar sobre assuntos relacionados à carreira na área.
Quer saber mais? Clique aqui e inicie sua jornada de aprendizado!

Escrito por

Avance sua carreira

e cuide do seu futuro

Esse é o momento para investir em seu futuro e dar seu próximo passo profissional. Comece agora e crie sua conta na Awari:

Começar agora