JSON-Animationen per KI-Prompt erstellen

Erzeuge JSON-Animationen für Bannerify und füge sie in Figma in das Panel für eigene Animationen von Bannerify ein.

Video-Tutorial: Banner in Figma animieren und als HTML exportieren

Dieses Video zeigt, wie du produktionsreife HTML-Banner in Sekunden aus Figma animierst und exportierst.

Das Animations-JSON auf bannerify.hypermatic.com erzeugen ​

  1. Öffne https://bannerify.hypermatic.com.
  2. Beschreib im Bereich Create Your Custom Bannerify Animation die gewünschte Animation (zum Beispiel: „Elastisches Einschieben von links mit leichter Drehung“).
  3. Klick auf Copy Prompt to Clipboard und füge den Prompt in ChatGPT oder Claude ein, oder klick auf Open Prompt in ChatGPT / Open Prompt in Claude.
  4. Kopiere anschließend das erzeugte JSON-Snippet der Animation.
  5. Öffne deine Figma-Datei und führe das Bannerify-Plugin aus.
  6. Öffne in Bannerify das Panel Custom Animations.
  7. Füge das JSON in das Textfeld Paste generated JSON code here ein.
  8. Prüfe, ob die Animation in den Dropdown-Menüs mit den Animations-Presets deiner Zeitleiste erscheint.

Die Animation wird beim Einfügen automatisch gespeichert und lässt sich wie jedes andere Preset in den Animationsmenüs der Ebenen-Zeitleiste auswählen.

Eigene Animationen werden in deiner aktuellen Figma-Datei gespeichert. Wechselst du zu einer anderen Figma-Datei, musst du das JSON dort erneut einfügen.