Note : Ce contenu a été créé avant que Fabernovel ne fasse partie du groupe EY, le 5 juillet 2022.

‍

C'est avec beaucoup d'enthousiasme que de plus en plus d'articles présentent l'Atomic Design, une méthode (la méthode !) de conception d'interfaces adaptée aux nouveaux usages, supports et exigences du numérique. FABERNOVEL n'est d'ailleurs pas en reste et pour découvrir autant la philosophie que les bases de l'atomic design, nous vous invitons à lire l'article à ce sujet d'Aurélien Trichereau, de FABERNOVEL CODE.

Nous commençons à voir apparaître, de la part de grands groupes, des exemples de design system postés avec leur documentation. Au demeurant, la méthode n'est pas théorisée depuis assez longtemps pour que les designers trouvent au sein des communautés tous les retours d'expérience utiles. Si l'on en comprend le concept et les avantages, le chemin est encore semé d'embûches pour qui s'y essaie.

Mettre en place et appliquer le design system suppose un peu d'organisation. L'objectif de cet article est donc bien de transmettre notre propre expérience, attirer votre attention sur les points cruciaux à retenir et ainsi, vous faciliter la vie à l'avenir. Et indirectement, participer à l'adoption de cette méthode idéalement conçue pour répondre aux défis du numérique.

Design system : les fondamentaux

Pour échanger avec vos clients, les autres designers, les développeurs associés, il n'y a qu'une bonne façon de procéder. C'est celle de parler le même langage. Chaque atome, molécule, organisme et template doit alors être nommément désigné, au sein d’un listing.

L’intérêt de la démarche est au moins double. Le document permet de s’assurer d’une part que rien n’a été oublié et d’autre part, que tous les éléments découpés se trouvent bien à la fois en design et en développement. De ce fait, le listing contribue au suivi du projet.

Et pour que même votre client s’y retrouve, la seconde étape consiste à dresser un glossaire, qui fournira, outre le nom de l’objet, son descriptif. C’est un travail de moine, certes, mais un projet même de faible envergure peut atteindre rapidement 75 à 100 objets. A cela, si vous ajoutez plusieurs product owners peu habitués au wording du design, le glossaire se révèle très vite indispensable. Il devient alors le document de référence auquel chaque interlocuteur peut se reporter en cas de doute.

Design system : Sketch special

Il n’existe que deux méthodes valables pour appliquer de la couleur.

Pour tous les éléments devant recevoir de la couleur, vous devrez créer une palette de couleurs en symboles. Dans un design system, les couleurs sont des atomes. Or Sketch traite chaque atome, chaque molécule etc. comme un symbole. Cela signifie que chaque couleur doit être présentée comme un symbole, c.q.f.d. Par la suite, vous appliquerez le symbole couleur souhaité sur un calque ayant la fonction Mask activée.

L’avantage d’utiliser les symboles couleurs au fil de la conception des maquettes est de faciliter toute modification ultérieure. En l’occurrence pour la couleur, il suffira de modifier la palette pour que les changements se répercutent automatiquement. C’est la meilleure façon de préserver l’homogénéité du projet et de s’éviter un travail mécanique assommant.

Pour les textes, le principe est évidemment le même. Les avantages aussi. Chaque style de texte est considéré comme un atome. Vous créerez donc une bibliothèque de text-style avec les couleurs référencées dans la palette.

Des symboles de mêmes dimensions sont substituables.

Supposons un symbole A (un rectangle) dans lequel est incorporé un symbole B (une étoile). Supposons maintenant que nous disposons aussi de symboles C, D et E (un carré, une lune, un triangle).

Si les artboards des symboles C, D et E sont de la même taille que l’artboard du symbole B, au pixel près, ils sont substituables dans le panneau Override.

La règle s’applique à tout : boutons, éléments de liste, de formulaire ou encore couleurs. Une couleur incorporée dans un symbole est substituable par une autre de la palette, tant qu’elles sont de même dimension.

La règle d’or est la suivante : seule la dimension renseigne Sketch de la substituabilité des éléments. En donnant des dimensions différentes aux couleurs d’une palette secondaire, cela évite par exemple de se voir proposer des couleurs inadaptées pour les besoins du moment.

Locker un calque dans un symbole le fait disparaître de l’Override.

Un panneau Override peut devenir interminable à cause de l’imbrication de symboles. Verrouiller des calques dans un symbole permet de le nettoyer et de faire disparaître des éléments fixes quelle que soit l’instance du symbole.

C’est une bonne habitude à prendre, chaque fois que vous jugerez que vous n’avez plus besoin de revenir sur un élément. Cela vous évitera tout risque de modification indésirable et rendra votre Override plus lisible.

Avant

Après

Les contraintes permettent la création de symboles responsive et modulables

L’objectif ici est d’éviter de devoir créer autant d’éléments qu’il existe de devices susceptibles de les lire. Encore une fois, c’est une question d’efficacité. La multiplication d’éléments différents allonge évidemment le temps de travail consacré aux courantes modifications.

Pour cela, la fonction Contraintes de Sketch est d’une grande utilité et on aurait bien tort de s’en passer. Elle permet de créer des éléments modulables adéquats dans une grande majorité de cas. Très puissant, il bloque un élément sur la page afin que cet élément adopte un comportement particulier chaque fois qu’il est étiré ou réduit.

A ce titre, toute création de symbole devrait être accompagnée d’une réflexion sur le comportement dudit symbole dans l’espace dont il dispose et de ses contraintes ad hoc.

Préférer les masques d’écrêtage à la fonction Borders pour appliquer de la couleur sur des contours selon la règle 1

La fonction Borders ne permet pas de distinguer un contour de la forme. On ne peut donc pas faire d’un contour un mask et lui appliquer une couleur de la palette sans que l’élément entier n’en prenne également l’attribut.

Pour y remédier, la méthode usuelle est de saisir une couleur manuellement. L’inconvénient c’est évidemment que le lien avec la palette est rompu et l’élément ne bénéficiera pas des modifications automatiques offertes par la palette de symboles.

Les masques d’écrêtages et l’outil Outlines en revanche offrent cette possibilité en créant un vide et deux éléments distincts. Mais attention, pour permettre au symbole de s’étirer/être réduit convenablement, pensez à lui appliquer les contraintes convenables.

null

Une nomenclature de calques claire facilite la lecture de l’Override

Un défaut gênant de Sketch est l’absence de hiérarchie entre les symboles dans l’Override, au point qu’il devient rapidement difficile de se repérer même avec un nettoyage régulier. La version 48 a certes cherché à corriger la chose en partie mais ce n’est pas très concluant.

C’est pourquoi, au delà du simple renommage des calques dont tout le monde connaît l’extrême utilité s’il est bien fait, une nomenclature de calques organise efficacement l’Override.

Une fois un symbole importé dans un autre, vous êtes libres de le renommer comme bon vous semble. Aucun lien de nommage n’existe entre le symbole d’origine et son instance. Si vous renommez le symbole d’origine, le nom de l’instance restera inchangé (et inversement). En revanche, le renommage est bien pris en compte dans le panneau Override.

Il vous appartient d’imaginer une nomenclature qui sera signifiante pour vous mais aussi pour tous ceux qui peuvent intervenir sur le projet. Des emojis sont aisément identifiables par exemple. Les caractères spéciaux le sont également et surtout les flèches, qui permettent de sous-catégoriser pour mieux faire apparaître les notions de parenté entre symboles.