Tutoriel vidéo : exporter des bannières animées avec Figma Motion en HTML, en vidéo MP4 ou en GIF

Bannerify peut détecter les animations prises en charge créées avec Figma Motion et les proposer comme animation d’entrée Figma Motion. C’est vous qui choisissez les calques qui l’utilisent, comme pour n’importe quelle autre animation Bannerify.

La détection ne remplace jamais automatiquement une animation d’entrée Bannerify existante. Appliquez Figma Motion à des calques individuels, ou utilisez les actions par lots existantes de Bannerify pour l’appliquer à plusieurs calques à la fois.

Figma Motion est actuellement une API en bêta. Figma peut modifier son modèle de données Motion tant que l’API est en bêta. Consultez la documentation de l’API Figma Motion pour connaître le statut actuel de l’API.

Avant de commencer

• Ajoutez une animation Motion à un calque de votre frame de bannière dans Figma.
• Vérifiez que le calque apparaît dans la timeline de Bannerify. S’il se trouve dans un groupe, un composant ou un autre calque, incluez d’abord le calque imbriqué.
• Chargez ou actualisez la bannière dans Bannerify après avoir modifié des keyframes Motion dans Figma.

Appliquer en un clic les animations Motion détectées

Lorsque Bannerify trouve des animations Motion prises en charge sur des calques qui ne les utilisent pas encore, un message Figma Motion detected apparaît au-dessus des timelines des bannières.

Cliquez sur Apply to All Banners (n Layers) pour appliquer les pistes Motion prises en charge propres à chaque calque compatible, dans tous les frames de bannière actuellement chargés dans Bannerify. Le nombre indiqué comprend tous les calques Motion compatibles des timelines chargées. Bannerify active aussi Mirror Figma Motion Timings pour que les décalages natifs soient utilisés immédiatement. Les animations de sortie et de survol existantes ne changent pas, et vous pouvez désactiver ensuite la reproduction des timings pour retrouver des plages de timing Bannerify modifiables.

Appliquer Motion aux groupes imbriqués et aux calques à pulsation

Développez chaque groupe qui contient des enfants animés dans le panneau des calques imbriqués. Si le groupe parent a aussi sa propre animation Motion, activez Keep Parent Animatable pour ce groupe afin que son animation reste disponible à côté de celles des enfants.

Après avoir fermé le panneau, cliquez sur Apply to All Banners dans l’avis Figma Motion detected. Les enfants nouvellement affichés ont besoin de cette étape même si Mirror Figma Motion Timings est déjà activé. Par exemple, des calques à pulsation peuvent apparaître dans la timeline mais rester statiques tant que leurs pistes d’échelle et d’opacité détectées n’ont pas été appliquées.

Appliquer Figma Motion à plusieurs calques

1. Ouvrez le frame de bannière dans Bannerify et actualisez-le si nécessaire.
2. Cochez les cases des calques à mettre à jour, ou utilisez Quick Select Layers.
3. Dans Batch Layer Actions, ouvrez le menu d’animation Entry.
4. Choisissez Apply Each Layer's Figma Motion dans le groupe Figma Motion.
5. Définissez le timing d’entrée Bannerify souhaité et cliquez sur Apply Animations to Selected Layers.

Bannerify applique à chaque calque ses propres keyframes Motion détectées. Si votre sélection contient aussi des calques sans valeurs Motion prises en charge, ceux-ci conservent leur animation d’entrée actuelle, et Bannerify indique combien de calques sélectionnés sont compatibles avant que vous n’appliquiez.

Appliquer Figma Motion à un seul calque

1. Trouvez le calque animé dans la timeline de Bannerify.
2. Ouvrez son menu Entry Animation.
3. Sélectionnez l’animation détectée dans le groupe Figma Motion.

