米デザインツール大手のFigmaは6月24日、デザインキャンバス内でアニメーションを直接作成できる新機能「Figma Motion」を発表し、オープンベータとして提供を始めました。従来は外部ツールやプラグインに移して制作する場面もありましたが、Figma Motionではデザイン、コンポーネント、変数、共同作業の情報を同一ファイルに置いたまま、モーションの設計から開発への引き継ぎまで進められます。
FIGMA MOTION IS HERE
— Figma (@figma) June 24, 2026
FIGMA MOTION IS HERE
FIGMA MOTION IS HERE
Live from Config 2026 pic.twitter.com/ut7OFVZKQS
利用者は任意のフレームをMotionモードに切り替えることで、キャンバス上にタイムラインを表示できます。レイヤーをドラッグして開始時刻や長さを調整し、再生位置を動かして任意の場面を確認できるほか、位置、拡大縮小、回転、透明度をそれぞれキーフレームで制御できます。再生ヘッドの移動中に加えた変更を記録する自動キーフレーム機能にも対応しました。
フェード、移動、拡大縮小といったプリセットのアニメーションスタイルも用意され、複数のスタイルを同時に再生したり、順番に配置したりできます。時間を指定したコメントをキャンバスに残せるため、チームメンバーはアニメーションの特定の瞬間についてレビューを行えます。Figmaは、モーションを一部の専門担当者による仕上げ作業ではなく、設計初期からチームで検討する要素にしたい考えです。
コンポーネントに設定したアニメーションは、他の画面や共同作業者のファイルにも引き継がれます。モーション変数では、イージングなどの値と複数のモードを定義し、ページ単位で切り替えることで、参照するアニメーションをまとめて更新できます。シェーダーで調整できるプロパティもキーフレーム化でき、表現の幅を広げます。
Figma agentもモーション制作を支援します。デザイナーが自然言語で指示すると、コンポーネントやデザイントークンに基づくキーフレームをタイムラインに生成します。経験者にとっては、繰り返し作業を任せ、演出や細部の調整に集中するための機能となります。
完成したアニメーション付きフレームは、MP4、GIF、SVG、WEBM形式で書き出せます。Dev ModeのMotionタブでは、タイミング、イージングカーブ、キーフレームを確認でき、CSS、JSON、React向け形式、motion.dev向け形式のコードをコピー可能です。MCPにも対応し、アニメーション付きフレームへのリンクをコーディングエージェントと共有できます。
Figma MotionはStarterユーザーにも制限付きで提供されます。全プランのフルシートユーザーはモーションの基本機能とエクスポートを利用でき、デザインシステムとの完全な統合機能とモーション向けFigma agentは有料プランで提供されます。Figmaは今後、3D変形機能の追加も予定しています。
出典：Introducing Figma Motion: Your Canvas Now Has a Timeline | Figma Blog