8 hacks de Figma que você precisa conhecer agora

Utilizar as diversas ferramentas de UX/UI design no dia a dia é algo bastante comum para quem trabalha na área. Elas fornecem uma infinidade de recursos que garantem tanto a produtividade quanto a qualidade que os bons profissionais ou freelancers buscam destacar em seus projetos.

No meio de tantas possibilidades na hora de produzir, aproveitar os truques e atalhos das aplicações é algo que pode fazer toda a diferença na hora de produzir. Os hacks de Figma, por exemplo, permitem que o designer ganhe tempo e atinja resultados incríveis de forma mais fácil do que muitos imaginam.

Quer aprender a utilizar o Figma como um verdadeiro profissional? Então, continue conosco e confira os 8 truques da ferramenta que você precisa conhecer!

1. Evitando distorções com a ferramenta de escala

Alterar a escala de um design sem quebrar o posicionamento de outros elementos pode ser uma tarefa realmente desafiadora se a ferramenta correta não for escolhida. Quando isso acontece, é preciso fazer os ajustes necessários manualmente para chegar a um resultado satisfatório.

Para aumentar ou diminuir o tamanho de um elemento de forma perfeita, o ideal é contar com a ferramenta de escala (K). Assim, tudo se manterá na proporção certa, e você poderá partir para a próxima etapa da sua criação rapidamente.

2. Organizando grids com praticidade

Os templates em grid estão presentes em grande parte dos layouts desenvolvidos atualmente para páginas da web e aplicativos mobile. Por isso, dominar a construção e a organização dessas estruturas no Figma é fundamental para utilizar a ferramenta de maneira eficiente

Para juntar elementos semelhantes em um sistema de grid, é só começar fazendo uma seleção com todos eles. Feito isso, você verá o símbolo dessa ferramenta no canto inferior direito, em que basta clicar para que a organização aconteça de forma automática. A ferramenta ainda permite rearranjar os elementos dentro do grid e ajustar as medidas das linhas e colunas sem esforço.

3. Duplicando um elemento de forma rápida

Durante a criação no Figma, é bastante comum ter de duplicar a última ação tomada para formatarmos um layout da maneira que planejamos. A melhor e mais rápida maneira de fazer isso é selecionando os elementos que serão duplicados e utilizando o atalho CTRL+D no Windows ou CMD+D no Mac.

Esse recurso é capaz de duplicar objetos, frames e qualquer elemento que estiver em um projeto. É como um copia e cola com um único comando.

4. Tirando o melhor da barra de espaço

Sem dúvidas, a barra de espaço do teclado é um dos comandos mais acionados durante o processo de prototipagem. Ela permite a livre movimentação pela área de trabalho do Figma quando pressionada em conjunto com o movimento do mouse. Mas a verdade é que a barra de espaço pode fazer muito mais do que isso.

Ao criar uma área de seleção, pressione a tecla para mover essa área e expandi-la até o limite dos componentes que alcançar. Já quando estiver criando ou redimensionando formas, ela permite mover esse novo elemento de forma simultânea para um trabalho bem mais ágil. E se você quer evitar que o Figma agrupe automaticamente objetos dentro de frames ou em auto-layout, é só pressioná-la durante a movimentação.

5. Colocando imagens dentro de formas

Outra prática comum que pode ser otimizada com os hacks de Figma é utilizar formas como máscaras para as imagens que farão parte do projeto. Essa é a forma mais prática de transformar um wireframe no layout final da aplicação.

Com o atalho CTRL + SHIFT + K, a ferramenta abre uma caixa de diálogo que permite ao usuário selecionar quantas imagens precisar para serem inseridas dentro de qualquer forma. Depois disso, o cursor sobre a aplicação passará a exibir o número de imagens escolhidas e uma miniatura da próxima que será inserida com um simples clique no elemento desejado.

6. Escondendo elementos fora da página

A área fora da página pode ser um elemento importante de um layout em diversas situações. Por isso, o ideal é que os componentes posicionados por lá fiquem invisíveis, para que o protótipo fique mais fiel ao resultado final.

Para isso, basta apenas arrastar um elemento para fora da página enquanto pressiona a barra de espaço. Assim, você evita que esses objetos fiquem visíveis durante a produção do layout, enquanto os mantêm acessíveis na coluna de camadas do Figma.

7. Selecionando componentes semelhantes

Procurar por todos os elementos que compartilham uma característica que você quer mudar no desenvolvimento do layout pode ser algo bem trabalhoso se feito manualmente. Felizmente, a ferramenta oferece a possibilidade de selecionar todos esses objetos de uma vez e com poucos cliques.

Selecione um elemento que apresente a propriedade de referência, clique no menu no canto superior direito e navegue pela opção “Edit”. No último conjunto de opções que aparecerá, você encontrará as opções para selecionar automaticamente elementos de acordo com suas propriedades, como preenchimento, estilo de fonte e efeitos.

8. Escolhendo cores de maneira prática

Utilizar as cores certas é algo que faz toda a diferença no planejamento do design de um site ou aplicativo móvel. Elas ajudam a deixar o projeto mais convidativo e a transmitir a mensagem que se espera aos usuários.

Com a ferramenta de seleção de cores, essa tarefa se torna bem mais fácil no Figma. Basta selecionar o elemento que receberá uma nova cor e ativá-la por meio da tecla de atalho I. Quando encontrar uma cor que deseje replicar, experimente clicar com o botão do mouse e, antes mesmo de soltar o clique, arraste o cursor para ver as cores mudando instantaneamente no elemento.

Dominar os hacks de Figma é, sem dúvidas, um grande diferencial para os designers que querem tirar o máximo de proveito da ferramenta, construindo projetos incríveis de forma ágil e eficiente. Além disso, esses truques são muito fáceis de serem executados e incorporados à rotina de criação, especialmente para quem já tem alguma experiência com a ferramenta.

Se esse é o seu caso, que tal se tornar um freelancer de UX /UI da Rock Content? Saiba mais sobre a oportunidade e descubra como dar o próximo passo na sua carreira profissional!