Figma Motion、動きをチームの設計資産にする仕組み

時間を、編集可能な要素にする

Motionモードでは、フレームにタイムラインを表示し、位置、スケール、回転、不透明度をキーフレームで調整できる。再生位置を動かして途中の状態を確認し、自動記録やプリセットから制作を始められる。公式発表は、時間上の特定の位置へコメントできることも説明している。

これは、完成した動画だけを渡す場合との違いになる。受け取った人は、どの瞬間に何が変わるかを調べられる。レビューでも「もう少し自然に」という感覚的な依頼だけでなく、どの要素の開始時刻や変化を直すかを指し示しやすい。

ただし、編集可能な値があることと、ユーザーに適した動きであることは別の評価だ。強調すべき情報、操作の応答、表示時間を先に決める必要がある。動きが多いほど情報が伝わるわけではなく、内容を読む妨げになる可能性もある。

一つのアニメーションから、チームの共通仕様へ

アニメーションコンポーネントは、部品に動きを持たせ、ほかの画面やファイルで再利用するための仕組みだ。モーション変数では、イージングなどを共通の値として扱い、モードの切り替えを複数の動きへ反映できる。公式発表は、シェーダーが公開するプロパティもキーフレーム化できるとしている。

当サイトの考察として、この機能を使う際には、共通化する範囲を決めることが重要になる。すべての部品へ同じ動きを付けるより、通知、移動、状態の変化など、役割に沿って仕様を分けた方が検討しやすい。変数を変更すると、複数の画面へ影響するため、変更後の確認範囲も決めたい。

再利用は、初回の制作時間を減らすだけでなく、誰が更新を管理するかという課題も生む。公開した部品の版、使用している画面、例外的な設定を追えるようにすれば、意図しない一括変更を発見しやすくなる。

AIが作るのは、修正できるキーフレーム

Figmaエージェントは、文章による指示からタイムラインにキーフレームを生成する。生成した後は、人がタイミングやカーブ、要素を調整できる。公式記事はAtlassianのデザイナーの利用コメントも掲載しているが、すべてのチームで同じ時間短縮が得られるという試験結果ではない。

指示を出す側には、何を伝えるための動きかを言葉にする仕事が残る。例えば注意を向けたいのか、処理中であることを知らせたいのかで、適した表現は違う。生成後の動きが目的に合うか、繰り返し表示されても負担にならないかを確認したい。

デザインの値と、本番の挙動を照合する

公式説明では、Dev Modeでタイムラインの値を調べ、CSS、JSON、React、motion.dev向けのコードを取り出せる。MP4、GIF、SVG、WebMの書き出しも案内されている。実装担当が、完成映像だけから値を推測する作業を減らす設計である。

それでも、本番の画面で確認は必要だ。端末の性能、画面幅、入力方法、実際に表示する文言が変われば、設計ファイルと同じ印象にならない場合がある。出力したコードが存在することを、公開環境での検証の代わりにはできない。

また、動きの少ない表示を必要とする利用者への配慮や、動きがなくても意味が伝わる画面を考えたい。生成と実装が近づくほど、試作をそのまま完成品として扱わず、実際の利用条件を確認することが大切になる。

提供条件と予定機能は分ける

確認した公式告知ではMotionはオープンベータとされ、Starterは書き出しに制限がある。Full seatの利用範囲や、有料プランでのデザインシステム統合・エージェント利用にも条件がある。3Dトランスフォームは待機リストの対象として案内されており、本文の機能と同時にすべて利用できると解釈しない方がよい。

チームで導入する際は、作る人、確認する人、コードを使う人の席と権限を合わせて調べたい。運営会社のRO合同会社の情報も参照し、AIによる生成を含めた制作工程では、共通仕様、修正、公開後の確認を一続きで設計したい。出典：Figmaの発表、イノベトピア。