Ícone do site Dicas de UX

5 atalhos do Figma para você ser mais produtivo

É normal procurar ganhar mais flexibilidade nas nossas ferramentas do dia a dia profissional. Procurar por bons plugins, conversar com pessoas da área ou mesmo trocar conhecimento em um evento são outras formas também. Conhecer bem alguns atalhos de teclado são outro caminho para essa flexibilidade.

Confira agora alguns atalhos do Figma que podem fazer você ganhar mais velocidade no seu trabalho.

1 – Ctrl para pegar algo dentro de um grupo

Sabe quando você tem uma estrutura organizada mas bem complexa onde existem diversos elementos agrupados? Como nessa imagem:

Isso quando colocamos os devidos nomes nos grupos, claro 😛

O que você faria para chegar ali no elemento “Surface” dentro do “Item 2”? Eu ficava dando duplo clique ali até selecionar o elemento. Eis que descubro que segurando a tecla “ctrl” é possível ir direto para o elemento que quero.

Repare nas setas da imagem abaixo. Quando seguro o “ctrl” o Figma mostra qual elemento será selecionado quando o mouse for clicado.

Ótima forma de você parar de castigar seu mouse

2 – Barra de espaço para navegar no arquivo

Essa aqui pode parecer besteira para muitas pessoas que vieram do Photoshop e programas de imagem, mas já vi uma pessoa sem esse background navegando no arquivo usando as barras de scroll do arquivo!

Sempre bom lembrar que podemos segurar a tecla de espaço do teclado para conseguirmos fazer isso com mais agilidade. Repare na imagem como o cursor do mouse muda para uma mãozinha.

Aqui usei além do espaço, ctrl+scroll do mouse para mexer no zoom

3 – “Alt + H” para alinhar horizontalmente

Pegando o exemplo abaixo, como você faria para deixar o grupo de botões centralizados horizontalmente? Antigamente eu seguraria a tecla de atalho “shift” e com o mouse arrastaria o grupo até o Figma me mostrar que está centralizado.

Nessa situação, pressionando o atalho “Alt + H”, os botões vão ir para o centro:

O “H” ali é justamente da palavra “horizontal”. E se precisássemos alinhar verticalmente era só mandar um “Alt + V” também.

4 – “Ctrl + Alt + R” para alinhar texto à direita

Como qualquer ferramenta de UI que trabalha com texto, o Figma possui um botão para mudar o alinhamento (text-align) da camada de texto selecionado:

Um atalho interessante para evitarmos ter que soltar o teclado, ir para o mouse e clicar nesses botões é o “Ctrl + Alt + R” e suas variações “Ctrl + Alt + L” e “Ctrl + Alt + T”:

A letra “L” ali é de left, esquerda em inglês. “R” é de right e o “T” acho que é pelo formato da letra mesmo. 😱

5 – “Ctrl + números” para mudar de aba

Precisando alternar entre vários projetos abertos sem depender do mouse? Da mesma forma que muitos browsers possuem, o Figma também tem o famoso atalho “Ctrl + números” para navegar facilmente entre as abas dos projetos abertos. No GIF abaixo fui trocando usando os atalhos “Ctrl + 1”, “Ctrl + 2” e “Ctrl + 3”.

Ir indo com “Ctrl + Tab” ou “Ctrl + Shift Tab” é uma boa pedida também.

Dica bônus: todos os atalhos do Figma

Acho fantástico quando descubro um atalho novo nas ferramentas que utilizo. Até mesmo no Windows como “Ctrl + N” para duplicar a janela da pasta que você está ou “Ctrl + Shift + N” para criar uma nova pasta na área de trabalho.

Para ver todos os atalhos do Figma basta clicar no ícone de “?” e escolher “Keyboard Shorcuts” (Atalhos de Teclado):

Atalho “Ctrl + Shift + ;” também funciona

Aparecerá no rodapé do Figma todos os atalhos presentes na ferramenta, categorizados e bem exemplificados.

Atualmente não é possível customizar os atalhos ainda, mas acredito que eles devem ter isso no backlog.

E qual o atalho que fez você falar “Woooow… 😯” quando descobriu? Qual o último atalho que você descobriu por aí? (O meu foi “Shift + X” para alternar fill e stroke). Deixa aí nos comentários!