Bannerify peut transformer les calques et les timings actuels d’une bannière en un prompt structuré pour ChatGPT, Claude, Gemini ou un autre assistant IA. Collez le JSON renvoyé dans Bannerify pour valider et passer en revue les animations d’entrée, de sortie et de survol proposées avant d’appliquer quoi que ce soit.

Bannerify ne contacte aucun service d’IA et ne modifie pas la timeline lorsque vous copiez le prompt. C’est vous qui choisissez où le coller, et la timeline n’est mise à jour qu’une fois que la réponse JSON a passé la validation et que vous avez cliqué sur Apply AI Timeline.

Créer une timeline par IA

1. Chargez vos frames ou sections de bannières dans Bannerify.
2. Cliquez sur l’icône de prompt Create AI Animation Timeline dans l’en-tête de la bannière à animer.
3. Décrivez l’orientation souhaitée. Précisez l’ambiance recherchée, la hiérarchie visuelle, l’ordre important des calques ou les éléments qui doivent rester discrets.
4. Cliquez sur Copy AI Prompt.
5. Une fois que Bannerify a confirmé la copie du prompt, collez-le dans votre assistant IA préféré et envoyez-le sans supprimer les données de timeline ni les règles qu’il contient. Le prompt généré est copié directement dans votre presse-papiers au lieu d’être affiché dans le plugin.
6. Copiez l’objet JSON de la réponse de l’IA.
7. Revenez dans Bannerify et collez la réponse dans Paste and validate the JSON response. Bannerify valide automatiquement le JSON collé, mais vous pouvez aussi cliquer sur Validate JSON.
8. Si Bannerify signale un problème, cliquez sur Copy JSON Fix Prompt, collez ce prompt dans la même conversation avec l’IA, puis copiez et validez la réponse JSON corrigée.
9. Passez en revue chaque modification proposée, y compris l’animation et le timing précédents et recommandés.
10. Cliquez sur Apply AI Timeline pour ne mettre à jour que cette bannière. Si vous avez chargé plusieurs bannières et que leur structure de calques est cohérente, cliquez plutôt sur Apply to All Matching Banners.

L’aperçu se met à jour immédiatement et Bannerify enregistre les nouveaux réglages d’animation dans les calques Figma.

Pour de meilleurs résultats, décrivez l’ordre dans lequel le regard doit parcourir la bannière plutôt que de nommer des préréglages d’animation. Par exemple : Présente d’abord le titre, fais entrer le produit par la droite, puis révèle le CTA. Garde un mouvement sobre et ajoute un léger survol sur le CTA. Le prompt copié fournit déjà les noms des animations prises en charge par Bannerify.

Vérifier et annuler le résultat

Le panneau de revue s’ouvre dans la colonne de droite et n’affiche que les pistes qui vont changer. Sa liste de calques défile indépendamment, pour que le titre de la revue et les boutons d’application restent accessibles. Pour chaque piste modifiée, les réglages actuels d’entrée, de sortie et de survol sont comparés à la recommandation validée pour le calque concerné.

Apply to All Matching Banners réutilise en toute sécurité le plan validé sur les bannières actuellement chargées dans Bannerify. Une bannière ne correspond que si chaque calque source modifiable a un calque unique avec le même nom normalisé, le même type de calque et la même position de scène de section, et si la bannière utilise le même mode source et la même durée de timeline. Bannerify valide le plan réassocié par rapport à la compatibilité des animations et aux fenêtres de timing de cette bannière avant de l’appliquer. Les bannières ambiguës ou incompatibles sont ignorées, et le message de confirmation indique combien de bannières correspondaient ou ont été ignorées.

L’application d’une timeline par IA crée une seule étape dans l’historique de Bannerify, même si plusieurs calques ou bannières correspondantes changent. Utilisez le bouton Undo ou Command + Z sous macOS / Ctrl + Z sous Windows pour restaurer toute la timeline précédente. Vous pouvez ensuite rétablir le même plan d’IA ou en générer un nouveau. Consultez Annuler et rétablir des modifications de la timeline pour tous les raccourcis et le fonctionnement de l’historique.

Ce que Bannerify inclut dans le prompt

Chaque prompt copié contient les informations dont l’IA a besoin pour créer un plan valide :

• Une référence temporaire, comme L1, pour chaque calque modifiable de la timeline
• Le nom, le type, l’ordre d’empilement et les limites des calques
• Les dimensions de la bannière et la durée de la timeline
• Les réglages actuels d’entrée, de sortie et de survol
• La fenêtre de timing autorisée pour chaque calque ou scène de section
• La compatibilité Split Text et SVG Draw
• Un catalogue des ID d’animation Bannerify pris en charge, y compris les animations personnalisées enregistrées utilisables sur les pistes d’entrée ou de sortie
• Votre orientation pour l’animation

Bannerify n’inclut pas les ID bruts des bannières ou des calques Figma, les données d’images exportées, le balisage SVG ni les autres octets des ressources des calques. Le prompt copié contient en revanche les noms des calques et des métadonnées de mise en page et de timeline : relisez-le avant de partager des designs dont les noms ou la structure sont confidentiels.

Comment le JSON est validé

Bannerify valide la réponse complète avant de modifier le moindre calque. Il vérifie que :

