Guide de prototypage dans Figma

Avant de commencer

Qui peut utiliser cette fonctionnalité

S'applique à toutes les équipes ou tous les forfaits.

Toute personne disposant d'un accès éditeur peut créer des prototypes.

Toute personne disposant d'un accès lecteur peut lire les prototypes dans le Mode présentation.

Les fonctionnalités de prototypage de Figma vous permettent de créer des flux interactifs qui explorent la façon dont un utilisateur peut interagir avec vos designs.

Les prototypes sont un excellent moyen :

• d'obtenir un aperçu des interactions et des flux utilisateur,
• de partager et itérer des idées,
• d'obtenir les commentaires des collaborateurs,
• de tester les interactions avec les utilisateurs,
• de présenter vos designs aux parties prenantes.

Regardez notre vidéo sur le prototypage ci-dessous. Vous pouvez également consulter notre Playlist concernant la collaboration et le prototypage sur Youtube.

Flux et points de départ

Avec le prototypage dans Figma, vous pouvez créer plusieurs flux pour votre prototype sur une seule page pour prévisualiser l'ensemble du parcours et de l'expérience d'un utilisateur dans vos designs.

Un flux est constitué du réseau de cadres et de connexions sur une seule page. Un prototype peut tracer l'ensemble du parcours d'un utilisateur dans votre application ou votre site Web, ou se concentrer sur un segment spécifique de celui-ci via son propre flux. Par exemple : votre prototype couvre toutes les interactions possibles sur un site de e-commerce. Dans le prototype, vous disposez de flux pour créer un compte, ajouter des articles à un panier et régler.

Figma crée un point de départ de flux lorsque vous ajoutez votre première connexion entre deux cadres. Il existe d'autres façons d'ajouter un point de départ de flux à votre prototype :

• En ayant sélectionné le cadre de départ, cliquez sur la section dans le Point de départ du flux de la barre latérale droite.
• Cliquez avec le bouton droit de la souris sur le cadre, puis cliquez sur Ajouter un point de départ.
• Dupliquer un cadre avec un point de départ existant.

Lorsqu'il est temps de tester vos designs, vous pouvez partager l'intégralité du prototype ou copier le lien vers un point de départ du flux.

En savoir plus sur les points de départ et les flux →

Créer des connexions

1. Sélectionnez la zone interactive pour la connexion.
2. Cliquez sur pour créer la connexion.
3. Faites-le glisser vers la destination.
4. S'il n'y a pas de connexions existantes, Figma fera du premier cadre un point de départ.

Créez des interactions et des animations

1. Ouvrez l'onglet Prototype dans la barre latérale située à droite
2. Ajoutez des interactions
3. Définissez les détails de l'interaction
4. Appliquez une animation
5. Visualisez l'Aperçu de votre animation

Régler les paramètres du prototype

1. Sélectionnez un Appareil et un Modèle
2. Visualisez l'Aperçu de votre prototype
3. Sélectionnez la couleur de l'Arrière-plan
4. Définissez le cadre de départ du prototype

En savoir plus sur le prototypage

Commencer

• Créer des prototypes d'interactions et d'animations
• Sélectionnez un point de départ pour votre prototype
• Personnalisez votre appareil de prototype
• Actions, déclencheurs et animations du prototype

Interactions avancées

• Créer des superpositions dans vos prototypes
• Créez des animations avancées avec l'Animation automatique
• Interactions de défilement du prototype avec options de défilement
• Ajouter une vidéo aux prototypes
• Ajouter des GIF animés à des prototypes
• Utilisation de variables dans les prototypes
• Utilisation d'expressions dans les prototypes
• Actions multiples et logique conditionnelle
• Modes de variable dans les prototypes

Partager et collaborer

• Afficher les connexions de prototype
• Définir les options du mode présentation du prototype
• Partager votre prototype
• Afficher les prototypes sur un appareil mobile
• Faire des commentaires sur des prototypes

Glossaire

• Une zone interactive est l'endroit où l'interaction a lieu. Elle peut être n'importe quel objet dans le cadre original, tel qu'un lien, un bouton, une image ou une icône, etc.
• Les Connexions sont les flèches bleues ou « nouilles » qui relient la zone interactive à la destination. Nous appliquons les paramètres d'interaction et d'animation via la connexion.
• Un flux est le réseau de cadres connectés qui forment un chemin à travers un prototype. Chaque flux possède son propre point de départ. Plusieurs flux peuvent exister dans un prototype.
• Le point de départ est le premier cadre d'un flux. Définissez plusieurs points de départ pour afficher différents flux du prototype dans le mode présentation.
• Le déclencheur détermine le type d'interaction avec la zone interactive susceptible de faire progresser le prototype. Il peut s'agir d'une interaction avec la souris ou d'une interaction tactile, par exemple un tapotement, un glisser-déplacer, un clic, un survol, etc.
• La destination est l'endroit où la transition se termine. Il doit s'agir d'un cadre de premier niveau, un cadre qui est ajouté directement au canevas, et non d'un objet dans un cadre. Si nous pensons passer de A à B, A est la zone interactive et B est la destination.
• L'action définit le type de progression du prototype. Par exemple, l'action peut être de naviguer vers un autre cadre ou d'ouvrir une URL externe.
• Les paramètres d'animation déterminent la façon dont le prototype se déplace d'un cadre à l'autre. Vous pouvez contrôler le type d'animation, ainsi que la vitesse et la direction.
• Une transition est le type d'animation. Cette option définit la manière dont l'action se déplace vers la destination.
• La direction contrôle la direction d'origine de la transition. Choisissez entre gauche, droite, haut ou bas.
• La durée contrôle le temps nécessaire pour terminer l'animation. Plus la durée est courte, plus la transition est rapide. Sélectionnez une durée comprise entre 1 ms et 10 000 ms (10 secondes).
• L’atténuation affecte l’accélération de l’animation,qu’elle commence lentement ou rapidement. Cela vous permet de créer des animations plus naturelles.
• Les Superpositions sont des cadres qui apparaissent au-dessus de l'écran ou du cadre actuel. Vous pouvez utiliser des superpositions pour créer des infobulles, des menus interactifs, des alertes ou des confirmations.
• Les options de défilement vous permet de définir la façon dont votre prototype réagit au défilement. Cela vous permet de créer des interactions plus avancées avec l'utilisateur, telles que des carrousels, des galeries ou des cartes interactives.
• Choisissez l'appareil qui s'affiche lors de la présentation de votre prototype. Définissez l'appareil et le modèle.
• La couleur de l'arrière-plan vous permet de définir la couleur à l'arrière-plan de votre prototype.
• Si vous disposez d'un prototype avec cadres portrait et paysage, vous pouvez sélectionner une orientation. L'orientation est définie pour l'ensemble du prototype. Il n'est pas possible de basculer entre les modes portrait et paysage dans un prototype.
• Un aperçu vous montrera l'aspect ou le fonctionnement du prototype. Nous vous proposons des aperçus des animations et des paramètres d'appareil du prototype.