Índice de Ferramentas de Design
Navegação de ferramentas de design organizadas por categoria: cada item é um link externo + uma linha de descrição, para seleção rápida. Abaixo, 12 categorias de alta frequência com 2 a 3 ferramentas clássicas cada, apontando para listas mais completas em references/; as outras 24 categorias estão na seção "Mais categorias" no final — abra o arquivo de referência correspondente conforme necessário. Os itens vêm do Awesome-Design-Tools.
Ferramentas de Animação
Crie animações e interações de interface/movimento (microinterações, transições, Motion).
- Lottie — analisa animações do After Effects exportadas como JSON e as renderiza nativamente em dispositivos móveis e web.
- GSAP — um conjunto de ferramentas para animações HTML5 scriptadas e de alto desempenho em todos os principais navegadores.
- After Effects — aplicativo da Adobe para gráficos em movimento, efeitos visuais e composição.
→ Lista completa (Haiku, Flare, Kite, Keyshape, etc.) em
references/prototyping-and-animation.md
Cores
Gere ou selecione esquemas de cores e paletas.
- Coolors — o gerador de esquemas de cores super-rápido.
- Adobe Color — crie esquemas com a roda de cores ou navegue por combinações da comunidade.
- Color Hunt — milhares de paletas de cores selecionadas manualmente e na moda para inspiração.
→ Lista completa (Khroma, Paletton, Sip, Pigment, etc.) em
references/color.md
Gradientes
Gere gradientes CSS/de fundo.
- UI Gradients — uma coleção selecionada manualmente de belos gradientes de cores.
- CSS Gradient — um gerador gratuito de gradientes CSS para fundos coloridos.
- Web Gradients — 180 gradientes lineares gratuitos utilizáveis como fundos de conteúdo.
→ Lista completa (Grabient, CoolHue, Gradienta, etc.) em
references/color.md
Prototipagem
Crie protótipos interativos de alta fidelidade.
- Framer — projete visualmente protótipos interativos realistas.
- InVision — plataforma de prototipagem, colaboração e fluxo de trabalho.
- ProtoPie — monte interações de alta fidelidade e protótipos com suporte a sensores em minutos.
→ Lista completa (Marvel, Origami, Principle, Axure, UXPin, etc.) em
references/prototyping-and-animation.md
Handoff de Design
Entregue especificações de design, assets e trechos de código para desenvolvedores.
- Zeplin — entregue designs e guias de estilo com especificações, assets e trechos de código precisos.
- Avocode — abra designs sem ferramentas de design; clique em camadas para obter código.
- InVision Inspect — prepare designs para desenvolvimento.
→ Lista completa (Sympli, Sketch Measure, Flawless App, Specctr, etc.) em
references/handoff-and-code.md
Design para Código
Converta designs em código executável ou sites.
- Webflow — crie sites responsivos no navegador e depois hospede ou exporte o código.
- Anima — um plugin/web app do Sketch que converte designs do Sketch para HTML.
- Supernova Studio — converta designs do Sketch em código Android, iOS ou React Native.
→ Lista completa (PaintCode, Pinegrow, Tilda, Draftbit, etc.) em
references/handoff-and-code.md
Ícones
Bibliotecas e ferramentas de ícones.
- Feather Icons — ícones em grade 24x24 com ênfase em simplicidade, consistência e legibilidade.
- Font Awesome — o conjunto de ícones open source mais popular da web.
- Material Design Icons — ícones gratuitos do Material Design via contribuições open source.
→ Lista completa (Flaticon, Icons8, Simple Icons, SVGRepo, etc.) em
references/graphic-assets.md
Fontes
Recursos, gerenciamento e combinação de fontes.
- Google Fonts — tornando a web mais bonita e aberta através de tipografia de qualidade.
- Adobe Fonts — milhares de fontes bonitas da Adobe.
- FontPair — ajuda a combinar fontes do Google Fonts.
→ Lista completa (DaFont, FontBase, Font Squirrel, RightFont, etc.) em
references/graphic-assets.md
Ilustrações
Bibliotecas e geradores de ilustrações.
- unDraw — uma coleção de belas imagens SVG.
- Blush — crie, misture e personalize ilustrações feitas por artistas do mundo todo.
- Humaaans — uma biblioteca gratuita para combinar e misturar ilustrações de pessoas.
→ Lista completa (ManyPixels, Open Doodles, Blobmaker, IRA Design, etc.) em
references/graphic-assets.md
Mockups
Exibição de produtos/dispositivos em mockups.
- Smartmockups — crie mockups de produtos com apenas alguns cliques.
- Artboard Studio — aplicativo de design gráfico online focado em mockups de produtos.
- Rotato — mockups 3D animados para designs de aplicativos.
→ Lista completa (Device Shots, Mockup World, Mockuuups, Threed, etc.) em
references/mockup.md
Design de UI
Ferramentas de design de interface e visual.
- Figma — design e prototipagem baseados em navegador com colaboração em tempo real.
- Sketch — um kit de ferramentas de design para Mac.
- Adobe XD — projete, prototipe e compartilhe UX para web, mobile e voz.
→ Lista completa (Photoshop, Illustrator, Affinity, Inkscape, Photopea, etc.) em
references/ui-and-wireframe.md
Wireframes
Wireframes de baixa fidelidade e esboços estruturais.
- Balsamiq Cloud — esboços de UI sem esforço com colaboração.
- Wireframe.cc — uma ferramenta simples de wireframing que não atrapalha.
- Whimsical Wireframes — wireframes instantâneos com uma biblioteca rica de elementos.
→ Lista completa (Pidoco, Gliffy, Layoutit, BLOKK, etc.) em
references/ui-and-wireframe.md
Mais Categorias (leia os references conforme necessário)
As categorias abaixo não estão na seleção principal da página inicial; quando surgir a necessidade, abra diretamente o arquivo de referência correspondente. Cada arquivo é organizado por categoria no topo.
- Ferramentas de Acessibilidade (verificação WCAG, contraste, simulação de daltonismo) →
references/accessibility.md - Pesquisa de Usuário / Arquitetura da Informação / Fluxos do Usuário / Monitoramento de Experiência (recrutamento para entrevistas, classificação de cartões, mapas de site, fluxogramas de usuário, mapas de calor, análise de eventos) →
references/user-research-and-ia.md - Colaboração / Feedback de Design / Controle de Versão de Design (colaboração em equipe, anotações e revisões, Git para arquivos de design) →
references/collaboration-feedback-vcs.md - Sistemas de Design / Ferramentas de Desenvolvimento / Depuração Visual / No-Code (documentação de bibliotecas de componentes, navegadores de desenvolvimento, inspeção web, criação no-code) →
references/design-systems-and-dev.md - Assets de Mídia (banco de imagens/vídeos/áudio gratuitos, software de captura de tela) →
references/media-assets.md - Criação / Inspiração / Aprendizado (sites de inspiração, cursos de design, logotipos, design para mídias sociais, esboços à mão, pixel art) →
references/creation-and-inspiration.md - Modelagem 3D / Realidade Aumentada →
references/3d-and-ar.md
Diretório completo de design relacionado ao Awesome em https://github.com/sindresorhus/awesome