Un plugin Sketch pour importer du contenu depuis le presse-papier

Beaucoup de plugins Sketch pour l’im­port de contenu (Craft, Data Populator…) sont pensés pour des sources de données non modi­fiables (banque d’images, noms de pays…), ou pour des données complexes à synchro­niser avec des maquettes graphiques abou­ties. Suivant les plugins, ça implique de renommer des calques, d’avoir un fichier de données en TXT voire en JSON… bref des procé­dures un peu lourdes.

Mon cas d’usage est beau­coup plus simple : le plus souvent, je veux rapi­de­ment copier-coller une liste de textes depuis un tableau ou un mail, les coller dans une suite de calques. Et c’est tout.

Qu’à cela ne tienne, j’ai créé un plugin pour Sketch.


Lien de télé­char­ge­ment


Comment l’uti­liser ?

Copiez du texte, collez-le en ayant sélec­tionné plusieurs calques ou symboles ; et voilà. Si le symbole a plusieurs surcharges, le plugin utili­sera la première.

Même pour des cas plus complexes (par exemple peupler un tableau), je trouve plus simple de répéter cette méthode autant de fois qu’il y a de colonnes que, mettons, de s’embêter avec du JSON.

Comme d’ha­bi­tude, rapports de bug et retours sont les bien­venus.

3 fonctions d’Invision qui mériteraient d’être plus connues

Design system, mood­board, créa­tion de maquette avec Studio… Invision est devenue une plate­forme complète. Voici pour­tant trois fonc­tions que vous avez peut-être manqué.

Visite guidée

Quoi : Guide le visi­teur à travers une suite de commen­taires. Cliquer sur Suivant l’emmène au prochain commen­taire, même dans une autre page.

Pourquoi : Le visi­teur découvre la maquette de manière contrôlée, avec des expli­ca­tions en contexte. Parfait pour les clients qui veulent voir la maquette avant une réunion et qui ne liraient jamais un mail d’ar­gu­men­taire.

Comment : Ajouter un commen­taire et changer son type en cliquant en haut à gauche du panneau (cf. screen­shot).

ajout d'une étape de visite guidée

Export local

Quoi : exporter vos maquettes en version HTML. Conserve les inter­ac­tions.

Pourquoi : Pratique pour les présen­ta­tions ou tests utili­sa­teur dans un endroit sans réseau, ou pour faire un backup.

Pour y accéder : accueil du projet > points de suspen­sion à droite de la barre de menu > Download proto­type > choisir ZIP.

Démonstration :

Démonstration d'accès à la fonction d'export

Gestion de projet

Vite ! A quoi sert le rond bleu en bas en à droite quand vous consultez une maquette ?

Screenshot de la barre d'outils en bas de l'écran quand on visualise une maquette dans Invision

C’est assez discret mais cela corres­pond au statut de l’écran. Invision possède en effet un système assez complet de gestion de projet. De base cela permet d’as­si­gner un statut à une maquette (en attente, en cours, validé, etc.) et de changer de changer en chan­geant la maquette de colonne.

S’y ajoutent des fonc­tions plus avan­cées. on peut notam­ment asso­cier échéance, personne et tâches à chaque maquette.

Screenshot des colonnes de statut de maquettes dans Invision

Plus de détails ici

16 extensions Sketch pour aider le designer UX

Pour les desi­gners UX qui travaillent sur Sketch, voici des plugins utiles pour faire des wire­frames ou des wire­flows.

Diagrammes

Userflows : sélec­tionner un calque, un plan de travail, générez une flèche et hop ça fait un wire­flow. Il peut être actua­lisé à chaque dépla­ce­ment de plan de travail.

Connection Flow Arrows : pareil mais vers n’im­porte quel calque. Et avec pas mal de para­mètres utiles. Le détail qui fait la diffé­rence : des pointes de flèche orien­tées par rapport au trait, pas à l’objet cible.

Exemple de flèches avec le plugin Connection flow arrows
Connection Flow Arrows

Plans de travail

Artboard Titles : vous exportez votre grand wire­flow et là paf, les titres d’écrans sont minus­cules et illi­sibles. Pas grave : ce plugin ajoute au dessus de chaque plan de travail un calque préci­sant son nom.

Deux plugins d’or­ga­ni­sa­tion auto­ma­ti­que­ment des plans de travail : Artboard Manager et Artboard Tools. Le premier fonc­tionne en continu et a plus d’op­tions de style. Le second doit être actionné manuel­le­ment et a plus d’op­tions de dispo­si­tion.

Cliquer sur l’ani­ma­tion pour l’ar­rêter

Exemple d'arrangement automatique des blocs avec Artboard manager
Artboard Manager

Composants

