Web design moderno mistura criatividade visual, estratégia de experiência do usuário e handoff para desenvolvedores. O conjunto de ferramentas evoluiu de mockups estáticos para plataformas colaborativas, cloud-native. Aqui está o stack profissional atual.
Design e Prototipagem
- Figma — Baseado no browser, edição multiplayer em tempo real, bibliotecas de componentes, auto-layout, handoff para dev (snippets CSS, iOS, Android). Padrão da indústria para times UI/UX.
- Sketch — Editor vetorial só Mac; ecossistema forte de plugins; ainda favorecido por alguns designers solo.
- Adobe XD — Integrado ao Creative Cloud; prototipagem por voz, auto-animate; perdendo espaço para Figma.
- Penpot — Open-source, self-hostable, alternativa ao Figma; comunidade crescente.
Gráficos e Ilustração
- Adobe Photoshop — Composição de fotos, edição raster, export de assets.
- Adobe Illustrator — Logos vetoriais, ícones, ilustrações; export SVG para web.
- Affinity Designer/Photo — Compra única, sem assinatura; alternativas capazes.
Design Systems e Handoff
- Storybook — Explorador de componentes para React, Vue, Svelte; documentação viva.
- Zeroheight / Supernova — Plataformas de documentação de design system sincronizando com Figma/Sketch.
- Zeplin — Legado mas ainda usado para inspeção de specs, export de assets, styleguides.
Prototipagem e Interação
- Framer — Protótipos com código React real.
- ProtoPie — Lógica de interação high-fidelity sem código.
- Principle — Animação baseada em timeline para macOS/iOS.
Pesquisa e Testes de Usuário
- Maze — Testes de usabilidade não moderados em protótipos Figma.
- Hotjar / Microsoft Clarity — Heatmaps, gravações de sessão em sites ao vivo.
- Optimal Workshop — Card sorting, tree testing, first-click tests.
Colaboração com Desenvolvedores
- GitHub / GitLab / Bitbucket — Controle de versão, PR reviews, CI/CD.
- VS Code — Editor preferido; extensões para Tailwind, ESLint, Prettier, Live Share.
- Chrome DevTools / Firefox DevTools — Debugging, profiling de performance, auditoria de acessibilidade.
Gerenciamento de Projeto
- Linear — Rastreamento de issues rápido, centrado em teclado.
- Jira — Quadros ágeis enterprise-grade.
- Notion — Wiki, specs, roadmaps, notas de reunião.
Escolhendo Seu Stack
Freelancer solo? Figma + VS Code + GitHub + Notion cobre 90%. Time de agência? Adicione Storybook, Maze, e plataforma de design system. A melhor ferramenta é a que seu time realmente usa consistentemente.
