Créer une font avec sketch

Publié il y a presque 3 ans
Victor Darras
Votre formateur
Victor Darras

Mordu de l'Internet dès mon plus jeune âge, j'ai vite pris goût à l'image et tout particulièrement au webdesign. Après un BTS de Design de communication en 2011, j'ai commencé à m'intéresser plus précisément à l'expérience utilisateur au coeur du processus créatif.

De Sketch à SASS en passant par jQuery, j'ai toujours aimé découvrir et explorer de nouvelles solutions, de nouvelles technologies et garder une certaine polyvalence.

Où nous retrouver ?

Catégories : UI / UX

Dans cette vidéo nous allons découvrir comment créer une font d'icône en svg grâce à Sketch et une ligne de console.

Nous allons commencer par installer les différents outils dont nous aurons besoin : Node.js, Sketchtool et le plugin Symbols-for-sketch. Ensuite nous dessinerons quelques icônes vectorielles dans sketch puis nous créerons une font d'icone à partir du même fichier.

Afficher le transcript complet de la vidéo

Bonjour à tous, dans la vidéo d'aujourd'hui nous allons découvrir comment créer une font d'icône en svg grâce à Sketch (que j'ai présenté dans une autre vidéo hackademy) et une ligne de console.

Nous allons commencer par installer les différents outils dont nous aurons besoin. Node.js, Sketchtool et le plugin Symbols-for-sketch. Ensuite nous dessinerons quelques icônes vectorielles dans sketch puis nous créerons une font d'icone à partir du même fichier.

SketchTool

Je pars du principe que vous utilisez déjà Sketch, ou au moins que vous l'avez déjà installé sur votre machine. Téléchargeons SketchTool, un outil en ligne de commande qui permet d'exporter des pages ou des slices d'un fichier .sketch, c'est lui qui nous permettra de faire communiquer Sketch et Node.js. On récupère deux fichiers après extraction :

  • sketchtool
  • sketchtool resources.bundle Déplacons-les dans le dossier /usr/local/bin/ afin de les rendre accessible à partir de la ligne de commande.

Node & Gulp

Afin d'utiliser Gulp.js nous aurons besoin de Node.js qui lancera du javascript sur notre machine. Commencons par le télécharger, et à l'installer. Node.js nous permet d'utiliser un gestionnaire de paquet appelé NPM (pour Node Package Manager), qui nous servira, entre autre, à installer Gulp. Une fois Node installé, nous tapons dans la console :

sudo npm install -g gulp

(l'argument -g rend Gulp accessible au niveau système)

Symbols for Sketch

Nous pouvons maitenant télécharger le repo symbols-for-sketch qui contient :

  • 2 fichiers "template" pour Sketch qui nous donnerons la base pour dessiner correctement nous icônes avant l'export. et grâce à son fichier de config package.json les paquets suivant :
  • le plugin Gulp-sketch qui permet simplement de gérer SketchTool avec Gulp.
  • le plugin Gulp-iconfont qui permet de générer des fichiers de font à partir de différents éléments svg.

Plaçons-nous dans le dossier cloné avec le terminal :

$ cd /the/repo/path/symbols-for-sketch
// et installons les dépendances
$ sudo npm install

Dessinons quelques icônes.

Il est maintenant temps d'ouvrir l'un des 2 fichiers sketch. Seule la taille par défaut des icônes change (14 ou 16px) sinon les 2 fichiers contiennent des artboards contenant chacun une icône vectorielle différente. Vous pouvez à tous moment ajouter ou retirer des artboards pour ajouter ou retirer des icônes mais aussi les renommer pour modifier le nom de l'icone (dans sketch comme dans votre css). Je vous conseille de définir le code qui sera utilisé par CSS pour selectionner le caractère dans la font d'icône afin d'être sûr de ne pas avoir à modifier certain éléments de votre intégration à chaques modifications votre fichier sketch. Dans le cas contraire, les codes d'icône seront regénérés à chaque export.

icon_name => uF712-icon_name

Gulp

Il est maintenant temps de générer notre font d'icône. Retournons dans le terminal et lancons la commande suivante:

$ gulp symbols

Dans le dossier /dist du dossier /symbols-for-sketch cloné précédemment nous trouvons maitenant 4 fichiers de font et un fichier CSS qui nous permettrons d'ajouter des icônes rapidement à notre intégration.

Voyons un peu le fichier de configuration, le gulpfile avec 3 points importants :

  • "fontName" comme son nom l'indique permet de mofier le nom de la font générée.
  • "template" permet de définir quel type de fichier CSS accompagnera vos fonts et comment y faire référence. J'utilise plutot le template FontAwesome par habitude, mais les 2 sont aussi bien.
  • "gulp.src" vous permet d'appeler un fichier sketch en particulier, parmis les 2 de bases ou une autre fichier crée par vos soins qui nous permet de garder des fichiers propres et relatifs à un projet.

Les autres parties du fichier permettent une configuration plus précise mais nous en auront rarement besoin.

Pour vous expliquer plus en détail, je vais ouvrir un fichier Sketch avec des icônes déjà créees. Je remplace le nom du fichier dans mon gulpfile puis je relance la tâche Gulp. Je peux maintenant obtenir un aperçu de ma font d'icône dans le dossier dist en ouvrant la page sample.html.

The end

C'est tout pour aujourd'hui, n'hésitez pas à tester différentes configurations et à créer des centaines d'icônes. J'espère que cette vidéo vous a plu et si c'est le cas n'hésitez pas à la partager autour de vous.

A la prochaine.

 

 

Links :