Un UI designer travaille la couche visible du produit. Il construit les échelles de texte et d'espacement, tire une palette d'interface d'une charte souvent pensée pour le print, dessine les composants et tous leurs états, puis les livre aux développeurs dans Figma. Il travaille souvent avec un UX designer ou un product designer, et parfois seul sur un produit dont les parcours existent déjà.
Un beau portfolio ne prouve pas grand-chose. Des écrans retouchés pour Dribbble montrent un goût, rarement la tenue d'un système. L'entretien ouvre un fichier réel avec la personne : composants et variantes, variables nommées, auto layout qui résiste à un texte long, écrans vides et d'erreur. On voit vite si ses maquettes se développent telles quelles.
La relation au code compte aussi. Sans écrire de CSS, un bon UI designer sait pourquoi un espacement en 4 ou 8 se code mieux, ce qu'est un token, et ce que les développeurs lisent en Dev Mode. Le PDF va plus loin : 30 questions sur six axes, un cas de 20 minutes sur l'écran de détail d'une commande, une grille de 1 à 4.
Outils et fondations visuelles du UI designer
Figma : composants et auto layout
L'outil du poste. Les composants se déclinent par propriétés (variante, booléen, texte, échange d'instance), et l'auto layout règle le comportement des cadres quand le contenu change, en ligne, en colonne ou en grille. Un fichier bien construit se lit comme une maquette qui réagit déjà comme l'application.
Variables et styles Figma
Les variables stockent une valeur (couleur, nombre, texte, booléen), peuvent pointer vers une autre variable et changer selon le mode, clair ou sombre par exemple. Les styles regroupent plusieurs valeurs, comme un style de texte. La personne doit savoir quand elle choisit l'un ou l'autre.
Design system et tokens
La bibliothèque de composants partagée entre designers et développeurs, et les tokens qui nomment couleurs, espacements et rayons. Le UI designer les applique, propose des évolutions et veille à ce que Figma et le code portent les mêmes noms. Des outils comme Tokens Studio exportent ces valeurs vers le code.
Typographie d'écran
Échelle de tailles, interlignage, longueur de ligne, graisses, chiffres tabulaires. Le choix d'une police tient aussi compte de sa licence, des caractères disponibles et du poids des fichiers. Un profil solide justifie ses choix par la lecture et par l'usage.
Couleur et contrastes
Palettes construites par gammes de tons, couleurs de statut, modes clair et sombre. Les contrastes de texte suivent WCAG (4,5:1 pour un texte courant). Material Theme Builder ou Leonardo aident à générer des gammes, que le designer ajuste ensuite.
Iconographie et illustration
Une famille d'icônes cohérente, dessinée sur une grille commune et exportée en SVG propre. Le UI designer en dessine ou en adapte, et sait quand une icône a besoin d'un libellé pour être comprise.
Prototypage et micro-interactions
Les prototypes Figma (Smart Animate, variables, conditions) montrent les transitions et les retours visuels. Pour le développement, ce qui compte reste la spécification écrite : durée, courbe, propriétés animées, comportement quand l'utilisateur réduit les animations.
Dev Mode et livraison
Le mode de Figma où les développeurs inspectent mesures, variables et annotations, et récupèrent les éléments exportés. Les sections marquées prêtes à développer évitent qu'ils codent une version abandonnée.
Le titre recouvre des postes assez différents. Dans une équipe produit, le UI designer tient la cohérence visuelle d'une application et du design system, aux côtés d'un UX designer ou d'un product designer. En agence, il passe d'une marque à l'autre et traduit des chartes en interfaces, souvent sous un directeur artistique. En prestation, il rejoint une équipe client et doit s'adapter vite à une bibliothèque qu'il n'a pas créée. Les intitulés « designer d'interfaces » ou « visual designer » désignent souvent le même métier. Dans tous les cas, l'entretien gagne à partir d'un fichier Figma réel plutôt que d'un portfolio mis en scène.
Ce qu'un UI designer doit démontrer en entretien
- Hiérarchie visuelle et grilles
- Typographie d'écran
- Couleur, thèmes et contrastes
- Figma avancé : composants et variables
- États, micro-interactions et icônes
- Design system et livraison
Les questions d'entretien d'un UI designer
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 tableau de bord affiche douze cartes de même poids et les utilisateurs ne savent pas où regarder. Comment reprenez-vous la hiérarchie visuelle ?
Une bonne réponseIl commence par demander quelle information compte le plus pour la tâche principale, puis joue sur quelques variables à la fois : taille, graisse, position dans la grille, contraste, espace autour. Il regroupe les cartes liées par la proximité, réserve la couleur aux alertes et réduit les éléments décoratifs. Il vérifie le résultat en plissant les yeux sur l'écran ou par un test de cinq secondes avec des utilisateurs.
Signal d'alerteAjouter des couleurs vives sur toutes les cartes, ou « c'est une question de goût » sans partir de l'usage.
Question 2 · confirmé
Comment construisez-vous l'échelle typographique d'une application web qui doit rester lisible du mobile au grand écran ?
Une bonne réponseUn corps de texte autour de 16 px, une progression régulière pour les titres (un rapport proche de 1,2 ou 1,25, ajusté à l'œil), six à huit styles au plus, un interlignage plus généreux pour le texte courant que pour les titres et des lignes d'environ 45 à 75 caractères. Il fait coder les tailles en rem pour respecter le zoom du navigateur, prévoit des titres qui réduisent sur mobile et teste avec du vrai contenu, y compris des langues plus longues que le français.
Signal d'alerteUne taille par écran choisie au cas par cas, vingt styles de texte, ou des tailles fixées en pixels sans penser au zoom.
Question 3 · confirmé
La charte de la marque ne contient que deux couleurs. Comment en tirez-vous une palette complète pour l'interface ?
Une bonne réponseUne gamme de tons pour chaque couleur de marque et pour les neutres, puis des couleurs de statut (succès, avertissement, erreur, information) distinctes de la marque. Il mesure les contrastes de chaque couple utilisé, puis crée des noms d'usage (texte, surface, bordure, action) qui pointent vers ces tons, avec une correspondance pour le mode sombre. Il cite des outils de génération comme Material Theme Builder ou Leonardo, en gardant la main sur les choix.
Signal d'alerteUtiliser la couleur de marque partout, y compris pour signaler une erreur, ou des gris choisis à l'œil écran par écran.
Question 4 · confirmé
Le champ de saisie du produit a une étiquette, un texte d'aide et un compteur facultatifs, une icône en tête et cinq états (vide, rempli, focus, erreur, désactivé). Comment le construisez-vous dans Figma ?
Une bonne réponseUn seul ensemble de composants avec une propriété de variante pour l'état, des propriétés booléennes pour le texte d'aide, le compteur et l'icône, une propriété d'échange d'instance pour choisir l'icône et des propriétés de texte pour l'étiquette, l'aide et le message d'erreur. L'auto layout vertical empile étiquette, champ et aide, en largeur de remplissage, avec des marges reliées à des variables d'espacement. Il teste un message d'erreur sur deux lignes et une étiquette traduite plus longue, et nomme les propriétés comme les développeurs nomment les props.
Signal d'alerteUn cadre dessiné par combinaison, ou des instances détachées et retouchées à la main dans chaque formulaire.
Question 5 · junior à confirmé
Une liste de commandes est prête dans sa version remplie. Quels autres états dessinez-vous avant de la livrer ?
Une bonne réponseLe chargement (squelette ou indicateur), la liste vide au premier usage et la liste vide après un filtre, qui n'appellent pas le même message, l'erreur réseau et l'absence de droits, une seule commande, des centaines de commandes avec pagination, des noms très longs. Pour chaque ligne : survol, focus, sélection, désactivé. Chaque état a son texte, pensé avec la personne qui écrit les contenus de l'interface.
Signal d'alerteLe seul cas idéal avec dix lignes parfaites, les autres états laissés aux développeurs.
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
UI designer : les questions fréquentes
Quelle différence entre un UI designer et un UX/UI designer ?
Le UX/UI designer couvre le parcours complet : recherche, architecture de l'information, wireframes, tests, puis interfaces. Le UI designer se concentre sur la couche visuelle et le système de composants, une fois les parcours définis. Dans les petites équipes, la même personne fait souvent les deux. Un poste UI pur appelle davantage de profondeur sur la typographie, la couleur et Figma, et moins sur la recherche utilisateur.
Que regarder dans le portfolio d'un UI designer ?
Des projets livrés plutôt que des concepts, avec les écrans d'état (vide, erreur, chargement) et pas seulement l'écran d'accueil. Une explication des choix de typographie et de couleur, et un extrait de bibliothèque de composants. Vient ensuite l'ouverture d'un fichier Figma de travail pendant l'entretien : sa construction en dit plus long que les visuels exportés.
Quel test technique est donné à un UI designer ?
L'exercice part d'un écran réel à améliorer, traité en direct pendant l'entretien. Sur un écran réel avec des défauts de hiérarchie et un composant à décliner en états, la personne explique ses choix à voix haute. Un exercice à la maison se limite à deux heures, et le travail produit n'est jamais réutilisé.
Un UI designer doit-il savoir coder ?
Ce n'est pas attendu, mais il doit comprendre les contraintes du développement : comment un auto layout se traduit en flexbox, ce qu'est un token, pourquoi une police lourde ralentit l'affichage. Cette culture réduit les allers-retours avec les développeurs. Les profils qui écrivent un peu de HTML et de CSS existent, mais ils ne remplacent pas un développeur front-end.
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.
