10 truques incríveis e pouco conhecidos no Figma

10 truques incríveis e pouco conhecidos no Figma
Mateus Villain
Mateus Villain

Compartilhe

O Figma é um dos softwares mais famosos quando se trata de trabalhar com protótipos digitais. Criar sites, apps, softwares, Design Systems, e tudo mais o que você possa imaginar para ambientes digitais, o Figma vai atender a tudo isso. Mesmo sendo relativamente novo, criado em 2016, ele não deixou de conquistar cada vez mais pessoas usuárias, se tornando o favorito em vários locais do mundo.

Quando começamos a usar, é bem comum as coisas serem um pouco mais engessadas, e conforme vamos aprendendo atalhos ou maneiras de produzir mais rápido, nossa prototipação fica muito mais ágil, ainda assim, o Figma possui diversas funções que, por vezes, descobrimos por acaso, e para te ajudar a melhorar seu desempenho, trago aqui 10 truques incríveis e pouco conhecidos no Figma.

Conheça agora essas dicas e veja um bônus super interessante ao final!

1. Defina uma capa para seus arquivos

Sabe aqueles cards dos seus arquivos que aparecem na página inicial do Figma? Fique sabendo que você pode customizar a visualização e definir uma imagem de destaque para aparecer naquele campo. Basta criar um novo frame (A), clicar com o botão direito e selecionar a opção Set as thumbnail. Simples, não é? Agora você pode deixar seu arquivo com uma capa personalizada!

GIF interativo mostrando o menu que surge ao clicar com o botão direito do mouse, clicando na opção “Set as thumbnail” e mostrando a nova imagem aparecendo no card do arquivo.

2. Insira imagens de forma mais fácil

Existem diversas maneiras de inserir imagens dentro de um arquivo, seja criando uma forma, alterando o preenchimento para imagem e selecionando a que você desejar, ou até mesmo arrastando uma imagem para dentro do programa. Mas existe uma maneira mais prática de inserir e posicionar uma ou várias imagens. Utilizando o comando “Ctrl + Shift + K” no Windows ou “Cmd + Shift + K” no Mac, o Figma irá abrir o explorador de arquivos, para você selecionar as imagens desejadas. Após selecionar, você voltará para o Figma com as imagens sendo pré-exibidas no seu cursor, e ao clicar dentro de uma das formas, a imagem será adicionada e ajustada dentro daquela forma. Se preferir, clicando na área de trabalho, a imagem será importada em tamanho original para o Figma. No exemplo abaixo, você pode observar essa função na prática.

GIF interativo mostrando o explorador de arquivos sendo aberto após teclar o atalho no teclado, em seguida, mostra inserindo as três imagens de uma única vez em três formas geométricas quadradas.

3. Posicione elementos ignorando o auto-layout

Se você utiliza muito o recurso de auto-layout quando está construindo interfaces, e tem dificuldade para posicionar elementos livremente no Figma, essa dica irá te ajudar. Basta deixar a tecla de espaço pressionada, e em seguida mover o elemento para dentro da interface, assim será ignorada a função auto-layout e você conseguirá movimentar os elementos conforme desejar.

GIF interativo mostrando uma página de login de um app com todos os textos e campos com auto-layout, e em seguida sobrepondo um retângulo sobre esses elementos, ignorando a função do Figma.

4. Bloqueie estilos para que não sejam copiados

O Figma possui uma função sensacional para quem constrói design systems ou style guides, que é a possibilidade de compartilhar os estilos de um arquivo em outros arquivos já criados. Por padrão, ele compartilha todos os estilos e componentes, mas se você colocar o caractere “_” (underline) antes do nome do elemento, ele não será compartilhável.

Exemplo: se o nome do elemento for “cor-primaria”, renomeie para “_cor-primaria” para que não seja compartilhado. Assim você terá essa autonomia de decidir o que irá compartilhar ou não, de forma simples e rápida.

GIF interativo em que um underline é adicionado na cor verde salva nos elementos, e em seguida mostrando a janela de compartilhamento de biblioteca, que esconde esse elemento para não ser compartilhado.

5. Faça uma barra de progresso de forma rápida e prática

É bem comum em interfaces de carregamento, existirem barras de progresso no modelo circular, que ficam girando até que a página seja totalmente carregada. Alguns softwares exigem “gambiarra” para se fazer isso, mas não no Figma. Criando uma forma de círculo (O), você irá reparar que dentro dela, na borda direita, terá uma opcão chamada “Arc”, que te permitirá mudar contorno, preenchimento e espessura deste círculo, como é apresentado na imagem abaixo. Esse recurso também é bom para quem deseja construir gráficos de pizza ou de rosca.

GIF interativo em que um círculo é criado, e em seguida ele começa a ser dividido como pizza, sem estar 100% ligado, e logo depois adicionando um “furo” ao meio, para que assemelhe aos ícones de carregamento circular.

6. Selecione cores pelo nome

O mais comum na hora de escolhermos uma cor, é abrir o color picker ou informar o código hexadecimal, mas você sabia que o Figma também seleciona cores pelo nome delas? Experimente clicar no campo de seleção de cor e digitar o nome das cores em inglês, como red para vermelho ou blue para azul. Você observará que a ferramenta já localiza e aplica a cor descrita. Sabia dessa?