Bannerify combine toutes les pistes Motion prises en charge du calque en une seule animation d’entrée. Par exemple, la position, l’opacité, l’échelle et la rotation peuvent s’animer ensemble tout en conservant leurs propres keyframes et leur propre easing.

Reproduire la timeline Figma Motion

Dès qu’au moins un calque utilise son animation d’entrée Figma Motion, Bannerify affiche Mirror Figma Motion Timings au-dessus de la timeline. Le libellé indique le nombre de calques Motion qui seront mis à jour, par exemple Mirror Figma Motion Timings (5 Layers).

• L’action en un clic Apply to All Banners l’active automatiquement.
• Laissez-le désactivé pour positionner ou redimensionner les barres d’animation Motion avec les commandes de timing habituelles de Bannerify.
• Activez-le pour utiliser les décalages de début et de fin natifs de Figma pour chaque animation Motion sélectionnée. Bannerify ajuste aussi la durée totale de la timeline à la timeline Motion sélectionnée la plus longue.
• Désactivez-le de nouveau pour retrouver les plages de timing Bannerify modifiables que vous utilisiez avant la reproduction.

L’interrupteur de reproduction ne fait que synchroniser le timing de la timeline. Il n’applique pas Figma Motion à d’autres calques et ne remplace aucune autre animation d’entrée. L’action en un clic applique les calques compatibles avant de l’activer ; pour un choix plus sélectif, utilisez le workflow par calque ou par lots, puis gérez la reproduction séparément.

Pour les bannières déjà animées dans Figma, utilisez Apply to All Banners pour obtenir en une seule étape le résultat le plus proche de la timeline native de Figma. Bannerify applique tous les calques chargés compatibles et active automatiquement Mirror Figma Motion Timings. La durée totale de la timeline se règle en secondes entières : la timeline native la plus longue est donc arrondie à la seconde supérieure si nécessaire.

Vous pouvez quand même ajouter une animation de sortie Bannerify distincte. Pour un enchaînement propre, placez l’animation de sortie après la fin de l’animation d’entrée Figma Motion.

Propriétés Motion prises en charge

Bannerify reproduit actuellement ces propriétés Motion natives :

• Position sur les axes X et Y
• Opacité
• Échelle sur les axes X et Y
• Rotation
• Rayons d’angle uniformes ou individuels sur les calques rectangle à remplissage uni alignés sur les axes horizontal et vertical, y compris avec des rotations de 90 degrés, sans contour visible, effet, masque ni lissage des angles

Les rayons d’angle animés sont reproduits dans l’aperçu et dans les exports HTML, GIF et vidéo. Les rectangles à remplissage d’image, les frames, les groupes et les rectangles avec contour, effets ou lissage des angles affichent toujours un avertissement de compatibilité pour le rayon d’angle.

Chaque propriété conserve ses propres keyframes, son timing et son easing dans l’animation Bannerify combinée. Bannerify convertit les easings cubic-bezier et spring pris en charge dans le format utilisé par son aperçu et ses exports. De très légères différences visuelles peuvent apparaître, en particulier avec les mouvements spring.

Si une animation mélange des propriétés prises en charge et non prises en charge, Bannerify reproduit les propriétés prises en charge et indique celles qu’il ne peut pas encore exporter. Un calque sans aucune propriété Motion prise en charge n’affiche pas d’option Figma Motion.

L’avis de la timeline indique les propriétés non prises en charge, notamment la taille, le rayon d’angle sur des types ou apparences de calques non pris en charge, l’espacement et la marge intérieure de l’Auto Layout, l’épaisseur du contour ou de la bordure, le découpage de tracé (path trim), les remplissages, les contours ou les effets. Les propriétés listées ne seront pas animées dans le fichier exporté.

Réutiliser Motion dans une bannière pivotée

Vous pouvez faire pivoter de 90 degrés un frame de bannière en portrait pour l’utiliser en paysage. Bannerify suit la direction pivotée de ses pistes de position Motion et l’ordre des angles des rectangles pris en charge. Actualisez la bannière après l’avoir pivotée pour que les visuels et les pistes Motion soient rechargés ensemble.

