Comprendre les Options d'Exportation de Sketch

Exporter des contenus de votre design est une tâche courante. Vous commencez par créer et préparer vos éléments graphiques, puis vous choisissez le format d'exportation, vous réglez ses propriétés et voilà. Les outils d'exportation de Sketch 3 sont parmi ses meilleures fonctionnalités. En fait, Sketch 3 nous aide à exporter du contenu de tant de manières différentes que je suis sûr que vous allez améliorer votre workflow en lisant cet article.

Nous allons utiliser quelques exemples basiques pour comprendre toutes les options d'export disponibles dans Sketch 3 et quelle méthode correspondra le mieux à vos besoins.

À noter: certaines des fonctionnalités décrites ici n'existent pas dans les versions antérieures de Sketch.

1. Les bases de l'exportation

Étape 1

Ouvrez Sketch. Nous avons besoin d'un objet sur notre canevas, créons une forme vectorielle. Allez sur Insert > Shape et sélectionnez l'un des outils disponibles. Pour cet exemple, je vais créer un carré de 300x300px en utilisant Insert > Shape > Rectangle (R). 

Rappelez-vous que vous pouvez dessiner un rectangle au hasard, puis ajuster ses propriétés dans le panneau Inspecteur à droite.

Étape 2

Maintenant, rendez-vous sur le menu File. Vous devriez voir que l'option Export est désormais active. Vous pouvez également cliquer l'icône Export dans la barre d'outils. Après avoir cliqué l'icône, vous remarquerez quelques changement dans le canevas, dans la liste des calques et dans l'inspecteur. Que s'est-il passé ?

Dans le panneau des calques, Sketch a automatiquement créé une nouvelle Slice avec les mêmes dimensions et position que l'objet présent sur le canevas. Les Slices sont des calques particuliers qui nous permettent d'exporter des parties du canevas vers des fichiers. Tout le contenu se trouvant à l'intérieur de la Slice sera exporté vers ce fichier. Vous pouvez utiliser autant de Slices que vous le voulez, en utilisant l'option Insert > Slice (S). Chacune exportera vers un fichier différent.

L'icône "couteau" et le contour pointillé de l'icône indiquent que le calque en question est une Slice. Vous pouvez modifier sa position, sa largeur et sa hauteur comme pour tout objet dans Sketch. Vous pouvez le faire directement sur le canevas ou en utilisant le panneau inspecteur.

Le Panneau Inspecteur

Puisque nous parlons de l'inspecteur, jetons-y un coup d'oeil avec notre Slice sélectionnée. Comme déjà mentionné, nous pouvons modifier ses dimensions et position. Mais nous pouvons aussi voir quelques nouvelles options :

• Trim Transparent Pixels. Cette option nous permet d'éliminer les zones transparentes à l'intérieur d'une Slice. Par exemple, admettons que vous ayez une icône de 32x32px à l'intérieur d'une Slice de 80x80px. En cochant cette option, votre export sera automatiquement un fichier de 32x32px sans que vous ayez à redimensionner votre Slice. Sketch a supprimé tout les pixels transparents qui entouraient votre icône.
• Export Group Contents Only. Cette option est utile lorsque vous créez des designs complexes qui se chevauchent. Nous ne pouvons pas le faire sur notre exemple simple mais nous le verrons dans le prochain exemple.
• L'option Background Color nous permet de choisir une couleur de background pour notre Slice. Tous les pixels transparents sont remplacés par cette couleur dans les parties exportées.

Au-dessous du label Export nous trouvons différents menus déroulants et champs de saisie :

• Size nous permet d'ajouter un facteur multiplicateur si nous avons besoin de redimensionner le contenu à exporter. Sketch 3 propose quelques options prédéfinies et quelques variables.
• Saisissez quelque chose dans le champ Suffix si vous voulez compléter le nom du fichier. Par exemple vous pourriez ajouter le suffixe @2x pour les images à résolution double.
• Sélectionnez le format de fichier avec le menu déroulant Format. Sketch supporte les formats d'exportation .png, .jpg, .tiff, .pdf, .eps et .svg. 

Par défaut les options d'exportation de Sketch sont définies comme Size=1x (100% de la taille originale), pas de suffixes et format .png. Vous pouvez les laisser telles quelles ou jouer avec si vous voulez.

