Pular para conteúdo

Projeto 15: Animações Fluidas com Smart Animate e Microinterações ✨

Escopo do Projeto

Objetivo: Projetar microinterações e transições fluidas no Figma utilizando Smart Animate, curvas de aceleração (Easing), Interactive Components com estados de Hover e Toggle Switch animado.

🎯 1. Contexto & Desafio Prático

Microinterações refinadas diferenciam produtos comuns de experiências digitais memoráveis. Você construirá um conjunto de componentes interativos que reagem organicamente ao usuário: um botão de alternância (Toggle Switch) animado, um botão de curtir com expansão elástica e uma transição de expansão de card via Smart Animate.

📋 2. Requisitos Técnicos Obrigatórios

  • R1 (Toggle Switch Interativo): Criar componente de chave liga/desliga que anima a posição da bolinha e a cor de fundo usando Smart Animate no trigger On Click.
  • R2 (Interactive Components): Configurar botões com estado While Hovering e While Pressing diretamente nas variantes do componente.
  • R3 (Expansão de Card com Smart Animate): Criar transição onde um card de lista (compacto) se expande suavemente para tela cheia preservando a identidade dos layers com nomes idênticos.
  • R4 (Curvas de Easing): Aplicar curvas suaves como Custom Spring ou Ease In and Out Back para sensação de física natural.

📐 3. Diagrama Conceitual & Fluxo Visual

graph LR
    StateOff["Toggle OFF: Bolinha na Esquerda (Cinza)"] -->|On Click (Smart Animate 250ms)| StateOn["Toggle ON: Bolinha na Direita (Azul Primário)"]
    CardSmall["Card de Lista (120px Altura)"] -->|On Click (Smart Animate Spring)| CardExpanded["Card em Tela Cheia (View Detalhada)"]
    style StateOff fill:#eeeeee,stroke:#9e9e9e
    style StateOn fill:#e8f5e9,stroke:#2e7d32
    style CardSmall fill:#e1f5fe,stroke:#01579b
    style CardExpanded fill:#f3e5f5,stroke:#7b1fa2

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

// smart_animate_specs.txt
REGRAS PARA SMART ANIMATE PERFEITO:
1. Os nomes das camadas devem ser 100% IDÊNTICOS nos dois frames (ex: 'Thumbnail-Photo').
2. A hierarquia de agrupamento deve ser preservada.
3. Transição Toggle Switch:
   - Trigger: On Click
   - Action: Change To
   - Animation: Smart Animate
   - Duration: 200ms
   - Easing: Ease Out

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

  1. Toggle Switch funcionando perfeitamente sem recarregar tela.
  2. Transição de expansão de card fluida sem cortes abruptos de imagem.
  3. Uso comprovado de curvas de aceleração orgânicas.