デザインチームにとってモーションは長らく「わかる人に頼む」ものでした。Figmaが発表した「Figma Motion」は、その前提を静かに崩そうとしています。アニメーションがデザインシステムの構成要素になるとき、制作の何が変わり、何は変わらないのか。機能の中身と、その設計が示す方向性を整理します。
Figmaは2026年6月24日、アニメーション制作機能「Figma Motion」を発表した。同機能はデザイン・Draw・Devの各モードと並ぶ新モードとして追加され、同一ファイルのキャンバス上でデザインとアニメーションを一体的に扱えるようになった。
主な機能として4点が挙げられる。タイムライン上でレイヤーのタイミングや位置・スケール・回転・不透明度を個別にキーフレーム設定できる「タイムラインコントロール」、フェード・移動・スケールなどのプリセットから始められる「アニメーションスタイル」、デザインシステムのコンポーネントにモーションを紐付けてファイル横断で再利用できる「アニメーションコンポーネント」、イージングなどを変数化してページ単位で一括切り替えできる「モーション変数」である。また、シェーダーが公開するすべてのプロパティをキーフレーム化できる機能も追加された。Figmaエージェントに言葉で指示するとタイムライン上にキーフレームを自動生成する機能も搭載する。Dev Modeではエンジニアがアニメーションを検査し、CSS・JSON・React・motion.dev形式でコードを出力できる。3Dトランスフォーム（z軸回転）は近日公開予定とされている。
From: 
Introducing Figma Motion: Your canvas now has a timeline | Figma Blog
【編集部解説】
Figmaがモーションをキャンバスに統合したことの意味は、新機能の追加にとどまりません。問われているのは、「誰がモーションを作るか」という制作の構造そのものです。
これまでのデザインチームにとって、モーションは特殊技能でした。アイデアはFigmaで作られ、アニメーションはAfter EffectsやRiveなどの外部ツールで組み立て直し、エンジニアへのハンドオフは別途LottieファイルやCSS仕様書の形で渡す。このチェーンは、モーションデザイナーが介在しなければ機能しない前提で設計されていました。Figma Motionはそのチェーンを、ひとつのファイルの中に折りたたみます。
機能の構成はシンプルです。Figma Designのモードパネルに「Motion」が加わり、切り替えるとタイムラインが表示されます。位置・スケール・回転・不透明度を個別にキーフレーム設定でき、再生ヘッドを動かしながら変更を自動記録するオートキーフレーム機能も備えます。フェード・移動・スケールといったプリセットのアニメーションスタイルから始めることもできます。
ただし、このツールの本質は「デザイナーがアニメーションを作れるようになった」点ではなく、アニメーションがデザインシステムの構成要素になった点にあります。コンポーネントにアニメーションを設定すると、そのコンポーネントが使われるすべてのファイルと画面に、塗りやタイポグラフィと同じようにモーションが引き継がれます。モーション変数を使えば、イージングやタイミングを変数として管理し、ページ単位で一括切り替えができます。これはモーションがデザイントークンと同列の「設計資産」として扱われることを意味します。
Figmaエージェントとの統合も、未経験者の参入障壁を実際に下げる可能性があります。テキストで動きを指示するとタイムライン上にキーフレームを生成し、その後手動で調整できます。AtlassianのLead Product Designer Davy Fung氏は「バナーをアニメーションさせる際にエージェントに何が良くて何が良くないか提案させた」と語っており、ゼロから学ぶ必要がなくなりつつある状況が実際のユーザーから示されています。
エンジニアへのハンドオフも変わります。Dev Modeでタイムラインを読み取り専用で確認でき、CSS・JSON・React・motion.dev形式でコードを直接コピーできます。MP4・WebM・Animated SVG・GIFへのエクスポートにも対応しており、プレゼンやマーケティング素材への転用も可能です。
現時点での制約も確認しておく必要があります。Figma Motionは現在オープンベータであり、全プランで利用できますが、アニメーションコンポーネントの公開・Figmaエージェントによる生成・高解像度の動画エクスポートには有料プランのフルシートが必要です。画面間のトランジションアニメーションは「近日対応予定」とされており、コンポーネント単位のマイクロインタラクションや状態変化が現時点での主な用途になります。After EffectsやRiveを完全に置き換えるものではなく、デザインとエンジニアリングの間にある翻訳コストを減らすことが当面の役割です。
Figmaがこの機能を「モーションツール」ではなく「キャンバスの拡張」として設計したことは、その意図を読み取る上で重要です。モーションは独立した制作領域として切り出されるのではなく、デザインシステムの中に組み込まれる要素として位置づけられています。この設計思想が正しければ、モーションは「特定の担当者が作るもの」から「チームが管理するシステムの一部」へとその性格を変えていくことになります。
【用語解説】
デザインシステム
色・タイポグラフィ・コンポーネント・レイアウトルールなど、プロダクト全体の視覚的一貫性を保つために体系化された設計ルールの集合体。大規模なチームほど、個別の担当者が都度判断するのではなく、システムとして管理することで品質と速度の両立を図る。
デザイントークン
色コード・フォントサイズ・余白の値といったデザイン上の決定事項を変数として抽象化したもの。「primary-blue」のように名前を付けて管理し、ブランドの一貫性とメンテナンス性を高める。Figma Motionのモーション変数は、イージングやタイミングをこのトークンと同列に扱う考え方を採用している。
イージング（Easing）
アニメーションの速度変化のパターンを指す。一定速度で動かすのではなく、始まりや終わりで緩急をつけることで動きに自然さや意図を持たせる。ease-in（遅く始まる）、ease-out（遅く終わる）、ease-in-out（両端が遅い）などの種類がある。
キーフレーム
アニメーションの特定の時点における要素の状態（位置・サイズ・不透明度など）を定義する基準点。キーフレームとキーフレームの間はソフトウェアが補間して動きを生成する。
Dev Mode（Figma Dev Mode）
Figmaのモードのひとつで、エンジニアがデザインの仕様を検査し、コードとして実装するための読み取り専用インターフェース。Figma Motionでは、タイムラインやキーフレーム値・タイミングカーブもDev Modeで確認できる。
【参考リンク】
Figma公式サイト（外部）
Figmaのプロダクト情報、料金プラン、Figma Motionを含む最新機能の一覧。Figma Motionはトップページまたは機能一覧から直接アクセスできる。
Figma Motion 公式ヘルプ（外部）
Figma Motionの使い始め方、タイムライン操作、アニメーションスタイルの適用、Dev Modeでの確認方法など実践的な手順を解説する公式ドキュメント。
What’s new from Config 2026｜Figma Learn（外部）
Config 2026で発表された全機能の提供状況・利用条件・導入方法をまとめた公式ページ。Figma Motionのプラン別アクセス条件もここで確認できる。
【参考記事】
Introducing Figma Motion: Your canvas now has a timeline｜Figma Blog（外部）
Figma公式ブログによるFigma Motion発表記事。機能詳細、Atlassian・Adanna Onuekwusiによるユーザーコメント、設計思想を公式の言葉で解説している。
What’s new from Config 2026｜Figma Learn – Help Center（外部）
Config 2026の全発表機能の提供状況と利用条件をまとめた公式ヘルプ記事。Figma Motionのオープンベータ提供条件、フルシート要件の詳細が確認できる。
Config 2026: New Materials, New Tools and a More Expressive Canvas｜Figma Blog（外部）
Figma公式によるConfig 2026の全体概要。Figma Motion以外のCode Layers・Shader・Weaveツールとの文脈を理解するための公式レポート。
【関連記事】
Figma、デザインAIエージェントをキャンバスに統合 — チームメイトとして並走するベータ提供開始
今回のFigma Motionに組み込まれたエージェント機能の前身にあたる、Figmaデザインエージェント統合（2026年5月）を報じた記事。「キャンバスにエージェントが入ってきた」→「そのエージェントがモーションも生成するようになった」という流れで読むと、今回の発表の位置づけがより鮮明になります。
【編集部後記】
モーションが「スペシャリストの仕事」から「チームのシステム」に変わるとすれば、そこで失われるものについても考えておく必要があります。熟練したモーションデザイナーが積み上げてきた感覚や判断は、テンプレートと変数に変換できるものなのか。ツールが間口を広げるとき、私たちは何を標準として手に入れ、何を固有の表現として手放すのか。Figma Motionが示す方向は、モーションを「誰でも触れるもの」にすることで、逆説的に「なぜこう動かすのか」という判断の重みを増すかもしれません。タイムラインの操作を覚えることよりも、動きに意図を持たせる力の方が、これからのデザイナーに求められる素養になっていく。そんな未来を、私たちはまだ手探りで確かめているところです。
