Pular para conteúdo

Projeto 08: Auto Layout: Fundamentos e Padding Dinâmico 📐

Escopo do Projeto

Objetivo: Dominar o Auto Layout fundamental do Figma: direção de fluxo (vertical/horizontal), espaçamento entre itens (Gap), padding dinâmico e botões que se ajustam automaticamente ao texto.

🎯 1. Contexto & Desafio Prático

O Auto Layout é o alicerce do design responsivo no Figma, simulando as regras do Flexbox do CSS. Você construirá uma barra de ferramentas e uma família de botões dinâmicos que expandem e contraem perfeitamente conforme o texto do rótulo é editado.

📋 2. Requisitos Técnicos Obrigatórios

  • R1 (Botão com Auto Layout): Criar botão combinando ícone e texto usando Shift + A, com padding horizontal de 20px e vertical de 12px.
  • R2 (Gap Configurável): Ajustar espaçamento interno entre ícone e texto em 8px (gap: 8px).
  • R3 (Teste de Digitação): Digitar palavras curtas ('OK') e longas ('Confirmar Transferência Bancária') comprovando que o botão redimensiona sem quebrar.
  • R4 (Barra de Ações Horizontal): Agrupar 3 botões em um container horizontal de Auto Layout com alinhamento centralizado.

📐 3. Diagrama Conceitual & Fluxo Visual

graph LR
    Icon["Ícone (20x20)"] --> Auto["Auto Layout: Horizontal | Gap: 8px"]
    Text["Texto do Botão ('Adicionar')"] --> Auto
    Auto --> Button["Botão Dinâmico (Padding: 12px 20px)"]
    style Icon fill:#e1f5fe,stroke:#01579b
    style Text fill:#fff3e0,stroke:#e65100
    style Button fill:#e8f5e9,stroke:#2e7d32

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

// autolayout_equivalencia_css.css
.button-autolayout {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  width: max-content; /* Hug Contents */
}

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

  1. Botões criados estritamente com Auto Layout (proibido grupos normais).
  2. Comportamento de Hug Contents funcionando na horizontal e vertical.
  3. Alinhamento central de ícone e texto comprovado.