# **Module 3 : Interactions et prototypage dynamique** ## **Objectifs :** - Créer des interfaces interactives avec Figma - Utiliser les fonctionnalités de prototypage pour simuler la navigation et les interactions entre les différentes pages - Comprendre comment créer des transitions et des animations dans une maquette --- ## **Section 1 : Introduction au prototypage** ### **1.1. Qu'est-ce que le prototypage ?** Le prototypage est l'étape qui suit le maquettage. Il permet de rendre une maquette interactive, en simulant la navigation entre les pages, les actions de l'utilisateur (cliquer sur un bouton, passer la souris sur un lien, etc.), et les transitions entre les différentes sections d'une interface. **Les avantages du prototypage :** - Tester l'interface avant de commencer le développement. - Obtenir des retours d’utilisateurs ou de parties prenantes plus tôt dans le processus. - Faciliter la communication entre les designers et les développeurs. ### **1.2. Types d'interactions :** Dans Figma, il existe plusieurs types d'interactions que vous pouvez ajouter à vos prototypes : - **Navigation entre les écrans** : Cliquez sur un bouton pour passer d’une page à une autre. - **Animations** : Par exemple, faire apparaître ou disparaître des éléments avec des effets de fondu. - **Interactions d'état** : Changer l'apparence d'un élément (comme un bouton) en fonction de l'état (au survol, au clic). --- ## **Section 2 : Créer des interactions dans Figma** ### **2.1. Comment accéder au mode prototype :** 1. **Sélectionnez un élément** que vous souhaitez rendre interactif (par exemple, un bouton). 2. En haut de l’interface Figma, basculez du mode **"Design"** au mode **"Prototype"**. 3. Vous verrez alors des points bleus apparaître à côté des éléments interactifs. 4. Cliquez et faites glisser l’un de ces points vers un autre écran ou élément pour créer une interaction. ### **2.2. Définir une interaction de base :** 1. **Ajouter une interaction de clic** : - Sélectionnez un bouton dans votre maquette. - Passez en mode **Prototype**. - Faites glisser le point bleu depuis le bouton vers l'écran ou le frame que vous souhaitez afficher après le clic. - Dans la fenêtre qui s’ouvre, sélectionnez **"On Click"** comme action de déclenchement et choisissez la destination. 2. **Définir une animation de transition** : - Après avoir créé l’interaction, choisissez une animation de transition dans le menu de droite (par exemple, **Smart Animate**, **Dissolve**, ou **Slide In**). - Ajustez la durée de l’animation si nécessaire (par défaut 300ms). ### **2.3. Travaux pratiques : Prototyper une navigation entre deux pages** 1. **Créer deux frames** dans votre projet, l’un représentant la page d'accueil et l’autre une page "À propos". 2. Ajoutez un bouton "À propos" sur la page d'accueil. 3. En mode **Prototype**, faites glisser une interaction de ce bouton vers la page "À propos". 4. Ajoutez une animation de transition (par exemple, **Slide In**). 5. Testez le prototype en appuyant sur le bouton **"Play"** en haut à droite. --- ## **Section 3 : Transitions et animations** ### **3.1. Types de transitions :** Dans Figma, vous pouvez définir différentes transitions pour simuler les interactions de votre interface. Voici quelques exemples : - **Dissolve** : Un élément s’efface pour révéler un autre. - **Smart Animate** : Permet d’animer les changements subtils entre deux états (par exemple, déplacer un objet, modifier sa couleur ou sa taille). - **Slide In** : Un élément entre dans l'écran en glissant depuis un côté. ### **3.2. Créer une animation Smart Animate :** 1. **Sélectionnez deux frames** qui représentent deux états d’un même écran (par exemple, un menu avant et après un clic). 2. Ajoutez une interaction entre les deux frames. 3. Dans les paramètres de l'interaction, choisissez **Smart Animate**. 4. Figma analysera automatiquement les différences entre les deux frames et créera une animation. ### **3.3. Interactions basées sur les événements :** - **Hover (Survol)** : Déclenche une interaction lorsque l’utilisateur passe la souris sur un élément. Par exemple, changer la couleur d’un bouton lorsqu’il est survolé. - **Drag (Glisser)** : Utilisé pour des éléments interactifs comme des carrousels d'images ou des curseurs. - **Press (Appuyer)** : Simule l’action de cliquer ou de toucher un bouton ou une icône. --- ## **Section 4 : Collaboration et partage du prototype** ### **4.1. Partager un prototype avec les parties prenantes :** Une fois que vous avez créé un prototype interactif, il est essentiel de le partager pour obtenir des retours. Figma permet de partager facilement un lien vers votre prototype. 1. **Activer le partage du prototype :** - Cliquez sur le bouton **"Share"** en haut à droite. - Sélectionnez **"Anyone with the link"** pour permettre aux autres de voir votre prototype sans avoir besoin d’un compte Figma. 2. **Tester le prototype :** - En mode **Prototype**, cliquez sur le bouton **"Play"** pour voir une prévisualisation interactive dans une nouvelle fenêtre. - Envoyez ce lien aux parties prenantes pour qu'elles puissent tester et donner des retours. ### **4.2. Feedback et collaboration :** - **Ajout de commentaires** : Vos collègues ou clients peuvent ajouter des commentaires directement dans Figma sur les éléments qu'ils souhaitent modifier. - **Collaborer en temps réel** : Plusieurs personnes peuvent travailler simultanément sur un même fichier dans Figma, facilitant la collaboration entre designers, développeurs, et autres parties prenantes. --- ## **Section 5 : Travaux pratiques** ### **TP 3 : Créer un prototype interactif avec plusieurs interactions** ### **Objectif :** Créer un prototype interactif complet comportant : 1. Une page d'accueil avec des boutons de navigation. 2. Une page "À propos" et une page "Contact". 3. Des animations de transition entre les pages. 4. Un effet de survol sur un bouton. ### **Instructions :** 1. Créez trois frames pour représenter les pages d'accueil, "À propos", et "Contact". 2. Ajoutez des boutons de navigation sur la page d'accueil, avec des liens vers les autres pages. 3. Ajoutez une interaction de **Smart Animate** entre les pages pour une transition fluide. 4. Ajoutez un effet **Hover** sur un des boutons pour changer sa couleur lorsqu'il est survolé. 5. Testez le prototype en utilisant le mode **Play** et partagez-le avec un lien. ### **Durée :** 3 heures --- ## **Conclusion :** À la fin de ce module, vous serez capable de créer des prototypes interactifs dans Figma, d'ajouter des transitions dynamiques et d’animer vos maquettes pour simuler des expériences utilisateur réalistes. Vous saurez également comment partager vos prototypes et collaborer efficacement avec les autres parties prenantes.