Sur un CV, le métier se confond avec la vidéo. La plupart des annonces « motion designer » en France visent les réseaux sociaux et la publicité. Le motion designer UI, ou product motion designer, travaille avec une équipe produit. Il fixe la durée et la courbe des transitions, anime des micro-interactions, prépare des fichiers Lottie ou Rive que l'application lit en temps réel et documente tout cela pour les développeurs web et mobile.
Un profil venu de la vidéo maîtrise souvent After Effects à un très bon niveau et peut quand même livrer un fichier Lottie de 2 Mo rempli d'effets que le lecteur ignore. L'entretien ouvre un projet réel : structure des calques, réglages d'export, poids final, et ce que devient l'animation quand l'utilisateur a activé la réduction des animations.
Le niveau attendu change avec la séniorité. Un junior doit tenir le timing et livrer un export propre. Un senior construit un système de mouvement que l'équipe applique sans lui, avec des durées et des courbes nommées. Le PDF associé propose 30 questions sur six axes, un cas de 20 minutes et une grille de 1 à 4.
Outils et notions qu'un motion designer UI emploie
After Effects
Le point de départ de la plupart des animations d'interface. Un fichier destiné à une application se construit autrement qu'une vidéo : calques de forme plutôt qu'images, peu d'effets, précompositions nommées. Un projet ouvert vaut d'être regardé : la façon dont il est rangé en dit long.
Lottie et dotLottie
Lottie décrit une animation vectorielle en JSON, lue en temps réel sur le web, iOS et Android. On l'exporte depuis After Effects avec Bodymovin ou le plugin LottieFiles. Le format compressé .lottie regroupe plusieurs animations, des thèmes et des machines d'état dans un seul fichier. La spécification est portée par la Lottie Animation Community, hébergée par la Linux Foundation.
Rive
Un éditeur et un moteur d'exécution pour les animations interactives. Une machine d'état relie les animations et choisit les transitions selon les actions de l'utilisateur ou les données de l'application. Rive recommande le data binding (view models) pour les nouveaux fichiers ; les anciens inputs de machine d'état continuent de fonctionner.
Figma et Smart Animate
Le prototypage animé du quotidien. Smart Animate interpole les calques qui portent le même nom et la même place dans la hiérarchie. Les transitions acceptent des courbes de Bézier personnalisées et des ressorts réglés en raideur, amortissement et masse. Suffisant pour valider une idée, rarement pour une interaction fine au doigt.
ProtoPie
Un outil de prototypage haute fidélité, utile quand l'animation dépend d'un geste continu, d'une variable ou d'un capteur du téléphone. Il sert souvent aux tests utilisateurs sur appareil réel, avant que les développeurs ne codent l'interaction.
Courbes, durées et ressorts
La base du métier. Ease-out pour ce qui entre, ease-in pour ce qui sort, des durées plus courtes pour ce qui revient souvent. Le Nielsen Norman Group situe la plupart des animations d'interface entre 100 et 400 ms. Les ressorts, eux, gardent un mouvement cohérent quand l'utilisateur interrompt un geste.
Animations codées (CSS, Motion, SwiftUI, Compose)
Beaucoup d'animations se passent de fichier. Les développeurs les codent en CSS avec transform et opacity, avec Motion (ex-Framer Motion) en React, en SwiftUI ou avec Jetpack Compose. Un bon motion designer sait quand livrer un fichier et quand livrer une simple spécification de durée et de courbe.
Réduction des animations
Le réglage système (Réduire les animations sur iOS et macOS, Supprimer les animations sur Android, Effets d'animation sur Windows 11), lu sur le web avec prefers-reduced-motion. Chaque animation prévoit sa variante : un fondu à la place d'un zoom, un état final direct, ou une lecture contrôlée quand le mouvement porte une information.
L'intitulé varie : product motion designer, motion designer interface, UI animator, brand & motion designer. Ce dernier partage son temps entre la marque et le produit, et son portfolio mélange souvent vidéo et interface. Le poste existe surtout là où une application a un public large et un design system déjà installé. Il n'existe pas de certification de référence. Le niveau se lit dans les fichiers livrés, dans leur poids et dans la facilité avec laquelle les développeurs les ont intégrés.
Six savoir-faire attendus d'un motion designer produit
- Timing, courbes et chorégraphie
- Production After Effects pour Lottie
- Animations interactives dans Rive
- Prototypage et spécification
- Performance et poids des fichiers
- Réduction des animations et système de mouvement
Questions d'entretien pour un motion designer UI
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 · junior
Une modale apparaît en 500 ms et disparaît en 500 ms, avec une courbe linéaire. Que changez-vous, et pourquoi ?
Une bonne réponseDes durées plus courtes, autour de 200 à 300 ms à l'entrée et un peu moins à la sortie, parce qu'une fenêtre qui part ne doit pas retenir l'utilisateur. Une courbe ease-out pour l'entrée, qui démarre vite et se pose, ease-in pour la sortie. Le linéaire paraît mécanique. Un bon profil réduit aussi l'amplitude : un fondu avec une légère montée suffit, et le fond assombri arrive en fondu de son côté.
Signal d'alerteGarder 500 ms « pour que ce soit fluide », ou choisir la courbe à l'œil sans pouvoir expliquer pourquoi l'entrée et la sortie diffèrent.
Question 2 · confirmé
Vous préparez dans After Effects une animation destinée à Lottie. Qu'évitez-vous dans le projet ?
Une bonne réponseLes effets que tous les lecteurs ne rendent pas : le flou gaussien passe sur Android mais pas sur iOS, et la plupart des effets du menu Effet sont ignorés. Il évite aussi les styles de calque, les images bitmap à la place des calques de forme, les calques Illustrator non convertis. Les expressions sont réduites au minimum, car seul le lecteur web les exécute. Masques et caches restent rares parce qu'ils coûtent au rendu. Le candidat teste le fichier dans un lecteur web et sur un téléphone avant de le livrer.
Signal d'alerte« Je travaille comme pour une vidéo et j'exporte », puis découvrir les écarts quand le développeur l'intègre.
Question 3 · confirmé
L'animation Lottie de l'écran d'accueil pèse 1,8 Mo et l'application rame à l'ouverture. Que faites-vous ?
Une bonne réponseChercher d'abord ce qui pèse : images bitmap embarquées, nombre de calques et de points de tracé, masques et caches, durée. Ensuite simplifier les tracés, retirer ou compresser les images, supprimer les calques cachés, passer au format .lottie compressé. La mesure se fait sur un appareil d'entrée de gamme. Un bon profil propose aussi de lancer l'animation après l'affichage de l'écran, ou de la remplacer par une animation codée si elle est simple.
Signal d'alerte« Le téléphone est trop vieux », ou se contenter de compresser le fichier sans toucher au contenu.
Question 4 · confirmé
Une mascotte doit suivre des yeux la saisie d'un identifiant, puis se cacher les yeux quand l'utilisateur tape son mot de passe. Comment la construisez-vous dans Rive ?
Une bonne réponseUn artboard avec des animations simples (repos, regard, mains sur les yeux), une machine d'état qui relie ces états par des transitions avec un temps de mélange, et un état de mélange piloté par un nombre pour suivre la position du curseur. L'application envoie deux valeurs : la position dans le champ et un booléen pour le champ mot de passe. Aujourd'hui, la personne passe par le data binding (un view model) plutôt que par les inputs de machine d'état.
Signal d'alerteUne seule timeline relancée à chaque frappe, sans machine d'état ni valeur venue de l'application.
Question 5 · confirmé
L'utilisateur a activé la réduction des animations. Comment votre fichier Lottie ou Rive en tient-il compte, et que livrez-vous pour ce cas ?
Une bonne réponseIl ne compte pas sur le lecteur : l'application lit le réglage (prefers-reduced-motion sur le web, Réduire les animations sur iOS, échelle d'animation sur Android) et choisit ce qu'elle joue. Il livre donc la variante dans le fichier : un segment « réduit » repéré par un marqueur ou une image finale fixe pour Lottie, un booléen du view model qui fait passer la machine d'état Rive sur des fondus courts. Zooms et grands déplacements disparaissent, les retours d'état sans déplacement restent. La spécification dit qui lit le réglage et quelle variante s'affiche.
Signal d'alerteUne seule version de l'animation, en laissant au développeur le soin de la couper ou de la masquer.
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
Motion designer UI : les questions fréquentes
Comment distinguer un motion designer UI d'un motion designer vidéo sur un CV ?
Le portfolio le dit. Un profil vidéo présente des films, des génériques, des formats pour les réseaux sociaux. Un motion designer UI montre des écrans, des transitions, des icônes animées, et cite Lottie, Rive, Figma ou ProtoPie. Une animation qui tourne dans une application en production, avec le lien vers l'application, tranche la question. Les deux profils utilisent After Effects, mais seul le second a dû se soucier du poids d'un fichier et de son rendu sur un téléphone.
Quel test technique est donné à un motion designer UI ?
Le candidat reçoit un fichier Figma avec un composant et ses états, par exemple un bouton d'envoi qui passe par chargement, succès et erreur. Il livre l'animation dans l'outil de son choix, le fichier exportable et une courte fiche de spécification pour le développeur. Deux heures suffisent. Au débrief, le fichier s'ouvre : noms des calques, poids, variante sans mouvement. Le rendu seul ne dit presque rien de ce qui se passera à l'intégration.
Rive est-il indispensable, ou After Effects et Lottie suffisent-ils ?
Cela dépend des animations du produit. Pour des icônes, des illustrations d'onboarding et des chargements, After Effects et Lottie couvrent la plupart des besoins et restent le duo le plus répandu. Dès qu'une animation réagit au geste ou à des données (mascotte, jauge, bouton à plusieurs états), Rive devient plus simple à maintenir. Un candidat solide sur After Effects apprend Rive en quelques semaines s'il comprend déjà les machines d'état.
Un motion designer UI doit-il savoir coder ?
Écrire du code de production n'est pas son rôle. Il doit en revanche comprendre ce que le développeur fera de son travail : la différence entre animer transform et animer la hauteur en CSS, la courbe par défaut d'une plateforme, le coût d'un lecteur Lottie ou Rive dans l'application. Un profil qui sait modifier une valeur de courbe dans une branche ou prototyper en quelques lignes de CSS gagne beaucoup de temps à l'équipe.
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.