Faire pivoter le frame fait aussi pivoter ses visuels. Ajustez les textes et les images dans Figma s’ils doivent rester droits, puis vérifiez l’animation dans l’aperçu de Bannerify et dans votre fichier exporté. L’animation du rayon d’angle nécessite toujours un rectangle pris en charge aligné sur les axes horizontal et vertical ; les rectangles pivotés en diagonale affichent un avertissement de compatibilité.

Actualiser après une modification dans Figma

Après avoir modifié une animation Motion dans Figma, cliquez sur Refresh All Banners dans Bannerify, ou utilisez Refresh Banner Layers pour la bannière concernée. Bannerify détecte les keyframes les plus récentes. Les calques qui utilisent déjà Figma Motion restent activés, tandis que les calques nouvellement animés restent inchangés jusqu’à ce que vous leur appliquiez Figma Motion.

Aperçu et export

Les animations Figma Motion fonctionnent avec les commandes Play et Replay de Bannerify et peuvent être parcourues à n’importe quel moment de la timeline. Bannerify capture les visuels Motion pris en charge indépendamment de la tête de lecture actuelle de Figma, y compris les calques qui commencent avec une échelle ou une opacité nulle. L’échelle et la rotation conservent le centre du calque Figma d’origine lorsque le visuel exporté a des limites différentes, par exemple du texte ou des visuels avec des ombres.

Elles sont aussi incluses dans les exports suivants :

• HTML CSS ou GSAP
• GIF
• MP4

Avant d’exporter, consultez l’avis Figma Motion detected au-dessus de la timeline. Il signale les cas suivants :

• Une animation Motion prise en charge a été détectée mais n’a pas été appliquée comme animation d’entrée Bannerify du calque.
• Un calque Motion contient des propriétés que Bannerify n’exporte pas encore.
• Un calque Motion ne contient que des propriétés non prises en charge et ne peut pas encore être appliqué.

Vous pouvez appliquer directement depuis l’avis de la timeline toutes les animations Motion prises en charge qui ne sont pas encore appliquées.

Dépannage

Certaines animations Figma Motion manquent dans l’export

1. Consultez l’avis Figma Motion detected au-dessus de la timeline pour repérer les calques non appliqués.
2. Cliquez sur Apply to All Banners, ou sélectionnez Figma Motion dans le menu Entry Animation de chaque calque concerné.
3. Vérifiez les noms des propriétés non prises en charge listées dans l’avertissement.
4. Développez les calques animés imbriqués dans la timeline de Bannerify, puis actualisez la bannière.
5. Vérifiez que Mirror Figma Motion Timings reste activé si les décalages exportés doivent correspondre à la timeline Motion de Figma.

Figma Motion n’apparaît pas dans le menu des animations

• Vérifiez que le calque possède au moins une propriété Motion prise en charge.
• Si le calque est imbriqué, assurez-vous qu’il est inclus dans la timeline de Bannerify.
• Actualisez la bannière après avoir ajouté ou modifié l’animation Motion dans Figma.
• Pour les actions par lots, assurez-vous que la sélection actuelle contient au moins un calque avec des valeurs Motion détectées.

Le timing ne correspond pas à Figma Motion

Appliquez d’abord Figma Motion aux calques à utiliser. Activez ensuite Mirror Figma Motion Timings au-dessus de la timeline pour utiliser leurs décalages de début et de fin natifs au lieu des positions personnalisées des barres d’animation Bannerify.

L’animation est légèrement différente

Vérifiez que chaque propriété animée est prise en charge. L’easing cubic-bezier est reproduit directement lorsque c’est possible, tandis que les pistes spring et celles dont l’easing est indépendant sont converties pour les formats d’aperçu et d’export de Bannerify, et peuvent présenter de très légères différences.