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

Pourquoi la communauté WordPress a besoin de plus de designers

« Des idées, tout le monde en a. Souvent les mêmes. Ce qu’il faut, c’est savoir s’en servir » – Coluche.

Et à ce niveau là, la communauté WordPress est plutôt prolifique, au vu du nombre de plugins qui sortent régulièrement pour la plateforme.

La facilité de créer des plugins pour WordPress y est aussi pour quelque chose. Beaucoup de développeurs se lancent alors dans l’aventure et créent leur petit plugin pour améliorer / modifier / ajouter des choses à WordPress. Continuer la lecture de « Pourquoi la communauté WordPress a besoin de plus de designers »

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.