• La réponse utilise le schéma de timeline Bannerify actuel et correspond au prompt copié
• Chaque référence de calque fournie apparaît exactement une fois
• Aucune référence de calque ni aucun ID d’animation inconnu n’a été inventé
• Les animations Split Text et SVG Draw ne sont utilisées que sur des calques compatibles
• Les animations d’entrée et de sortie tiennent dans la fenêtre de timeline ou de scène autorisée pour le calque
• Les plages d’entrée et de sortie ne se chevauchent pas
• Les durées sont d’au moins 0,1 seconde
• Les valeurs de timing peuvent être normalisées selon les incréments de 0,1 seconde de la timeline Bannerify

Le prompt d’origine demande à l’IA de vérifier elle-même que le JSON est strict avant de répondre, et exclut explicitement le texte rédigé, les URL, les commentaires, les virgules finales et le JSON imbriqué dans une autre chaîne. Si la réponse échoue encore à la validation, Copy JSON Fix Prompt crée un nouveau prompt contenant les erreurs exactes, la réponse rejetée et les instructions de timeline d’origine nettoyées, pour que l’IA puisse la corriger sans tout recommencer.

Si la timeline, les réglages des calques, le catalogue des animations personnalisées ou le timing des scènes changent après la copie d’un prompt, Bannerify rejette l’ancienne réponse. Cliquez sur Copy Fresh Prompt et interrogez de nouveau l’IA pour que son plan repose sur la timeline actuelle.

Format de la réponse JSON

Le prompt copié demande à l’IA de renvoyer un seul objet JSON au format suivant :

{
  "schemaVersion": "bannerify.timeline-plan.v1",
  "snapshotId": "ai-example-snapshot",
  "timelineSeconds": 5,
  "layers": [
    {
      "layerRef": "L1",
      "entry": {
        "animationId": "fade-in-bottom",
        "startSeconds": 0.2,
        "durationSeconds": 0.6,
        "loop": false
      },
      "exit": {
        "animationId": "fade-out",
        "startSeconds": 4.3,
        "durationSeconds": 0.5,
        "loop": false
      },
      "hover": null
    }
  ]
}

Chaque valeur entry, exit ou hover peut être :

• Un objet d’animation, qui remplace cette piste
• null, qui supprime son animation
• "keep", qui conserve sa valeur actuelle

Ne modifiez pas schemaVersion, snapshotId, timelineSeconds, les références de calques ni les ID d’animation. Si une IA place la réponse dans un unique bloc de code json, Bannerify peut tout de même la lire.

Travailler avec les scènes de section et les animations spéciales

Pour les bannières chargées depuis des sections Figma, le prompt contient la fenêtre de timing actuelle de chaque scène. L’IA peut modifier les timings des calques dans cette fenêtre, mais ne peut pas déplacer un calque dans une autre scène. Ajustez d’abord le timing des scènes dans Bannerify, puis copiez un nouveau prompt si vous voulez que l’IA utilise la nouvelle fenêtre.

Les animations Split Text ne sont disponibles que lorsque le calque de texte est compatible. Les animations SVG Draw ne sont disponibles que pour les calques SVG compatibles. Les animations par keyframes personnalisées enregistrées sont proposées comme choix d’entrée et de sortie. Les animations existantes qui ne figurent pas dans le catalogue fourni à l’IA peuvent quand même être conservées en renvoyant "keep" pour la piste concernée.

Les calques dont le nom commence par locked- sont volontairement exclus. S’il manque un calque imbriqué, développez-le dans la timeline Bannerify, actualisez la bannière et copiez un nouveau prompt.

Dépannage

La réponse n’est pas un JSON valide

Cliquez sur Copy JSON Fix Prompt dans l’avertissement de validation, collez le prompt dans la même conversation avec l’IA et envoyez-le sans modifier les erreurs ni les instructions de timeline qu’il contient. Remplacez la réponse rejetée dans Bannerify par le JSON corrigé, puis cliquez de nouveau sur Validate JSON.

La réponse indique que la timeline a changé

Le prompt ne correspond plus à l’état actuel de la bannière. Cliquez sur Copy Fresh Prompt, remplacez le prompt précédent dans votre assistant IA et utilisez sa nouvelle réponse JSON.

Un ID d’animation ne figure pas dans le catalogue

Demandez à l’IA de n’utiliser que les ID animationCatalog exacts fournis dans le prompt copié. Ne les remplacez pas par un nom d’affichage et n’inventez pas de nouveau nom d’animation.

Un calque est manquant ou en double

La réponse de l’IA doit inclure chaque layerRef fourni exactement une fois, même lorsque toutes les pistes de ce calque sont définies sur "keep".

Les animations d’entrée et de sortie se chevauchent

Demandez à l’IA de terminer l’entrée avant le début de la sortie. Les deux plages doivent aussi rester dans le timeWindowSeconds du calque.

Le JSON est valide mais n’affiche aucune modification

La réponse a conservé les valeurs actuelles ou recommandé des réglages déjà présents dans la timeline. Ajustez votre orientation et copiez un nouveau prompt si vous voulez un autre résultat.

Prévisualisez toujours la bannière complète avant de l’exporter. La validation du JSON confirme que le plan est structurellement sûr et compatible avec la timeline actuelle, mais le résultat créatif doit quand même être vérifié visuellement.