DS & II

Capítulo 01 - O Cinto de Utilidades

Leitura de 5 min

🚀 Capítulo 01: O Cinto de Utilidades do Figma (Tema: Batman)

NOTE

Este capítulo utiliza a temática de Batman para explicar a interface do Figma. Assim como o Batman conhece cada item do seu cinto de utilidades, você precisa conhecer onde estão as ferramentas no Figma!

1. 🎯 Objetivo da Aula

Compreender o que é o Figma, para que ele serve e conhecer as quatro áreas principais da sua interface para você saber onde encontrar cada ferramenta.

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

O herói Batman não tem superpoderes. O segredo dele é o seu preparo e o seu famoso Cinto de Utilidades. Ele sabe exatamente em qual bolso está o bumerangue (Batarang), a corda ou a bomba de fumaça. Ele não perde tempo procurando!

No mundo do design de interfaces, o Figma é o seu cinto de utilidades!

  • Ele é a ferramenta padrão do mercado para desenhar aplicativos e sites.
  • Ele tem todas as ferramentas que você precisa em um só lugar. Mas para usá-lo com a velocidade do Batman, você precisa conhecer a interface do programa e saber onde fica cada coisa. Seu desafio é mapear o seu cinto de utilidades!

🧠 Fundamentos: A Teoria Traduzida

O Figma roda direto no seu navegador de internet (ou em um aplicativo para computador) e a sua tela de trabalho é dividida em 4 áreas principais:

🗺️ As 4 Áreas do Figma:

1. Barra Superior (As Ferramentas de Ação):

É onde você escolhe o que quer desenhar.

  • Mover (Seta): Para selecionar e arrastar objetos.
  • Frame (Jogo da Velha #): Para criar a “tela” do celular ou do site.
  • Formas (Quadrado): Para criar retângulos, círculos, linhas e setas.
  • Texto (Letra T): Para escrever na tela.

2. Barra Lateral Esquerda (O Menu de Camadas / Layers):

Aqui fica a lista de tudo o que você desenhou na tela. Se você desenhar um quadrado e um círculo, os nomes deles vão aparecer aqui. É como a lista de arquivos do seu computador.

3. O Centro (A Tela de Pintura / Canvas):

É a área infinita onde você realmente desenha as suas telas. Você pode dar zoom (aproximar) e arrastar para os lados para ver todo o seu projeto.

4. Barra Lateral Direita (O Painel de Propriedades / Design):

É onde a mágica acontece! Quando você clica em um quadrado no centro, essa barra muda e mostra as opções daquele quadrado:

  • Qual o tamanho dele (largura e altura).
  • Qual a cor de fundo (Fill).
  • Se ele tem borda (Stroke) ou sombra (Effects).

4. 📖 Exemplo Guiado: Criando a sua primeira Tela

Para começar qualquer projeto no Figma, você não desenha direto no fundo infinito. Você precisa de um Frame (que funciona como a moldura da tela do celular):

  1. Clique no ícone de Frame # na barra superior.
  2. Olhe para a barra lateral direita: o Figma vai mostrar uma lista de tamanhos prontos (Ex: iPhone 14, Android Large, Desktop).
  3. Clique em iPhone 14. Uma tela branca no tamanho exato do celular vai aparecer no centro!

5. 🛠️ Prática Obrigatória 1: Onde fica a ferramenta?

Diga em qual das 4 áreas do Figma (Barra Superior, Barra Esquerda, Centro ou Barra Direita) você deve olhar para resolver as seguintes situações:

  1. Você quer mudar a cor de um círculo que você desenhou de azul para vermelho.
  2. Você quer ver a lista de todas as páginas que existem no seu projeto.
  3. Você quer clicar na ferramenta de Texto para escrever um título.

6. 🛠️ Prática Obrigatória 2: O Zoom do Batman

Como a tela do Figma é infinita, às vezes você pode se perder e não achar onde estão os seus desenhos.

  1. Pesquise qual o atalho de teclado que faz a tela dar um zoom automático e centralizar exatamente onde estão todos os seus desenhos de uma vez (Dica: é a tecla Shift + alguma coisa).

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

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 01 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_01_introducao.md
│   └── codigos/
│       └── cap01/
│           └── interface.txt

💡 Checkpoint de Lógica

O Figma salva tudo o que você faz automaticamente na nuvem! Você não precisa ficar apertando Ctrl+S com medo de perder o trabalho.

10. 🔥 Desafio de Fixação

Crie uma conta gratuita no site figma.com e crie o seu primeiro arquivo em branco.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. Barra Direita (Painel de Propriedades/Fill).
  2. Barra Esquerda (Menu de Camadas e Páginas).
  3. Barra Superior (Ferramentas de Ação). Gabarito da Prática 2:
  4. O atalho é Shift + 1 (Zoom to fit) ou Shift + 2 (Zoom to selection). Eles são salvadores de vidas quando você se perde na tela infinita!

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks