É 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:

Estrutura de um arquivo no Figma mostrando vários elementos dentro de outros.
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.

setas indicando que a tecla ctrl está pressionada
Ó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!

Pessoa navegando no Figma usando as barras de scroll

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.

Pessoa usando a barra de espaços para navegar em um arquivo
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.

Seta apontando para uma camada de botões

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

Botões centralizados

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:

GIF mostrando mudanças no alinhamento de um texto ao clicar na propria UI do figma

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”:

GIF mostrando atalhos de alinhamento de texto em ação

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”.

GIF mostrando o atalho de navegacao entre abas em acao, na imagem alternando entre dois projetos
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):

Icone de ajuda clicado mostrando o menu de opcoes de ajuda. No menu a opcao keyboard shortcuts está em destaque.
Atalho “Ctrl + Shift + ;” também funciona

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

Menu de atalhos do Figma abertos na aba "Essential"

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!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *