Uma seta desenhada à mão faz algo a uma interface que nenhum ponteiro geométrico de um kit de UI padrão consegue: acrescenta personalidade. Diz ao utilizador «aqui trabalhou uma pessoa, não uma linha de montagem». Mas desenhar quatro dúzias de setas em vetor, polir cada curva de caneta no Figma ou no Illustrator, é uma tarefa de hora e meia que um designer com um prazo apertado simplesmente não tem.

Felizmente, o designer Denes, do Let's WP, já fez esse trabalho por nós. Reuniu um conjunto de 44 setas SVG desenhadas à mão, num estilo unificado e conciso, não vinculado a nenhum sistema de design específico, sem ornamentos, sem peso desnecessário. O conjunto é gratuito para uso comercial e pessoal: agarre-o e cole-o no seu layout, mude a cor e a espessura, redimensione sem perda de qualidade.

A seguir, o que está dentro do arquivo, onde e como aplicar estas setas, que ferramentas usar para personalização e onde encontrar conjuntos semelhantes, caso 44 variantes pareçam insuficientes.

💡 Visão geral rápida:

• Descarregue o arquivo ZIP com 44 setas SVG do site Let's WP (ou de um mirror)
• Abra o ficheiro no Figma, Inkscape ou Illustrator e ajuste o traço para combinar com a sua paleta
• Insira num layout, apresentação ou publicação, o redimensionamento é livre, sem perda de nitidez
• Use em projetos comerciais sem atribuição

O que está dentro do conjunto

O arquivo contém 44 ficheiros SVG separados, cada um com o seu próprio carácter de curva e tipo de ponta. Eis o que encontra depois de descomprimir o zip:

• Setas retas para a direita e para a esquerda, ponteiros clássicos com diferentes formatos de ponta (aguda, arredondada, dupla). Ferramenta básica para ligar blocos numa landing page e numa apresentação.
• Arco e curvas, para contornar grupos de elementos, dar destaque visual a uma área do ecrã e indicar ligações não lineares em diagramas.
• Tracejadas e hachuradas, ideais para instruções passo a passo, fluxo de utilizador e fluxogramas. O tracejado lê-se como «caminho», a hachura como «rota alternativa».
• Linhas finas com traço de caneta cuidado e traços grossos, as primeiras são boas para UI minimalista e wireframes, as segundas funcionam como um acento expressivo numa página promocional.
• Floreados em laço e elementos decorativos, para cabeçalhos, separadores de secção e estilização de publicações em redes sociais.

Todos os ficheiros estão em SVG. Isto significa que o traço não está expandido em curvas, pode alterar a espessura (stroke-width) e a cor (stroke) tanto num editor gráfico como diretamente em código. Em qualquer redimensionamento, a qualidade não se perde.

O conjunto é distribuído livremente: o uso comercial é permitido em sites de clientes, em apresentações e impressão. A atribuição não é obrigatória, mas é bem-vinda. O autor, Denes, é designer e criador do blog Let's WP.

Onde as setas desenhadas à mão são úteis

O estilo manuscrito resolve uma tarefa específica: suaviza a rigidez geométrica de uma interface. Onde uma seta padrão do Material Design parece demasiado estéril e impessoal, uma desenhada à mão acrescenta um toque «humano». Aqui estão cinco cenários típicos.

Landing pages e páginas promocionais. Uma seta direciona o olhar para um botão de CTA, liga o bloco «problema → solução», acentua a oferta. O estilo manuscrito reduz a aparência de modelo visual, a página parece menos feita em série e, por isso, inspira mais confiança.

Apresentações e pitch decks. O vetor insere-se no Google Slides, PowerPoint e Keynote sem perda de nitidez. As setas ligam blocos num diapositivo, mostram sequência ou hierarquia, fica limpo e não distrai do essencial.

Diagramas e infografias. As variantes tracejadas e hachuradas são uma linguagem visual pronta para fluxogramas, mapas mentais e fluxo de utilizador. O leitor entende a direção sem explicações adicionais.

Estilização de publicações em redes sociais. Os floreados de seta funcionam como separadores e acentos em carrosséis do Instagram, cabeçalhos do Twitter e capas de artigos. Acrescentam dinâmica a uma imagem plana.

Design de UI e wireframes. Ao prototipar, os ponteiros desenhados à mão ajudam a indicar a interação: onde clicar, o que leva aonde, como os ecrãs estão ligados. O estilo é deliberadamente «rascunho», o cliente vê a estrutura, não o design final.

Como editar as setas SVG

O conjunto é fornecido em SVG, por isso qualquer editor de gráficos vetoriais está disponível. Três opções, por ordem crescente de complexidade.

Figma, gratuito, navegador. Arraste o ficheiro SVG para a tela, a seta aparece como um objeto vetorial. Selecione-a e altere Stroke (espessura e cor do contorno) no painel direito. O redimensionamento é livre. Ideal se já está a trabalhar no Figma num layout e não quer alternar entre ferramentas.

Inkscape, gratuito, desktop. Editor SVG open-source poderoso. Abra o ficheiro, prima Ctrl+Shift+F, painel «Preenchimento e Traço». Aqui estão disponíveis: cor de preenchimento e traço, estilo de traço (sólido, tracejado, traço-ponto), marcadores de início e fim de linha. O Inkscape suporta processamento em lote via CLI, conveniente se precisar de recolorir todos os 44 ficheiros de uma vez com cores corporativas.

Adobe Illustrator, pago, desktop. Ferramenta profissional. Importe o SVG, desagrupe se necessário e trabalhe com a paleta Stroke e Appearance. Traços com gradiente, pincéis e efeitos estão disponíveis, mas para setas simples isto é geralmente excessivo.

Mudança rápida de cor via código

Se precisar de incorporar uma seta diretamente na marcação como SVG inline, a cor muda com um atributo:

1
<svg width="100" height="40" viewBox="0 0 100 40">
2
  <path d="M10,20 L80,20 L70,10 M80,20 L70,30"
3
        stroke="#FF6B35" stroke-width="2" fill="none"/>
4
</svg>

Substitua #FF6B35 pela sua cor e a seta ajustar-se-á a qualquer paleta.

Vídeo: noções básicas de SVG para iniciantes

Se nunca trabalhou com gráficos vetoriais, comece por este tutorial. O autor explica de forma clara: o que é SVG, como criar e editar formas vetoriais, como aplicar estilos e animação.

Conjuntos gratuitos semelhantes de setas vetoriais

44 setas são um bom começo, mas às vezes um projeto precisa de variedade. Aqui estão cinco fontes verificadas com setas desenhadas à mão de qualidade em SVG.

• Hand Drawn Arrows no SVG Repo, uma coleção de mais de 200 setas SVG em diferentes estilos: do minimalista ao decorativo. Todas sob licença MIT, podem ser usadas em projetos comerciais sem restrições. Procure por "hand drawn arrows" em svgrepo.com.

• Arrow Icons do Flaticon, mais de 1.800 ícones de seta em SVG e PNG. Estão disponíveis variantes desenhadas à mão, de contorno, planas e com gradiente. Grátis com atribuição, ou por subscrição sem ela: flaticon.com/free-icons/hand-drawn-arrow.

• Hand Drawn Arrows no Vecteezy, dezenas de milhares de setas vetoriais de diferentes autores. Filtre por licença: escolha «Free» e veja se um conjunto específico requer atribuição: vecteezy.com.

• Arrow Sketch no Freepik, enorme coleção de setas desenhadas à mão em vetor e PNG. Grátis com atribuição (link para o Freepik), conjuntos premium disponíveis sem atribuição: freepik.com.

• Mirror do conjunto do Bypeople, se a fonte principal (Let's WP) estiver indisponível, as mesmas 44 setas podem ser obtidas via Bypeople: bypeople.com/hand-drawn-svg-arrows/.

⁉️🤔 Perguntas frequentes

Estas setas podem ser usadas em projetos comerciais?

Sim. O conjunto do Let's WP é distribuído sob uma licença livre: é permitido o uso comercial e pessoal, incluindo sites de clientes, apresentações, impressão e produtos digitais. A atribuição não é obrigatória. As setas são um recurso de gráfico vetorial, não código de programa: pode inseri-las num layout, editar a cor e a espessura do traço, mas não revendê-las como um conjunto de setas separado.

Qual é o formato dos ficheiros e como abri-los?

Formato SVG (Scalable Vector Graphics). Abre com qualquer editor vetorial: Figma (navegador, gratuito), Inkscape (desktop, gratuito), Adobe Illustrator (desktop, pago), Vectornator (iPad), CorelDRAW. O SVG também pode ser aberto como um ficheiro de texto em qualquer editor de código e editar a marcação diretamente. Para visualização rápida sem um editor, arraste o ficheiro SVG para uma janela do navegador, ele será renderizado como uma imagem normal.

Por que razão as setas desenhadas à mão são melhores do que as geométricas normais?

Uma seta desenhada à mão acrescenta «humanidade» a uma interface. Uma geométrica de um kit de UI padrão diz «isto é uma interface», enquanto uma desenhada à mão diz «por detrás desta interface está uma pessoa». Em landing pages de marketing, apresentações e materiais educativos, isto aumenta o envolvimento: há algo em que o olhar se prende. Do ponto de vista da acessibilidade, não há diferença, ambas são igualmente ignoradas pelos leitores de ecrã sem aria-label, que adiciona por si.

O que fazer se o site original do Let's WP estiver indisponível?

O site original letswp.io está agora disponível via letswp.justifiedgrid.com. O conjunto também está em plataformas agregadoras: Bypeople e Armory (visualsoldiers.com). Se nenhum mirror funcionar, use alternativas da lista acima: SVG Repo e Flaticon juntos fornecem mais de 2.000 setas desenhadas à mão.

Estas setas são adequadas para impressão?

Sim. SVG, um formato vetorial, redimensiona sem perda de qualidade para qualquer resolução: de um pequeno ícone a um banner de grande formato. Antes de enviar para uma gráfica, certifique-se de que o modelo de cor é convertido para CMYK (no Figma e no Inkscape isto é feito via exportação para PDF com conversão subsequente). Uma espessura de traço de 1-2 px no ecrã torna-se um fio de cabelo na impressão, aumente stroke-width para 3-5 px.

Há restrições à modificação das próprias setas?

Nenhuma. Os ficheiros SVG do conjunto não estão «cozidos», o traço não está expandido em curvas. Altera livremente a cor, a espessura, o estilo do traço (sólido, tracejado), adiciona preenchimento e gradientes. A única restrição da licença: não pode revender o conjunto editado como um produto clone separado.

Usar ou não usar: análise final sobre as setas do Let's WP

Se está a compor uma landing page, a montar uma apresentação ou a estilizar uma publicação, as 44 setas do Denes cobrem a maioria dos cenários típicos. O estilo manuscrito é universal: não entra em conflito com o Material Design, o minimalismo ou o brutalismo.

Para tarefas rápidas, pegue e insira tal como estão. Para design personalizado, mude a cor e a espessura do traço num minuto no Figma ou no Inkscape. E se 44 variantes não forem suficientes, a lista de alternativas acima dar-lhe-á mais um par de milhares de setas.

Descarregue, experimente e torne as interfaces mais vivas.