XD の移行先、Framer と Figma で迷うときの判断軸 — 移行コストとシナリオ別の推奨

Adobe XD がメンテナンスモードに入り、移行先を検討するチームでよく聞かれる質問が「Figma だけでなく Framer も候補に入れるべきか？」というものです。Framer は 2026 年現在マーケティングが活発で、モーション機能も強力です。「設計から公開までを 1 ツールで完結」という訴求は、小規模チームに響くメッセージになっています。

ただし Framer と Figma は同じカテゴリのツールではなく、適切な選択は「自分のプロジェクトで何を目指しているか」によって変わります。「流行っているから」という理由だけで選ぶと、後で合わないことに気づくケースが少なくありません。この記事では XD ユーザーの視点で両者を比較し、それぞれの得意分野、XD 資産の移行コスト、そして判断の基準となるポイントを整理します。

5 つのツール全体（Figma / Sketch / Penpot / Lunacy / Illustrator + Express）を広く比較したい場合は、Adobe XD の代替ツール選び 5 ツール比較のほうが網羅的です。本記事は XD ユーザーから最も多く相談される「Framer vs Figma」の 2 択にフォーカスして深掘りします。

結論を先に

Framer は現在「Web サイトを公開するためのツール（モーションに強い）」、Figma は「デザインシステムとチーム協業のためのツール」です。マーケティングサイトを設計して公開するなら Framer は有力な選択肢になります。製品 UI を大規模に設計したり開発者と連携したりするなら Figma が現実的な選択肢です。両者を併用するパターンも一般的になっています。

🎯 この記事は誰向けか

この記事は以下の人を想定しています:

XD からの移行を検討中の人で、Figma はすでに候補に入れていて、Framer を追加で検討すべきか迷っている
個人デザイナーまたは小規模チームで、「設計 + 公開」が 1 ツールで完結するワークフローを重要視している
開発者と協業するデザイナーで、プロダクト開発フロー全体に組み込めるツールを選びたい
Framer の方針転換に混乱している人 — Framer は長年コードファーストのプロトタイピングツールでしたが、ここ数年で Web 公開向けに大きく軸足を移したため、古い比較記事は現状と乖離していることが多いです

数百ファイル規模の組織全体の移行を扱う場合は、エンジニアリングチーム向けの 5 ステッププレイブックに先に目を通してもらうと良いでしょう。本記事は小規模な 2 ツール比較の判断に絞っています。

🧭 Framer と Figma — 根本的な違い

最初に押さえておくべき事実は、Framer と Figma は異なる問題を解決するツールで、2026 年時点では見た目や印象とは対照的に、重複している部分は意外と少ないということです。

観点	Framer	Figma
中心的な目的	Web サイトの設計 + 公開	プロダクト設計 + デザインシステム構築
成果物	独自ドメインでホスティングされる Web サイト	デザインファイル、プロトタイプ、Dev Mode 仕様
モーション / インタラクション	強力 — Framer Motion が内部で動作	プロトタイプ向けは十分、本番のモーションは開発者側に渡す
チーム協業	リアルタイム編集はあるが、小規模チーム想定	業界標準 — ブランチ、コメント、無制限ビューア
デザインシステム対応	コンポーネント / バリアント対応、機能の幅は狭め	成熟 — 変数、モード、ライブラリ、デザイントークン
開発者向けハンドオフ	対象外 — Framer 自体がサイトを公開する	Dev Mode、プラグインエコシステム、コード書き出し

混乱の原因は Framer の過去にあります。Framer は長年「React コードを書くデザイナー向けのプロトタイピングツール」として位置づけられていました。2022 年に Web 公開向けに大きく方向転換し、現在の Framer は実質的に別カテゴリの製品になっています。古い「Framer vs Figma」の比較記事は依然として古い Framer を前提にしていることが多いので注意が必要です。

1 文で違いをまとめると

Framer が答えるのは「このデザインをどうやって Web サイトとして公開するか？」、Figma が答えるのは「このデザインを製品開発のなかでどう位置づけるか？」です。両方の問いが重要なら、答えは「両方使う」になります。

