Tutoriel vidéo : animer et exporter des bannières en HTML depuis Figma
Cette vidéo montre comment animer et exporter en quelques secondes des bannières HTML prêtes pour la production depuis Figma.
Générer le JSON de votre animation sur bannerify.hypermatic.com
- Ouvrez https://bannerify.hypermatic.com.
- Dans la section Create Your Custom Bannerify Animation, décrivez l’animation souhaitée (par exemple : « Elastic slide in from left with slight rotation »).
- Cliquez sur Copy Prompt to Clipboard et collez le prompt dans ChatGPT ou Claude, ou cliquez sur Open Prompt in ChatGPT / Open Prompt in Claude.
- Copiez ensuite l’extrait JSON d’animation généré.
- Ouvrez votre fichier Figma et lancez le plugin Bannerify.
- Ouvrez le panneau Custom Animations dans Bannerify.
- Collez le JSON dans la zone de texte intitulée Paste generated JSON code here.
- Vérifiez que l’animation apparaît dans les menus déroulants des préréglages d’animation de votre timeline.
L’animation est enregistrée automatiquement dès que vous la collez, et vous pouvez la sélectionner comme n’importe quel autre préréglage dans les menus d’animation de la timeline des calques.
Les animations personnalisées sont enregistrées dans votre fichier Figma actuel. Si vous passez à un autre fichier Figma, vous devrez y coller de nouveau le JSON.