<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=44935&amp;fmt=gif">

Como consertamos nosso problema de ícones

ícone

O Trello tinha um problema de ícones. Bem, tínhamos alguns. Primeiro, nossos ícones não tinham nenhuma consistência visual de um aplicativo para o outro. Android, iOS, e web cada um tinha um ícone diferente, feito por uma pessoa diferente em épocas diferentes. Alguns ícones eram simples e preenchidos, outros tinham bordas sólidas, alguns tinham um contorno grosso, e outros eram fininhos. Às vezes, nem éramos visualmente consistentes dentro do mesmo aplicativo.

Segundo, não era fácil atualizar ou importar ícones. Na versão web, usávamos uma fonte de ícones e tínhamos que usar um software de edição de fontes específico (e caríssimo) que nem todos os membros da equipe possuíam. Na versão móvel, atualizávamos os arquivos individualmente e a fonte era mantida em uma pasta compartilhada. Gravar sobre um arquivo era destrutivo; não era possível voltar a uma versão antiga do arquivo. Tivemos também que cortar tamanhos diferentes para usos diferentes no aplicativo.

Nossa. Exportar? Formatos de arquivo? Versionar? Visualizar? Isso parece trabalho de computador.

Hora de automatizar

Para amenizar a dor do processo, escrevi um scriptzinho, que se tornou um scriptzão, que se tornou um código base.  Funciona assim...

ícone

    • Cada ícone tem seu próprio arquivo Sketch. Existe um artboard para cada peso, o peso sendo a grossura da linha no ícone. Pesos mais pesados são utilizados na web, e os mais finos na versão móvel.

 

 

ícone

    • Temos um script gulp que pega as exportações e recorta tamanhos diferentes para cada peso. Em seguida ele formata a saída para Android, iOS e web. Por exemplo, ícones pequenos de android estarão em build/weights/100/16pt18box/android/. Também fazemos a saída do SVG integral e uma fonte de ícone para cada peso.

 

ícone

    • Ele também faz rodar um pequeno aplicativo web que permite que você veja todos os ícones juntos. Assim, podemos comparar os ícones lado a lado para verificar se há consistência visual e testar para que a saída esteja correta.

 

 

ícone

    • Tudo mora dentro de um repositório com versões controladas, então podemos ver o que mudou e quando. Isso significa também que podemos voltar e corrigir erros.

 

 

Para a equipe de design, é mais fácil atualizar e adicionar ícones. É só adicionar outro arquivo Sketch com alguns artboards para pesos diferentes e o script se ocupa do resto. Por que são só arquivos sketch, podemos facilmente arrastar ícones a maquetes. O mais importante, talvez, é que não precisamos mais recortar e picotar todo tipo de exportação para a produção, o que economiza um tempo incalculável. Os desenvolvedores recebem arquivos que podem deixar no código base sem problema, no tamanho e no formato certo. Ufa!

Ver tudo junto

íconeEsse é nosso demonstrativo de ícones. É um pequeno aplicativo web que roda localmente. Você pode alternar entre SVG e tamanhos de fonte de ícones para ter uma noção do que funciona (ou do que está totalmente errado). Você vê tudo junto ao mesmo tempo. O aplicativo em si não é tão bonito, mas é uma coisa interna que funciona bem. Não era nem para você ter visto isso...

Isso era totalmente impossível antigamente. É fácil pegar uma captura de tela e compartilhar e falar sobre todos os ícones juntos.
ícone

Começamos a colocar os ícones na maioria de nossos aplicativos. Ainda não chegamos totalmente lá, mas você pode ver os ícones em ação em emblemas de cartões, na busca e nos menus.

Bem-vindo(a) Iconathon, nosso automatizador open source de tarefas

Pensamos que toda equipe de produtos pode usar algo assim, então abrimos o código na licença da MIT. Chamamos esse projeto de Iconathon, por que ele roda sem parar... como uma maratona... Entendeu? Beleza.

O código inclui alguns ícones de amostra, um readme extensivo, e muitos comentários de código. Você deve ter tudo o que precisa para meter a mão na massa. Se você quiser saber como funciona, você pode mergulhar no código e ver os detalhes. Bom mergulho!

Veja o Iconathon no Github

O futuro

Sabemos que esse código não é dos mais sofisticados. Ele cresceu desengonçadamente para ser o que é hoje depois de muita tentativa e erro. Algumas áreas poderiam ser aceleradas, ele não se encaixa em nenhuma ferramenta de construção. Só funciona com OSX e Sketch. Não exporta para todos os formatos que você possa querer. Na verdade é mais um script interno que funciona para nós, que é o único que pedimos.

Então mesmo se o código é livre, não nos debruçaremos sobre bugs e pull requests (mas daremos uma olhada), pegue o código e faça-o seu. Isso deve ser um ponto de partida.

Esse método nos dá muita flexibilidade, confiança, segurança e economiza muito tempo. Iconathon foi um grande sucesso para nós. Ao rendê-lo livre, espero que seja para você também.