🚀 Framer が向いている領域

Framer が最も力を発揮するのは、成果物がそのまま公開する Web サイトで、チームが小規模なプロジェクトです。

マーケティングサイトとランディングページ

スタートアップのランディングページ、製品ローンチ用サイト、個人ポートフォリオなど、「Figma で設計してからコードで実装する」よりも「Framer 内で設計して直接公開する」ほうが速いケースです。スクロール連動アニメーションをキャンバス上でプロトタイプしながら、そのまま公開サイトで同じ挙動を再現できます。

モーション主体のインタフェース

Framer Motion（基盤となるアニメーションライブラリ、現在は「Motion」として独立公開）により、バネのような滑らかな動き、フリック後の慣性、画面間で要素が連続的につながるレイアウト遷移、スクロール連動アニメーションをコードを書かずに扱えます。モーションがブランドの一部となっているインタフェースでは、明確な差別化要素になります。

個人デザイナーや小規模チーム

1 人または少人数のスタジオであれば、設計とホスティングが 1 ツールで完結するモデルにより、ツール構成をシンプルに保てます（別途 Webflow / Vercel / Netlify を契約する必要なし、開発者への引き渡し不要）。料金もそれに見合った設定になっています。

エンジニアを介さずに公開したいデザイナー

Framer のマーケティングが最も直接的に狙っている層です。「Figma ファイルを引き渡してから誰かが実装する」のではなく、「自分で完成した Web サイトを公開する」までを担当したいデザイナーには真剣に検討する価値があります。

🏗️ Figma が向いている領域

Figma の強みは Framer とは対照的で、複数のメンバーが関わる規模の大きいプロダクトに対応するために設計されています。

大規模なプロダクト設計

数十〜数百の画面、デザインシステムのトークン、ブランチワークフロー、Dev Mode を利用して仕様を確認し、実装を進める開発者 — これらが揃ったとき Figma の機能が有効に働いてきます。Framer はマーケティングサイトを支え、Figma はプロダクト全体を支えるという、スケールの違いがあります。

チーム協業

リアルタイム編集、コメント、バージョン履歴、ブランチ、関係者レビュー向けの無制限ビューア — Figma が業界標準であるのには理由があります。3 人以上が関わる作業では、協業機能が弱いツールを使う際の摩擦が、他の機能面のメリットを上回ってきます。

デザインシステムとトークン

変数、モード、スコープ付きライブラリ、セマンティック命名、Dev Mode を通じたコードへの引き渡し — Figma のデザインシステム機能は、開発者やデザインシステム担当者が実務で頼れる水準に成熟しています。

開発者向けハンドオフ

差が最も大きい領域です。Figma の Dev Mode と豊富なプラグインエコシステムが、デザインとエンジニアリングをつなぐ役割を担っています。Framer はこのワークフローに対応していません — Framer 自身がサイトを公開するため、「ハンドオフ」という概念がないからです。

プラグインエコシステム

Figma のプラグインエコシステム（実際に XD ファイルを移行するときに使うのもこれ）は巨大です。Framer のエコシステムは Figma と比較すると規模が小さく、他ツールからの取り込み手段もあまり充実していません。

「両方で良くなる」緊張関係

Framer は最近デザインシステム機能を追加し、Figma は Web 公開機能（Figma Sites）を追加するなど、両者は徐々に互いの領域に近づきつつあります。ただし核となる目的はまだ明確に異なるため、将来の方向性を予測して選ぶよりも、今のプロジェクトで何を実現したいかで選ぶのが現実的です。

📦 XD 資産の移行コスト比較

既存の XD 資産の移行コストもツール選択の判断材料の 1 つとなります。2 つの移行手段は、性質がまったく異なります。

XD → Figma

直接的でサポートも豊富、複数のプラグインが利用可能です。

複数のコンバータープラグインが Figma Community で .xd ファイルを扱えます（Pixel Fine Converter、Convertify、Magicul、html.to.design など）
無料枠が存在するため、本格的にコミットする前に変換結果を試せます
再現精度は実用的な水準: レイアウト、コンポーネント、テキスト、Auto Layout 推論は多くのファイルで機能します。複雑なプロトタイプやインタラクションは弱点になりがちです
中間ツール不要 — XD ファイルを入力すれば Figma ファイルが出力され、小規模ファイルなら数分以内に完了します

