---
url: "/bannerify/animation/ai-prompt-animations.md"
description: "Generate Bannerify-ready JSON animations, then paste them into the Bannerify custom animations panel in Figma."
---

# 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 tutorial is a complete step-by-step guide showing you how to animate and export production-ready HTML banners from Figma in seconds.
[Embedded media](https://www.youtube.com/embed/WDYRd9cSJcs)

## Generate your animation JSON on bannerify.hypermatic.com

[Video](/assets/videos/bannerify/animation/ai-prompt-animations.mp4)

1. Open [https://bannerify.hypermatic.com](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.

> **Warning:** 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.