Un design system designer travaille pour d'autres designers et pour les développeurs front. Il définit les tokens de couleur, d'espacement et de typographie, les range en collections de variables Figma avec leurs modes, construit les composants avec leurs propriétés et écrit la documentation qui évite les mauvais usages. Préparer des questions d'entretien de design system designer demande donc d'aller dans le détail de ces fichiers, plus que dans le portfolio d'écrans.
Sur un CV, la mention « design system » couvre des réalités très différentes. Certains ont construit une bibliothèque complète, d'autres ont surtout consommé celle d'une autre équipe ou monté un kit d'interface pour un seul produit. Un fichier Figma ouvert pendant l'entretien en dit long. Comptent les noms des variables, les modes, le nombre de variantes du bouton et la manière dont les composants sont reliés au code par Code Connect ou Storybook.
Le poste croise aussi l'accessibilité. Depuis le 28 juin 2025, l'European Accessibility Act s'applique aux produits et services qu'il couvre, et un défaut de contraste dans un composant se propage à tous les écrans qui l'utilisent. Le PDF propose 30 questions sur six axes, un cas de 20 minutes et une grille de notation.
Les fichiers et les outils d'un design system designer
Design tokens
Les décisions de design stockées sous forme de valeurs nommées : couleurs, espacements, rayons, typographie. On distingue les primitives (la palette brute) et les tokens sémantiques qui portent un usage, comme la couleur d'un texte de lien. Un bon profil sait expliquer pourquoi une maquette ne doit pas utiliser directement une primitive.
Variables Figma, collections et modes
Les tokens vivent dans Figma sous forme de variables rangées en collections. Les modes permettent à une même variable d'avoir plusieurs valeurs, pour le clair et le sombre ou pour plusieurs densités. Le nombre de modes dépend du plan : 10 par collection en Professional, 20 en Organization, et sans limite avec les collections étendues réservées à l'offre Enterprise.
Composants, variantes et propriétés
Un composant Figma combine des variantes (type, taille, état) et des propriétés booléennes, de texte ou d'échange d'instance. Le travail du poste consiste à couvrir les besoins avec le moins de variantes possible, en gardant des noms de propriétés proches de ceux du code.
Bibliothèques partagées et branches
La bibliothèque est publiée vers les fichiers des équipes produit, qui acceptent ou non les mises à jour. Les branches, disponibles sur les plans Organization et Enterprise, permettent de travailler sur une évolution, de la faire relire puis de la fusionner sans toucher au fichier principal.
Format DTCG, Tokens Studio, Style Dictionary
Le Design Tokens Community Group a publié en octobre 2025 la première version stable de son format de fichier (2025.10). Tokens Studio, plugin Figma, synchronise des tokens avec un dépôt Git. Style Dictionary transforme ce fichier en variables CSS et en constantes iOS ou Android. Le designer n'écrit pas ce code, mais il doit comprendre la chaîne.
Dev Mode, Code Connect et Storybook
Dev Mode montre aux développeurs les noms de tokens et les mesures. Code Connect relie un composant Figma à son composant de code et affiche le vrai extrait dans Dev Mode. Storybook présente les composants réellement développés : c'est la référence pour savoir ce qui existe en production.
Documentation : zeroheight, Supernova, Storybook
Le site de documentation explique quand utiliser un composant, quand l'éviter, comment écrire ses libellés et comment il se comporte. Zeroheight et Supernova sont fréquents dans les offres. Une page écrite par la personne est utile, la qualité de la rédaction compte autant que celle des maquettes.
WCAG 2.2, RGAA et EAA
Les WCAG 2.2 fixent les contrastes (4,5:1 pour le texte courant, 3:1 pour les éléments d'interface), une taille de cible minimale de 24 par 24 pixels au niveau AA et la visibilité du focus. En France, le RGAA en découle. Un composant accessible dès Figma évite des corrections dans chaque produit.
Le titre change selon l'employeur : design system designer, designer UI design system, consultant design system, lead design system. Dans une petite équipe, le poste fait aussi du product design. Dans un grand groupe à plusieurs marques, il ne touche qu'à la bibliothèque et travaille en binôme avec un développeur front qui code les composants. Les cabinets de conseil en placent beaucoup en mission chez leurs clients pour créer ou remettre en ordre une bibliothèque. Le pilotage du design system, avec sa roadmap et ses indicateurs d'adoption, relève plutôt du design system manager, même si les deux rôles se recouvrent dans les équipes réduites.
Six compétences attendues d'un design system designer
- Architecture des tokens et nommage
- Variables, modes et bibliothèques Figma
- Conception des composants et des variantes
- Accessibilité intégrée aux composants
- Documentation et règles d'usage
- Alignement avec le code et outils d'IA
Questions d'entretien pour un design system designer, avec les réponses attendues
Chaque question vient avec ce qu'une bonne réponse contient et le signal qui doit vous alerter. Pas besoin d'être technique pour les poser : écoutez si le candidat raconte du vécu.
Question 1 · confirmé
Un designer a utilisé directement la couleur blue-600 dans une maquette au lieu d'un token sémantique. Quel problème cela pose-t-il, et comment organisez-vous les niveaux de tokens ?
Une bonne réponseLes primitives forment la palette brute (blue-600). Les tokens sémantiques portent l'usage (color.text.link, color.background.danger) et changent de valeur selon le mode ou la marque. Des tokens de composant peuvent s'ajouter pour quelques cas précis. Les maquettes et les composants n'utilisent que les sémantiques. Avec une primitive en dur, le mode sombre et le prochain changement de charte cassent l'écran. Il masque les primitives à la publication pour que personne ne les choisisse par erreur.
Signal d'alerteUne seule couche de couleurs nommées par leur aspect (« bleu foncé »), ou aucune idée de ce qu'apporte un niveau sémantique.
Question 2 · confirmé à senior
Vous devez livrer un mode sombre et une densité compacte dans Figma. Comment organisez-vous vos collections de variables et leurs modes ?
Une bonne réponseUne collection de primitives sans modes, une collection de couleurs sémantiques avec les modes clair et sombre, une collection d'espacements avec les modes confortable et compact. Les deux axes sont indépendants, donc ils vivent dans deux collections, sinon on multiplie les combinaisons. Les modes s'appliquent à une page ou à un cadre et s'héritent. Il connaît la limite de modes de son plan Figma.
Signal d'alerteDupliquer chaque composant en version sombre, ou une seule collection avec les modes « clair compact », « sombre compact », etc..
Question 3 · confirmé
Le composant Button compte 480 variantes dans Figma. Comment le reconstruisez-vous ?
Une bonne réponseIl garde en variantes ce qui change vraiment la forme : type, taille, état. Une icône présente ou non devient une propriété booléenne, le choix de l'icône un échange d'instance, le libellé une propriété de texte. Les noms et valeurs des propriétés reprennent ceux du code. Le nombre de variantes tombe à quelques dizaines et le panneau devient lisible pour les utilisateurs de la bibliothèque.
Signal d'alerteAjouter encore des variantes pour couvrir chaque cas, ou conseiller aux équipes de détacher l'instance.
Question 4 · confirmé
Avant de publier un nouveau composant, quels points d'accessibilité vérifiez-vous dans Figma ?
Une bonne réponseLes contrastes dans chaque mode : 4,5:1 pour le texte courant, 3:1 pour le grand texte et pour les bordures et icônes qui identifient le composant. Un état de focus dessiné. Une cible d'au moins 24 par 24 pixels (critère 2.5.8 des WCAG 2.2, niveau AA). Aucune information portée par la seule couleur. Le comportement avec un texte agrandi. Puis des annotations pour les développeurs : nom accessible, rôle, ordre de focus, comportement au clavier.
Signal d'alerte« L'accessibilité, ce sont les développeurs », ou un contrôle de contraste fait seulement en mode clair.
Question 5 · confirmé
Que contient la page de documentation d'un composant pour qu'un designer d'une autre équipe l'utilise sans vous solliciter ?
Une bonne réponseÀ quoi il sert, quand ne pas l'utiliser et quoi prendre à la place. L'anatomie, les variantes et propriétés avec les mêmes noms que dans le code, des exemples à faire et à éviter illustrés, les règles de contenu, les comportements (états, responsive, interactions), l'accessibilité, le statut, la version et les liens vers Figma et Storybook. Il cite l'outil utilisé : zeroheight, Supernova, Storybook ou Figma.
Signal d'alerteUne capture du composant et la liste de ses variantes.
Recevez la fiche d'entretien complète en PDF
La fiche pour mener l'entretien de bout en bout, prête à imprimer ou à partager avec le manager.
- 30 questions sur 6 axes, avec la bonne réponse, le signal d'alerte et la relance
- Le niveau visé pour chaque question
- Une mise en situation de 20 minutes et ce qu'on attend du candidat
- La grille d'évaluation de 1 à 4, axe par axe
Les questions fréquentes sur le poste de design system designer
Design system designer et développeur design system : faut-il les deux ?
Dès qu'une bibliothèque sert plusieurs produits, oui. Le designer définit les tokens, les composants Figma et les règles d'usage. Le développeur front code ces composants, les publie en paquet et gère leurs versions. Les deux doivent utiliser les mêmes noms de propriétés et de tokens. Dans une petite équipe, un profil hybride, souvent appelé design engineer, peut tenir les deux rôles pendant un temps.
Le design system designer doit-il coder ?
Il n'écrit pas les composants de production, mais il doit lire un fichier de tokens en JSON, comprendre ce qu'une prop représente dans un composant React ou Angular et vérifier un composant dans Storybook. Quelques bases de HTML et de CSS l'aident à dialoguer avec les développeurs et à concevoir des composants que le code peut reproduire sans compromis.
Quel exercice est donné à un design system designer ?
Le test part d'un fichier Figma imparfait : un bouton avec trop de variantes, des couleurs saisies en dur, aucun mode sombre. Le candidat restructure les variables et le composant, puis rédige la documentation d'usage. Une heure en direct suffit si le fichier est préparé. Ce test technique montre la méthode, la rigueur de nommage et la capacité à expliquer ses choix à un développeur.
Quel plan Figma faut-il pour travailler sur un design system ?
Le plan Professional permet des bibliothèques partagées, des variables avec jusqu'à 10 modes par collection et Code Connect, limité à une bibliothèque et un framework. Le plan Organization ajoute les branches, l'analyse d'usage des bibliothèques et jusqu'à 20 modes. L'offre Enterprise apporte les collections étendues, utiles en multi-marques, et l'API REST des variables. Le plan de l'équipe se vérifie avant l'entretien, pour que les questions portent sur des fonctions disponibles.
Pour structurer vos autres entretiens, consultez aussi nos pages sur les questions d'entretien de recrutement, la méthode de l'entretien structuré et la grille d'évaluation d'entretien.
