📌 この記事のポイント

• Webのインタラクション内で完結するならFigma Motion

• 映像作品として納品するならAfter Effects

• 動きの基本4プロパティは両ツールで共通

• コード書き出しとプロトタイプ共有はFigma Motionだけ

• 1フレームに複数の動きを置くと制約が出る

2026年8月31日更新

使い分けの基準は「Webのインタラクションに閉じるかどうか」

Figma MotionとAfter Effectsの使い分けとは、成果物がWebのインタラクションの範囲で完結するならFigma Motion、映像作品として書き出して納品するならAfter Effectsという一本の線で決まります。機能を細かく比較する前に、この基準で大半の案件は振り分けられます。

Figma Motionは、Figmaのデザインモードの隣に追加された「モーション（ベータ版）」から起動します。ベータ版のため機能は発展途上ですが、Webのインタラクションを作る用途ではすでに実務で使える水準に達しています。

参考：本記事はNOT DESIGN SCHOOL主催ウェビナー「After EffectsからFigma Motionまで！はじめてのモーションデザイン入門」（2026年7月開催）の内容をもとに構成しています。登壇者はNOT DESIGN SCHOOLメンターで、制作系スタートアップのCCOを務めるモーションデザイナーです。

Figma MotionとAfter Effectsの機能差マップ

両ツールの機能は、共通する基本動作、Figma Motion固有、After Effects固有の3層に分けて捉えると整理できます。

動きの基本になる位置・スケール・回転・不透明度の4プロパティは、どちらのツールでも同じです。この4つを組み合わせて動きを作るという考え方は共通しているため、片方を覚えればもう片方の理解は速くなります。

アニメーションプリセットと書き出しプリセットはどちらのツールにもありますが、数はAfter Effectsのほうが多く用意されています。

Figma Motionにできて、After Effectsにできないこと

Figma Motion固有の価値とは、デザインデータと動きが同じファイルの中でつながっていることです。After Effectsは映像制作のツールなので、Webの実装につながる機能は持っていません。

• インタラクション：ホバーやクリックの後の挙動を作れる

• プロトタイピング：動きをつけた状態でプレビューをクライアントに共有できる

• コード書き出し：開発モードのモーション欄からCSSをコピーできる

• コンポーネント：デザインシステムの部品構造をそのまま扱える

デザインの修正が入ったときに、After Effectsでは書き出し直しが必要になります。Figma Motionなら元データを直せば動きも追従します。修正が繰り返される案件ほど、この差が効いてきます。

After Effectsにしかできない表現

After Effects固有の強みとは、エフェクトを組み合わせて映像として作り込めることです。ウェビナーのライブデモでは、パーティクルワールドというエフェクトで火の粉が舞う表現が作られていました。

パーティクルワールドは平面レイヤーに適用するエフェクトで、生成量、持続時間、重力、粒子の形状といった値を調整して見え方を変えます。初めて開くと数値の多さに圧倒されますが、実際に触る箇所は限られます。

テキストの表現でも差が出ます。After Effectsの「アニメーター」は、文字ごと・単語ごとにエフェクトをかけられる仕組みで、字送りの設定を使うとトラッキングが時間とともに広がる動きが作れます。Figma Motionには現時点で同等の機能がありません。

キャラクターや生き物を動かす場合は、パペットツールが使われます。関節にあたる位置にピンを打ち、その周辺を動かす標準機能です。ウェビナーでは、ボタンをホバーすると中の魚が動く表現を、After Effectsで作って書き出し、エンジニアに渡した事例が共有されていました。

Figma Motionにシェーダーの機能が加われば、こうしたエフェクト表現の一部が扱えるようになる可能性はあります。ただし2026年8月時点では実現していません。

どちらを選ぶべきか｜タイプ別の判断表

初心者にとってFigma Motionが向いているのは、動かせるプロパティが制限されているからです。After Effectsは何でもできる代わりに、どこから手をつけるかで迷いやすくなります。

書き出し形式の違い｜MP4・WebM・GIF・SVG・Lottie

Figma Motionの書き出し形式とは、MP4・WebM・GIF・SVGの4種類です。いずれもWeb上で扱える形式で、ウェビナーの登壇者は基本的にSVGで書き出していると話していました。

After Effectsはレンダーキューに追加して書き出します。Media Encoderを使うと、形式の選択肢が増え、圧縮の設定や透明度を保持した書き出しにも対応できます。

Lottieへの書き出しは、2026年8月時点でAfter Effectsのみです。Figma Motion向けのLottie公式プラグインは存在するものの、エクスポートには対応していません。Lottieを前提とした案件では、現状After Effectsが必要になります。

書き出しには前提がひとつあります。Figma Motionではフレームで囲まないと書き出しができません。コーダーに共有するだけならフレーム化は不要ですが、素材として書き出す場合は必須です。

エンジニアに動きを渡す2つの方法

動きを実装に渡す手段とは、コードで渡す方法と、素材として書き出して渡す方法の2つです。動きの複雑さで選び分けます。

