あまんちゅの夏休み2026②🌊Figma Motionで手を動かしてみたら、Figma Agentの凄さがよく分かった話

こんにちは！
フロントエンドエンジニアのあまんちゅです。

前回の記事では、Remotion × Claude Codeで夏の思い出動画を作ってみたお話を書きました。今回はその前の記事でもう一つ挑戦したいと書いていた「Figma Motion」を実際に触ってみたお話です！

「Miyazaki Config Watch Party 2026」に参加してから、「Figma Motion」がずっと気になっていたので、思い切って手を動かしていろいろ試してみました！

最初は手動でアニメーションを作ってみて、その後にFigma Agentにもお願いしてみたのですが、結局AIってすごい、という結論に至ったので、そのあたりを中心にお伝えできればと思います。
また、あくまで私自身が触ってみた範囲での感想なので、「もっと上手いやり方があるよ」という方もいらっしゃるかもしれません。その点はご容赦ください・・・！

まずは手動でバウンスアニメーションに挑戦

Figma Motionでは、キーフレームを打っていくことでアニメーションを作れます。せっかくなので、まずは基本の「ボールがバウンドする動き」を自分の手で作ってみることにしました。
やったことはだいたいこんな感じです。

1．Y座標のキーフレームを、再生ヘッドを動かしながら打っていく
2．落ちる → 跳ねる → また落ちる、という動きになるように、いくつかのタイミングでY座標の数値を変える
3．数値を変えるたびに再生して、動きを確認する

「よし、これでバウンドっぽくなるはず」と思って再生してみたのですが、なんか違う気がしたので、
数値を変えて、再生して、また変えて、再生して・・・というのを何度も繰り返しながら、キーフレームのタイミングと数値を調整していきました。

正直、「これで合ってるのか？」という手探り感がずっとあって、最終的に、練習用だし、これくらいでいいかというところまでで、完全には解消できないまま終わらせました

実際に作ったものがこちらです！

数値をいじって、再生して確認する、の繰り返しはなかなか地味であり、初心者には少し難し目な作業でしたが、上手な人がやったら綺麗にできそう・・・！

Figma Agentを使ってFigma Motionをやってみる

手動での試行錯誤にちょっと疲れてきたところで、「そうだ、Figma Agentがあるじゃん」と思い出しました。
今回はバウンスとは別で、穏やかな波（wave）のアニメーションを作ってもらうことにしました。私が最初に伝えたのは、こんな感じの指示です。

この波の部分を穏やかな波として動かしたい。3つくらいレイヤー作って、緩やかに動くといいかも。色合いは、濃かったり薄かったりするかもしれないけど、薄さは透明度でやってもいいかも。

これは何の波かというと、この宮崎クリエイターズブログのTOPページの波の動きを表現できないかと思って指示したものでした。

数値もタイミングも一切指定せず、なんとなくのイメージを言葉で伝えただけです。すると、Agentが透明度・速度・方向の違う3層の波レイヤーを、自分で考えて作ってくれました。
そこから、実際にプレビューを見ながら、こんな感じで対話を重ねていきました。

• 「動きはいいけど、位置がおかしい。背景の波の位置に合わせて欲しい」→ 背景に合わせて位置を調整してくれた
• 「元の背景の波の部分が邪魔になるので消してみてもらっていいですか？」→ 元の波を非表示にしてくれた
• 「波の高さをもう少し被るくらいにして欲しいです。また、少し上に移動させて欲しいです」→ 振幅を大きくして、位置も調整してくれた

手動でやっていたときのような数値とのにらみ合いはなく、「ここが違う」「もう少しこう」という言葉のやり取りだけで、思った通りの動きにどんどん近づいていきました。「これでいいじゃん、なんでさっきまで数値と戦ってたんだろう」と、正直ちょっと拍子抜けした感覚もありました。

実際に出来上がったものがこちらです！

日本語で伝えるだけで、対話しながら形になっていくのが新鮮だし、便利すぎる一件でした！

「これってコードにできる？」と聞いてみた

波のアニメーションが「いい感じ！」と思えるところまで仕上がったので、ふと気になって聞いてみました。

これってコードにできる？

正直、実装に使いたいなという気持ちがあって聞いた質問だったのですが、そうしたら本当にHTML/CSSのコードとして書き出してくれました。3層の波の透明度・速度・方向の設定まで、そのままコードに反映された状態です。
「あ、本当にできるんだ・・・！」と、地味に嬉しかったです。フロントエンドエンジニアとしては、デザインツールで作った動きがそのまま実装に使えるコードになる、というのはやっぱり便利だなと感じました。

まだこのコードを使って実際の実装は進められていないのですが、今後TOPページに実際に使っていきたいなと思っています。

まとめ

今回、Figma Motionを手動とFigma Agent、両方のやり方で触ってみました。

手を動かして数値を調整する大変さを知ったからこそ、Agentに自然な言葉で伝えるだけでどんどん形になっていく体験のありがたさが、より実感できた気がします。

Figma Motionにこれから挑戦する方は、まず手動で少し触ってみて、それからAgentにお願いしてみると、この楽さがより分かりやすいかもしれません！ぜひ試してみてください💡