Ce que vous saurez faire
À l’issue de ce tutoriel, vous saurez animer vos interfaces utilisateur pour leur donner vie, fluidité et caractère. Vous maîtriserez les fondamentaux du motion design appliqué à l’UI : prototypes interactifs dans Figma avec Smart Animate, micro-interactions dans After Effects, animations Lottie pour le web et le mobile, principes de timing et d’easing, et bonnes pratiques de performance. Le motion design est devenu un standard pour les applications modernes, et il représente une opportunité de différenciation majeure pour les PME africaines qui veulent rivaliser avec les grandes marques internationales. Une application sénégalaise de livraison ou de paiement avec des animations fluides paraît instantanément plus crédible et rassurante. Les designers maîtrisant le motion facturent entre 250 000 et 1 200 000 FCFA pour un kit d’animations complet d’application, et cette compétence ouvre des opportunités vers les agences digitales de Dakar et la sous-région.
Pourquoi le motion change l’expérience utilisateur
Le mouvement attire naturellement l’œil et oriente l’attention. Une simple transition fluide entre deux écrans aide l’utilisateur à comprendre où il vient et où il va. Une animation de chargement bien pensée transforme une attente frustrante (et il y en a beaucoup avec les connexions instables au Sénégal) en moment supportable, voire agréable. Une micro-interaction sur un bouton confirme instantanément l’action et rassure. À l’inverse, un site ou une application sans aucune animation paraît rigide, vieillot, peu professionnel. Le motion n’est pas une décoration : c’est un langage de communication entre l’interface et l’utilisateur.
Étape 1 : Comprendre les 12 principes Disney appliqués au digital
Les animateurs Disney ont défini 12 principes en 1981, dont plusieurs s’appliquent directement à l’UI motion. Le squash and stretch (compression et étirement) donne du poids aux éléments. L’anticipation prépare l’utilisateur à l’action (un bouton qui rétrécit légèrement avant de s’agrandir). Le slow-in slow-out (easing) donne un mouvement naturel : un élément ne démarre ni ne s’arrête brutalement. Le timing détermine si une animation paraît rapide, fluide ou lourde. Adoptez ces principes : une animation linéaire mécanique est l’erreur de débutant la plus visible. Tout doit accélérer puis décélérer naturellement.
Étape 2 : Configurer Figma pour le prototypage
Ouvrez Figma et créez un nouveau fichier de design. Construisez deux écrans simples : une page d’accueil avec un bouton « Voir détails » et une page de détail. Sélectionnez le bouton, basculez sur l’onglet Prototype dans le panneau de droite. Tirez la flèche bleue depuis le bouton vers la page de détail. Dans les options, choisissez le déclencheur « On click » et la transition « Smart animate ». Cliquez sur Present (icône Play en haut à droite) pour tester. Smart Animate analyse les éléments communs entre les deux frames et anime automatiquement les changements de position, taille, opacité.
Étape 3 : Maîtriser les courbes d’easing
Dans le panneau Prototype, à côté de « Smart animate », cliquez sur le menu déroulant pour choisir une courbe d’easing : Linear (mécanique, à éviter), Ease in (démarre doucement, finit vite, bon pour des éléments qui sortent), Ease out (démarre vite, finit doucement, idéal pour des éléments qui entrent), Ease in and out (les deux, pour des transitions équilibrées), Custom bezier (pour aller plus loin). Pour 90 pourcent des animations UI, utilisez Ease out avec une durée de 200 à 400 millisecondes. Cette combinaison donne des transitions naturelles et professionnelles.
Étape 4 : Créer une micro-interaction sur un bouton
Dupliquez votre bouton et créez une seconde frame contenant ce bouton légèrement plus petit (95 pourcent) et avec une couleur de fond plus sombre. Dans Prototype, créez une interaction « While pressing » qui transitionne vers la version pressée avec Smart Animate, durée 100 ms, easing Ease out. Cette micro-interaction donne un feedback tactile au clic et rassure l’utilisateur que son action est prise en compte. Elle est particulièrement utile au Sénégal où les connexions lentes peuvent faire douter de la prise en compte du clic.
Étape 5 : Animer une apparition de modale
Créez une frame avec un bouton « Confirmer commande » et une seconde frame contenant ce même écran avec une modale de confirmation centrée. Dans Prototype, créez une transition « On click » entre les deux, avec Smart animate, 300 ms, Ease out. Pour rendre l’apparition plus dynamique, dans la seconde frame, agrandissez subtilement la modale par rapport à sa taille d’origine ou faites-la apparaitre avec un léger décalage vertical. Smart Animate interpolera ce changement, créant une apparition élégante. Cette technique donne aux dialogues importants un poids visuel plus fort.
Étape 6 : Construire un onboarding animé
Créez 3 frames d’onboarding pour une application : « Livraison à domicile », « Paiement sécurisé », « Suivi en temps réel ». Sur chaque frame, placez une illustration en haut, un titre, une description, un bouton suivant. Reliez les frames avec Smart animate, 400 ms, Ease in and out. Pour chaque illustration, faites varier subtilement la position ou l’échelle d’un frame à l’autre. L’animation crée un effet de mouvement entre les écrans, donnant une impression de progression fluide. Cet onboarding bien animé augmente significativement le taux d’utilisateurs qui terminent l’inscription.
Étape 7 : Animer une liste avec apparition séquentielle
Créez une frame avec une liste vide (juste l’en-tête). Dupliquez la frame et ajoutez 5 cartes en dessous. Dans Smart Animate avec Ease out 600 ms, les cartes apparaitront simultanément. Pour un effet plus raffiné de cascade, ce pattern n’est pas natif dans Figma : vous devrez utiliser After Effects ou un outil dédié comme Principle ou ProtoPie. Néanmoins, vous pouvez simuler une cascade en créant 5 frames intermédiaires où les cartes apparaissent une à une. Cette technique manuelle est laborieuse mais efficace pour démontrer l’idée au client.
Étape 8 : Découvrir After Effects pour les animations avancées
Pour les animations vraiment complexes, Figma atteint ses limites. Adobe After Effects est l’outil de référence. Ouvrez After Effects et créez une nouvelle composition via Menu Composition > Nouvelle composition, taille 800 par 600, durée 5 secondes, frame rate 60 fps. Importez votre maquette Figma exportée en SVG via Menu Fichier > Importer. Chaque calque vectoriel devient animable indépendamment. Pour animer un élément, sélectionnez-le, ouvrez Transform dans le panneau de gauche, et activez le chronomètre à côté de Position. Déplacez votre tête de lecture et changez la position : une keyframe est créée automatiquement.
Étape 9 : Maîtriser les keyframes et le timing
Dans After Effects, les animations sont contrôlées par des keyframes (images clés). Créez une animation simple : un cercle qui se déplace de gauche à droite. Au temps 0, position X = 100. Au temps 1 seconde, position X = 700. Cela crée une animation linéaire. Pour donner du naturel, sélectionnez les deux keyframes, clic droit, Easy Ease (raccourci F9). Affinez ensuite via le Graph Editor pour ajuster les courbes : un mouvement avec accélération en début et décélération en fin paraît beaucoup plus naturel qu’un mouvement constant. Cette gestion fine du timing différencie un motion designer professionnel d’un débutant.
Étape 10 : Exporter en Lottie pour le web et mobile
Une fois votre animation After Effects terminée, installez le plugin Bodymovin disponible sur GitHub gratuitement. Allez dans Menu Fenêtre > Extensions > Bodymovin. Sélectionnez votre composition et cliquez sur Render. Bodymovin exporte un fichier JSON Lottie. Ce format est ultra léger (souvent moins de 50 Ko) et peut être intégré dans n’importe quel site web ou application mobile. Pour le tester, importez le fichier sur lottiefiles.com qui propose un visualiseur. Cette pipeline After Effects vers Lottie est devenue le standard de l’industrie pour les animations UI riches et performantes.
Étape 11 : Intégrer une animation Lottie sur un site
Pour intégrer un Lottie dans un site web, utilisez la bibliothèque lottie-web. Dans le HTML de votre page, ajoutez le script Lottie via une balise script pointant vers le CDN de lottie-web. Créez une div avec un id, par exemple « animation ». En JavaScript, appelez la fonction lottie.loadAnimation en lui passant le container, le path vers votre fichier JSON, et les options renderer (svg ou canvas), loop (true ou false), et autoplay (true ou false). Votre animation se joue dans le site avec une excellente performance et reste vectorielle, donc nette à toutes les tailles. Idéal pour les PME sénégalaises qui veulent un site moderne sans alourdir le poids.
Étape 12 : Créer une animation de loader personnalisée
Les loaders sont les animations les plus visibles d’une interface. Concevez un loader unique pour la marque de votre client. Dans After Effects, créez une composition de 800 par 600, durée 2 secondes, fréquence 60 fps. Dessinez la forme principale du logo (par exemple le contour d’un baobab pour une PME agroalimentaire). Animez le tracé via l’effet Trim Paths (Menu Effet > Générer > Tracer la forme) qui dessine la forme progressivement de 0 à 100 pourcent. Ajoutez une rotation continue de 360 degrés. Bouclez la composition. Exportez en Lottie. Ce loader signature renforce l’identité de marque à chaque chargement.
Étape 13 : Penser la performance des animations
Une belle animation qui ralentit l’application est une mauvaise animation. Au Sénégal, beaucoup d’utilisateurs ont des téléphones milieu de gamme avec des processeurs limités. Quelques règles : préférez les animations CSS (transform, opacity) qui sont accélérées matériellement, évitez d’animer width, height, margin, top, left qui forcent des recalculs coûteux. Limitez le nombre d’animations simultanées sur un même écran. Pour les animations Lottie, évitez les compositions trop complexes (plus de 50 calques deviennent lourdes). Testez toujours sur un téléphone d’entrée de gamme : si ça tourne bien sur un Tecno à 75 000 FCFA, ça tournera bien partout.
Étape 14 : Documenter votre kit motion pour le développeur
Un motion designer livre rarement le code final lui-même. Vous devez documenter votre travail pour que le développeur puisse l’implémenter fidèlement. Créez un PDF ou une page Notion contenant pour chaque animation : un GIF ou MP4 du résultat attendu, la durée précise en millisecondes, la courbe d’easing exacte (cubic-bezier values pour CSS), les déclencheurs (au clic, au survol, au scroll, au chargement), et le fichier Lottie JSON le cas échéant. Cette documentation transforme une livraison vague en spécification professionnelle. Elle est ce qui différencie un freelance que les agences rappellent d’un freelance jetable. Vous pouvez facturer 350 000 à 1 500 000 FCFA un kit motion documenté complet pour une application PME sénégalaise.
Erreurs
La première erreur est l’animation excessive. Tout animer fatigue l’utilisateur et donne un rendu surchargé. Le motion doit être au service de l’expérience, pas une démonstration de virtuosité. La deuxième erreur consiste à utiliser des durées trop longues. Au-delà de 500 ms, l’utilisateur s’impatiente. Restez entre 150 et 400 ms pour les transitions UI standard. La troisième erreur est l’utilisation systématique de l’easing linear, qui donne un rendu robotique. Préférez ease out pour les entrées, ease in pour les sorties, ease in-out pour les transitions équilibrées. La quatrième erreur consiste à animer des éléments non-essentiels qui distraient l’attention au lieu de l’orienter. Chaque animation doit avoir un but : guider, confirmer, expliquer, signaler. La cinquième erreur est de ne pas tester sur des téléphones modestes : une animation magnifique sur Mac peut saccader sur un Android d’entrée de gamme, créant une expérience pire qu’une absence d’animation. La sixième erreur consiste à exporter des Lottie trop lourds (plus de 200 Ko) qui ralentissent le chargement. Optimisez votre composition After Effects en limitant les calques et les expressions complexes. Enfin, n’oubliez jamais l’accessibilité : certains utilisateurs sont sensibles au mouvement (vertige, migraine). Prévoyez la possibilité de désactiver les animations via la préférence système prefers-reduced-motion.
Checklist
Avant de livrer un kit motion design à votre client, vérifiez les points suivants. Toutes les animations critiques (transitions d’écrans, micro-interactions, loaders) sont prototypées et testées. Les durées sont comprises entre 150 et 400 ms pour les transitions UI standards, et entre 800 et 2000 ms pour les animations de mise en avant. Les courbes d’easing sont appropriées (ease-out pour les entrées, ease-in pour les sorties, jamais linear par défaut). Au moins 3 micro-interactions importantes sont définies (bouton pressé, validation de formulaire, ajout au panier). Une animation de chargement signature est créée pour la marque. Les animations Lottie pèsent moins de 100 Ko chacune et ne dépassent pas 50 calques. Les animations ont été testées sur au moins un téléphone Android d’entrée de gamme pour valider la performance. La règle des 12 principes Disney appliquables est respectée (anticipation, ease, timing). La documentation pour le développeur inclut durées, easings exactes (cubic-bezier), déclencheurs et exemples vidéo. Une option de désactivation des animations pour l’accessibilité est prévue. Le code de démonstration HTML/CSS/JS pour intégrer Lottie est fourni si pertinent. Les fichiers sources After Effects et Figma sont organisés et commentés pour permettre une reprise. Un GIF récapitulatif présente les animations principales pour validation rapide du client. Avec cette checklist respectée, vous livrez un kit motion design de niveau international, justifiant des tarifs entre 500 000 et 2 000 000 FCFA pour une application complète et bâtissant une réputation solide sur le marché sénégalais et de la sous-région ouest-africaine où le motion design reste une compétence rare et très valorisée.