Adobe XD ファイルを Figma で開く 3 つの方法で広い選択肢（Web サービス、プラグイン、手動エクスポート）を比較しています。プラグイン経路の具体的な手順はFigma で XD ファイルを開く手順 — デザイナー向けビジュアルウォークスルーが UI クリック単位で解説しています。

XD → Framer

間接的です。Framer は 2026 年時点で XD ファイルのネイティブインポーターを持たないため、すべての経路に中間ステップが入ります。

経路	手順	トレードオフ
XD → Figma → Framer	XD ファイル → コンバータープラグイン → Figma ファイル → Framer の Figma インポーター	変換 2 段階だが、各ステップはサポート豊富。再現精度の損失は主に XD → Figma 段階で発生
XD → Magicul → Framer	サードパーティの有料サービスで XD → Figma 変換 → Framer の Figma インポーターで取り込み	上の経路と本質的に同じ 2 段階だが、XD → Figma 部分を Magicul（有料サービス）が担う
XD → 手動エクスポート → Framer	アートボードごとに SVG / PNG エクスポートして Framer で再構築	完全な制御が可能だが、実質的に再設計

XD で組んだ構造を Framer 側に引き継ぎたい場合、ほとんどのチームが XD → Figma → Framer というルートを選びます。最初のステップ（XD → Figma）で使うコンバータープラグインが、再現精度のベースラインを決めます。

XD → Framer 経路の現実

Framer に XD ネイティブインポーターがないため、XD 資産が大きいプロジェクトで Framer を選ぶ場合は、Figma を介した中間変換（複数段階だがサポート豊富）かサードパーティの有料サービス（1 段階だが制約あり）かの選択を許容する必要があります。移行の再現精度が Framer の公開機能より重要なら、XD → Figma の直接経路のほうがシンプルです。

移行経路選びで費用が大きな判断軸になる場合は、XD から Figma へ無料で変換 — 有料プラグインに切り替えるべきタイミングで無料枠でカバーできる範囲と、Pro 枠に切り替えるべきタイミングを整理しています。

⚖️ 判断のフレームワーク

どちらが優れているかを決めるのではなく、自分のケースに合うのはどちらかを決める手順を確認しましょう。

ステップ 1 — 成果物は何か？

成果物	傾向
公開マーケティングサイト / ポートフォリオ	Framer
開発者に引き渡すプロダクト UI	Figma
モバイルアプリのデザイン	Figma
デザインシステム / コンポーネントライブラリ	Figma
関係者レビュー向けのアニメーションプロトタイプ	どちらでも可、モーション重視なら Framer

ステップ 2 — チームの規模は？

1〜2 人: どちらでも機能しますが、Framer のオールインワンモデルがツール構成の負担を減らしてくれます
3〜10 人: Figma のコラボレーション機能の重要性が増してきます
10 人以上: Figma 一択です。大規模ではブランチと無制限ビューアの差が決定的になります

ステップ 3 — 開発者はどこにいるか？

開発者なし（デザインが最終成果物）: Framer が選択肢に入ります
Dev Mode を通じて開発者が仕様を受け取る: Figma が向いています
開発者が React / Vue / Svelte でカスタムコードを書く: Figma のほうがつなぎ役として優れています。Framer の React 出力はマーケティングサイトの構造であって、本番コードベースではありません

ステップ 4 — XD 資産はどれくらい重要か？

XD ファイルは参照のみ: どちらの経路でも問題ありません（結局再設計するため）
XD ファイルに引き継ぎたいアセットがある: XD → Figma がシンプルです（変換 1 段階）
XD ファイルが大規模または多数: XD → Figma のプラグインエコシステムにより、一括移行が現実的な選択肢になります

🎬 シナリオ別の推奨

フレームワークを具体例に当てはめます。

シナリオ A — スタートアップのローンチサイト

