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

Brackets / Sublime Text / Atom, le comparatif

Les éditeurs de textes ont souvent leurs avantages et inconvénients, qui fait que l’on préfère l’un par rapport à l’autre. J’ai réalisé un rapide comparatif non exhaustif de ces 3 éditeurs très utilisés, sans plugins.

Continuer la lecture de « Brackets / Sublime Text / Atom, le comparatif »

Atom, les extensions !

Comme j’ai pu réaliser pour Brackets, voici une liste des extensions plutôt sympathiques que propose Atom.

Atom : la review

Liste vouée à évoluer.

  • Autocomplete-plus – Display possible completions in the editor while typing – Plus d’infos
  • Atom Color Highlight – Highlights color in files – Plus d’infos
  • Emmet – the essential tool for web developers – Plus d’infos
  • atom-beautify – Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, and SQL in Atom – Plus d’infos
  • Color Picker – Right click or press CMD-SHIFT-C/CTRL-ALT-C to open it. – Plus d’infos
  • Markdown writer – Make Atom a better Markdown editor for blogs. – Plus d’infos
  • Minimap – A preview of the full source code. – Plus d’infos
  • Seti-UI – A dark colored UI theme for Atom with custom file icons. – Plus d’infos
  • Seti-syntax – A subtle dark colored theme for Atom. – Plus d’infos
  • Markdown Preview – Open a rendered version of the Markdown in the current editor with ctrl-shift-m. – Plus d’infos
  • Vim Mode – Add vim modal control – Plus d’infos
  • Open Last Project – An Atom.io package that automatically reopens the last project and files you were working on. – Plus d’infos

Synchroniser son serveur web avec github

Github est un bon moyen de partager ses sources, et intégré dans un workflow, c’est un outil puissant et très efficace. C’est aussi un bon moyen de déployer ses fichiers et sources sur son serveur personnel.
Ne serait-il pas merveilleux si, à chaque fois que vous poussez des mises à jour vers GitHub, que ces nouveaux fichiers seraient automatiquement mis à jour sur votre serveur en direct?
Continuer la lecture de « Synchroniser son serveur web avec github »