Manuloc’ | 2024

Projet d’un système de design web pour remplacer l’usage du logiciel IBM AS / 400*

uidesign systemdesign tokensfigma
*Projet en cours, certaines parties sont en cours de conception et le prototype ne sert qu'à tester les composants et variables.

Information

Contexte

Projet d’un système de design web pour remplacer l’usage du logiciel IBM AS / 400 (aujourd’hui IBM i). Définition des éléments récurrents et réutilisables pour définir des patterns fonctionnels et perceptifs (couleurs, typo, etc.).

Objectifs

Me familiariser avec les design tokens et leur synchronisation bi-directionnelle (figma/github) pour ensuite travailler en totale collaboration avec les équipes produit/développement

Méthodologie

Design system

Création d’un fichier Fondamentaux et d’un fichier Composants. Le premier va servir de guide avec les usages et bonnes pratiques des éléments graphiques du système de design (couleurs, typographies, icônes, Design Tokens, etc.). Le second fichier comprend les principaux composants fonctionnels (construits dans une approche Atomic Design) ; celui-ci comporte également une partie documentation avec les conditions d’usage (état, style, taille, etc.). Exemple d'usage d'un composant. Note explicative de la vidéoVisuel représentant deux pages avec les différents usages du composants Alert en guise d'exempleExemple d'usage du composant Alert (size, type, option)

Design Tokens

Définition d'une convention de nommage stricte pour faciliter ensuite le travail avec les équipes de développement mais aussi avec les autres designers. Les Design Tokens, à l'instar du design system, permettent d'améliorer les flux opératoires entre les équipes et assurent une homogénéité et cohérence à la fois pour la partie esthétique (image de marque) mais aussi dans la conception d'interfaces.visuel représentant un exemple de nommageExemple d'utilisation des Design TokensExemple d'utilisation des Design TokensVisuel représentant l'anatomie d'une card de fiche produit d'un chariot élévateur avec les tokens/variables utlisésExemple d'usage des tokens via une CardPour me familiariser avec l’usage des Design Tokens, j’ai testé Code Snippet Editor & Tokens Studio pour la synchronisation des variables entre le logiciel de conception Figma et un environnement de dév.

Composant Alert

Le design system est construit dans une approche « Atomic Design » (ions, atomes, molécules, organismes, etc.).

Le composant Alert comprend une partie Contenu (composant qui comporte lui aussi des éléments « inférieurs », taille, style, etc.), une partie Action qui se traduit par des boutons (d'action) qui eux-mêmes font partie d'un autre composant « supérieur » qui est le groupe de boutons.

Cet exemple simule des différentes possibilité du composant Alert ; le type (primary, success, information, etc.), la taille (xs, sm, lg, etc.), les options (description, boutons d'action, etc) et l'orientation (vertical, horizontal).