Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Generate custom banner animations with AI - This tutorial shows how to use the Bannerify Figma plugin to generate custom key frame animations with AI prompts from ChatGPT or Claude, then import the JSON back into Bannerify. It also demonstrates applying those custom animations to layers and exporting the finished banners as MP4 video or HTML.. Machine-readable page: /bannerify/tutorials/generate-custom-banner-animations-with-ai.md.

Generate custom banner animations with AI

This tutorial shows how to use the Bannerify Figma plugin to generate custom key frame animations with AI prompts from ChatGPT or Claude, then import the JSON back into Bannerify. It also demonstrates applying those custom animations to layers and exporting the finished banners as MP4 video or HTML.

← Back to Bannerify Video Tutorials

What this video covers

This tutorial shows how to use the Bannerify Figma plugin to generate custom key frame animations with AI prompts from ChatGPT or Claude, then import the JSON back into Bannerify. It also demonstrates applying those custom animations to layers and exporting the finished banners as MP4 video or HTML.

Things you'll need

  • A Figma file with frames to use as banners
  • Bannerify installed as a Figma plugin
  • Access to ChatGPT or Claude, or another AI tool that can produce the JSON prompt output

Steps

  1. Open a Figma file, find Bannerify from the Actions menu, and run it from Saved Plugins.
  2. Load your frames as banners with Load All Banners so Bannerify can read the layers into the timeline.
  3. Open Custom Animations, then use Ask AI to open the Bannerify web tool and generate an animation prompt from an existing preset or from scratch.
  4. Open the prompt in ChatGPT or Claude, copy the JSON response, and paste it into Paste generated JSON code here in Bannerify.
  5. Review the generated key frames, adjust values like timing or position if needed, and click Update Saved Animation.
  6. Apply the custom animation to one layer or Similar Layers, then preview the animation in the timeline.
  7. Export the result with Export to GIF or Video, Export MP4, or Export to HTML, then download the zip file and use the preview or source files.

Useful links