Figma Motionで、動きを当てる前に見て選べるように（物理で決めるスプリングとLottieのプレビュー。秒数を守る動きとの使い分け）

ボタンを押したときの小さな跳ね返り、メニューが開くときのすべり方。Webやアプリの「動き」は、言葉で伝えるのがむずかしい部分です。「もう少しやわらかく」と頼んでも、受け取った人がどこをどう直せばよいかは分かりにくく、見本の動画を何度も作り直すことになりがちです。

Figmaは11月10日、デザインファイルの中で動きを付けるFigma Motionに、3つの更新を加えました。動きの型を当てる前に再生して選べるようになり、跳ね返りをかたさや重さの数値で決められるようになり、Lottieで書き出す前にどう再生されるかを確かめられるようになりました。この記事では、公式のリリースノートとヘルプをもとに、何が変わったのか、仕事でどう使い分けるとよいのかを整理します。

この記事の要点

Figmaが11月10日、Figma Motionにスタイルのプレビュー、物理で決めるスプリング、Lottie書き出しのプレビューを加えた
Webやアプリの動きを作る人と、その動きを受け取って組み込む開発者の両方に関係する
秒数を守りたい動きは時間で、自然さを優先する動きは物理で決め、Lottieは書き出す前に崩れる表現を確かめる

今回の更新は、派手な新機能というより「動きの相談を、言葉ではなく数値と再生で済ませる」ための更新です。作る人と組み込む人の間のやりとりが、少し短くなります。

何が発表された？

Figma Release Notes（2026年11月10日）の「New Figma Motion updates: physics based springs, style and Lottie export previews」で発表された内容は、次の3つです。

スタイルのプレビュー：アニメーションの一覧の中と、キャンバス上のデザインの上で、それぞれのスタイルが再生される。当てる前に動きを見て選べる
物理で決めるスプリング：iOSとAndroid向けに、重さ（mass）・かたさ（stiffness）・ゆれのおさまり（damping）を設定でき、長さはその数値に合わせて変わる。作ったスプリングはデザインシステムに保存して、まとめて使い回せる
Lottie書き出しのプレビュー：アニメーションをLottieのファイルとして書き出す前に、どう再生されるかを確かめられる

リリースノートのねらいとして、動きを作るデザイナーが、用意された動きの型を見比べやすくなること、書き出す前にLottieを確かめられること、スプリングで細かい調整ができることが挙げられています。

Figma Motionの3つの更新（スタイルのプレビュー・物理で決めるスプリング・Lottie書き出しのプレビュー）と仕事での意味をまとめた図

これまでと何が違う？

Figma Motionは、デザインファイルのツールバーで「Motion」に切り替えると、画面の下にタイムラインが出て、キーフレームやプリセットで動きを付けられる仕組みです。9月30日の更新では、動きの型を「スタイル」として保存する機能や、Lottie・dotLottieでの書き出しが加わりました（KAKERU AI NEWSの記事で紹介しています）。

今回は、その2つを使う前に確かめられるようにした更新です。スタイルは、当ててみてから戻すのではなく、一覧とキャンバスで再生しながら選べます。Lottieも、書き出したファイルを別の道具で開く前に、Figmaの中でどう再生されるかを見られます。

もう1つの違いが、スプリングの決め方です。ヘルプによると、自分で作るスプリングには「時間で決める（Time）」と「物理で決める（Physics）」の2種類があります。時間で決めるスプリングは、跳ね返りの強さと長さを指定します。物理で決めるスプリングは、長さを直接は決めず、かたさ・ゆれのおさまり・重さの数値から長さが決まります。

なお、11月5日の更新では、Figmaのエージェントが作るベクターのイラストやアイコンが、レイヤーを整理した「動かしやすい」形になりました（関連の記事）。エージェントで作った絵を、Motionで動かすところまで、Figmaの中でつながりつつあります。

何ができるようになった？

ヘルプ「Adjust an animation’s easing」では、物理で決めるスプリングの3つの数値が次のように説明されています。

かたさ（Stiffness）：物を目的の位置へ引っぱる強さ。高いほど速く、勢いよく着く。低いと、ゆるく遅い動きになる
ゆれのおさまり（Damping）：跳ね返りがどれだけ早くおさまるか。低いと目的の位置を行き過ぎて何度も揺れ、高いと揺れが小さくなるか、なくなる
重さ（Mass）：物の重さ。重いほど、動き出しと止まりが鈍く感じられる。ヘルプでは「iOS・web向けのみ」とされ、Androidは別の重さの設定がなく、かたさと減衰比（damping ratio）で決めると書かれている

リリースノートには「iOSとAndroid向けに重さ・かたさ・ゆれのおさまりを設定」とありますが、ヘルプでは重さはiOS・web向けだけと説明されています。Android向けに作るときは、ヘルプの説明のほうに合わせて確かめるのが確実です。

プリセットのスプリングとして、やわらかく行き過ぎの少ない「Gentle」、速く短くおさまる「Quick」、大きく揺れる「Bouncy」、ゆっくりおさまる「Slow」も用意されています。自分で作ったイージングやスプリングは変数として保存でき、デザインシステム全体で使い回せます。

Figma Motionのカスタムのスプリング2種類（時間で決める・物理で決める）の違いと向く場面を比べた図

仕事ではどう使えそう？

Webサイトのボタンやメニューの動きを決める

お問い合わせボタンを押したときの小さな跳ね返りや、スマホのメニューが開くときの止まり方など、サイトの手ざわりを決める動きです。物理で決めるスプリングなら、「かたさを上げて、揺れを1回だけにする」のように、数値で動きを詰められます。プリセットの4種類から近いものを選び、そこから数値を動かすと、始めやすくなります。

