XD から Figma への移行ユースケース

📝 イントロダクション — このページの使い方

Adobe XD から Figma への移行は、一つの形に収まらないことがほとんどです。「正しい」ワークフローは、 移行する人、ファイルの中身、変換後にチームが必要とするものによって変わります。このページでは、 よく見られる 4 つの典型シナリオ を整理し、それぞれに Pixel Fine Converter の機能 / ブログ記事 / 変換後ステップを対応づけています。

自分の状況に近いシナリオを選び、推奨フローに沿って進めながら、各ステップの詳しい解説はリンク先の Features / Blog 記事で確認できます。

📚 ユースケース 1: デザインシステム移行

対象読者

XD で共有コンポーネントライブラリを運用していて、その実体を Figma のチームライブラリとして 再構築する必要があるデザインシステムマネージャー、エンジニアリングリード、デザインシステムチーム。

典型的な課題

  • XD のシンボル / コンポーネントステート を、インスタンスを壊さずに Figma のコンポーネント / バリアントとして落とし込む必要がある
  • XD のライブラリ境界（Document Library + CC Library）と Figma のモデル（ファイル内ローカル + 公開済みチームライブラリ）は別物
  • 命名規則、オーバーライドパターン、XD 固有の構造的クセは、公開前に整理が必要
  • 変換後: ワークスペース構成（専用デザインシステムチーム / プロジェクトスコープ / 複数ライブラリ分割）の判断

推奨フロー

  1. 1

    Pro で変換

    Features: コンポーネント変換 でコンポーネント変換と コンポーネントステート → バリアント変換を有効化

  2. 2

    変換ファイルの確認

    シンボルがコンポーネント、State がバリアント（State=Default / State=Hover 等）として変換されているか確認

  3. 3

    デザインシステム要素を別ファイルに切り出し

    共通コンポーネント・スタイルを、利用側の画面ファイルから独立させる

  4. 4

    重複と命名の整理

    重複スタイルの統合、コンポーネント命名の正規化、非公開アセットを「Hide when publishing」でマーク

  5. 5

    チームライブラリとして公開

    チームの規模と構造に合うワークスペースパターンを選択

  6. 6

    更新サイクルの確立

    週次公開でバッチ化、破壊的変更は事前予告

関連リソース

期待される結果

変換 + クリーンアップ + 公開済みの Figma チームライブラリ。チームメンバーが自分のファイルで ライブラリを有効化し、公開時にアップデート通知を受信できる状態 — XD の CC Library ワークフローが Figma ネイティブのライブラリモデルに置き換わる。

🎬 ユースケース 2: プロトタイプ移行

対象読者

XD でクリッカブルプロトタイプ（画面遷移、オーバーレイ、ホバーエフェクト、ボタンの押下ステート）を 構築していて、その動きを Figma 側でも再現したい UX デザイナー、プロダクトマネージャー、その他関係者。

典型的な課題

  • 数百のプロトタイプ接続を手作業で再構築すると、数日仕事のプロジェクトに発展する
  • XD の コンポーネントステート と Auto-Animate は、Figma のバリアントと Smart Animate にマッピングされるが、完全一致ではない
  • 一部の XD プロトタイプ機能（Time / Voice / Keys トリガー）は Figma に直接対応する概念がない
  • 削除されたアートボードやコンポーネントを参照する「ゴーストリンク」が静かに再生を壊す

推奨フロー

  1. 1

    Pro で変換

    「Convert prototype interactions」と「Convert states to variants」を有効化

  2. 2

    Figma でプロトタイプを再生

    変換直後にプレイボタンを押して、主要なユーザーフローを通す

  3. 3

    変換ノートのレビュー

    「Generate conversion notes」（Pro 限定）を有効化していた場合、スキップされたインタラクションを確認

  4. 4

    Smart Animate トランジションの確認

    複雑なパス / マスク変形は Auto-Animate との差が出る場合あり、プレビューで微調整

  5. 5

    ゴーストリンクの修正

    削除済みノードを参照するインタラクションは変換時にスキップされるため、Figma 側で再接続

  6. 6

    方向別 Push を Slide に置き換え

    Push トランジションは方向問わずすべて LEFT に変換されるため、方向を保ちたい場合は Slide を使う

関連リソース

期待される結果

XD で構築したナビゲーション、オーバーレイ、ホバーステート、コンポーネントステート遷移が、Figma の プロトタイプモードでネイティブに再生される状態 — 接続矢印を一本一本引き直さずに済む。

