Publicações

3 dicas para melhorar seus projetos no Figma

Caio Fábio Duarte Ferreira
Caio Fábio Duarte Ferreira Frontend Developer

Criar o design das telas de um sistema antes de partir para a codificação é um processo que ajuda muito o desenvolvimento, visto que podemos ter uma melhor validação e organização do que deverá ser planejado. Neste post, você irá conhecer 3 técnicas que usamos na Instruct na hora de criar nossos protótipos no Figma.

Preparado? Abra seu Figma e vamos lá.

Antes de mergulhar a fundo na criação de seu protótipo, é importante conhecer as opções de formas geométricas e máscaras.

Em todas as formas é possível adicionar os recursos de borda, arredondamento, entre outras opções de design no Figma.

Formas

  • Retângulo (Atalho: R)
  • Linha (Atalho: L)
  • Círculo (Atalho: O)

Formas geométricas

Formas vetorizadas

  • Ferramenta Caneta (Atalho: P)

Formas vetorizadas

Máscaras

Use máscaras para mostrar áreas específicas de objetos enquanto esconde o resto.

Qualquer camada pode ser usada como máscara, incluindo formas vetoriais, camadas de texto, imagens com canais de transparência, grupos e muito mais.

Máscaras

Coloque a camada em cima da forma geométrica que será usada, selecione ambos elementos e pressione CTRL+ALT+M ou pelo ícone de máscara.

Máscaras

Agora que já sabemos os conceitos, utilizaremos essas dicas para criar uma logo. Vale ressaltar que ela é muito importante para seu negócio e para as pessoas lembrarem de você.

Encontre inspirações, conheça seus concorrentes e cuidado com o plagio!

Recriaremos a logo do Google Chrome no Figma. O resultado final vai ser esse:

Logo google

Agora que você sabe de sua importância e, com base no que foi aprendido, vamos conhecer as etapas para a criação da logo.

Etapa 1

Vamos começar definindo o contorno da logo. Faça um círculo clicando na forma de elipse e, nas opções de design do lado direito, clique em stroke para definir a borda. Lembre-se de remover o preenchimento da forma.

Opções de borda

Faça os ajustes até o círculo ficar proporcional ao original.

Criando o contorno da logo

Etapa 2

Faça um circulo menor e adicione uma borda um pouco mais grossa (lembrando que essa camada deve estar na frente do círculo maior). Para colocar a camada a frente, clique com o botão direito em cima da forma e selecione a opção traga para frente.

Criando o centro da logo

Etapa 3

Utilize a forma de linha para criar a demarcação de cada cor da logo, não se preocupe se a linha passar do círculo maior.

Linhas internas

Etapa 4

Segurando o SHIFT selecione o círculo maior, círculo menor e as três linhas criadas e clique em union selection.

Ferramenta de união de formas

Selecione a forma novamente e aperte CTRL + E ou clique na ferramenta de união, selecionando Flatten selection. Com isso, as formas internas vão ser divididas.

Formas selecionadas

Etapa 5

Clicando duas vezes na forma ela se tornará um vetor. Com isso podemos utilizar o paint bucket para pintar cada área da logo.

Ferramenta de preenchimento

Etapa 6

Essa etapa é apenas para os ajustes finais. Você deve ter percebido que ainda tem as linhas entre as formas, como a logo é um vetor podemos ajustar isso ligando os pontos.

Ajuste espaçamentos

E para remover as linhas que ultrapassaram a demarcação você pode usar ela na forma de máscara.

Mascara

2 - Interação de componentes com variantes

Os componentes interativos permitem que você crie interações no protótipo entre variantes do próprio componente. Isso economiza tempo ao criar o protótipo e evita componentes duplicados.

  • Crie elementos interativos que alternam automaticamente entre suas variantes, como botões que mudam de estado quando pressionado;
  • Reduza a quantidade de frames e interações no protótipo.

Criando sua variante

  • Selecione um componente (tem que ser um componente).
  • Na barra lateral direita, clique no botão + na seção Variantes para adicionar sua primeira variante.

