Accéder à / Synchroniser ses templates Sketch

Une des fonctionnalités bien pratiques de Sketch est de pouvoir utiliser un fichier comme template.

Particulièrement utile pour une équipe de designers travaillants sur le même produit, ce système de template permet par exemple de créer un design system et de le partager / utiliser facilement.

Fonctionnement des templates Sketch

Le fonctionnement des templates est très simple.
On place un fichier .sketch dans le répertoire Templates, et ce dernier sera alors accessible depuis le menu « File > New From Template »

Voyons déjà comme accéder à ce dossier de templates.

Emplacement du répertoire de templates de Sketch.

Ça ne s’invente pas et il n’est pas particulièrement accessible en lui même.
Il est situé sur votre disque à ce chemin :

Histoire de les avoir à disposition et facilement accessibles, je vous conseille de faire un lien vers ce dossier dans le répertoire de votre choix.

Par exemple, votre répertoire utilisateur, ou même, pour le partager / synchroniser avec plusieurs personnes, dans un répertoire Dropbox par exemple.

Accéder au dossier Templates dans votre dossier utilisateur

Rendez vous dans le terminal, et entrez ces instructions.

  1. Allez dans le répertoire de Sketch
  2. Déplacez votre dossier template (normalement vide) dans votre dossier utilisateur. (j’ai choisi de le nommer Sketch-Templates)
  3. Faites un lien symbolique pour que Sketch puisse utiliser ce répertoire comme dossier « Templates »

    Voilà, c’est fini, maintenant déposez dans ce dossier vos fichiers Sketchs vous servant de Templates.

    Vous pouvez y conserver une hiérarchie aussi, Sketch cherchera les fichiers .sketch dans ce dossier de manière récursive.

Remarquez aussi que vous pouvez accéder directement au répertoire depuis le menu maintenant ;)

Si vous souhaitez le déplacer dans le répertoire Dropbox, modifiez le chemin de l’étape 2. et 3. pour pointer sur votre répertoire Dropbox (typiquement ~/Dropbox/Sketch-Templates/)

 

Synchroniser ses plugins Sketch

Sketch est une app qu’il n’est plus vraiment nécessaire de présenter. Une des possibilitées offertes par ce dernier en fait d’ailleurs sa principale force : le fait de pouvoir y ajouter des plugins et d’ainsi améliorer / ajouter des fonctions au logiciel.

Un problème apparait assez rapidement. Le nombre de plugins installés se multiplie assez vite et il devient difficile de les gérer et surtout de les synchroniser entre plusieurs machines.

Personnellement, j’utilise mon Hackintosh comme machine de travail principale, et mon Macbook Retina le reste du temps.
Avoir les mêmes plugins sur les 2 machines m’est plutôt important.

TLDR; Le Repo Github de mes Plugins

Utiliser Git / Github comme liste.

Conserver une liste ou se souvenir de ces derniers et d’où les télécharger peut s’avérer vite fastidieux et bancal. La majorité des plugins étants disponibles sur Github, je me suis demandé si il était possible de créer un Repo incluant tout les repos des plugins que j’utilise.

Il est tout à fait possible de créer un Repo et d’y mettre les plugins dedans, et de pusher le tout sur Github, mais il reste nécessaire de les mettre à jour à la main à chaque fois et surtout de ne pas oublier de push les modifs sur Github. Fastidieux.

Git Submodule

Après quelques recherches, j’ai découvert la fonction « git submodule » qui permet de créer un genre de « meta-repo », un repo contenant des liens vers d’autres repo.
Plus besoin de télécharger les plugins, les mettre dans son repo et de push sur Github.
Il suffit d’ajouter un nouveau « submodule » dans son repo et le tour est joué ! 

La seule opération alors à réaliser est de maintenir la liste des « submodules » et de « pull » les mises à jour régulièrement sur ses machines, le meta-repo permettant d’automatiquement récupérer les nouveaux fichiers et modifications des sub-repo.

Une solution collaborative

Cette solution est aussi très pratique dans une équipe de designers / front-end developpeurs. Cela permet d’utiliser tous les mêmes outils et maintenir une cohérence logicielle commune.

Je vous invite à découvrir mon Repo, et de le forker pour créer votre propre liste :)
J’y ai inclus un petit « How to » pour gérer tout ça simplement.

Sketch Plugins Repo by edenpulse

Sketch, ma sélection de plugins

J’avais déjà réalisé une sélection de plugins pour Sketch il y a pas si longtemps, mais Sketch à beaucoup évolué depuis et l’arrivée de nouveaux venus ainsi que mon expérience sur le logiciel font qu’un nouvel article est nécessaire !

Si il ne devait rester qu’un seul plugin pour Sketch ?

