ZappScreenshot: a ferramenta que faltava para criar mockups sem complicações

Há uns meses, enquanto preparávamos materiais para um cliente, deparámo-nos com um problema irritantemente comum: precisávamos de mockups rápidos para uma apresentação e as opções disponíveis eram todas pagas, lentas, ou exigiam criar mais uma conta num serviço qualquer.

O Figma resolve, claro. Mas abrir o Figma só para enquadrar uma captura de ecrã numa moldura de Safari parece exagerado. E nem toda a gente na equipa tem acesso ou sabe usá-lo.

Foi daí que nasceu o ZappScreenshot.

O que é, afinal

O ZappScreenshot é uma aplicação web que faz uma coisa simples: pega nas vossas capturas de ecrã e coloca-as dentro de molduras de browsers ou dispositivos. Safari, Chrome, Arc, iPhone, iPad, MacBook - está lá tudo.

Não há muito mais para explicar. Arrastam uma imagem, escolhem a moldura, ajustam o fundo se quiserem, e exportam. O resultado é uma imagem de alta resolução pronta a usar.

Porque é que isto interessa

A verdade é que a maior parte das ferramentas deste tipo tem um de três problemas: ou são pagas, ou obrigam a fazer upload das imagens para servidores de terceiros, ou são tão cheias de funcionalidades que se tornam confusas.

Nós queríamos algo diferente. O ZappScreenshot funciona inteiramente no navegador. As imagens que carregam nunca saem do vosso computador - não há servidor nenhum a recebê-las. Isto significa privacidade total, mas também significa que a ferramenta é rápida. Não há tempos de espera porque não há nada a ser enviado ou processado remotamente.

E é gratuito. Sem truques, sem versão "pro" escondida, sem marcas de água.

Para quem faz apps

Uma das funcionalidades que acrescentámos mais tarde foi o modo App Store. Se alguma vez submeteram uma app para a App Store ou Google Play, sabem que as capturas de ecrã têm dimensões muito específicas. O ZappScreenshot tem templates pré-configurados para todos esses tamanhos.

Melhor ainda: podem adicionar títulos e subtítulos directamente na imagem. Aqueles screenshots promocionais que vêem nas lojas de apps, com texto a explicar as funcionalidades? Podem criá-los aqui, sem precisar de abrir outro programa.

Os detalhes técnicos, para quem gosta dessas coisas

A aplicação foi construída em React e corre inteiramente no cliente. Usamos a biblioteca html-to-image para gerar as exportações, o que permite manter tudo local. As molduras de browser são renderizadas em CSS - não são imagens PNG - o que significa que ficam nítidas independentemente do tamanho.

Os frames de dispositivos vêm dos recursos oficiais do Facebook Design, que são de alta qualidade e livres para usar.

Experimentem

O ZappScreenshot está disponível em zappscreenshot.modulardigital.pt. Não precisam de criar conta nem de instalar nada. Abram, arrastem uma imagem, e experimentem.

Se tiverem sugestões ou encontrarem algum problema, digam-nos. Queremos que isto seja útil para quem precisa de criar mockups sem perder tempo.