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 no 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.
Este atalho simples de uma tecla é uma maneira rápida de dimensionar seus itens. Acerte o 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.
A ferramenta Frame é uma ferramenta muito usada no Figma ao criar várias placas de quadro para projetos de protótipos. Batendo
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 Mudança + E atalho permite que você alterne entre o modo Design e o modo Protótipo. O mesmo atalho funciona independentemente de qual modo você inicia e muda. veja nosso guia do iniciante para Figma para aprender as diferenças entre esses modos.
Como alternativa, existem atalhos mais específicos para essa finalidade. Alt (Janelas) / Opção (mac) + 8 pode ser usado para mudar do modo Protótipo para o modo Design, enquanto Alt (Janelas) / Opção (mac) + 9 alterna do modo Design de volta para o modo Protótipo. Obviamente, Mudança + 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 o elemento, e no Windows, Ctrl + Clique. Uma tecla simples economiza minutos de cliques estúpidos para selecionar um elemento da camada inferior.
5. Mover um nível para fora depois de 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 Mudança + Digitar 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 para um design Figma. Para recolher suas camadas, basta clicar Alt + eu (Windows) ou Opção + eu (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 ativá-lo ou desativá-lo. Se você estiver usando o Windows, é um atalho de três teclas; Ctrl + Mudança + 4. Eles 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 + Mudança + k para abrir a janela de diálogo para encontrar suas imagens. No Windows, é Ctrl + Mudança + 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 um 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 clique Cmd + Mudança + C no Mac e Ctrl + Mudança + C no Windows para copiá-lo como um PNG. Você pode facilmente usar este atalho para garantir um formato de imagem de alto padrão, especialmente se você estiver Criando apresentações com 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 EU. 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 Recursos ainda economiza algum tempo: Mudança + EU. Você pode use 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.
