「一瞬拡大してから戻る」アニメーションが実現可能に──従来の検証上の懸念を解消するFigma Motion《綿貫佳祐のFigma思考ラボ｜Vol.12》

はじめに：Figma Motionを掘り下げる

前回は、Figma Config 2026で発表された新機能を「Code is material（コードは素材だ）」という思想に基づきながら、読み解ていきました。一方で、6つの機能についておおよそ説明できたものの、それぞれについては駆け足の説明にとどまっていました。

そこで今回は、「Figma Motion」を取り上げます。私自身はFigma Motionを、プロトタイピングにおける長年のもどかしさを解消してくれる機能だと感じています。ここでは3つの論点を挙げながら、深掘りします。

スマートアニメートだと、何ができなかったのか？

これまでは、Figmaでアニメーションを扱う手段は、主にプロトタイプの「スマートアニメート」でした。スマートアニメートは、2つのフレーム間で一致するレイヤーを見つけ、位置・サイズ・不透明度・回転・塗りといった差分を自動で補間してくれる機能です。

この仕組みは裏を返すと、「状態Aから状態Bへ、一回だけ移り変わる」ことを前提にしています。中間状態を直接指定する手段は用意されておらず、実現するためにはアフターディレイを用いた擬似的な方法を取る必要があります。

アフターディレイは、指定した時間が経過すると自動的に次のトランジションを発火させるトリガーです。拡大した状態のフレームから、遅延時間を1msなど極端に短く設定したアフターディレイで、元のフレームへと戻す遷移をあらかじめ仕込んでおくことで「行って戻る」動きを疑似的に再現していました。

この制約が実務でどう影響してくるのでしょうか？

たとえば、ボタンをクリックしたときに、一瞬大きくなってから元のサイズに戻るというアニメーションをつくりたい場面を想像してください。見た目は「通常サイズ」→「拡大」→「通常サイズ」という変化です。ところが、スマートアニメートは2つのフレーム間の変化しか扱えないため、頑張って再現するとしたら、「拡大した状態」のフレームをもう1枚用意し、そこへの遷移とそこからの遷移をそれぞれ設定するという構成が必要になっていました。

こうした「行って」→「戻る」動きや、複数の要素が少しずつ時間差で動くような表現は、中間地点を扱えないことに起因する制約でした。できないわけではないものの、フレーム数が増えるほど管理が煩雑になり、少し動きを変えたいだけでも複数のフレームをつくり直す必要がありました。

従来は「どのツールを使っても、微妙にやりづらい」

特にここからが、今回の本題です。

プロトタイプでは、見た目だけでなくアニメーションも含めて検証したいものです。しかし、前述の制約があるので、Figmaだけでアニメーションを完結させるのは骨が折れる場面もありました。これまでの現場では、大きく2つの選択が考えられます。

1つ目が、アニメーションに強い専用ツールで対応する方法です。Adobe After EffectsやProtoPieといったツールは表現力が高く、中間状態を含む複雑な動きもつくれるからです。ただ、Figmaでつくったデータを書き出し、別のツールへ持ち込むという手間が発生します。見た目を少し直すたびにこの往復が必要になるため、検証ごとに手が止まりがちでした。

2つ目は、最初からコードで検証する方法です。これなら、実装に近い精度でアニメーションを確認できる利点があります。ただし、コードは正確であるがゆえに、複雑なパターンを気軽に試すような発散的な検証には向いていません。また、実装の知識が前提になるため、デザイナー1人で検証を完結させにくく、エンジニアの手を借りることが前提になりがちでした。

どちらの方法にも、それぞれ合理的な理由があるものの、精度を取れば身軽さを失い、身軽さを取れば精度を失うという構図は変わりません。結果として、「アニメーションを含めた検証は、どのツールを使っても微妙にやりづらい」という状態が続いてきたのです。

従来の懸念を軽減する「Figma Motion」

Figma Motionは、Figma Designにタイムラインとキーフレームを直接組み込んだ機能です。この点は、FigmaのプロダクトマネジャーであるDavid Hornsbyのブログエントリーにも詳しく記されています。

位置・スケール・回転・不透明度などを、それぞれ独立してキーフレーム設定できるようになり、状態Aと状態Bが同じであっても、その間に変化をつくれるようになりました。先ほどの「クリックすると、一瞬拡大してから元のサイズに戻る」というアニメーションも、拡大した状態のキーフレームをタイムライン上に並べれば、素直に表現できるようになりました（参考：ヘルプページ）。

キーフレームは、手動で打つ以外に、Auto-keyframeで再生ヘッドを動かしながら変更を記録する方式も用意されています。細かくつくり込みたい場面と、大まかに動きを記録したい場面の両方に対応できる構成です。

アニメーションを設定したフレームは、通常のコンポーネントと同じ手順でコンポーネント化できます。作成したアニメーション付きコンポーネントは、インスタンスとして配置でき、動きそのものはメインコンポーネント側で一元的に管理されます。これまでインタラクティブコンポーネントとスマートアニメートの組み合わせで実現していた「コンポーネントを呼び出すだけで、定義済みの動きも一緒に使い回せる」という仕組みが、タイムラインベースのアニメーションでも同じように成り立つようになります（参考：Figma Learn）。