GIF interativo mostrando as cores sendo digitadas pelos nomes no próprio campo de cor, e a forma sendo recolorida conforme o texto digitado.

7. Mude a posição dos elementos com apenas 1 clique

Imagine que você organizou diversos logotipos numa grade, e só depois de terminar se deu conta de que posicionou eles de forma errada. A princípio parece algo frustrante, pois teria que desmontar a grade e praticamente refazê-la, mas o Figma te ajuda nisso. Selecionando todos os elementos, aparecerão círculos no meio de cada um, basta clicar nesses “pontos” e mover o elemento sem precisar desencaixar tudo. Dessa forma as imagens são movidas mais facilmente e de forma alinhada.

GIF interativo mostrando seis imagens alinhadas, três em cima e três embaixo, e as posições sendo trocadas ao arrastar as imagens, sem que precise redimensioná-las, apenas clicando na forma e arrastando para o lado que desejar.

8. Duplique sua última ação

Copiar e colar são ações que utilizamos o tempo todo e em casos diferentes. Programas de design costumam facilitar isso pressionando a tecla “Alt” do teclado junto com o botão esquerdo do mouse. Essa função também existe no Figma, mas para facilitar ainda mais, você pode utilizar os atalhos “Ctrl + D” no Windows, ou “Cmd + D” no Mac, para duplicar sua última ação e replicar de forma contínua. A forma será replicada diversas vezes na mesma direção, sem sobrepor elas.

GIF interativo mostrando um retângulo sendo duplicado manualmente para a direita, e logo em seguida, utilizando as teclas de atalho, a forma é replicada várias vezes na mesma direção, sem ficar sobreposta à anterior.

9. Alterne entre os menus design e prototype com atalho

Com o tempo, algumas tarefas começam a ficar repetitivas, como o processo de trabalhar no design de um arquivo e alternar com o modo de protótipo, onde as interações são criadas. Usar atalhos facilita muito em diversas ocasiões, e aqui não seria diferente. Usando o atalho “Shift + E”, você economiza o tempo de mover o mouse e ter que clicar no menu.

GIF interativo mostrando os menus de “Design” e “Prototype” sendo trocados apenas com o uso do atalho, sem a necessidade de usar o mouse.

10. Use porcentagem para alturas de linha

Se você, como eu, trabalha com escalas modulares o tempo todo, sabe o quão demorado pode ser ter que multiplicar, dividir ou ter que copiar e colar de outros lugares o valor exato para cada tamanho de texto. Tudo isso fica muito mais fácil se usarmos a porcentagem. Por exemplo, se você está baseando o tamanho dos seus textos na escala 1.5, basta inserir o valor 150%, e a matemática é feita!

GIF interativo mostrando valores em percentual sendo adicionados no campo de altura de linha, alterando os espaços de acordo com o tamanho do texto.

BÔNUS: Copie o código SVG e cole como imagem

Caso você ainda não saiba, qualquer arquivo com formato SVG é escrito ou exportado na linguagem XML, uma linguagem de marcação semelhante ao HTML. Experimente pegar qualquer vetor nesse formato que você tenha salvo e abrir no bloco de notas, e você verá todo o código por trás dessa imagem. E caso você já conheça esse tipo de arquivo, sabe que a grande vantagem de utilizá-los, é que os vetores não perdem qualidade. A questão é, que ao verificar alguns desses arquivos em sites, por exemplo, não encontramos o arquivo para ser baixado em SVG, apenas o código. Para solucionar isso, o Figma permite que você copie e cole o código no arquivo, e automaticamente ele gera o vetor com todas as camadas 100% funcionais. Bacana, não é?

GIF interativo que se inicia na página inicial do site do Figma, em que é aberto o código fonte do site e copiada as linhas de código do logotipo que está inserido em SVG. Logo em seguida, é colado direto no arquivo de design, que ao invés de mostrar as linhas de código num campo de texto, exibe o próprio logotipo vetorizado, dentro do Figma.

Conclusão

Na prática, o Figma não é um software difícil de se aprender. Ele possui ferramentas que a maioria dos programas de design possuem, como seleção, formas, vetor, textos e etc. Para quem está mergulhando nesse universo agora, existem duas formas de se aprender a utilizar o programa: criando uma conta e navegando nas funcionalidades, ou assistindo a nossa brilhante Formação de Figma, composta por vários cursos, artigos e Alura+ que vão te deixar expert e mais preparado para o mercado de trabalho.

Se quiser continuar a ler sobre mais funcionalidades, você pode acessar o artigo falando sobre os Flows, que são muito úteis na prototipação, e também sobre o FigJam, uma forma concorrente a plataformas de quadro virtual, como o Miro, só que 100% nativa no Figma.

Ah, e não se esqueça: sempre que tiver uma dúvida, você pode aparecer no nosso fórum e vamos te ajudar a solucionar da melhor maneira, beleza?

A gente se vê por aí, valeu!

Mateus Villain
Mateus Villain

Product designer, instrutor de UX na Alura, pro player de Figma e especialista em Harry Potter.

Veja outros artigos sobre UX & Design