3 dicas para melhorar seus projetos no Figma
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á.
1 - Formas geométricas, máscaras e logo
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 vetorizadas
- Ferramenta Caneta (Atalho: P)
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.
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.
Criando sua logo
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:
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.
Faça os ajustes até o círculo ficar proporcional ao original.
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.
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.
Etapa 4
Segurando o SHIFT selecione o círculo maior, círculo menor e as três linhas criadas e clique em union selection.
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.
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.
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.
E para remover as linhas que ultrapassaram a demarcação você pode usar ela na forma de máscara.
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.
- Após criar sua variante o Figma duplicará seu componente.
- Após modificar a variante duplicada o resultado será próximo a esse:
- É possível criar diversas varientes para o mesmo componente, basta clicar no botão de adicionar no canto inferior direito da caixa delimitadora.
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.
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.
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.
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.
Isometric
Isométric permite criar camadas isométricas sem precisar configurá-las manualmente.
RemoveBG
Remova o fundo das imagens automaticamente com apenas um clique.
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.
Stark
O conjunto de ferramentas de acessibilidade integradas para sua equipe de design e desenvolvimento de produtos. Tornando os produtos do mundo acessíveis.
