ニュース
「Figma」にキャンバス内のタイムラインでUIの動きを制御できる「Figma Motion」搭載
オープンベータ版として提供、Figmaエージェントを使ったアニメーション化も可能
2026年7月1日 17:34
米Figmaは6月24日（現地時間）、オンラインベースのUIデザインツール「Figma」にキャンバス内で直接ユーザーインターフェース（UI）のアニメーションを制作できる新機能Figma Motionを発表した。現在、オープンベータ版として提供されている。
従来、UIをアニメーションさせるためには、専用の別ツールを利用する必要があり、制作プロセスのボトルネックや専門家への依存が課題となっていた。Figma Motionでは、全体のデザインを行うFigma Designの同一キャンバス内にタイムラインやキーフレームが追加され、他のデザイン要素やチームメンバーと共通の環境でアニメーションを構築することが可能となった。
新機能では、あらかじめ用意されたプリセットのアニメーションスタイル（フェード、回転、スケール）を組み合わせて迅速に構築できるほか、タイムラインを使って位置やスケール、回転、不透明度をキーフレームとして配置可能。また、オートキーフレーミング機能によってUIの動きを記録し、ベジェ曲線やスプリングを用いて各キーフレームやプロパティを自由に調整可能。タイムラインには任意の位置にコメントを付加できるため、細かい動きに対するレビューもスムーズに行える。
さらに、AIアシスタントのFigmaエージェントを利用して、プロンプトからプロレベルのアニメーション化が可能。Figmaエージェントによるアニメーションは、繰り返しの動きや複雑なストーリーテリングにも対応する。
制作したアニメーションはアニメーションコンポーネントやモーションバリアブルとして再利用でき、よく使う動きを登録することで、毎回ゼロから作る必要がなくなる。アニメーションのパラメーターを共通の変数として登録・管理できるモーションバリアブルでは、ページ上でそのバリアブルを使用しているすべてのアニメーションを一括で切り替えることも可能だ。
開発者との連携も強化されている。［Dev Mode］に切り替えることで、エンジニアはタイムライン上のタイミング値やイージングカーブを読み取り、CSS、JSON、Reactのコードとして直接コピーできる。また、アニメーションをMP4、WebM、Animated SVG、GIFなどの形式での書き出しも可能だ。