そしてDev Modeからは、読み取り専用のタイムラインを動かしながら、CSS・React・JSONといった形式でそのままコードをコピーできます。これは、先ほどの「アニメーションに強いツールへ持っていく」と「最初からコードで検証する」の間の選択肢として捉えられます。Figma上で気軽に動きを発散させながら検証しつつ、最終的な値は実装にそのまま引き継げるという意味で、身軽さと精度をある程度両立させているためです。

もちろん「どのツールを使っても、微妙に検証しづらい」という課題を、完全に解消したとは言えないとも思っています。それでも、プロトタイピングの起点となるFigmaで、これまでより明らかに検証しやすくなったのは間違いありません。

実際に触って、わかってきたこと

ここまでは公式ドキュメントをもとに整理してきましたが、ここからは実際にベータ版のFigma Motionを触った感触を共有していきます。

キーフレームの打ちやすさ

ここでは、「クリックすると一瞬拡大してから元のサイズに戻る」というアニメーションを、実際にキーフレームでつくってみました。手順は以下のとおりです。

1. 0ms時点で位置、スケール、回転、塗りにキーフレームを打つ
2. 500ms時点でスケールを200%、回転を360°、塗りを黒に変更する
3. 1,000ms時点で位置を右端、回転を720°に変更する

実際に利用した感触では、一般的なキーフレームでのアニメーション作成ツールと同様の使い勝手を感じました。

AIが生成する動きの精度

先ほどの手動作成とは違い、AIベースだとどうでしょうか？

次に、「Figma Agent」につくりたい動きを言葉で説明して、キーフレームを生成させてみました。実際に使ったテキストが以下になります。

「1,000msかけてキャンバスの右端へ2回転、色がグレーから黒へ変化、サイズが200%に大きくなりながら移動。キャンバスの中央部分で色は黒に変わりきり、拡大しきっている」

以下が、上記を実行した模様を収めた動画です。

画面右端から見切れてしまっていたり、自分でキーフレームを設定した時とは回転方向が逆などは出てしまっています。とはいえ、これだけ骨組みができているなら、不慣れなユーザーでも見よう見まねで修正がしやすい印象を受けました。

インターフェースの設計に見える意図

Figma Motionの画面を見ると、Adobe After Effectsなど映像制作ツールを触ったことがあるユーザーであれば、迷わず扱えそうと感じる人が多そうです。画面下部に並ぶタイムラインや、レイヤーごとのキーフレーム、イージングカーブの操作などのインターフェースは、映像・モーション制作の世界では以前から定着しているものだからです。

一方で、こうしたツールに触れたことがない人にとっては、0からキーフレームを設計するのはハードルの高い作業です。どのタイミングで、どのプロパティに、どのような値のキーフレームを打てば意図したアニメーションになるのかなど、経験がなければ見当をつけるだけでも時間がかかります。

ここでAIによる支援が役立ちます。つくりたい動きを言葉で説明すれば、Figma Agentがタイムラインにキーフレームを追加してくれます。その後の色・位置・サイズといった微調整は、使い慣れたFigmaのキャンバス操作で行えます。

つまり、経験者にとっては見慣れたインターフェースがそのまま学習コストの低さになり、未経験者にとってはAIがキーフレーム設計という最初のハードルを肩代わりしてくれるということです。異なる背景を持つ2種類のユーザーに対して、それぞれ別の入り口を用意しているように見えます。

このつくりから、Figma Motionが「モーションデザインの経験者」だけでなく、未経験者を含めて対象を広げようとしている意図を感じます。

※Figma Motionは、本記事執筆時点（2026年8月末）ではオープンベータとして提供されており、機能は今後も変わる可能性があります。ここで紹介してきた筆者の所感は、あくまで現時点のベータ版に基づくものです。正式版までに、さらにインターフェースや挙動が変わることが十分にありえることも留意してください。

まとめ

ここまでの内容を、まとめていきます。

・スマートアニメートは2つのフレーム間の変化しか扱えず、中間状態を経由する動きは複数フレームを使ったハックが必要だった

・そのため、アニメーションを含めた検証は、専用ツールへの往復か、発散させづらいコード検証かの二択になりがちで、「どのツールを使っても微妙にやりづらい」状態が続いていた

・Figma Motionはタイムラインとキーフレームを直接組み込むことで、中間状態を持つ動きを素直に表現できるようにし、この検証のすき間をある程度埋めた

・インターフェースは、モーションデザイン経験者がそのまま使えるつくりである一方、未経験者にはAIがキーフレーム設計を肩代わりする導線も用意されており、対象ユーザーの裾野を広げる意図が読み取れる

・実際にベータ版を触ってみても、初心者・経験者ともにすぐに使えて、小さな範囲であれば実務への投入も可能に思われた

動きの検証がFigmaの中（だけ）で完結しやすくなるメリットは、決して小さくありません。今後、Figmaを通じたプロトタイピングの品質がさらに一段、上がっていくのではないでしょうか。

著者プロフィール

文：綿貫佳祐