2026年に開催されたFigma最大のカンファレンス「Config 2026」では、デザインから開発までの新機能が6つ発表されました。
今回は、Figma Motionの概要やできることをご紹介しながら、実際に触ってみた感想をレビューしていきます！
Figma Motionとは？
Figma Motionは、Config 2026で発表された新しいモーションデザイン機能です。
プロトタイプとは異なり、タイムラインとキーフレームを使って、より自由度の高いアニメーションをFigma内で作成できます。
動画編集ソフトのようなタイムライン上でアニメーションを管理できるため、オブジェクトの動きや表示タイミング、イージングなどを細かく調整できるのが特徴です。
公式サイト
https://www.figma.com/ja-jp/blog/introducing-figma-motion/
Figma Motionでできること
Figma Motionでは、Webサイト制作で活用できるアニメーションを作成できます。
UIアニメーションの作成
ボタンのホバーアニメーションやクリック時の動き、カードのフェードインなど、Web制作でよく使われるUIアニメーションを作成できます。
デザインだけでは伝わりにくい「動き」を視覚的に確認できるため、提案資料としても活用しやすくなります。
タイムラインを使ったモーション制作
Figma Motionでは、タイムライン上でアニメーションを管理できます。
開始位置や終了位置だけでなく、途中の動きもキーフレームで細かく設定できるため、自由な表現が可能です。
複数のオブジェクトを組み合わせたアニメーションも管理しやすく、より自然な動きを作成できます。
イージングや速度の細かな調整
アニメーションの開始・終了の速度や加速・減速なども設定できます。
例えば、
- ふわっと表示される
- スッとスライドする
- バウンドするような動き
など、細かなニュアンスまで調整できるため、実際のWebサイトに近い動きを表現できます。
実際にFigma Motionを触ってみた
今回は、WebサイトのKVの動きを表現するのに使えそうなシンプルなアニメーションを作成してみました。
動かしたい要素を選んで、タイムライン上でキーフレームを打つだけです。
完成形
アニメーションの付け方
①動かしたい要素を選択し、右側のプロパティパネルにある「アニメーション」の＋マークを押します。
種類は「位置」、「スケール」、「回転」、「サイズ」、不透明度があります。
②アニメーションを決めた上で動きの方向や距離、所要時間、イージングなどを細かく設定できます。
一つの要素にアニメーションを複数つけることができるため、要素をふわっと出して回転させたり、サイズを変更させることも可能です。
また、画面下部のタイムラインは動画編集のように、各要素のアニメーションを何秒から何秒にかけて適応させるかの調整もすることができます。
使ってみて感じた良かった点
直感的にアニメーションを作成できる
タイムラインを見ながら編集できるため、アニメーションの流れを把握しやすく、細かな調整もしやすいと感じました。
クライアントへの提案がしやすい
静止画だけでは伝わりにくい動きを、Figma内でそのまま見せられるため、完成イメージを共有しやすくなりそうです。
エンジニアとの認識合わせにも役立つ
「どのタイミングで動くのか」「どのような演出を想定しているのか」が視覚的に伝わるため、実装時の認識のズレを減らせそうだと感じました。
まとめ
Config 2026では多くの新機能が発表されましたが、その中でもFigma Motionは、Webデザイナーにとって実務への影響が大きいアップデートだと感じました。
実際に触ってみると、UIアニメーションをこれまで以上に直感的に作成でき、クライアントへの提案やチーム内での共有にも活用できそうです。
気になった方は、ぜひ一度Figma Motionを触ってみると良いと思います！
