はじめに

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サーバーとの連携など、気になる機能は他にも沢山あります。

今後はこうした機能も試しながら、実務にどう取り入れられるか探っていきたいと思います！

参考