Moqups
Site·Design e desenvolvimentoO Moqups é uma ferramenta de design baseada na nuvem para criar wireframes, mockups, protótipos interativos e diagramas para sites, aplicativos e painéis.
Por que combina
Design de interfaces e protótipos
Design de interfaces e protótipos: ferramentas e apps
Ferramentas para desenhar telas de aplicativos e sites, fazer wireframes, montar protótipos clicáveis e entregar o design para quem desenvolve. Defina primeiro se você vai trabalhar sozinho ou em equipe e quanto o design precisa corresponder ao código.
Bom saber: As condições de uso gratuito variam conforme a ferramenta e o plano. Quando um cartão não mostra um limite específico da ferramenta, confira cotas, marcas d’água e condições de exportação na página oficial.
Opção grátis
Figma
Site·Design e desenvolvimentoO Figma é uma ferramenta de design para projetar e prototipar interfaces em uma única tela, trabalhar em equipe e transformar designs em código com o Dev Mode; é usado pelo figma.com e por aplicativos para computador.
Por que combina
Design de interfaces e protótipos
Penpot
Site·Design e desenvolvimentoO Penpot é uma plataforma de design de código aberto para design de interfaces, wireframes e protótipos interativos; você pode usá-lo na nuvem ou instalá-lo no seu próprio servidor, e ele funciona com padrões abertos como SVG, CSS, HTML e JSON.
Por que combina
Design de interfaces e protótipos
Uizard
Site·Design e desenvolvimentoO Uizard é uma ferramenta de design de interfaces assistida por IA que gera protótipos editáveis de várias telas a partir de um texto e transforma capturas de tela e esboços feitos à mão em designs editáveis.
Por que combina
Design de interfaces e protótipos
O que comparar?
Desenhe um fluxo pequeno de duas ou três telas: crie um componente, teste o layout automático, ligue as telas e abra o protótipo no celular. Experimente comentar no mesmo arquivo com um colega e ler medidas e códigos de cor na visualização para desenvolvimento.
Confirme na página oficial de preços se o plano gratuito limita arquivos, páginas, editores ou histórico de versões. Não suponha que é possível exportar para outra ferramenta ou formato aberto, trabalhar offline ou hospedar no seu servidor sem ver isso em uma fonte.
Qual a diferença entre wireframe, mockup e protótipo? O wireframe é um esboço simples do layout, o mockup mostra a aparência final com cores e imagens, e o protótipo é um modelo navegável com cliques entre telas. Começar por wireframes deixa as mudanças iniciais mais baratas.
A ferramenta de design gera código sozinha? Algumas mostram medidas, cores e valores CSS ou geram trechos de código, mas esse resultado muitas vezes não é código pronto para produção. Combine com quem desenvolve como ele será usado.
Compare recursos documentados
Esta comparação usa documentação oficial publicada. Não é um teste prático nem uma classificação de qualidade. Recursos desconhecidos não são considerados verificados.
- Sim
- Não
- Não verificado
| Nome do app | Onde vai usar? | Resultado grátis | Sem cadastro | Sem marca-d’água | Funciona offline | Processamento em lote | Idioma do conteúdo | Bom saber / Fontes e data da verificação |
|---|---|---|---|---|---|---|---|---|
| Moqups | Site | Sim | Não verificado | Não verificado | Não verificado | Não verificado | Não verificado | Fontes e data da verificação |
| Figma | Site | Não verificado | Não verificado | Não verificado | Não verificado | Não verificado | Não verificado | Fontes e data da verificação |
| Penpot | Site | Não verificado | Não verificado | Não verificado | Não verificado | Não verificado | Não verificado | Fontes e data da verificação |
| Uizard | Site | Não verificado | Não verificado | Não verificado | Não verificado | Não verificado | Não verificado |
Notas que valem para várias ferramentas
- Confira cada ferramenta separadamente; os limites não são compartilhados.
- Confira cotas e condições atuais no site oficial.