はじめに
2026年6月、Figmaにアニメーション機能「Figma Motion」が登場しました。
以前から気になっていたので、今回はFigma Motionで保存完了時のボタンアニメーションを作成し、CSSで再現してみました。
作成したアニメーション
「保存する」を押すと「保存中…」に切り替わり、保存が終わるとチェックマークが弾んで「保存しました」がふわっと現れるアニメーションを作りました。
Figma Motionで動きを作る
ツールバーにある「Motion」からアニメーションを作成できます。
今回は全体で3.6秒のタイムラインを作り、ボタンやテキストなどのレイヤーにキーフレームを設定しました。
キーフレームでは、特定の時刻における位置や大きさ、不透明度などを指定します。
また、キーフレーム間にはEasingを設定し、動きの緩急を調整しました。
以下は、チェックマークと完了メッセージのタイムラインです。
「04 Success check」ではチェックマークの拡大縮小と不透明度、「05 Success message」では完了メッセージのY方向の位置と不透明度を設定しています。
今回設定した動きの一部を抜き出すと、次のようになります。
| 対象 | プロパティ | 動き |
|---|---|---|
| チェックマーク | 拡大縮小 | 65% → 114% → 98% → 100%（440ms） |
| 完了メッセージ | 不透明度 | 0 → 1（280ms） |
| 完了メッセージ | Y方向の位置 | +6px → 0px（280ms） |
チェックマークは一度114%まで拡大してから少し縮み、元の大きさに戻ることで、弾むような動きを表現しています。
完了メッセージは、不透明度を上げながら6px下から移動させ、ふわっと現れるようにしました。
Figma MotionのCSSを確認する
Dev Modeの「モーション」パネルからアニメーションのコードを確認できます。
出力形式はCSS・React・JSONの3種類です。
今回は、出力されたCSSを元にアニメーションの動きを再現し、開始タイミングはJavaScriptで制御しています。
CSSでアニメーションを再現する
Figma Motionから取得したCSSを参考に、キーフレームの値やEasingを @keyframes に反映しました。
まず、チェックマークのアニメーションです。
.completed .success-check {
animation:
fade-in 120ms linear 40ms both,
check-pop 440ms linear 40ms both;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes check-pop {
0% { scale: .65; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
45.45% { scale: 1.14; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
72.73% { scale: .98; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
100% { scale: 1; }
}
Figmaで設定した「65% → 114% → 98% → 100%」の拡大縮小を再現しています。
CSSでは、キーフレームごとに animation-timing-function を指定することで、拡大・縮小それぞれの動きに異なるEasingを適用できます。
次に、「保存しました」のメッセージです。
.completed .success-message {
animation:
message-reveal 280ms linear 320ms both,
message-rise 280ms cubic-bezier(.16, 1, .3, 1) 320ms both;
}
@keyframes message-reveal {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes message-rise {
from { translate: 0 6px; }
to { translate: 0 0; }
}
Figmaでは、不透明度に linear、Y方向の移動に cubic-bezier(.16, 1, .3, 1) と、プロパティごとに異なるEasingを設定していました。
そのため、CSSでも別々の @keyframes に分け、不透明度を上げながら6px下から移動する動きを再現しています。
Figma MotionとCSSのアニメーションを比較する
最後に、Figma Motionで作成したアニメーションと、CSSで再現したアニメーションを比較してみます。
チェックマークの弾む動きやメッセージの表示など、Figma Motionで設定したアニメーションをCSSで簡単に再現できました。
Figma Motionを使ってみた感想
「少し弾む」「ふわっと表示する」といった動きも、拡大率やEasing、時間を数値で確認できる点が便利でした。
また、タイムライン上で複数のアニメーションの順番や重なりも確認できるため、デザイナーとエンジニアの認識合わせにも役立ちそうです。
今回はキーフレームを自分で設定しましたが、Figmaエージェントによる自動生成やFigma MCPサーバーとの連携など、気になる機能は他にも沢山あります。
今後はこうした機能も試しながら、実務にどう取り入れられるか探っていきたいと思います！