retour

Système de design

Définition de design patterns

visuel représentant les couvertures des fichiers composnants et fondamentaux du système de Design
visuel représentant l'interface du logiciel Figma et précisément la fenêtre des variables ou Design Tokens
Visuel représentant des fichiers de documentation
Visuel représentant des fichiers de documentation
Visuel représentant le prototype d'une page matériel de l'application
1 /

client : Manuloc’

année : 2024

catégorie•s : ui-ux • design system • dispositif digital

Design System
Design Tokens

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.).

Missions :
• Design kit
• Design Tokens
• Guideline
• Design system

Environnement technique, outils :
• Figma

Description détaillée de l’image
Description détaillée de l’image
Description détaillée de l’image

Ce visuel représente deux artboards du logiciel de conception d'interfaces Figma. Ils sont issus du fichier fondamentaux dans lequel nous retrouvons toutes les informations essentielles du système de design du projet Manuloc’ comme les couleurs, la typographie, les grilles, etc.

Le 1er artboard est une capture visuelle du sommaire qui comprend :
  • Couleurs
  • Design Tokens
  • Élévation
  • Espacement
  • Grid/Layout
  • Icônes
  • Typographie

Le 2e artboard est une capture visuelle correspondant à la partie Couleurs. Il présente les couleurs primitives à la fois pour la partie Brand (Jaune) et la partie Neutres (Gris).
Chacune des couleurs se décline en de nombreuses autres couleurs soit par la teinte soit par une valeur relative à la luminosité.
Chaque couleur à un nom, une valeur hexadécimale, une valeur hsl et le niveau/rapport de contraste entre le texte et son arrière plan (valeur et cotation AA ou AAA).

Description détaillée de l’image

Ce visuel représente deux artboards du logiciel de conception d'interfaces Figma. Ils sont issus du fichier fondamentaux dans lequel nous retrouvons toutes les informations essentielles du système de design du projet Manuloc’ comme les couleurs, la typographie, les grilles, etc.

Le 1er artboard est une capture visuelle de la partie Design Tokens Il comporte une courte introduction au Design Tokens et un petit glossaire pour les mots suivants : Token, Value, Alias. Un petit exemple est présent pour illustrer l'usage des design tokens.

Le 2e artboard comporte la partie Principes de nommage pour définir les conventions de nommage. Un exemple est présent. Plus bas dans l'artboard, on commence la liste des tokens pour la partie Couleurs et précisément avec la propriété Background.

Description détaillée de l’image