Go to Hackademy website

Exporter des assets pour Android avec Sketch

Victor Darras

Posté par Victor Darras dans les catégories design

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.

Articles connexes

Création d'un menu en accordéon avec CSS

04/06/2015

Bonjour à tous, l’article d’aujourd’hui , dans la lignée de celui concernant la barre de chargement en CSS portera sur la création d’un élément bien connu des intégrateurs, en particulier sur les...

Création d'une barre de chargement avec CSS

28/01/2015

Bonjour à tous, aujourd’hui je vais vous présenter une petite astuce pour mettre en place une barre de chargement avec un tooltip qui affichera de façon élégante où elle en est, le tout avec quelques...

Client, designer, développeur: un workflow qui fonctionne

12/03/2014

Arrivé depuis maintenant plus d’un an chez Synbioz, j’ai eu l’occasion de travailler sur plusieurs projets avec plusieurs développeurs. En tant que webdesigner et intégrateur j’ai la possibilité de...

Une carte de France en SVG

06/02/2014

Bonjour à vous, aujourd’hui nous allons mettre à disposition une ressource bien pratique pour celles et ceux qui auraient besoin d’une carte pour leur application / site. Nous voyons de plus en plus...