Pular para conteúdo

Projeto 01: Setup do Workspace no Figma e Frames de Referência 🎨

Escopo do Projeto

Objetivo: Configurar o ambiente profissional de design no Figma, estruturando páginas, frames padronizados para Mobile (iOS/Android) e Desktop, e nomenclatura semântica de layers.

🎯 1. Contexto & Desafio Prático

Você atua como UI Designer júnior em uma software house. O time iniciará o design de um novo produto digital multiplataforma e você é responsável por criar o arquivo base no Figma, estabelecendo a estrutura de frames de referência, grid inicial e organização de páginas.

📋 2. Requisitos Técnicos Obrigatórios

  • R1 (Organização de Páginas): Criar páginas dedicadas: Cover, 🎨 Foundations (Cores/Tipografia), 📱 Mobile (iOS/Android), 💻 Desktop e 🧩 Componentes.
  • R2 (Frames Padronizados): Inserir frames oficiais: iPhone 15 Pro (393x852), Android Small (360x800) e Desktop MacBook Pro 14 (1512x982).
  • R3 (Nomenclatura Semântica): Aplicar convenção rigorosa de nomes de camadas (Header, Container, Footer, Action-Button), proibindo layers genéricas como Frame 1 ou Group 23.
  • R4 (Capa do Projeto): Criar frame de capa (1920x1080) contendo título do projeto, versão v1.0.0, data e nome do autor.

📐 3. Diagrama Conceitual & Fluxo Visual

graph TD
    File["Arquivo Figma: Design System Base"] --> P1["Página: Cover (1920x1080)"]
    File --> P2["Página: Foundations (Tokens)"]
    File --> P3["Página: Mobile (iPhone / Android)"]
    File --> P4["Página: Desktop (MacBook Pro)"]
    File --> P5["Página: Componentes"]
    style File fill:#e1f5fe,stroke:#01579b
    style P1 fill:#fff3e0,stroke:#e65100
    style P2 fill:#f3e5f5,stroke:#7b1fa2
    style P3 fill:#e8f5e9,stroke:#2e7d32
    style P4 fill:#e0f2f1,stroke:#00695c

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

// estrutura_workspace_figma.txt
📦 PROJETO FIGMA: E-Commerce Multiplataforma
├── 📄 Cover (Capa do Projeto v1.0.0)
├── 🎨 Foundations (Paleta de Cores, Escala Tipográfica, Elevações)
├── 📱 Mobile
│   ├── Frame: iPhone-15-Pro-Home (393x852)
│   └── Frame: Android-Small-Home (360x800)
├── 💻 Desktop
│   └── Frame: Desktop-MacBook-Home (1512x982)
└── 🧩 Components (Botões, Cards, Inputs)

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

  1. Arquivo exportado (.fig) ou link do projeto Figma contendo as 5 páginas estruturadas.
  2. Frames nas dimensões exatas de viewport dos dispositivos.
  3. 100% das camadas com nomenclatura semântica sem nenhum 'Rectangle 1'.