新製品のランディングページを設計中。サイトは 2 週間後に公開、文言の全体的なコントロール権あり、デザインにはスクロール連動アニメーションが含まれる。

推奨: Framer。 これはまさに、Framer が方針転換の対象として狙っている用途です。XD 資産を Framer で手動再構築する必要があるとしても、設計から公開・ホスティング済みサイトまで一気通貫で進められることで節約できる時間が、移行コストを上回ります。

シナリオ B — SaaS プロダクトの UI

SaaS プロダクトの画面を設計中。製品には 50 以上の画面、3 人のエンジニア、デザイナー/エンジニア協業モデル、開発中のデザインシステムがある。

推奨: Figma。 Framer はこの規模を想定していません。Dev Mode / 変数 / ブランチの組み合わせが本質的に必要で、Framer に同等のワークフローは存在しません。

シナリオ C — 個人デザイナーのポートフォリオ刷新

長年 XD を使ってきた個人デザイナーが、モダンなツールに移行したい。成果物は個人ポートフォリオ。

推奨: どちらでも可。自分でサイトを直接公開したいなら Framer がやや有利です。 デザイン品質に集中して公開は開発者に任せる場合は Figma で問題ありません。XD からの移行コストは Figma のほうが低い（直接的なコンバータープラグインがある）ため、Framer 利用者でも XD → Figma 経由で資産を整理してから Framer で再実装するパターンが多く見られます。

シナリオ D — モバイルアプリチームの XD 移行

5 人のチームが 100 ファイル以上の XD ファイルでモバイルアプリを設計、長期利用ツールを選定中。

推奨: Figma がほぼ一択です。 Framer はモバイルアプリ向けのデザインツールではなく、焦点は Web 公開にあります。XD → Figma のコンバータープラグインがこの規模の移行を現実的な選択肢にしてくれますし、100 ファイル規模のプロジェクトには Figma のデザインシステム機能が本質的に必要になります。

シナリオ E — 制作会社が両者を併用

制作会社がクライアント向けに SaaS プロダクトを設計し（Figma の領域）、同じ製品のマーケティングサイトも制作する（Framer の領域）。

推奨: 意図的に両方を使い分けます。 プロダクト設計には Figma、マーケティングサイト出力には Framer を使います。多くの制作会社が収束しているワークフローで、妥協ではなく両ツールの実際の強みに合った自然な使い分けです。

🚀 Figmaにプラグインをインストール（無料）

Figma Communityから1クリックで追加できます

🎯 まとめ

Framer vs Figma の議論は、様々な観点から頻繁に行われています。実際の答えはマーケティングの印象よりも明確で、Framer は強力なモーション機能を持つ Web サイト公開ツール、Figma は業界標準の協業機能を持つデザインシステム / プロダクト設計ツールです。両者は一部で同じような機能を提供していますが、解決する問題は異なります。

XD 移行を考えている人にとって覚えておくべき 3 点:

XD → Framer の直接インポーターは存在しないため、Framer への移行には中間ステップが入ります（最も一般的なのは XD → Figma → Framer）。XD → Figma 経路は直接的で、複数のコンバータープラグインに対応しています。
Framer の方針転換は重要です。現在の Framer（Web 公開）は古い Framer（コードファーストのプロトタイピング）とは別の製品で、古い比較記事は実態とずれていることが多くなっています。今の Framer を基準に判断することが重要です。
どちらか一方を選ぶ必要はない。2026 年で最も一般的なパターンは、プロダクト設計に Figma、マーケティングサイトに Framer を使う併用パターンです。それぞれのツールが実際に強い領域で使い分けます。

Figma に向かう状況なら、Adobe XD から Figma への移行実践ガイドが最初から最後までの手順を解説しています。プラグイン経路の具体的な操作はFigma で XD ファイルを開く手順 — デザイナー向けビジュアルウォークスルーが UI クリック単位で解説しています。本サイトで開発している Pixel Fine Converter プラグインは、無料枠で 1 回の変換あたり最大 3 アートボードまで対応するため、Pro 枠に進む前に移行経路を検証できます。