Un UX engineer travaille avec l'équipe design. Il transforme une maquette Figma en prototype HTML, CSS et React que des utilisateurs peuvent essayer, avec de vraies données, de vraies animations et un vrai clavier. Il écrit aussi les petits outils qui relient design et développement : plugins Figma, export des design tokens, stories Storybook. Préparer des questions d'entretien pour un UX engineer oblige donc à couvrir deux métiers. Le poste reste rare en France, et beaucoup d'offres le rangent sous product designer ou développeur front-end.
Les CV trompent dans les deux sens. Un développeur front-end qui a ouvert Figma ne sait pas toujours ce qu'un prototype doit prouver, ni quand s'arrêter. Un designer qui code un peu livre un prototype séduisant, inutilisable au clavier et qui rame avec 500 lignes de données. Le candidat raconte un prototype précis : la question qu'il devait trancher, le temps passé, ce que le test a changé.
Le périmètre se clarifie aussi avant de publier l'offre. Le UX engineer explore et teste. La bibliothèque de composants de production, ses versions et sa publication sur npm relèvent plutôt d'un développeur design system. Le PDF propose 30 questions sur six axes, un cas de 20 minutes et une grille de 1 à 4.
Les outils d'un UX engineer, de Figma au navigateur
HTML, CSS et JavaScript
La base du métier. Un prototype crédible repose sur du HTML sémantique, du CSS moderne (grilles, container queries, variables) et un peu de JavaScript. Un UX engineer à l'aise sur ces trois couches avance vite sans framework et produit un prototype que le clavier et les lecteurs d'écran comprennent.
React, Vite et Next.js
Le socle le plus courant des prototypes d'application. Vite démarre un projet en quelques secondes, Next.js sert quand le prototype doit appeler une API ou être partagé en ligne. Reste à savoir quelle part du code a été reprise par les développeurs, et quelle part a été jetée.
Figma : variables, Dev Mode, Code Connect et serveur MCP
Le UX engineer lit un fichier Figma comme une spécification : variables, auto layout, variantes de composants. Code Connect relie un composant Figma au composant du code, et le serveur MCP de Figma transmet le contexte du fichier aux agents IA qui génèrent du code. Il sait aussi écrire un plugin avec l'API Plugin de Figma.
Design tokens (format DTCG, Style Dictionary)
Les tokens décrivent couleurs, espacements et typographies dans un fichier neutre, transformé ensuite en variables CSS ou en constantes pour le mobile. Le Design Tokens Community Group du W3C a publié la première version stable de son format (2025.10) en octobre 2025. Style Dictionary et Tokens Studio reviennent souvent dans les CV.
Storybook
L'atelier où chaque composant s'affiche seul, dans tous ses états. Pour un UX engineer, c'est un support de revue avec les designers et un endroit où contrôler l'accessibilité avec l'extension dédiée avant un test utilisateur. Il ne remplace pas la bibliothèque de production, que d'autres maintiennent.
Motion (ex-Framer Motion), CSS et View Transitions
L'animation d'interface en code. La bibliothèque Framer Motion s'appelle désormais Motion, importée depuis motion/react. Les transitions CSS et l'API View Transitions couvrent beaucoup de cas sans dépendance. La personne doit respecter la préférence prefers-reduced-motion.
WCAG 2.2, RGAA et ARIA
L'accessibilité se code dès le prototype. Le RGAA 4.1.2, référentiel français en vigueur, s'appuie sur les WCAG 2.1, et sa version 5 est annoncée pour fin 2026. Les WCAG 2.2 ajoutent entre autres une taille minimale de cible et une alternative au glisser-déposer. Le guide ARIA Authoring Practices du W3C décrit le clavier attendu pour chaque type de composant.
Outils de test sur prototype (Maze, Lookback, UserTesting)
Un prototype codé se teste en séance modérée ou à distance. Ces outils enregistrent l'écran et la voix et mesurent la réussite des tâches. Le UX engineer prépare la version testée : données réalistes, parcours stable, journal des clics quand l'équipe veut des chiffres.
Le titre varie d'une entreprise à l'autre : UX engineer, design technologist, prototypeur, creative technologist, parfois UI engineer. Quand le poste est rattaché au design, il prototype les idées avant le développement et outille l'équipe. Ailleurs, le même intitulé désigne un développeur front-end proche des designers qui code les écrans finaux. Il faut savoir lequel des deux est recherché, dans l'offre comme en entretien, car les profils diffèrent. Aucune certification ne couvre ce métier. Un portfolio avec des prototypes en ligne, leur code et le résultat des tests reste la meilleure preuve.
Six compétences à contrôler chez un design technologist
- Prototypage en code
- Fidélité maquette et composants
- Design tokens et lien Figma-code
- Animation et interaction
- Accessibilité implémentée
- Tests sur prototypes codés
Les questions d'entretien d'un UX engineer
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 hésite entre deux façons de filtrer une liste de 2 000 produits. Vous avez trois jours. Que prototypez-vous, et avec quoi ?
Une bonne réponseIl part de la question à trancher : avec quelle option l'utilisateur trouve-t-il le bon produit plus vite. Il code seulement ce qui sert la comparaison, les deux versions du filtre sur un jeu de données réaliste, et laisse de côté l'authentification, le back-end et le responsive s'ils ne jouent pas dans la décision. Il prend l'outil où il va le plus vite, souvent React avec Vite, et prévoit un moyen simple de basculer d'une version à l'autre pendant le test.
Signal d'alerteUn prototype de toute l'application « pour faire réaliste », ou une maquette Figma cliquable alors que la question porte sur le comportement avec 2 000 lignes, que Figma simule mal.
Question 2 · confirmé
Une maquette Figma utilise des variables pour les couleurs et de l'auto layout partout. Comment la traduisez-vous en composants fidèles ?
Une bonne réponseIl lit les variables comme des tokens et les reprend en variables CSS au lieu de recopier les valeurs hexadécimales. L'auto layout devient du flexbox ou de la grille, avec les mêmes espacements et les mêmes règles de redimensionnement (hug, fill, fixed). Les variantes et propriétés du composant Figma lui donnent les props. Il liste les états absents de la maquette (chargement, erreur, texte trop long) et les fait valider.
Signal d'alerteMesurer les pixels à l'œil, ou coller le CSS de l'inspecteur tel quel, avec des positions absolues et des largeurs fixes.
Question 3 · confirmé
Le designer veut une animation à l'ouverture d'un panneau latéral. Comment la codez-vous pour qu'elle reste fluide et ne gêne pas les personnes sensibles au mouvement ?
Une bonne réponseIl anime transform et opacity, traités par le compositeur du navigateur, plutôt que width, left ou height qui recalculent la mise en page. Durée courte et courbe d'accélération décidées avec le designer, rangées dans des tokens de mouvement. Avec la media query prefers-reduced-motion, le déplacement devient un fondu ou disparaît. Il contrôle le rendu dans l'onglet Performance des outils du navigateur, sur un appareil modeste.
Signal d'alerteUne animation de left sur une seconde, vérifiée seulement sur un ordinateur récent, sans connaître prefers-reduced-motion.
Question 4 · confirmé
Votre prototype est une application monopage. Que perçoit un utilisateur de lecteur d'écran quand il change de vue, et comment le gérez-vous ?
Une bonne réponseSans traitement, rien n'est annoncé et le focus reste sur le lien cliqué ou se perd. Il met à jour le titre du document, place le focus sur le titre de la nouvelle vue (avec tabindex="-1") ou annonce le changement par une zone live, puis vérifie avec NVDA ou VoiceOver. Il le fait dès le prototype quand des personnes équipées de technologies d'assistance participent aux tests.
Signal d'alertePenser que le routeur du framework s'en occupe, ou n'avoir jamais lancé un lecteur d'écran.
Question 5 · confirmé
Vous comparez deux versions d'un formulaire avec huit participants. Que pouvez-vous conclure, et que ne pouvez-vous pas conclure ?
Une bonne réponseAvec huit personnes, il repère les problèmes d'utilisabilité, voit où chacun bloque et peut constater qu'une version provoque des erreurs que l'autre évite. Il ne conclut pas qu'une version est plus rapide de tant de pour cent, l'échantillon ne le permet pas. Il alterne l'ordre de présentation des versions d'un participant à l'autre pour limiter l'effet d'apprentissage.
Signal d'alerte« La version B est 25 % plus rapide » sur huit personnes, ou tous les participants qui voient A avant B.
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
UX engineer : les questions qui reviennent
UX engineer ou développeur front-end : quelle différence ?
Tout dépend de ce qui sera livré. Si l'équipe attend des écrans de production, maintenus et testés, il s'agit d'un développeur front-end, éventuellement spécialisé en design system. Si elle attend des prototypes qui servent à décider, des outils pour les designers et des tests avec des utilisateurs, c'est un UX engineer. Le rattachement compte aussi : au design, le poste explore, à l'ingénierie, il construit. L'offre le dit, pour attirer les bons CV.
Quel test technique est donné à un design technologist ?
Un exercice court, fait pendant l'entretien. L'exercice part d'une maquette simple, une liste filtrable par exemple, avec 45 minutes pour en coder une version testable. Comptent ce que la personne choisit de coder ou de simuler, la sémantique HTML, le comportement au clavier et les états prévus. L'exercice finit par cinq minutes de discussion sur ce que le prototype permettrait de prouver lors d'un test, et sur ce qu'il ne prouverait pas.
Un portfolio est-il attendu d'un UX engineer ?
Oui, avec des prototypes en ligne et, si possible, leur code. Un portfolio de captures ne suffit pas pour ce métier. Un prototype s'ouvre pendant l'entretien, se parcourt au clavier et se regarde sur téléphone. Pour chacun, le candidat donne la question testée et la décision prise ensuite. Les projets confidentiels se racontent aussi : une personne expérimentée sait décrire sa démarche sans montrer l'écran du client.
Un UX engineer doit-il savoir conduire un test utilisateur ?
Il doit au moins savoir préparer le prototype pour un test et lire ce qui en sort. Selon l'équipe, il anime lui-même les séances ou travaille avec un UX researcher. L'entretien vérifie qu'il connaît les limites d'un petit échantillon, qu'il fige la version testée et qu'il sait pourquoi on alterne l'ordre de présentation de deux versions. Un profil qui ne voit jamais d'utilisateurs finit par prototyper pour les designers seulement.
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.
