Pular para conteúdo

Projeto 02: Explorando a Interface e Atalhos de Produtividade ⚡

Escopo do Projeto

Objetivo: Dominar os painéis de navegação do Figma (Layers, Assets, Design, Prototype, Inspect) e atalhos de produtividade para manipulação rápida de interfaces.

🎯 1. Contexto & Desafio Prático

A velocidade de entrega de um designer no Figma depende do domínio do ferramental e da fluência em atalhos de teclado. Neste laboratório prático, você reproduzirá um painel de controle administrativo aplicando ferramentas de alinhamento, distribuição e manipulação de camadas.

📋 2. Requisitos Técnicos Obrigatórios

  • R1 (Ferramentas de Painel): Utilizar painel Layers para organizar hierarquias e painel Assets para instanciar elementos.
  • R2 (Alinhamento Preciso): Utilizar as ferramentas de alinhamento vertical e horizontal centralizado e distribuição uniforme de espaço (Tidy Up / Pack Horizontal).
  • R3 (Atalhos de Teclado): Desenvolver o layout utilizando os atalhos F (Frame), R (Rectangle), T (Text), Option/Alt + Drag (Duplicação) e Shift + A (Auto Layout).
  • R4 (Zoom e Navegação): Criar marcos visuais no canvas e navegar com Shift + 1 (Ver tudo) e Shift + 2 (Zoom na seleção).

📐 3. Diagrama Conceitual & Fluxo Visual

graph LR
    Canvas["Canvas Infinito"] --> Left["Painel Esquerdo (Layers & Assets)"]
    Canvas --> Center["Área de Trabalho (Viewport Frames)"]
    Canvas --> Right["Painel Direito (Design, Prototype, Inspect)"]
    style Canvas fill:#e1f5fe,stroke:#01579b
    style Left fill:#fff3e0,stroke:#e65100
    style Center fill:#e8f5e9,stroke:#2e7d32
    style Right fill:#f3e5f5,stroke:#7b1fa2

💻 4. Especificação Técnica & Código de Referência

// shortcuts_checklist.txt
CHECKLIST DE ATALHOS EXECUTADOS:
[x] F / A - Criação de Frame
[x] R - Criação de Retângulo Base
[x] T - Inserção de Tipografia
[x] Shift + A - Aplicação de Auto Layout
[x] Alt / Option + Arrastar - Clonagem com duplicação rápida
[x] Alt + Hover - Medição de espaçamento em pixels entre elementos

📦 5. Critérios de Avaliação e Entrega

  1. Painel de métricas com 4 cards alinhados com espaçamento idêntico (16px).
  2. Uso comprovado de frames para agrupar seções lógicas.
  3. Gravação em vídeo curto (Loom/GIF) ou prints demonstrando a medição de espaçamento com Alt/Option.