アプリの動きを、開発者に数値で渡す

iOSやAndroidのアプリでは、動きを開発者に渡すときに「どのくらい跳ねるか」の伝え方が問題になります。Figmaの中で、かたさやゆれのおさまりの数値として決めておけば、見本の動画だけで伝えるより、そのまま実装の相談に使えます。Androidでは重さを使わないため、作る段階で「どのOS向けの値か」をそろえておくことが大切です。

バナーやLPのLottieを、書き出す前に確かめる

Lottieは、JSONで書かれた軽いアニメーションの形式で、拡大しても粗くならず、ファイルも小さいのが特長です。一方、書き出しのヘルプには、シェーダーは動かない画像になり、動画は書き出せず、角度のついたグラデーションも静止した画像になり、ドロップシャドウやノイズ、ガラスの効果はアニメーション中に変わらない、と書かれています。書き出す前のプレビューで、こうした崩れに先に気づけます。

動きの決まりを、デザインシステムに入れる

色や文字の大きさと同じように、「このサイトのボタンは、このスプリングで動く」を変数として保存しておく使い方です。デザイナーが変わっても、同じ動きを当てられます。ブランドの雰囲気を、色と文字だけでなく動きでもそろえたい会社に向きます。

KAKERUならこう使う／使わない

KAKERUなら、WebサイトのLottieを書き出す前のプレビューは毎回使います。渡したあとに「この影が動かない」と分かって作り直すより、Figmaの中で先に気づくほうが、作る側にも受け取る側にも負担が少ないからです。ボタンやメニューの動きも、物理で決めるスプリングの数値で決めて、変数として残します。

一方で、効果音やナレーションと秒単位で合わせる動画には、物理で決めるスプリングは使いません。ヘルプにもあるとおり、物理で決めるスプリングは長さが数値で決まり、キーフレームより早く終わったり、はみ出したりすることがあります。時間をそろえたい場面では、時間で決めるスプリングかイージングの曲線を使います。また、動画やシェーダーを使った派手な演出は、Lottieにこだわらず、MP4やWebMで書き出します。

「自然な動き」と「時間どおりの動き」は、どちらが正しいという話ではありません。動きの役目に合わせて、決め方を選ぶ道具がそろってきた、という受け止め方です。

誰が使える？

ヘルプによると、Figma MotionはStarter・Professional・Education・Organization・Enterpriseの各プランで使え、ファイルの編集権限が必要です。無料のStarterプランも対象に入っています。ただし、1920×1080より大きいサイズや、30FPSを超えるアニメーションの書き出しには、Professional・Education・Organization・Enterpriseのプランが必要です。

Figma Motionは現在オープンベータ（誰でも試せる試験提供）で、ヘルプには、機能が変わることや、動作が重くなることがあると書かれています。今回確認したヘルプのページは英語版で、日本語の画面での名前は確認できていません。

注意点

オープンベータ：機能や画面が変わることがあります。お客様に渡す動きの決まりは、書き出したファイルと数値の両方で残しておきます
物理で決めるスプリングは長さが決まらない：キーフレームより早く終わったり、はみ出したりすることがあります。タイムラインの線で、動きが終わる位置を確かめます
重さの扱いがOSで違う：ヘルプでは重さはiOS・web向けのみで、Androidはかたさと減衰比で決めます
Lottieで書き出せない表現がある：シェーダーは動かない画像に、動画は書き出せず（MP4・WebM・GIFで書き出す）、角度のついたグラデーションは静止した画像に、影やノイズ、ガラスの効果はアニメーション中に変わりません
本番の再生環境での確認は別に必要：ヘルプでも、実際に使うLottieの再生環境で試すことがすすめられています。Figmaのプレビューで問題がなくても、サイトやアプリに組み込んだ状態で確かめます

まとめ

Figma Motionに、スタイルのプレビュー、物理で決めるスプリング、Lottie書き出しのプレビューが加わりました。動きを「当ててから直す」のではなく、「見て選んでから当てる」流れに変わり、跳ね返りの具合を数値で決めて、チームで使い回せるようになります。

使い分けの目安は、時間をそろえたい動きは時間で決めるスプリングかイージング、自然な手ざわりを出したい動きは物理で決めるスプリング、です。そのうえで、Lottieは書き出す前にプレビューで崩れを確かめ、最後はサイトやアプリに組み込んだ状態で確認する。この順番を決めておくと、動きのやりとりの往復を減らせます。

動きは、言葉で説明するほど伝わりにくくなる部分です。数値と再生で話せる場所が増えるのは、作る人にも頼む人にもうれしい変化です。

参考・情報源

Figma Release Notes「New Figma Motion updates: physics based springs, style and Lottie export previews」（2026年11月10日）
https://www.figma.com/release-notes/
※3つの更新の内容
Figmaヘルプ「Adjust an animation’s easing」
https://help.figma.com/hc/en-us/articles/41414048690839-Adjust-an-animation-s-easing
※プリセットのスプリング・時間と物理のスプリング・3つの数値・変数としての保存
Figmaヘルプ「Export animations from Figma」
https://help.figma.com/hc/en-us/articles/41307983648407-Export-animations-from-Figma
※書き出しの形式・プラン・Lottieで書き出せない表現
Figmaヘルプ「Explore Figma Motion」
https://help.figma.com/hc/en-us/articles/41274629073303-Explore-Figma-Motion
※使えるプラン・編集権限・オープンベータ
Figmaヘルプ「What Figma features are in beta?」
https://help.figma.com/hc/en-us/articles/4406787442711-What-Figma-features-are-in-beta
※ベータ版の扱い