Craft by Invision Labs. Définitivement la meilleure chose que vous puissiez faire à votre workflow est d’utiliser ce meta plugin, regroupant beaucoup de fonctionnalités extrêmement utiles. Plutôt que tout vous détailler, je vous conseille de regarder cette vidéo :

Les fonctionnalités qui m’intéressent le plus personnellement sont la création d’inventaires de styles, qui permettent de vérifier la cohérence de votre design entre autres et les fonctions de duplication.

Find & Replace

findreplace

Définitivement pratique quand on a une erreur typo à changer, find and replace fait exactement ce que son nom indique, il vous permet de chercher et de remplacer du contenu simplement, sans en oublier.

FontFinder

fontfinder

Idéal pour maitriser les fonts utilisées et remplacer certaines en cas de changement, Font Finder va vous permettre de sélectionner certaines fonts très rapidement. Très pratique !

Sketch Iconfont

iconfont

Utiliser des fonticônes est très pratique, mais peut être vraiment embêtant par moment si l’on ne dispose pas d’une page comme ce que nous propose FontAwesome qui regroupe tout les caractères à copier / coller facilement. Sketch Iconfont vous permet d’insérer facilement les glyphes de vos fonticônes et propose encore quelques options pratiques comme les convertir en tracés.

Magic Mirror

magicmirror

Extrêmement pratique pour réaliser des mockups, présentations ou simplement manipuler des images,  Magic Mirror est un véritable couteau suisse qui apporte des fonctionnalités de perspective malheureusement absentes de Sketch.

Rename it

renameit

Si comme moi, vous organisez extrêmement bien vos calques, (hum hum) Rename it vous fera gagner beaucoup de temps en vous permettant de renommer des calques en masse. La principale utilité est la possibilité d’utiliser bon nombre de raccourcis de numération ou de nommage très facilement.

Sketch Mate

Sketch Mate permet d’ajouter beaucoup de raccourcis clavier pour aligner et organiser ses calques et artboards. Si vous utilisez beaucoup les raccourcis, ce plugin est fait pour vous !

Sketch Measure

export-html-measure

Votre développeur / intégrateur préféré est un peu fainéant ? Plus d’excuses pour lui, vous pouvez annoter directement vos maquettes avec Sketch Measure. Encore mieux, ce plugin vous générera un fichier HTML interactif où l’on pourra cliquer et voir tout les éléments et leurs mesures très rapidement. Un must-have.

Sketch Palettes

sketch-palettes

La gestion des palettes dans Sketch est loin d’être optimale, surtout pour les habitués des produits Adobe, qui peuvent exporter / importer et toujours conserver leurs palettes de couleurs préférées. Sketch Palette permet de combler ce vide. Ce plugin vous permettra d’importer / exporter vos palettes facilement.

Social Artboards

artboardssocial

Il n’y a rien de plus embêtant que de chercher les tailles des différents éléments de design des réseaux sociaux actuels. Ce petit plugin va vous permettre de créer des artboards directement aux tailles justes. Social Artboards est pratique si ce genre de missions vous est récurrent.

Content Generator

userpics

Générer automatiquement du contenu peut-être très pratique pour tester ses design d’interface avec des noms plus ou moins longs, des images de stock et ce genre d’éléments qui pourront amener un peu de réalisme dans vos maquettes.  Content Generator s’en chargera très bien.

Sketch, les plugins indispensables

L’un des principaux avantages de Sketch c’est la possibilité de créer des plugins pour étendre les possibilités de ce logiciel assez simplement. Et il faut dire qu’il y a le choix !

Je n’ai commencé à utiliser Sketch que récemment, mais j’ai trouvé les plugins suivants très intéressants, si vous en avez d’autres à me conseiller, n’hésitez pas à laisser un commentaire sous l’article ! Merci d’avance.

Installer des plugins Sketch

Il existe 2 manières d’installer des plugins, mais la plus simple à mon sens est d’utiliser ce petit logiciel bien pratique qu’est Sketch Toolbox. Ce dernier répertorie les plugins Sketch, et permet de les installer et désinstaller rapidement.

Sketch toolbox

Pour ceux qui souhaitent le faire de manière « traditionnelle » à la main. Voici le chemin d’accès où copier/coller les plugins.

plugins-library

Tout les plugins cités ci-après sont installables par Sketchtoolbox :)


Content generator sketch plugin

Ce plugin permet de générer du contenu factice rapidement et simplement, idéal pour générer des avatars, noms etc…
Une petite démo en vidéo pour apprécier complètement les possibilités offertes par ce plugin :

 

Plus d’infos ici : https://github.com/timuric/Content-generator-sketch-plugin


Sketch color contrast analyser

Un plugin Sketch qui calcule le contraste entre deux couleur de deux couches et les évaluent contre le WCAG . Le test peut passer AAA , AA ou échouer en raison d’un manque de contraste . Et même si vous ne devez pas répondre à ces exigences , cela pourrait vous aider à concevoir des designs au contenu accessible.

