Exporter des assets pour Android avec Sketch

Bien le bonjour intrépides lecteurs, aujourd’hui je vais vous faire part d’un plugin pour Sketch (que je présente depuis quelques temps sur ce blog).

Baptisé Sketch Android Assets, ce plugin vous permettra en 2 clics d’exporter tous les assets dont un développeur pourrait avoir besoin pour créer une application Android sur tous les appareils du marché.

Installation

Face à la complexité de l’utilisation du plugin, je me suis dit qu’une partie bonus dans cet article ne serait pas de trop, voyons comment nous pourrions installer ce plugin de façon simple et un peu plus user-friendly. Si jamais vous voulez utiliser un multitude de plugins, les mettre à jour ou même les rechercher sans avoir à passer par votre navigateur, il existe un outil gratuit appelé Sketch Toolbox. Une fois installé recherchons “Sketch Android Assets”. 3 solutions s’offrent à nous, en cas de doute nous pouvons aller vérifier le fonctionnement sur GitHub puis cliquer sur Install. Le voilà maintenant disponible dans Sketch !

C’est parti pour l’export

On a souvent eu l’occasion de devoir exporter des assets de tailles différentes pour les écrans rétina lors de création Web par exemple. Pour les appareils Android, le challenge est tout autre, il existe une multitude de tailles différentes :

• drawable-ldpi (120 dpi, Low density screen)
• drawable-mdpi (160 dpi, Medium density screen)
• drawable-hdpi (240 dpi, High density screen)
• drawable-xhdpi (320 dpi, Extra-high density screen)
• drawable-xxhdpi (480 dpi, Extra-extra-high density screen)
• drawable-xxxhdpi (640 dpi, Extra-extra-extra-high density screen)

Même si Sketch nous permet de définir plusieurs tailles d’export, il faudra le faire pour tous nos artboards (que l’on peut bien sûr sélectionner en même temps). Il nous permet aussi de définir un suffixe à tous nos fichiers, ce qui nous permettrait de les sélectionner par résolution. En fait, tout cela est pratique dans certaines conditions mais pas vraiment pour Android. Avec cette solution, il faudrait replacer chacun des assets dans des dossiers différents selon la résolution et de plus j’estime que c’est plus simple d’avoir un même nom de fichier malgré sa taille. Après tout, l’image représentée est la même. Voici à quoi doit ressembler l’arborescence des fichiers d’assets pour notre application :

- assets - drawable-ldpi - drawable-mdpi - drawable-hdpi - drawable-xhdpi - drawable-xxhdpi - drawable-xxxhdpi

Dans chacun de ces dossiers nous aurons donc les mêmes images avec des tailles différentes, et c’est là toute la magie du plugin que l’on découvre aujourd’hui. Une fois nos artboards créés, nous prendrons soin de les nommer correctement pour définir les noms des fichiers générés (n’oubliez pas de bannir les “-“ qui ne sont pas acceptés par les conventions d’Android), puis on sélectionne tous ceux que nous souhaitons exporter. Ensuite nous cliquons sur Plugins > Sketch Android Assets > Generate Android Assets ou utilisons le raccourci Shift + CMD + A afin d’ouvrir une modale qui nous permet de sélectionner la résolution courante et le dossier de destination des assets générés. Les différents dossiers sus-nommés seront générés avec, à l’intérieur, chacun de nos assets. C’est tout ce que nous aurons à faire.

Avec un tel outil je vous laisse imaginer qu’une modification d’un quelconque visuel ne prend pas plus de quelques minutes. Sur la durée d’un projet c’est à coup sûr un temps non négligeable qui sera gagné, et dont vous pourrez profiter pour peaufiner vos visuels. J’espère que cet article vous a plu et si tel est le cas n’hésitez pas à le partager autour de vous.

L’équipe Synbioz.

Libres d’être ensemble.