Sketch Repeat : Duplique un objet à la même posi­tion dans tous les plans de travail. Pratique pour les compo­sants trans­verses.

Sketch Material : générer faci­le­ment des compo­sants Material, même complexes comme des tableaux.

Générateur de carte

Générateur de graphique, avec des données réelles ou aléa­toires.

Anima Autolayout propose plusieurs fonc­tions pour gérer des dimen­sions dyna­miques. La gestion auto­ma­tique du padding peut faci­liter la vie quand on veut poser rapi­de­ment les blocs d’un wire­frame.

Contenu

Automate Sketch : plein de commandes utiles. Ma préférée : Décomposer un calque de texte en plusieurs, en prenant le retour à la ligne comme sépa­ra­teur. Pratique quand on doit reco­pier plein de contenu depuis un brief.

Accessibilité des couleurs avec Stark : test de contraste, simu­la­tions de dalto­nisme et sugges­tions de couleur. Un autre plugin permet de tester une palette de couleurs entière.

Chercher & remplacer

Décompte de charac­tère

Lorem Ipsum

Un plugin de typographie française pour Sketch

Résumé : j’ai créé un plugin Sketch pour respecter auto­ma­ti­que­ment les règles typo, espaces insé­cables et bien plus.

icone du plugin
Typographie frenchy

Tout a commencé par une inter­face comme celle-ci :

screenshot de boite de dialogue

… Dans le titre, un magni­fique point d’ex­cla­ma­tion seul sur sa ligne, problème récur­rent dans une appli­ca­tion mobile sur laquelle je travaillais. Je me suis demandé comment résoudre ce problème, sans demander aux déve­lop­peurs de mémo­riser chaque règle et d’in­sérer systé­ma­ti­que­ment des carac­tères spéciaux à la main. Ces carac­tères, ce sont les espaces insé­cables, qui collent la ponc­tua­tion au signe précé­dent. Sur le web ça implique de taper des choses sympa­thiques comme   ou d’uti­liser d’obs­curs raccourcis clavier.

Une meilleure alter­na­tive est d’au­to­ma­tiser le problème, soit en début de chaine (comme le fait Word), soit en fin de chaine (comme ce plugin pour WordPress ou comme le fait nati­ve­ment SPIP). Vu qu’il faudrait attendre long­temps que chaque système ait son plugin de typo, j’ai choisi d’ex­plorer la première piste en créant un plugin pour Sketch. Ca ne règle pas le problème du contenu saisi direc­te­ment dans l’in­ter­face de contri­bu­tion des diffé­rents CMS, mais, de même qu’un déve­lop­peur peut copier-coller un code RGB depuis Zeplin ou Invision, l’idée est que des gens pour­raient copier et coller du texte d’in­ter­face, par exemple celui d’une barre de menu. On est d’ac­cord que c’est opti­miste : si demain ce texte change, il y a peu de chance qu’il soit ressaisi d’abord dans Sketch.

Mais c’est une voie inté­res­sante. Après tout, Invision, Figma ou Framer génèrent des maquettes de plus en plus compa­tibles avec du HTML/CSS. Cette proxi­mité entre concep­tion et réali­sa­tion pour­rait aussi s’ap­pli­quer au texte.

Dans un tout autre angle, voir aussi Kopie, outil de rédac­tion colla­bo­ra­tive synchro­nisée avec Sketch.

Ajoutons que le plugin apporte aussi quelques embel­lis­se­ments direc­te­ment dans les maquettes, indé­pen­dam­ment de ces ques­tions de work­flow :

  • De " à «
  • De double tiret (--) à tiret demi-quadratin ( – )
  • Certaines frac­tions (½, ⅓, ¼ )
  • Suffixes ordi­naux : de 2e à 2ᵉ
  • Points de suspen­sion…
  • De N° à №

Bref. Plugin de typo­gra­phie auto­ma­tique. C’était fun à faire. Retours bien­venus.

Gestion des styles dans Axure

Axure n’est pas un outil de maquet­tage à haute fidé­lité, pour­tant il est parfois inté­res­sant de modi­fier les styles par défaut des widgets ou de disposer d’une biblio­thèque de styles. Cela évite par exemple de sélec­tionner cinquante fois un niveau de gris et se retrouver avec une palette de gris pas homo­gène. Voici comment faire.

Axure - Style par défaut

Axure Créer un style réutilisable

La gestion des styles est propre à un fichier Axure. Cela dit, on peut importer les styles depuis un fichier exis­tant, en allant dans Fichier > Importer. Là, avancez dans l’as­sis­tant jusqu’à la fenêtre d’im­por­ta­tion de styles de widgets puis sélec­tionnez ceux qui vous inté­ressent.

Axure - Import styles