Creating AI prompt JSON animations

Generate Bannerify-ready JSON animations, then paste them into the Bannerify custom animations panel in Figma.

Video Tutorial: Animate and export banners to HTML from Figma

This video walks through how to animate and export production-ready HTML banners from Figma in seconds.

Generate your animation JSON on bannerify.hypermatic.com ​

  1. Open https://bannerify.hypermatic.com.
  2. In the Create Your Custom Bannerify Animation section, describe the animation you want (for example: "Elastic slide in from left with slight rotation").
  3. Click Copy Prompt to Clipboard and paste it into ChatGPT or Claude, or click Open Prompt in ChatGPT / Open Prompt in Claude.
  4. Then copy the generated animation JSON snippet.
  5. Open your Figma file and run the Bannerify plugin.
  6. Open the Custom Animations panel in Bannerify.
  7. Paste the JSON into the text area labeled Paste generated JSON code here.
  8. Confirm the animation appears in your timeline animation preset dropdowns.

The animation auto-saves on paste and can be selected like any other preset from the layer timeline animation menus.

Custom animations are saved in your current Figma file. If you switch to a different Figma file, you will need to paste the JSON there again.