Figma社（日本法人：Figma Japan株式会社）は6月24日（水）、クラウドベースのUI/UXデザインプラットフォーム「Figma」の新機能「Figma Motion」のオープンベータ版をリリースした。キャンバス内にタイムラインが統合され、コンポーネントやバリアブル（変数）、高度なキーフレーム制御、FigmaのAIエージェントによる自動生成からコードへの出力などの機能を備える。従来のデザイン、描画、開発などの各モードと並ぶ新たなワークフローとして提供され、無償ユーザーは一部機能、有償ユーザーは全機能にアクセス可能。

キャンバスに統合されたタイムラインとオートキー制御

• 

• 

Figmaのキャンバスにはタイムラインが統合されており、Motionモードに切り替えることでタイムラインが出現。位置、スケール、回転、不透明度などのプロパティをレイヤーごとに独立してキーフレームとして制御できる。オートキー機能を使ってモーションの動きを記録し、その後ベジェカーブやスプリングで各キーフレームを調整できる。

AIエージェントやバリアブルを活用したモーションシステムの構築

• 

• 

また、AIエージェントの活用により、テキストプロンプトからアニメーションを自動生成できる。さらに、よく使う動きを仕組み化し、バリアブルやトークンを使って様々なモーション値を素早く切り替えるモーションシステムの構築が可能。バリアブルを適用・切り替えるだけで、そのバリアブルを参照するすべてのアニメーションが即座に更新される。

エクスポートとMCPサーバ連携

• 

• 

全てのアニメーションは本番対応コードに基づいており、Figmaから直接エクスポートできる。Dev Modeではモーションのタイムライン全体を確認でき、そのままアニメーションコードをCSS、JSON、またはReactにコピーできる。さらに、Figma MCPサーバを介して、イージングやタイミングなどのすべての値を保持したまま、エージェント型コーディングツールに完全なモーションコンテキストを送信可能。アニメーションされたフレームはMP4、GIF、SVG、WebMファイルとしての書き出しにも対応する。

3Dトランスフォームによる空間デザインの構築

今後の実装として、デザインや画像に奥行きを加える「3Dトランスフォーム」機能が予告されている。生成された空間デザインはCSSとして書き出せるだけでなく、MCPを通じてコードと接続し、Figma上でプロトタイピングした空間的な相互作用をそのまま実装環境へ反映できる。

■Figma Motion公式ページ
https://www.figma.com/ja-jp/motion/

■Introducing Figma Motion（Figma公式ブログ）
https://www.figma.com/blog/introducing-figma-motion/

プランと料金

Figmaは、無料で利用できる「スターター」のほか、有償プランとして専門家や小規模チーム向けの「プロフェッショナル」、組織全体でプロダクトをデザインする企業向けの「ビジネス」、複数のプロダクトやブランドのデザインを行う企業向けの「エンタープライズ」という4種類のプランにより提供されている。職能に応じて、デザイン編集が可能なフルシート、コード検証に特化したDevシート、閲覧用のコラボシートというシートごとの料金体系となっている。年払いの場合、プロフェッショナルプランはフルシートが月額2,400円、Devシートが月額1,800円、コラボシートが月額450円。ビジネスプランは順に月額8,300円、3,750円、750円であり、エンタープライズプランは月額13,600円、5,250円、750円。

Figma Motionは現在オープンベータ版として提供中。スタータープランのユーザーはモーション機能にアクセスできるが、エクスポート出力に制限が設けられている。全てのプランにおけるフルシートユーザーはモーションの基本機能とエクスポート機能が利用可能。さらに、有償プランのユーザーは、自社デザインシステムとの完全な統合機能や、Figmaのエージェント（AIエージェント）を活用したモーション自動生成などの高度な機能にアクセスできる。

■プランと料金（Figma）
https://www.figma.com/ja-jp/pricing/