11 atalhos úteis do Figma para um fluxo de trabalho mais rápido

O Figma é uma ferramenta de design poderosa e é a primeira escolha da maioria dos designers de UX/UI como programa de design. Você pode criar muito dentro do Figma e é um programa fácil de aprender.

Como designers, muitas vezes procuramos economizar tempo, então gastamos nossas preciosas horas criando um bom trabalho em vez de vasculhar os menus. Compilamos uma lista de atalhos úteis do Figma que simplificarão seu fluxo de trabalho.

1. Selecione a ferramenta Escala

Este atalho simples de uma tecla é uma maneira rápida de dimensionar seus itens. Pressione a tecla K e selecione o objeto que você precisa redimensionar. Tudo o que você precisa fazer é clicar e arrastar um ponto de ancoragem e seu objeto permanece em escala enquanto é redimensionado para o que você precisa.

2. Selecione a ferramenta Moldura

A ferramenta Frame é uma ferramenta muito usada no Figma ao criar várias placas de quadro para projetos de protótipos. Pressionar F no teclado abre a ferramenta com um toque, permitindo que você desenhe ou dimensione seu quadro rapidamente.

Você pode desenhar o quadro diretamente clicando e arrastando o cursor ou, uma vez selecionada a ferramenta Quadro, você pode digitar os tamanhos pretendidos nas caixas de dimensão no menu do quadro à direita.

3. Alternar entre os modos de design e protótipo

O atalho Shift + E permite alternar entre o modo Design e o modo Protótipo. O mesmo atalho funciona independentemente de qual modo você inicia e muda. Consulte nosso guia para iniciantes do Figma para aprender as diferenças entre esses modos.

Como alternativa, existem atalhos mais específicos para essa finalidade. Alt (Windows) / Option (Mac) + 8 pode ser usado para alternar do modo Protótipo para o modo Design, enquanto Alt (Windows) / Option (Mac) + 9 alterna do modo Design para o modo Protótipo. Obviamente, Shift + E é mais fácil, mas é bom ter opções.

4. Selecione o elemento mais interno em um clique (seleção profunda)

Ao projetar em várias camadas ou com imagens incorporadas, pode ser difícil selecionar um elemento rapidamente. Para economizar tempo clicando no que parece uma dúzia de vezes para selecionar sua camada mais inferior, use este atalho.

Em um Mac, segure Cmd + Clique no elemento e, no Windows, Ctrl + Clique em . Uma tecla simples economiza minutos de cliques estúpidos para selecionar um elemento da camada inferior.

5. Mover um nível para fora após selecionar o elemento mais interno

Depois de selecionar o elemento mais interno do seu design, você pode perceber que deseja selecionar um elemento um nível mais próximo – fácil. Depois de encontrar o elemento mais interno, pressione Shift + Enter para voltar um nível. Você pode fazer isso para todos os níveis.

6. Recolher todas as camadas

Ao projetar no Figma, seu painel de camadas começará a se expandir e potencialmente parecerá um pouco confuso, especialmente quando você converter HTML em um design do Figma. Para recolher suas camadas, basta pressionar Alt + L (Windows) ou Option + L (Mac).

Se você tiver um elemento selecionado ao usar este atalho, a camada com esse elemento permanecerá aberta. Selecione qualquer lugar fora da prancheta para desmarcar todos os elementos e use o atalho para recolher todas as camadas.

7. Mostrar ou ocultar grades de layout

O uso de grades de layout é a melhor maneira de garantir que seu design atinja determinadas proporções e possa ser dimensionado corretamente para vários dispositivos. Embora sejam úteis, você nem sempre deseja que as grades sejam exibidas.

A ativação e desativação das grades de layout é diferente em um Mac e no Windows. Em um Mac, pressione Ctrl + G para ativar ou desativar. Se você estiver usando o Windows, é um atalho de três teclas; Ctrl + Deslocamento + 4 . São diferentes, mas fazem a mesma coisa.

8. Coloque várias fotos ao mesmo tempo

Se você criou um layout com formas de espaço reservado prontas para suas imagens, pode ser frustrante inserir as imagens uma a uma. Esse atalho permite que você coloque várias fotos e simplesmente selecione o espaço reservado – ou em qualquer lugar em sua prancheta – para colocar cada foto individual.

Para usuários de Mac, pressione Cmd + Shift + K para abrir a janela de diálogo para encontrar suas imagens. No Windows, é Ctrl + Shift + K para você encontrar e colocar várias fotos em seu design Figma. Se você criar um modelo mestre no Figma, este é um ótimo atalho para usar.

9. Copie qualquer imagem como PNG

Ao usar imagens em seu projeto Figma, você pode ter uma variedade de formatos de arquivo, mas talvez seu cliente exija PNGs. Você pode copiar qualquer imagem como PNG, independentemente de seu formato de origem.

Selecione a imagem escolhida e pressione Cmd + Shift + C no Mac e Ctrl + Shift + C no Windows para copiá-la como PNG. Você pode facilmente usar este atalho para garantir um formato de imagem de alto padrão, especialmente se estiver criando apresentações com o Figma.

10. Pingue uma cor de qualquer lugar

Desenhar uma cor é um recurso útil quando você está levando uma cor de uma parte do seu design para outra. Este atalho de teclado rápido permite abrir o conta-gotas em um segundo e obter uma amostra de uma cor de qualquer lugar em sua prancheta.

No Mac, pressione Ctrl + C , e no Windows é a tecla da letra I . Depois de acertar os atalhos do teclado, mova o alvo do conta-gotas sobre a cor que deseja usar e clique uma vez para obter uma amostra da cor.

11. Abra a guia Recursos

A guia Recursos abriga os menus Componentes, Plug-ins e Widgets. Embora não haja atalhos para abrir esses menus individualmente, o atalho Resources ainda economiza algum tempo: Shift + I . Você pode usar plugins para criar e adicionar maquetes aos seus designs Figma.

Economize tempo com os atalhos Figma

Os designers geralmente usam atalhos em seu trabalho para economizar tempo e energia, e trabalhar no Figma não é diferente. Esses atalhos do Figma apenas arranham a superfície dos atalhos que você pode usar no programa.

Esses atalhos não são óbvios ou facilmente encontrados, então leve seus novos aprendizados para o Figma e deleite-se com as informações que muitos designers levam meses ou anos para descobrir.