O que é Ferramenta de Wireframe?

Esboce layouts de página e mockups de interface em segundos. Arraste elementos comuns de UI — botões, blocos de texto, imagens, campos de entrada — para uma tela e exporte como PNG ou salve como JSON para continuar editando.

O canvas é construído em fabric.js e traz um kit completo de elementos: retângulos, blocos de texto, botões, placeholders de imagem, campos de entrada, navbars, cards, checkboxes, dropdowns, grupos de rádio, barras de progresso, sliders e notas adesivas para anotações. Zoom e ajuste à tela mantêm layouts cheios legíveis, e dá pra enquadrar o canvas na largura de celular, tablet ou desktop. Desfazer, refazer, agrupar, desagrupar e mudar a ordem são acessíveis pelo teclado. Exporte PNG ou SVG pra compartilhar, ou um JSON que reabre exatamente no mesmo estado.

Como usar

1. Selecione um elemento de UI na barra de ferramentas — como um retângulo, bloco de texto, botão, marcador de imagem ou campo de entrada — e clique na tela para posicioná-lo.
2. Arraste elementos para reposicioná-los, redimensione puxando as alças e edite texto com um duplo clique. Agrupe elementos para facilitar o movimento.
3. Exporte seu wireframe como uma imagem PNG para compartilhamento, ou salve como JSON para recarregar e continuar a edição mais tarde.

Quando usar

• Esboçar três variações de tela em 15 minutos antes de uma revisão com stakeholders.
• Mandar uma anotação no Slack em vez de descrever o layout em palavras.
• Ensinar a um designer júnior a diferença entre baixa e alta fidelidade.

Resultado

Um gerente de produto esboça uma tela de login de aplicativo móvel com um marcador de logotipo, campos de e-mail e senha, um botão de entrada e um link "esqueci a senha" — e exporta o PNG para compartilhar num canal do Slack.

Perguntas frequentes

Qual a diferença entre essa ferramenta e o Figma?

Figma é para alta fidelidade: componentes, protótipos, colaboração em equipe. Essa ferramenta é propositalmente de baixa fidelidade: um kit pequeno de formas primitivas e nada de tocar em estilo. Uma ideia de tela sai em minutos, não numa tarde. O entregável serve pra alinhar pensamento, não para handoff.

Como movo os elementos pixel a pixel?

Seleciona o elemento e usa as setas para empurrar 1 pixel por vez. Segura Shift junto com a seta para saltar 10 pixels. Para redimensionar, pega as alças dos cantos, e segura Shift enquanto arrasta para manter as proporções.

Dá pra copiar elementos de um wireframe para outro?

Exporta os dois para JSON, abre num editor de texto e copia as entradas do array elements que quiser do primeiro pro segundo. Reimporta e as novas formas aparecem. A maioria das pessoas só duplica com Ctrl+D dentro do mesmo wireframe.

Por que o JSON às vezes fica maior que o PNG?

O JSON guarda cada propriedade de cada forma (posição, preenchimento, contorno, fonte, texto) como texto legível. O PNG é uma imagem rasterizada plana. Em wireframes com muito texto o JSON pode superar o PNG, mas só o JSON deixa continuar editando depois.

Tem como adicionar formas personalizadas minhas?

Não direto dentro da ferramenta, mas dá pra agrupar primitivas existentes (Ctrl+G) e formar um cluster reutilizável tipo barra de busca ou tabs. Salva o JSON, copia esse grupo e cola em arquivos novos como sua mini biblioteca pessoal.

Ferramentas relacionadas