Afinal, o que é o Figma?

O Figma é uma ferramenta de design de interfaces completamente online, ou seja, tudo é feito no navegador web sem a necessidade de instalar nenhum software. Isso permite uma grande colaboração entre equipes, já que todos podem acessar e editar os mesmos arquivos simultaneamente.

Além disso, o Figma permite criar designs com alta fidelidade, muito próximos do produto final, com opções avançadas para aplicar estilos, criar componentes, gerenciar assets e organizar em camadas.

Dessa forma, o Figma se consolidou como uma das ferramentas mais utilizadas atualmente para UI/UX Design, substituindo softwares tradicionais como Photoshop e Sketch.

Aprenda a trabalhar com o Figma com os nossos cursos da Jumpy Plus!

Criando uma conta

Para começar a usar o Figma, primeiro é necessário criar uma conta. Isso pode ser feito rapidamente utilizando uma conta Google ou Microsoft.

Basta acessar figma.com, clicar em “Get Started” e depois em “Continue with Google” ou “Continue with Microsoft”. Escolha sua conta e pronto! Sua conta do Figma estará criada e já é possível começar os trabalhos.

Interface do Figma

A interface do Figma é bastante intuitiva e fácil de aprender. Vamos conhecer os principais elementos:

No canto superior esquerdo está o menu principal, que permite navegar entre os arquivos e projetos, além de funções como salvar, importar, criar novo e configurações da conta.

Barra lateral esquerda

A barra lateral esquerda gerencia as camadas (layers) do projeto. É possível reorganizar, nomear, agrupar e aplicar estilos nas layers dessa barra.

Barra lateral direita

A barra lateral direita concentra todas as opções de design, permitindo editar formas, textos, imagens e aplicar estilos. É possível também gerenciar assets e bibliotecas de componentes.

Área de trabalho

A área central é onde o projeto é construído, com as artboards representando as telas. É possível criar quantas artboards forem necessárias e redimensioná-las livremente.

Topo da tela

No topo da tela ficam os comandos para navegar no projeto, como o modo apresentação, zoom, regras e linhas guia.

Criando um novo projeto

Para iniciar um novo projeto no Figma, basta clicar em “Create new file” na página inicial ou “New file” no menu principal.

Será solicitado que você nomeie seu arquivo e escolha algumas configurações iniciais, como se deseja começar totalmente em branco ou baseado em algum template pré-definido.

Depois disso, uma nova tela será aberta e você já pode começar a criar seu projeto. Lembre-se de salvar periodicamente clicando em “File > Save” ou usando o atalho Ctrl + S.

Trabalhando com frames

Cada tela ou página dentro de um projeto no Figma é representada por frames. É possível ter múltiplas frames, permitindo criar fluxos completos com todas as telas necessárias.

Para inserir uma nova frame, basta clicar no ícone de “+” na seção Frames do lado esquerdo ou simplesmente arrastar uma frame de exemplo da barra lateral direita para a área de trabalho.

É possível redimensionar frames livremente para representar diferentes tamanhos de dispositivos, como desktops, tablets e smartphones.

Ferramentas principais

O Figma disponibiliza diversas ferramentas que permitem criar praticamente qualquer tipo de interface. Vamos conhecer algumas das principais:

Seleção (V)

A ferramenta de seleção, ativada com a tecla “V”, permite navegar e mover elementos na tela.

Zoom (Z)

O zoom, ativado com “Z”, permite ampliar a tela para fazer ajustes detalhados ou ter uma visão geral do projeto.

Formas

É possível desenhar formas como retângulos, círculos, triângulos e linhas usando as ferramentas na barra lateral ou atalhos no teclado.

Caneta (P)

A caneta funciona como uma ferramenta de desenho livre, permitindo criar formas orgânicas e à mão livre.

Texto (T)

O texto é inserido com a ferramenta Texto ou o atalho “T”. Depois é possível editar fonte, tamanho, cor e outros estilos.

Imagens

Para inserir imagens, basta arrastar o arquivo desejado para dentro da tela ou usar o atalho Ctrl + Shift + K para importar.

Protótipos e interatividade

Além de designs estáticos, o Figma permite criar protótipos interativos e simular comportamentos com a funcionalidade Auto Layout.

Isso permite definir ações para os elementos na tela, como links entre frames, botões que abrem menus e muito mais.

Dessa forma, é possível testar fluxos de usuário já no Figma, sem precisar codificar um MVP. Isso permite validar ideias e conceitos rapidamente.

Inspecionando e exportando

O Figma permite inspecionar todos os elementos na tela para visualizar informações como tamanho, posição, cores e estilos aplicados.

Além disso, é possível exportar imagens e assets em diversos formatos como JPG, PNG, SVG e PDF. Para código, pode-se exportar CSS e medidas precisas.

Isso permite utilizar os assets criados no Figma em outras ferramentas e passar para o desenvolvimento do produto final.

Trabalhando em equipe

Por ser 100% online e colaborativo, o Figma é perfeito para equipes trabalharem simultaneamente no mesmo projeto.

É possível convidar membros da equipe para projetos específicos e definir perfis de acesso como editores, visualizadores ou comentaristas.

Além disso, todas as alterações ficam registradas no histórico do projeto, permitindo verificar quem fez cada modificação.

Plugins e integrações

O Figma possui centenas de plugins gratuitos e pagos que expandem ainda mais suas capacidades, automatizando tarefas e adicionando novas funcionalidades.

Além disso, é possível integrar o Figma com ferramentas de gestão de projetos como Jira, Trello e Asana, facilitando o fluxo de trabalho.

Precificação

O Figma possui 4 planos principais:

  • Education: Gratuito para estudantes e professores
  • Starter: Gratuito, permite 2 editores e 3 projetos
  • Professional: $12 por editor/mês, recursos adicionais
  • Organization: Sob demanda, para equipes grandes

Dessa forma, é possível começar a usar o Figma gratuitamente e escalar conforme a necessidade.

Conclusão

O Figma se consolidou como uma ferramenta indispensável para designers e produtos digitais, permitindo criar interfaces com alta fidelidade e em equipe.

Sua interface intuitiva, recursos poderosos e precificação acessível o tornam a primeira escolha para a maioria dos projetos de UI/UX Design atualmente.

Portanto, dominar o Figma se tornou essencial para qualquer pessoa que trabalhe com produtos digitais, desde designers até gerentes de produto e desenvolvedores.

Aprenda a trabalhar com o Figma com os nossos cursos da Jumpy Plus!