Me familiariser avec les composants, les variables et les bonnes pratiques en matière de système de design*

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 ; celui-ci comporte également une partie documentation avec les conditions d’usage (états, styles, tailles, etc.)

Design Tokens

Pour ma familiariser avec l’usage des Design Tokens, j’ai testé Code Snippet Editor & Tokens Studio pour la synchronisation des variables entres le logiciel de conception Figma et un environnement de dév.