Design system : le vocabulaire essentiel en anglais
Component, token, variant, style guide — le vocabulaire du design system en anglais pour collaborer efficacement avec les équipes produit et les développeurs internationaux.
Pourquoi le design system parle anglais
Le design system est l'un des sujets les plus discutes dans le monde du design produit — et il se parle presque exclusivement en anglais. Que vous travailliez avec des developers a Lisbonne, des product managers a Berlin ou des stakeholders a New York, maîtriser ce vocabulaire vous permet de participer aux décisions architecturales et d'être pris au sérieux dans les discussions techniques.
Un design system est un ensemble de règles, de composants et de standards qui garantissent la cohérence visuelle et fonctionnelle d'un produit numérique. Le component est l'unité de base : un bouton, un champ de formulaire, une carte. Chaque component est conçu pour être reutilisable, declinable et documente. Le token, lui, est la variable de style qui se cache derriere : la valeur de couleur, l'unité d'espacement ou la taille typographique que tous les composants partagent et qui peut être modifiée en un seul endroit.
Structurer et documenter : variant, style guide et library
Un composant existe rarement en une seule version. Le variant permet de decliner un même élément en plusieurs états ou configurations : un bouton peut être primary ou secondary, active ou disabled, small ou large. Cette notion de variant est centrale dans Figma, ou elle permet de regrouper toutes les declinaisons d'un composant dans un seul cadre structure, facilitant la maintenance et les mises à jour a grande echelle.
Le style guide est le document de référence qui codifie les règles visuelles : couleurs, typographie, espacements, grilles. Aujourd'hui, il est souvent intègre directement dans la library Figma ou Storybook, accessible à tous les membres de l'équipe. Un bon pattern de documentation explique non seulement comment utiliser un composant, mais aussi pourquoi il a été conçu de cette façon — le rationale design capture dans le système lui-même.
Collaborer avec les développeurs : documentation, handoff et responsive
Le moment ou le design system devient vraiment puissant, c'est quand il depasse Figma pour entrer dans le code. La documentation technique — specs de composants, valeurs de tokens, règles d'utilisation — est le pont entre l'équipe design et l'équipe développement. Un système bien documente réduit les allers-retours, évite les interpretations libres et accélère la livraison.
Le handoff est l'étape de transfert des assets et specifications aux développeurs. Avec des outils comme Figma ou Zeplin, il devient quasi-automatique quand les composants sont bien nommes et les tokens correctement exportes. Prevoyez aussi les variantes responsive de chaque composant : un card qui occupe toute la largeur sur mobile doit être specifie dans le système tout autant que sa version desktop.
Vocabulaire de l'article
9 termes“Every component in our design system is built to work independently and to compose with others.”
“We updated the primary color token and it cascaded across all 200 components automatically.”
“The button component has six variants: primary, secondary, ghost, danger, small, and large.”
“Our style guide is embedded directly in Figma and updated with every design system release.”
“The shared Figma library ensures every designer uses the same up-to-date components.”
“We have a standard pattern for empty states that we apply across the entire product.”
“Good documentation explains not just how to use a component, but why it was designed that way.”
“Since we moved to a tokenized system, handoff has become almost fully automatic.”
“Every component must have a responsive version documented before it is added to the library.”