color-contrast-analyzer

Plus d’infos ici : https://github.com/getflourish/Sketch-Color-Contrast-Analyser


Sketch Mate

Ce plugin ajoute bon nombre de fonctionnalités et raccourcis claviers très utiles au designers d’apps et ajoute beaucoup de fonctionnalités de déplacement et d’agencements qui peuvent manquer quelques fois à Sketch.
Un must have, et une petite bombe de productivité une fois maitrisé.

Vous pouvez retrouver ses possibilités complètes ici :https://github.com/getflourish/Sketch-Mate


Sketch Style inventory

Qui n’a jamais eu envie de faciliter la vie de son développeur / intégrateur front-end ? Moi c’est certain ! Ce plugin va vous permettre de créer directement des styleguide depuis vos maquettes, répertorier les couleurs utilisées, les styles de textes, et tout mettre en forme joliment dans une planche séparée.

Il permet aussi d’exporter directement tout vos éléments, styles et symboles dans des dossiers séparés, les images en png, les couleurs en CSS…

sketch-style-inventory

Hormis le fait de simplifier largement la vie à votre développeur chéri, ce plugin vous permettra aussi de prendre rapidement du recul sur votre design, et ainsi l’améliorer, un must pour tout les designers qui aiment faciliter le travail d’équipe !

sketch-style-inventory-colors

Plus d’infos ici : https://github.com/getflourish/Sketch-Style-Inventory


Sync plugins

Des plugins c’est bien, les maintenir à jour, c’est mieux. Et ce petit plugin s’en occupe très bien, en mettant à jour vos plugins à partir de leur repo github.

Plus d’infos ici : https://github.com/nathco/Sync-Plugins


Day Player

Ce plugin peut-être très utile en phase de conception. Ce dernier vous permettra d’insérer une image de « placeholder » automatique et de la taille que vous souhaitez dans votre maquette. La liste des sources d’images d’origine est la suivante :

  • placehold.it
  • lorempixel.com
  • fillmurray.com
  • placecage.com
  • placekitten.com
  • unsplash.it

Plus d’infos ici : https://github.com/tylergaw/day-player


Sketch Dynamic button

Dynamic button permet, comme son nom l’indique de créer des boutons de taille dynamique, qui vont maintenir leur padding quel que soit le texte que vous y placez

Une petite démonstration en vidéo :

 

Plus d’infos ici : https://github.com/ddwht/sketch-dynamic-button


Sketch Measure

Voici un plugin qui vous permettra d’annoter et mesurer les divers éléments de votre maquette. Très utile toujours pour votre développeur chéri, qui n’aura pas besoin de passer du temps à mesurer vos marges, typos, et autres valeurs bizarres.

sketch-measure

 

Plus d’infos ici : https://github.com/utom/sketch-measure

Sketch : Modifier / ajouter des raccourcis

Je teste en ce moment Sketch et utilisateur de Photoshop depuis des années, j’ai l’habitude d’en utiliser les raccourcis. Notamment celui pour afficher / masquer la grille, que j’utilise énormément. J’ai donc cherché un moyen d’éditer les raccourcis, mais n’ai rien trouvé dans le logiciel pour les modifier. Après une petite recherche sur mon ami Google, j’ai trouvé que Sketch à implémenté les fonctions systèmes de création de raccourcis d’OSX. Ce qui est juste la meilleure méthode pour le faire ! Petite astuce pour en profiter :

OS X fournit un moyen pour les utilisateurs de définir leurs propres raccourcis spécifiques pour leurs éléments de menu. Vous pouvez également modifier les raccourcis existants si les raccourcis par défaut ne sont pas à votre goût.

  1. Allez dans Apple menu > Préférences système, et sélectionnez « Clavier », puis dans l’onglet « Raccourcis »
  2. Sélectionnez dans la colonne de droite « Raccourcis de l’application »
  3. Cliquez sur Ajouter (+).
  4. sketch-shortcuts
  5. Choisissez Sketch dans le menu déroulant.
  6. Tapez l’intitulé de la commande Sketch pour laquelle vous souhaitez (re)définir le raccourci dans le champ prévu à cet effet.
  7. sketch-shortcuts2
  8. Vous devez taper la commande exactement comme elle apparait dans le menu de Sketch avec les caractères spéciaux et ponctuations. Pour des éléments de menus qui apparaissent plusieurs fois (par exemple « aligner à gauche »), utilisez la syntaxe suivante  : Ex: « Arrange->Align Objects->Horizontally »  pour OSX 10.8+  ou « Arrange>Align Objects>Horizontally » for 10.7.
  9. Réalisez le raccourci en pressant les touches que vous souhaitez assigner à la commande, puis cliquez sur « Ajouter ».
  10. Redémarrez Sketch.