Pular para conteúdo

Projeto 10: Sistema de Grids de Colunas e Layout Constraints 📏

Escopo do Projeto

Objetivo: Conceber sistemas de grid responsivos no Figma: Grid de 4 colunas para Mobile, Grid de 12 colunas para Desktop e aplicação de Constraints (Top/Bottom, Left/Right, Scale).

🎯 1. Contexto & Desafio Prático

A espinha dorsal visual de qualquer interface corporativa é seu sistema de colunas e alinhamento responsivo. Você configurará os grids oficiais de um aplicativo bancário em Mobile e Desktop, associando as Constraints corretas para que cabeçalhos, barras de navegação e botões flutuantes permaneçam fixos em suas posições.

📋 2. Requisitos Técnicos Obrigatórios

  • R1 (Grid Mobile de 4 Colunas): Configurar no frame mobile: 4 colunas, margens externas de 16px e gutter (calha) de 12px.
  • R2 (Grid Desktop de 12 Colunas): Configurar no frame desktop: 12 colunas, largura máxima centralizada de 1200px e gutter de 24px.
  • R3 (Constraints de Header e Footer): Fixar a barra de navegação superior com constraint Top & Left/Right e o botão flutuante com Bottom & Right.
  • R4 (Demonstração Responsiva): Exibir o layout adaptado em ambas as resoluções respeitando as colunas do grid.

📐 3. Diagrama Conceitual & Fluxo Visual

graph TD
    Screen["Tela da Aplicação"] --> MobileGrid["Mobile: 4 Colunas | Gutter: 12px | Margem: 16px"]
    Screen --> DesktopGrid["Desktop: 12 Colunas | Gutter: 24px | Max: 1200px"]
    MobileGrid --> Header["Header: Constraint Top + Left and Right"]
    MobileGrid --> FAB["Floating Button: Constraint Bottom + Right"]
    style Screen fill:#e1f5fe,stroke:#01579b
    style MobileGrid fill:#fff3e0,stroke:#e65100
    style DesktopGrid fill:#f3e5f5,stroke:#7b1fa2
    style Header fill:#e8f5e9,stroke:#2e7d32
    style FAB fill:#e0f2f1,stroke:#00695c

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

// grid_specifications.txt
ESPECIFICAÇÃO DE GRIDS:
MOBILE (393px):
- Type: Stretch
- Columns: 4
- Margin: 16px
- Gutter: 12px

DESKTOP (1512px):
- Type: Center
- Columns: 12
- Width: 72px
- Gutter: 24px (Total: 1128px content width)

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

  1. Grids de layout visíveis e configurados nos frames mestres.
  2. Elementos alinhados com rigor matemático às colunas e gutters.
  3. Constraints testadas e funcionando ao alterar o tamanho do frame pai.