Course Content — Modules

Módulo 1 — Introdução e Setup

• Interface, atalhos e navegação

• Estrutura: files, pages, frames e layers

• Boas práticas de nomeação e organização

Módulo 2 — Fundamentos de UI

• Frames, constraints e resizing

• Grids e layout (8pt, colunas, margens)

• Tipografia: estilos, hierarquia e legibilidade

• Cores: estilos, tokens e acessibilidade (contraste)

Módulo 3 — Auto Layout (o coração do Figma)

• Auto Layout vertical/horizontal, padding e spacing

• Wrap, min/max, hug/fill/fixed

• Componentes responsivos com Auto Layout

• Erros comuns e como evitar

Módulo 4 — Componentes, Variants e Libraries

• Componentes e instâncias

• Variants (estados: default/hover/disabled/loading)

• Propriedades (texto, swap, boolean)

• Publicação e uso de libraries (governança)

Módulo 5 — Prototipação

• Links e navegação entre telas

• Overlays, modals, drawers

• Smart Animate e transições

• Protótipo para testes com usuários

Módulo 6 — UX na prática (fluxos e wireframes)

• Wireframe e arquitetura da informação

• Jornadas e user flows

• Boas práticas de formulários e onboarding

• Erros de UX comuns em apps e sites

Módulo 7 — Design System (do básico ao aplicado)

• Tokens (cor, tipografia, espaçamento)

• Componentes base (buttons, inputs, cards)

• Padrões: navegação, feedback, empty states

• Documentação dentro do Figma

Módulo 8 — Colaboração e Handoff

• Comentários, modos (design/dev), inspeção

• Export, assets, specs e version history

• Organização para trabalho com dev

• Plugins úteis (quando usar e quando evitar)

Módulo 9 — Acessibilidade e Responsividade

• Contraste, tamanhos mínimos e estados

• Layout responsivo com constraints e Auto Layout

• Checklist de acessibilidade (WCAG noções)

Módulo 10 — Projeto Final (portfólio)

• Briefing: problema + público + requisitos

• Wireframe → UI → protótipo navegável

• Apresentação e documentação do case

• Revisão final para portfólio