Course Content — Modules

Módulo 1 — Fundamentos do Framer

• Interface, navegação, layers e canvas

• Estrutura de página: sections, stacks e containers

• Estilos: cores, tipografia e tokens (noções)

• Organização do projeto (padrões de naming)

Módulo 2 — Layout Responsivo de Verdade

• Stacks: gap, align, distribution

• Grids: colunas, spans e comportamento

• Breakpoints e ajustes por dispositivo

• Boas práticas: mobile-first e consistência de spacing

Módulo 3 — Componentes e Design System

• Criar componentes e reuso inteligente

• Variants e estados (hover, active, disabled)

• Propriedades (props) para conteúdo dinâmico

• Biblioteca interna do projeto (padrões)

Módulo 4 — Seções que Vendem (padrões de site)

• Hero, benefícios, prova social, CTA, FAQ

• Pricing, comparativos, timeline e stats

• Layouts prontos para SaaS, serviços e portfólio

• Copy + design: hierarquia e conversão

Módulo 5 — CMS do Framer

• Collections: campos, slug e organização

• Templates de página (detail pages)

• Listas, filtros básicos e paginação (se aplicável)

• CMS para blog/cases: estrutura recomendada

Módulo 6 — Animações e Interações

• Hover e microinterações

• Scroll animations (com moderação)

• Transitions e page effects

• Checklist: acessibilidade e performance em animações

Módulo 7 — SEO, Performance e Publicação

• Títulos, descrições, OG image e sitemap

• Boas práticas de heading structure

• Imagens (tamanho, compressão) e carregamento

• Domínio, redirects e staging/preview

Módulo 8 — Integrações e Formulários

• Forms nativos e integrações (Zapier/Make, e-mail)

• Analytics (GA4, Pixel) e eventos (noções)

• Captura de leads e páginas de obrigado

• Proteções anti-spam e entregabilidade

Módulo 9 — Migração e Handoff

• Migrar de Figma/WordPress (estratégia, não “copiar igual”)

• Organização para time/cliente

• Documentação mínima (como editar CMS e páginas)

• Versionamento e checklist de entrega

Módulo 10 — Projeto Prático

• Criar um site completo (5 seções + página CMS)

• Componentizar hero + card + botão (variantes)

• Publicar com domínio e SEO básico

• Checklist final de responsivo, performance e tracking