Criando uma variável do componente

  • Após criar sua variante o Figma duplicará seu componente.

Componente duplicado

  • Após modificar a variante duplicada o resultado será próximo a esse:

Componente com sua variante

  • É possível criar diversas varientes para o mesmo componente, basta clicar no botão de adicionar no canto inferior direito da caixa delimitadora.

Adicionar mais variantes

Criando a interação com a variante

Criar interação com os componentes e suas respectivas variantes resulta em uma apresentação mais realística de como o sistema irá ficar antes mesmo de ser codificado. Além disso, podemos ter um melhor planejamento dos comportamentos dos componentes que será codificado na aplicação front-end. Desta forma, ganhamos mais produtividade no desenvolvimento e uma melhor perspectiva da regra de negócio.

  • Selecione a variante inicial para a interação de dentro do conjunto de componentes.
  • Navegue até a guia Protótipo/Prototype da barra lateral direita.
  • Clique no ícone de ligação à direita da caixa delimitadora do quadro e arraste-o para a variante de destino. Defina a ação em alterar para/change to e selecione a variante de destino usando o menu suspenso.
  • Depois que a conexão for feita sera aberto um painel com os detalhes de interação, podendo assim ajustar as configurações de ação.
  • Para usar basta copiar umas das variações e colar no seu frame, desde que seja uma instância da original.

A ação alterar para/change to só pode ser usada em variantes em um conjunto de componentes. Não é possível usar essa ação entre dois componentes separados ou quadros de nível superior.

Resultado final

Agora basta ir no Preview ao lado direito de SHARE e ver a magia de usar componentes interativos.

Botão interativo

Além de criar componentes interativos, uma opção muito legal é fazer as interações entre as telas.

A ligação funciona da mesma forma que a variante, selecione a tela que deseja e depois navegue até a guia Protótipo/Prototype da barra lateral direita. Você pode criar sua interface e ir testando em tempo real com os usuários clicando em preview ao lado direito de SHARE , obtendo mais valor no produto desenvolvido e feedbacks para possíveis alterações.

Interações entre telas

3 - Agrupamento e desagrupamento de objetos

No Figma, igual ao Photoshop, você pode agrupar elementos que pertencem ao mesmo contexto, ajudando a organizar melhor suas camadas.

agrupamento de elementos

A opção de agrupar facilita a movimentação dos elementos sem precisar criar um componente.

Para agrupar seus elementos você pode clicar com o botão direito nas formas selecionadas e clicar na opção de agrupar, ou pressionar o atalho CTRL+G. Para desagrupar você pode utilizar o CTRL+SHIFT+G ou selecionar a opção clicando com o botão direito.

Bônus - melhores plugins no Figma

Agora que já sabemos as 3 melhores dicas sobre o Figma, uma outra funcionalidade que te permitirá subir de nível e te deixar muito mais produtivo são os plugins, vou listar alguns que não podem faltar em seus projetos. Vamos lá!

Font Awesome Icons

O plugin fornece acesso a toda a coleção de ícones gratuitos.

Font awesome

Instalar

Isometric

Isométric permite criar camadas isométricas sem precisar configurá-las manualmente.

Isometric

Instalar

RemoveBG

Remova o fundo das imagens automaticamente com apenas um clique.

Remova o fundo das imagens

Instalar

TinyImage Compressor

Exporte arquivos de imagem JPG, PNG, SVG, WebP, GIF, WebM, AVIF e PDF compactados do Figma, ou reduza e comprima os preenchimentos de imagem em seu arquivo Figma para um desempenho mais rápido.

TinyImage Compressor

Instalar

Stark

O conjunto de ferramentas de acessibilidade integradas para sua equipe de design e desenvolvimento de produtos. Tornando os produtos do mundo acessíveis.

stark

Instalar

Para saber mais

Referências

Solução de problemas, melhoria de gestão e aumento de produtividade

Com tecnologias renomadas, aplicamos práticas ágeis e capacitamos sua equipe.

Fale com um consultor