Astuce : Sketch supporte l'exportation de tailles arbitraires, donc vous pouvez faire des exports de 100x ou de 1.75x sans souci. Vous pouvez également entrer les valeurs en pixels suivies de w pour la largeur (width) et h pour la hauteur afin d'exporter des contenus à n'importe quelle dimension. Par exemple, si vous entrez 60w dans l'outil export, Sketch exportera votre contenu avec une largeur de 60px et redimensionnera la hauteur en proportion. De la même manière, si vous tapez 60 suivi de h, Sketch exportera votre contenu avec une hauteur de 60px et redimensionnera la largeur en proportion.

Étape 3

Maintenant, tout en gardant votre Slice sélectionnée, regardez en bas du panneau inspecteur. Vous verrez un grand bouton et un autre plus petit à côté. Le premier vous indique l'étape finale de l'exportation. Le second vous donne quelques options supplémentaires si vous voulez envoyer votre fichier vers d'autres applications. Cliquez sur les boutons pour voir ce qui se passe lorsque le processus d'exportation s'achève.

Astuce : Vous pouvez renommer votre Slice pour assigner automatiquement un nom de fichier à votre contenu exporté. Un bon truc est d'inclure un slash / à l'intérieur du nom, ce qui indique à Sketch qu'il doit créer un sous-dossier pour vous. Voici l'illustration en images :

2. Spécifiez ce que vous voulez exporter

Étape 1

Ouvrez le fichier export_what_you_want attaché à ce tutoriel (bouton Download Attachment en haut de la page à droite.)

À noter : vous aurez besoin de Sketch 3 pour l'ouvrir mais si vous utilisez une version plus ancienne, pas d'inquiétude. Il ne devrait pas être compliqué de reproduire le contenu vous-même, cependant n'oubliez pas que certaines options pourraient ne pas être disponibles dans votre version. Voici à quoi ressemble notre fichier :

Comme vous pouvez le voir, il y a quelques objets groupés, un artboard et d'autres éléments placés directement sur le canevas, en dehors de l'artboard.

Étape 2

Allez sur File > Export. Ou bien cliquez sur l'icône Export dans la barre d'outils.

Quand vous cliquez sur Export pour la première fois, Sketch part de l'hypothèse que vous voulez exporter vos artboards et les rend exportable automatiquement, tout en excluant les objets situés en dehors des artboards. Vous remarquerez également qu'il n'y a pas de calque Slice disponible dans la liste des calques.

Dans Sketch 3, les artboards peuvent être exportés sans ajouter de Slices. Si vous intégrez de nouveaux artboards à votre document, ajoutez simplement une dimension d'exportation à ces artboards en cliquant sur l'icône + à côté du label Export dans la panneau inspecteur, tout en gardant les artboards sélectionnés. La prochaine fois que vous cliquerez sur l'icône Export, Sketch inclura également ces artboards.

Étape 3

Revenons à notre fichier. Nous allons maintenant exporter un calque unique. Sélectionnez le carré bleu directement ou avec la liste des calques. Regardez en bas du panneau inspecteur : vous verrez une nouvelle option Make Exportable. Cliquez dessus.

L'inspecteur se met à jour pour vous montrer que vous allez exporter une image à 1x (la dimension d'origine) sans suffixe et, par défaut, en format .png.

Regardez la liste des calques et notez que l'icône du carré bleu contient maintenant une petite icône "couteau". Cela indique qu'elle est exportable. La prochaine fois que vous irez sur File > Export ou que vous cliquerez sur Export depuis la barre d'outils, ce calque exportable apparaîtra parmi les Slices.

Étape 4

Concentrons-nous maintenant sur le carré violet. Cette fois-ci, nous n'allons pas utiliser l'option Make Exportable mais nous allons créer automatiquement une Slice.

Allez sur Insert > Slice. Remarquez comment le curseur change lorsque vous le déplacez au-dessus des objets du canevas. Vous vous rappelez l'icône "couteau" ? Cliquez sur le carré violet. Une nouvelle Slice apparaît avec la même position et les mêmes dimensions !

Astuce : En suivant la même méthode, vous pouvez créer des Slices pour des groupes entiers. Et pour les Slices individuelles à l'intérieur d'un groupe, utilisez la touche Command lorsque vous survolez l'objet que vous voulez "slicer".

Étape 5

Ok, nous avons utilisé les Slices et l'option Make Exportable. Nous avons déjà vu ce qui se passe lorsque nous avons des artboards... mais nous n'avons pas encore vu ce qui se passe avec l'option Export Group Contents Only !

Allez sur Insert > Slice et déplacez le curseur au-dessus des carrés orange et vert, ceux qui sont déjà groupés. Cliquez dessus. Vous venez de créer une nouvelle Slice pour le groupe.

Étape 6

Déplacez le calque Slice à l'intérieur du groupe orange + green.

Si vous regardez l'inspecteur avec votre Slice sélectionnée, vous verrez que l'option Export Group Contents Only peut maintenant être sélectionnée. Mais ne la cochez pas encore !

À ce point de votre process, il peut s'avérer utile de vérifier l'image en faisant une prévisualisation du contenu qui sera inclu dans votre fichier.

Étape 7

Cochez l'option Export Group Contents Only.

Vous voyez la différence ? L'ellipse rouge a été supprimée de la prévisualisation.

Lorsque Export Group Contents Only est coché, notre Slice exporte uniquement les calques compris dans son groupe. Tout ce qui est en dehors du groupe ou derrière le groupe est éliminé. C'est une option très utile lorsque votre design est complexe, avec de nombreux objets qui se chevauchent !

Astuce : si vous avez beaucoup de Slices dans votre liste de calques, et que vous ne voulez pas être gênés, vous pouvez les faire disparaître temporairement en utilisant le petit bouton "couteau" tout en bas de la liste des calques.

Comme nous l'avons montré, il existe de nombreuses façons d'exporter du contenu. Laquelle choisir ? Eh bien cela dépend de vos besoins. Par exemple, l'option Make Exportable est très utile pour exporter des icônes et des calques uniques. Je recommanderais de créer des Slices ou des artboards lorsque vous exportez un document entier (mais ce n'est qu'une suggestion).

3. Exports multiples en une seule fois

Une des fonctionnalités d'export les plus intéressantes de Sketch 3 est la possibilité d'exporter des images multiples en une seule fois. Je ne veux pas dire par là que vous pouvez exporter différentes images de différentes Slices ou artboards (bien que ce soit possible), mais que vous pouvez exporter différentes versions simultanément depuis un calque ou une Slice.

Étape 1

Ajoutez une Slice depuis le carré turquoise, ou bien rendez-le exportable avec le panneau inspecteur. Quelle que soit l'approche choisie, vous devriez voir apparaître de nouveaux réglages d'export avec leurs valeurs par défaut dans le panneau inspecteur.

Étape 2

Cliquez sur l'icône + juste au-dessus du menu déroulant Format. Vous venez de dire à Sketch que vous voulez deux fichiers d'exportation différents à partir du même calque ! Cliquez sur l'icône autant de fois que vous le voulez, pour obtenir autant de dimensions ou de formats que nécessaire.

Vous pensez peut-être que nous avons vu maintenant tout ce qu'il y avait à voir concernant les options d'exportation dans Sketch, mais ce n'est pas fini ! Voici quelques astuces supplémentaires :

5. Exportation directe

Si vous cliquez/déplacez un calque de la liste vers votre bureau, ou vers n'importe quelle appli, celui-ci sera automatiquement exporté pour vous en format .png. Pressez la touche option (⌥) pour changer le format en PDF lorsque vous déplacez le calque.

6. Sketch Generator & Sketch Commands

Nous avons parlé jusqu'ici des fonctionnalités natives de Sketch, mais il y a une communauté très active qui développe régulièrement des plug-ins. Sketch Generator, par exemple, renouvelle complètement la façon d'exporter le contenu avec Sketch. Vous devriez jeter un coup d'oeil à ce plug-in, en particulier si vous avez déjà utilisé la fonctionnalité Adobe Generator de Photoshop CC.

Sketch Commands est un ensemble de scripts pour Sketch, certains en relation avec les tâches d'exportation. C'est une extension que je vous recommande.

Conclusion

J'espère que tout ce que nous avons vu dans ce tutoriel vous aura donné une idée plus claire de toutes les options offertes par Sketch 3 pour exporter du contenu. Si vous avez des questions à ce sujet, ou sur Sketch en général, n'hésitez pas à laisser un commentaire, je serai content de vous aider !