Utiliser des vidéos dans les prototypes

Avant de commencer

Qui peut utiliser cette fonctionnalité

Pris en charge pour les fichiers des équipes Éducation, Professionnel, Organisation et Enterprise.

Tout membre d'une équipe payante peut ajouter une vidéo aux fichiers.

Toute personne disposant d'un accès en édition peut éditer les vidéos dans les fichiers.

Vous débutez dans le prototypage ? Consultez notre guide du prototypage →

Ajoutez une vidéo à vos prototypes pour reproduire l'expérience dont vos utilisateurs bénéficieraient sur un site ou dans une application avec des lectures vidéo ou des aperçus.

La vidéo dans les prototypes :

• Peut être au format .mp4, .mov ou .webm
• Jusqu'à 100 Mo
• Est un remplissage de forme et se comporte comme tel
• N'est actuellement pas pris en charge dans l'application mobile Figma

Après avoir ajouté du contenu vidéo à votre fichier de design, vous pouvez éditer ou ajuster les qualités vidéo de base. Vous pouvez ensuite ajouter des interactions à vos vidéos pour commencer à créer vos prototypes.

Ajouter une vidéo aux fichiers

Dans Figma, il n'existe pas de type de calque spécifique pour la vidéo. mais les vidéos sont un type de remplissage. Vous pouvez donc les ajouter à n'importe quel vecteur ou forme.

Vous pouvez ajouter de la vidéo à des fichiers de design de différentes façons :

• A Glissez-déposez un fichier vidéo de votre ordinateur sur le plan de travail. 

• B Utilisez l'importateur de vidéos du sélecteur de couleurs. en savoir plus sur le chargement de remplissages →

• C Utilisez l'outil de placement d'image/vidéo pour ajouter des vidéos en lot. En savoir plus sur l'outil de placement d'image/vidéo →

• C Copiez une vidéo à partir d'un autre calque du fichier en cours ou d'un autre fichier.

• D Collez une vidéo de votre presse-papiers dans le plan de travail.

Si vous ajoutez une vidéo directement dans le plan de travail, Figma crée un objet sur celui-ci aux dimensions du fichier d'origine. Si vous ajoutez une vidéo en tant que remplissage d'un objet existant, Figma utilise le nom et les dimensions de l'objet d'origine.

Consultez et mettez à jour les remplissages vidéo dans la section Remplissage de la barre latérale droite. Dans la section Remplissage, vous pouvez lire et prévisualiser votre remplissage vidéo, accéder à un horodatage spécifique ou parcourir la vidéo.

Vous pouvez également identifier des calques avec des remplissages vidéo dans le panneau des calques de la barre latérale gauche. Les objets comportant des remplissages vidéo sont signalés dans le panneau des calques par l'icône .

Éditer la vidéo

Une fois que vous avez ajouté une vidéo à votre fichier, vous pouvez l'éditer comme suit :

• mettre à l'échelle, faire pivoter et ajuster les dimensions des calques contenant une vidéo,
• recadrer et repositionner la vidéo appliquée aux calques,
• Ajuster les options vidéo, y compris le mode de remplissage, la rotation et les modes de fusion
• Appliquer des masques pour afficher une partie de la vidéo seulement

Prototype avec vidéo

Après avoir ajouté une vidéo à une frame, accédez à Prototype dans la barre latérale de droite. Vous pouvez y créer des interactions entre les frames avec vidéo.

En savoir plus sur le prototypage →

Propriétés de la vidéo

Lorsque vous sélectionnez une vidéo, une section Vidéo est disponible dans l'onglet Prototype. Cette section vous permet de définir le comportement de la vidéo lorsque vous accédez à sa frame dans un prototype.

• Cochez la case en regard de la vidéo en lecture automatique
• Cliquez sur l'icône Boucle pour lire la vidéo en boucle
• Cliquez sur l'icône Son pour activer ou désactiver le paramètre sonore par défaut

Interactions vidéo

Lorsque vous créez une connexion de prototypage, un déclencheur détermine l'élément qui lance l'interaction, et une action définit la réponse à l'événement déclencheur.

Pour les vidéos, les déclecheurs d'interaction suivants sont disponibles :

• Lorsque la vidéo atteint - Déclenche l'action définie lorsque la vidéo atteint un horodatage spécifique.
• Lorsque la vidéo se termine - Déclenche l'action définie lorsque la lecture de la vidéo se termine.

Pour les vidéos, les actions d'interaction suivantes sont disponibles :

• Lire/mettre en pause la vidéo : Choisissez entre Play video, Pause video et Toggle play/pause.
• Couper/remettre le son de la vidéo - Choisissez Couper le son de la vidéo, Remettre le son de la vidéo, Activer/désactiver le son.
• Aller à un point spécifique - Définissez un horodatage auquel aller.
• Avancer/reculer - Choisissez Avancer ou Reculer, puis définissez le délai en secondes vers l'avant ou vers l'arrière.

Lorsque vous créez une interaction entre deux frames contenant la même vidéo, une option Reset video state est disponible dans le panneau Interaction details. Lorsque cette option est activée, la vidéo redémarre au début entre les frames. En savoir plus sur la gestion des états vidéo → 

Interactions vidéos dans la même frame

Vous pouvez interagir et créer des prototypes avec des vidéos selon des déclencheurs dans une même frame. Cela peut être utile pour créer une expérience vidéo interactive.

1. Créez une connexion entre votre objet de départ et le fichier vidéo.
2. Définissez l'action de départ souhaitée (par exemple, On click).
3. Définissez l'action souhaitée pour la vidéo (par exemple, Mute/unmute video). 

Vidéo et animation automatique

Vous pouvez utiliser l'animation automatique pour poursuivre la progression d'une vidéo lorsque vous naviguez entre les frames. Par exemple, si vous souhaitez créer un prototype dans lequel le fait d'entrer dans une frame lance la lecture, alors le fait de cliquer sur la vidéo vous renvoie à une nouvelle frame avec une vue plus large.

1. Créez une connexion entre les deux frames portant le même nom de vidéo. Assurez-vous que les noms des calques vidéo correspondent.
2. Définissez le réglage de l'animation sur Animation automatique.
3. Dans le panneau Détails de l'interaction, décochez Réinitialiser les états de la vidéo.

Vidéo et composants interactifs

Utilisez des composants interactifs pour prototyper des interactions vidéo dans une frame unique, comme l'aperçu de la lecture en passant la souris dessus.

1. Créez un composant avec des variantes pour un état par défaut et un état dans lequel on passe la souris.
2. La lecture automatique doit être désactivée dans l'état par défaut et activée dans l'état dans lequel on passe la souris.
3. Créez une connexion à partir de la variante par défaut pour passer à la variante de survol de la souris et décochez la case Réinitialiser les états de la vidéo.
4. Créez une frame avec quelques instances du composant et replacez la vidéo pour réutiliser le composant.

Essayer d'autres moyens de créer des prototypes avec vidéo grâce au fichier bac à sable →