DS & II

Capítulo 02 - Atalhos

Leitura de 4 min

🚀 Capítulo 02: Movimentação e Atalhos Rápidos (Tema: Homem de Ferro)

NOTE

Este capítulo utiliza a temática de Homem de Ferro para explicar os atalhos. Pilote o Figma na velocidade do som dominando os comandos direto no teclado!

1. 🎯 Objetivo da Aula

Aprender a se movimentar pela tela infinita do Figma usando o mouse e o teclado, e conhecer os atalhos mais importantes para ganhar velocidade e produtividade no desenho.

2. 🏢 O Cenário Prático (Seu Desafio)

Quando o Tony Stark está dentro da armadura do Homem de Ferro, ele vê um monte de informações projetadas na tela na frente dos seus olhos (o HUD). Ele não precisa tirar as mãos dos controles para clicar em botões na tela; ele apenas pisca, usa comandos de voz ou pequenos gestos para a armadura se mover na velocidade do som e executar as ações instantaneamente.

No Figma, para você desenhar rápido como o Homem de Ferro voa, você não pode ficar tirando a mão do teclado para caçar cada botãozinho na barra superior com o mouse!

  • Você precisa dominar a Movimentação e os Atalhos de teclado.
  • A tela do Figma é um universo infinito. Se você não souber se mover, vai ficar perdido no espaço! Seu desafio é pilotar a armadura!

🧠 Fundamentos: A Teoria Traduzida

🕹️ 1. Voando pela Tela (Movimentação):

  • Aproximar e Afastar (Zoom): Segure a tecla Ctrl e role a rodinha (scroll) do mouse para frente ou para trás.
  • Arrastar a Tela (Pan): Segure a Barra de Espaço. O cursor vai virar uma mãozinha ✋. Clique e arraste para navegar pelo universo infinito do Figma.

⌨️ 2. O HUD de Atalhos de Ferramentas:

Em vez de clicar lá em cima para pegar uma ferramenta, use a mão esquerda no teclado:

  • Tecle V: Ferramenta de Mover (A seta padrão).
  • Tecle F: Ferramenta de Frame (Para criar as telas).
  • Tecle R: Ferramenta de Retângulo (Rectangle).
  • Tecle O: Ferramenta de Círculo (O de Oval).
  • Tecle T: Ferramenta de Texto.

4. 📖 Exemplo Guiado: O Truque da Duplicação

Um dos atalhos mais úteis do Figma para ganhar tempo é o de duplicar objetos:

  1. Clique em um quadrado que você desenhou.
  2. Segure a tecla Alt no teclado. O cursor vai virar uma seta dupla.
  3. Clique e arraste para o lado. O Figma cria uma cópia exata do quadrado instantaneamente! Se você fizer isso e logo em seguida apertar Ctrl + D, o Figma vai criar outra cópia mantendo a mesma distância que você deixou a primeira. É perfeito para criar listas!

5. 🛠️ Prática Obrigatória 1: Pilotando com Atalhos

Qual tecla de atalho do teclado você apertaria no Figma para ativar rapidamente as seguintes ferramentas sem usar o mouse?

  1. Escrever o nome do usuário na tela.
  2. Desenhar um quadrado para ser o fundo de um card.
  3. Desenhar um círculo para colocar a foto de perfil do usuário.

6. 🛠️ Prática Obrigatória 2: Perdido no Espaço

  1. Você estava mexendo na tela e, sem querer, arrastou para muito longe e agora não consegue mais achar onde estavam os seus desenhos. Qual atalho salva a sua vida e traz tudo de volta para o centro da tela?

7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 02 UIFigma) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.

8. 📂 Estrutura de Pastas

mod_03_design_de_interfaces_ui_ux/
├── capitulos/
│   ├── capitulo_02_atalhos.md
│   └── codigos/
│       └── cap02/
│           └── lista_atalhos.txt

💡 Checkpoint de Lógica

Os atalhos do Figma são parecidos com os de outros programas de design (como o Photoshop ou Illustrator). Se você já usou algum deles, vai se sentir em casa!

10. 🔥 Desafio de Fixação

Tente criar 5 quadrados idênticos e enfileirados usando o truque do Alt + Ctrl + D que aprendemos no Exemplo Guiado.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. Tecla T.
  2. Tecla R.
  3. Tecla O. Gabarito da Prática 2:
  4. O atalho é Shift + 1 (Zoom to fit). Ele ajusta o zoom para que todos os objetos do projeto caibam na tela ao mesmo tempo!

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks