Sketch, les 10 plugins indispensables

Après vous avoir confessé mon passage de Photoshop à Sketch, j’officialise mon affection pour ce logiciel en vous partageant ma sélection des meilleurs plugins Sketch. Enfin, ceux qui sont pour moi les meilleurs, car je les utilise au quotidien (ou presque…).
jose-aljovin-331066
Mon objectif pour cet UX Advent Calendar ? Ne garder que les 10 plugins qui changeront votre vie quotidienne ou plutôt celle de vos projets. J’espère que, comme moi, vous pourrez gagner un temps précieux.

N°1 : Craft – L’indispensable

Ce plugin est tout simplement INDISPENSABLE. C’est vraiment le 1er plugin à installer juste après le logiciel car il présente un grand nombre d’options. 

Avantages :

  • La synchronisation intégrée avec InVision pour exporter vos prototypes ;
  • Une bibliothèque qui permet de générer du contenu pour tout type de data (textes, photos….) très pratique quand vous travaillez sur des listes et par extension tout type de contenu récurrent ;
  • La fonctionnalité “Duplicate” qui permet d’automatiser la duplication de contenu ;
  • Un accès facilité à iStock et à GettyImages ;
  • Le prototypage.

1_RvlT2doDwUbmrd72UrzQFA
Télécharger le plugin

N°2 : Style generator + Shared text style – Tout est dans le style

Les librairies de style de textes ça vous parle ? Et bien grâce à ces deux plugins vous allez devenir l’as des styles de textes et des librairies.
Définissez votre style de texte. Puis, vous n’avez plus qu’a les appeler depuis votre bibliothèque. Vous gagnez du temps car vous n’avez plus besoin de formater chaque texte !
Définissez votre librairie de styles. Et Shared va vous permettre de partager votre librairie de style. Comment ? Grâce à l’export d’un petit fichier .Json contenant la bibliothèque de style. Dans le cas où vous travaillez en équipe, ce plugin révèle être une aide précieuse… (Un prochain article viendra sur le travail en équipe grâce à Sketch…)
1430116899style-inventory

Sketch Styles Generator Plugin


 

N°3 : Anima – Dynamiser vos artboards

C’est un de mes préféré (encore un). Ce plugin va dynamise vos Artboards. C’est à dire réactifs au responsive. Et ça, c’est vraiment amazing.
Prenons l’exemple de la conception d’un site responsive. Qui dit responsive dit différentes tailles d’écran à concevoir. “Don’t worry, be happy”, Anima vous permet de travailler sur un seul Artboard qui adapte votre design en fonction de la taille. Vraiment pratique !
Testé, approuvé et recommandé !

anima

Télécharger le plugin

N°4 : Compo – Intégrer des propriétés

Vous souhaitez intégrer des propriétés de composition dans la construction de vos composants graphiques ? Compo vous le permet !
Prenons un exemple : la conception des boutons. Désormais, vous pouvez enregistrer les valeurs d’espacements et donc conserver une cohérence sur l’ensemble des boutons de votre projet.
Avantage : la taille de l’élément s’adapte en fonction de la longueur du texte tout en conservant les paddings.
ex-3-dropdowns@2x-d4cc068
Télécharger le plugin 

N°5 : Pixel perfect – Le nettoyeur

Nettoyer la taille ou le positionnement des éléments au pixel près en deux clics. Nous autres designers, nous aimons le pixel perfect (il faut l’avouer). C’est un gage de qualité qui permet à l’équipe de développement de partir sur des valeurs entières.
readme-all
https://www.sketchapp.com/docs/other/pixel-precision/

N°6 : Icon drop / Icon font – Panel & picto

Ces deux plugins générent un panel contenant des bibliothèques de pictogrammes et permettent de les intégrer au format .svg dans vos designs.
Avantage : vous faire gagner tu temps en ne vous rendant plus sur des sites dédiés.
icondrop
https://github.com/keremciu/sketch-iconfont

N°7 : Sort me – Ordonner le désordre

Cela peut s’avérer très pratique lorsque vous travaillez sur un projet complexe avec un grand nombre d’Artboards. Il trie l’ensemble de vos Artboards par ordre alphabétique. Pratique avant d’exporter sur Invision, notamment !
1_D-_xDWYWo4v1wXLxXryYDA

N°8 : Translate – My taylor is rich

Comme son nom l’indique ce plugin permet de détecter la langue utilisée dans votre design et de générer le même artboard dans une autre langue. Plus besoin d’être designer polyglotte pour travailler à l’international.
demo
https://github.com/hoai265/Language-Sketch-Plugin

N°9 : Map generator – Où est Charlie ?

Là aussi tout est dans le nom donc je serai bref (pour une fois dirons certains) ! Si vous travaillez sur un projet avec une forte dimension cartographique ce petit plugin pourrait devenir votre meilleur ami.
Son avantage : vous permettre d’intégrer directement dans vos designs des cartes provenant de Google Maps. Vous pouvez également éditer(zoom, options) la carte importée. Et le tout en 3 clics !
basic
https://github.com/eddiesigner/sketch-map-generator

N°10 : Jira – Le plugin Agile

Si vous travaillez dans un environnement Agile, le terme Jira (outil de planification et de suivi de projet informatiques) ne vous aie certainement pas inconnu. Du coté de la publication Sketch fait très fort avec ce plugin. Il vous permet d’exporter vos Artboards directement dans vos User Stories JIRA. .
 
e2b43dd4-a0f3-4bf2-a058-5d4196058fb1
https://marketplace.atlassian.com/plugins/com.atlassian.sketch.jira-plugin/cloud/overview

Pour conclure…

Pour tout vous avouer, compte tenu du nombre de plugins existant sur le marché, n’en retenir que 10 n’a pas été simple. Pour aller plus loin vous pouvez consulter l’ensemble de tous ces plugins sur cette page.
Après la lecture de cet article, si vous hésitez encore à utiliser ce logiciel, je vous recommande de lire mes confessions d’UI Designer passé à Sketch.
 
Jérôme Fiorese, UX-Evangelist, @FioreseJerome