10 dicas para exportar ativos vetoriais do Sketch para Android

As vantagens de vetores para rasters são óbvias. Os ativos vetoriais são menores, prontamente editáveis ​​e muito mais fáceis de gerenciar (especificamente em termos de tamanho e cor).

Eu trabalho em um aplicativo relativamente complexo que suporta muitas plataformas diferentes. Com os tamanhos e resoluções de tela crescentes (olhando para você, Nexus 6P) para Android, sentimos que era necessário atualizar os ativos existentes dos formatos raster para vetor, para mantê-los escaláveis ​​devido à necessidade de oferecer suporte a diferentes resoluções.

A maioria dos ativos que usamos atualmente foi criada originalmente usando o Sketch. Isso causou alguns problemas interessantes ao tentar a conversão. Como os ativos de vetores são apenas parcialmente suportados pelo Android em sua API atual (Android 24), os ativos exportados foram interrompidos de várias maneiras inesperadas.

Isso serve como um diário de investigação do ponto de vista de um designer, para algumas coisas que aprendemos ao tentar converter todos os recursos de varredura no aplicativo em vetores para Android. Os guias do usuário do Android Studio não foram particularmente úteis quando se trata de solução de problemas.

Não é bem o

Muitas das regras escritas aqui são específicas para exportar ativos vetoriais usando o Sketch. No entanto, também são boas diretrizes para exportar ativos vetoriais limpos e funcionais para uso em todas as plataformas.

1. Mantenha isso simples, estúpido

Esse princípio básico para o design de software também se aplica aos ativos: quanto mais simples as formas, melhor. Tente usar formas simples para criar os ativos complexos que você precisa. A regra geral é que, quanto menos caminhos e âncoras forem usados, mais "limpo" será. Sempre é preferível usar uma única forma do que usar várias formas sobrepostas para criar um ativo.

2. Evite usar máscaras

As máscaras criadas com o Sketch não são suportadas pela versão atual da API do Android. Quaisquer máscaras feitas no Sketch são ignoradas pelo Android VectorDrawble (AVD), e as máscaras criadas no Sketch às vezes travam o Adobe Illustrator. Se houver uma situação em que um efeito de sombreamento precise ser criado, uma forma sobreposta na parte superior da camada existente deve ser usada em favor de máscaras.

Use a operação do pathfinder

3. Faça contornos, não traços

Nas situações em que for possível, tente evitar o uso de traços para criar as formas desejadas. Os traços nem sempre são dimensionados corretamente com o restante da imagem. Além disso, o AVD não faz distinção entre as diferentes posições das bordas e trata todas as bordas como traços "centrais".

Então, o que isso significa é que uma borda interna de espessura 10 no Sketch se torna um curso central da espessura 20 quando renderizada no AVD.

Como os contornos são formas, eles sempre exibem a aparência desejada quando redimensionados ou transformados. Os contornos também são muito mais fáceis de trabalhar, se você deseja aplicar as operações do pathfinder.

Você pode facilmente alterar traçados em contornos usando CMD + Shift + O.

4. Desbravadores são seus amigos

As formas mais complexas podem ser criadas a partir de uma composição de formas mais simples usando as operações do pathfinder. Familiarize-se com eles. As formas criadas dessa maneira podem ser exibidas corretamente em todos os dispositivos.

5. Adobe Illustrator é o melhor solucionador de problemas

O Adobe Illustrator processa os ativos de vetor da mesma maneira que o VectorDrawable do Android (por experiência anedótica). Se um ativo não estiver aparecendo corretamente no AVD, tente diagnosticar o problema usando o Illustrator. Muitas vezes, a solução é tão simples quanto remover um preenchimento.

Um problema comum para exportar ativos para Android usando o Sketch.

6. Formas combinadas e transformadas podem não aparecer como parecem

Transformações como reflexões e rotações feitas no Sketch não são totalmente suportadas no Android VectorDrawable. Como resultado, as camadas transformadas nem sempre aparecem como você espera. A solução mais fácil para isso seria achatar cada caminho que possui uma transformação, para que a transformação se torne parte do caminho.

No entanto, em situações em que as transformações são aplicadas a grupos inteiros, a única maneira de contornar isso seria transformar e posicionar manualmente cada camada individual.

7. As transparências são suas amigas…

As transparências são adequadamente suportadas e exibidas em todos os dispositivos e plataformas; use-as para criar sombras / realces, quando apropriado.

Observe a sombra sob o bife

8.… e os gradientes não são

Por outro lado, o AVD atualmente não suporta gradientes. Os ativos feitos dessa maneira quase certamente quebrarão durante a importação. O sombreamento Cel deve ser usado em favor de técnicas de sombreamento gradiente.

A sombra sob o bife desaparece

9. Exportar pranchetas, não camadas

Usar uma caixa delimitadora no Sketch para definir as dimensões de um ativo de vetor é uma técnica antiga. Embora ainda seja um método útil de definir limites para exportar vetores, a melhor abordagem é criar uma prancheta que tenha as mesmas dimensões que a viewport que você está tentando definir. A camada da caixa delimitadora no ativo é tratada como um caminho separado, mas transparente, quando convertida para o VectorDrawable xml.

10. Achatar formas resolverá a maioria dos problemas

Os ativos exportados contêm metadados que descrevem suas transformações e composições enquanto estão sendo editados, pois isso informa aos usuários como "como" foi criado. No entanto, quando se trata de exportar e renderizar esses ativos, essas informações estranhas sobre como foram compostas geralmente causam mais problemas do que solucionam (rotações e reflexões realizadas no Sketch não são suportadas), além de aumentar o tamanho do arquivo.

O estado final do ativo é a única coisa que está sendo mostrada e, nesse caso, apenas a aparência do estado final é importante.

O achatamento de uma forma renderizará operações de transformações e desbravadores no ativo. Isso reduz o tamanho do arquivo removendo informações obsoletas e permite visualizar a imagem com precisão.