動画チュートリアル：Figmaでバナーにアニメーションを付けてHTMLにエクスポートする
Figmaから、そのまま入稿できるHTMLバナーにアニメーションを付けて数秒でエクスポートする方法を解説した動画です。
bannerify.hypermatic.comでアニメーションのJSONを生成する
- https://bannerify.hypermatic.comを開きます。
- Create Your Custom Bannerify Animationセクションで、作りたいアニメーションを説明します（例：「左から少し回転しながら弾むようにスライドインする」）。
- Copy Prompt to ClipboardをクリックしてChatGPTやClaudeに貼り付けるか、Open Prompt in ChatGPT / Open Prompt in Claudeをクリックします。
- 生成されたアニメーションのJSONスニペットをコピーします。
- Figmaファイルを開き、Bannerifyプラグインを実行します。
- BannerifyでCustom Animationsパネルを開きます。
- Paste generated JSON code hereと書かれたテキストエリアにJSONを貼り付けます。
- タイムラインのアニメーションプリセットのドロップダウンに、そのアニメーションが表示されることを確認します。
アニメーションは貼り付けた時点で自動保存され、レイヤーのタイムラインのアニメーションメニューから、ほかのプリセットと同じように選べます。
カスタムアニメーションは、現在のFigmaファイルに保存されます。別のFigmaファイルに切り替えた場合は、そのファイルでもう一度JSONを貼り付ける必要があります。