🇯🇵 ユースケース 3: 日本語デザイン移行

対象読者

CJK フォント（Noto Sans JP、ヒラギノ角ゴ ProN、游ゴシック、Meiryo、MS Gothic 等）を使ったデザインを XD から Figma に移す、日本語デザイナーや日本語プロダクトチーム。

典型的な課題

  • XD と Figma のレンダリングエンジン差で、CJK テキストの縦位置が数ピクセルずれる
  • 汎用補正で揃うフォントもあるが、すべてではない — レジストリ登録フォントはフォント別のオフセット係数が必要
  • Figma 環境にフォントがインストールされていないと「Missing font」警告が表示される
  • グリフ描画差（線の太さ、アンチエイリアス）は完全に揃わない — ベースライン位置のみ補正可能

推奨フロー

  1. 1

    Figma 側のフォント可用性を確認

    変換前に OS に日本語フォントをインストール、または Figma 対応の同等品を準備

  2. 2

    Pixel Fine Converter で変換

    対応 6 フォント（Noto Sans CJK JP / Noto Sans JP / ヒラギノ / 游ゴシック / Meiryo / MS Gothic）の実測値に基づく精密ベースライン補正は Free プランで適用

  3. 3

    ベースライン整合の確認

    対応フォントなら CJK テキストが XD の元位置から 1px 未満に揃う

  4. 4

    「Missing font」警告のチェック

    未インストールフォントを補うか、Figma で対応する代替フォントを設定

  5. 5

    未対応フォントの場合

    汎用補正が適用される。1px 以上のズレが残る場合は、お問い合わせメール経由で実測データを送付し、レジストリへの追加を検討依頼

  6. 6

    変換後のフォント管理

    テキストスタイル一括統合は別ブログ参照

関連リソース

期待される結果

対応フォントなら 1px 未満のドリフトで日本語テキストが正しい縦位置に並び、「Missing font」警告が 解消され、XD で定義したテキストスタイルが Figma ネイティブのテキストスタイルとして編集可能な状態。

👥 ユースケース 4: チーム移行プレイブック

対象読者

多人数チームでの XD → Figma 移行や、複数ファイルの並行移行を取りまとめる エンジニアリングリード、デザインオプス、プロジェクトマネージャー。

典型的な課題

  • どの XD ファイルを、どの順番で移行するかの棚卸し
  • 「完了」の定義 — ファイル単位 / プロジェクト単位の成功基準
  • 変換結果が受け入れ不能だった場合のロールバック経路の設計
  • 誰が変換を実行し、誰が検証し、誰が各ファイルを本番利用 OK と判断するかの分担

推奨フロー

  1. 1

    棚卸しと優先順位付け

    XD ファイル全件を洗い出し、重要度 / 利用頻度 / 複雑度で分類

  2. 2

    Tier 別成功基準の定義

    ビジュアル忠実度、構造の正確性、動作再現の各目標

  3. 3

    パイロット変換

    代表的なファイルで開始し、Pro 機能の設定と変換後のクリーンアップ工数を見積もる

  4. 4

    バッチ変換

    ステップ単位で変換し、ステップとステップの間に QA チェックポイントを置く

  5. 5

    ロールバック対応

    ロールバック経路を確立（XD オリジナル保持 + Figma ファイルのバージョン管理）して、再作業が必要なファイルに備える

  6. 6

    本番カットオーバー

    変換後の Figma ファイルが信頼できる単一情報源（source of truth）となり、XD がアーカイブされる瞬間を明確化

  7. 7

    長期メンテナンス

    チームライブラリのセットアップ、Dev Mode 連携、デザイントークン同期の継続運用

関連リソース

期待される結果

予測可能なタイムラインで移行プロジェクトが完了し、各変換ファイルが成功基準を満たし、再作業が 必要なファイル向けにクリーンなロールバック経路があり、組織全体が信頼できる本番カットオーバーの 記録が残っている状態。

🎯 まとめ

上の 4 シナリオに完全には一致しなくても、根本のワークフローは同じです — Pixel Fine Converter で 変換し、自分たちの成功基準で出力を検証し、必要に応じて整理し、残りの Figma 環境と統合する。 個別の機能や挙動は Features ページ や ブログ で詳しく扱っており、プロセスやサポートに関する 疑問は FAQ でカバーしています。それ以外で お困りの場合は お問い合わせメール までご連絡ください。