1. コードで渡す：Figmaの開発モードを開くとモーションの項目が追加されており、そこからCSSをコピーして実装に貼れる

2. 素材で渡す：SVGやMP4として書き出し、エンジニアに配置してもらう

避けたほうがよいのは、口頭やテキストだけで動きを伝えることです。「下からふわっとフェードインさせて」と言っても、何秒かけるのか、どのイージングなのかは人によって解釈が変わります。言葉で伝えるより、自分で作って渡すほうが確実で、全体の工数も短くなります。

Figma Motionで実現できない動きに当たった場合は、Figma Makeで作らせてコードを固定してもらうという進め方も共有されていました。

Figma Motionの制約｜1フレームに複数の動きを置くと起きること

Figma Motionの現時点での制約とは、同じフレームの中に複数のアニメーションを入れると、最も長いタイムラインに他の動きも引き伸ばされるという挙動です。繰り返し設定も同じフレーム内では統合されるため、動きごとに個別の秒数やループ設定を持たせられません。

回避策は、動きごとに書き出して素材として配置することです。運用としては次の形になります。

• Figmaのファイル側にマスターデータを残しておく

• 実装で使うものは、動きごとに書き出した状態で置いておく

現時点のFigma Motionは、実装用の最終データを作る場所というより、動きを決めて共有する場所として使うのが現実的です。実装では調整が入る前提で進めると、手戻りが減ります。

Webのインタラクションの範囲であれば、業務での活用はすでに可能です。写真が右から左へ無限にゆっくりスクロールするような表現は、以前のFigmaでは作れず、わざわざAfter Effectsに書き出して作る必要がありました。Figma Motionではこれが1つのツールの中で完結します。

AIとの組み合わせ方

モーション制作でのAIの使い方とは、動きのイメージを固める工程を任せ、仕上げは自分で行うという分担です。ウェビナーでは2つの使い方が挙げられていました。

1. Figmaのエージェントで動きの当たりをつける：「それぞれのレイヤーを動かしてください」程度の指示でも、イージングまで設定された動きが返ってくる。イメージが固まってきたら「左から右に何秒かけて、どのイージングで動かす」と具体的に指示する

2. 生成AIの動画を提案用に使う：納品には使えない品質でも、先方にイメージを伝える段階では役に立つ

動きは言語化しにくく、検索しても求めているものが出てこないことが多い領域です。AIに壁打ちしてイメージを形にしてから、After Effectsで仕上げるという流れが、登壇者の推奨する進め方でした。

なお、Figma Motionのエージェント機能とAI機能は有料プランでの提供です。無料プランでは閲覧のみとなります。

限界と注意点

Figma Motionはベータ版であり、機能と提供条件は変わります。 この記事で触れたプリセットの数、書き出し形式、プラン条件、Lottie対応の有無は、2026年8月時点でウェビナーの内容と照らして整理したものです。実務で判断する前にFigmaの公式情報で最新の状態を確認してください。

プラグインの価格も変動します。 イージングを拡張するFlowは約5,000円という価格が共有されていましたが、購入前に販売元の情報を確認する必要があります。

この記事の比較は、Web制作の文脈に寄せています。 映像制作やモーショングラフィックスを主業務にする場合、After Effects側の評価はここでの整理と変わります。判断が分かれるところなので、自分の案件がどちらの文脈にあるかを先に決めてください。

よくある質問

Q. Figma Motionは無料プランでも使えますか？

閲覧はできますが、編集は有料プランでの提供です。AIやエージェントを使った動きの生成も同様です。ウェビナー中にも参加者から同じ質問が出ており、無料プランでは閲覧のみになる旨が案内されていました。プラン条件は変わるため、公式の料金ページで最新の状態を確認してください。

Q. Figma Motionで作った動きをそのままコーディングに渡せますか？

渡せます。開発モードを開くとモーションの項目が追加されており、そこからCSSをコピーして実装に貼れます。単一プロパティのシンプルな動きであればこの方法で足ります。複数のプロパティを重ねた複雑な動きは、素材として書き出して渡すほうが早くなります。

Q. 書き出すときにフレームで囲む必要はありますか？

書き出す場合は必要です。フレーム化していないと書き出しの項目が出てきません。一方、コーダーに開発モードで共有するだけならフレーム化は不要です。アニメーションをつけたい部分をフレームで囲む、という理解で問題ありません。

Q. Lottieに書き出したい場合はどうすればいいですか？

2026年8月時点ではAfter Effectsを使います。bodymovinというスクリプトを追加することで書き出しに対応できます。Figma Motion向けのLottie公式プラグインは存在しますが、エクスポートには対応していません。

Q. 動きをコピーして他のレイヤーに使い回せますか？

どちらのツールでもできます。Figma Motionには「アニメーションを貼り付け」という項目が追加されており、コピー元の動きを別の要素に適用できます。After Effectsは以前からキーフレームのコピー＆ペーストに対応しています。