Figma で XD ファイルを開く手順 — デザイナー向けビジュアルウォークスルー

.xd ファイルを渡されて Figma で開きたい — そのとき気になるのは「3 つの変換アプローチをどう評価するか」よりも、「何をクリックすればよいか」「何が表示されるはずか」です。

この記事は、そんなときに役立つビジュアルウォークスルーです。最も一般的なルート（Figma Community のコンバータープラグイン）を、メニューの開き方や各画面の見え方のレベルでステップごとに解説します。本記事で使うプラグインは Pixel Fine Converter で、以下の各ステップは実際の UI に沿って書かれています。3 つのルート全体（Web サービス vs プラグイン vs 手動エクスポート）を比較してから決めたい場合は、3 ルート比較記事のほうが起点として向いています。

ここでは、すでにプラグインベースのルートを選んでいる前提で、その手順をデザイナー目線で、簡潔に理解できる説明を目指します。

必要なもの

Figma の無料アカウント、開きたい .xd ファイル、そして 5〜10 分の時間。Pixel Fine Converter の Free 枠で足りるため、有料プランは不要 — コンバータープラグインの Free 枠で小規模ファイルは十分カバーできます。

🎨 このウォークスルーは誰向けか

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

.xd ファイルを Figma で見たいデザイナー（またはデザイナー隣接ロール）
対象は単一ファイルか少数のファイル（数百ファイル規模の移行プログラムではない）
比較マトリクスよりビジュアルなウォークスルーのほうが頭に入りやすい
XD から移行する人か、移行する人と一緒に作業している人

数百ファイル規模の組織全体の移行を扱う場合は、エンジニアリングチーム向けの 5 ステッププレイブックのほうが向いています — オーナーシップ / 成功基準 / QA ループといったスケール時に必須になる要素を扱っています。3 つのルートを比較したい場合は、3 ルート比較記事が Web サービス / プラグイン / 手動エクスポートのトレードオフを解説しています。

この記事はプラグインルートに絞り、その手順を歩きます。

なぜプラグインルートか

プラグインルートがデザイナーにとって最も一般的なのは、変換が Figma のエディタ内で完結するからです — 結果がそのまま編集可能な Figma ファイルとして出力されます。Web 変換サービスはツール切り替えとファイルダウンロードが必要、手動エクスポートは構造が失われます（テキストが画像化、レイヤーがフラット化）。「Figma で作業を続けるために XD ファイルを開きたい」というケースでは、プラグインルートが実用的な既定線になります。

📋 始める前のチェックリスト

ステップ 1 の前に揃えておくもの:

✅ Figma アカウント — Free プランで OK
✅ 開きたい .xd ファイル — ローカルマシン上に保存済み
✅ モダンブラウザ（Chrome / Edge / Safari / Firefox）または Figma デスクトップアプリ
✅ 任意: Adobe XD のインストール — XD で一度ファイルを開き直して保存し直したい場合のみ必要（過去バージョンで保存された古いファイルで有効）

先に確認しておきたいこと

Adobe XD がインストールされているなら、.xd ファイルが XD 自体で問題なく開くか先に確認しておくとよいです。XD が開けないファイルはコンバーターでもクリーンに変換されません — それはファイル破損のサインで、まず XD 側で対処する必要があります。

1️⃣ ステップ 1 — Pixel Fine Converter をインストールする

Figma のプラグインは Figma Community に集約されています。インストール手順:

Figma で左上のメニュー（もしくは Resources パネル）から Community に移動
Community の検索バーで Pixel Fine Converter を入力
Pixel Fine Converter のページで Try it out をクリック（Figma のバージョンによってボタン表記は変動、Open in… の場合もあり）
インストール確認ダイアログが出たら承認

インストールすると Pixel Fine Converter が Figma アカウントに紐付き、以後どの Figma ファイルからでも利用できます。

1 回限りの実行ではなくインストールする理由

インストールしておくと Pixel Fine Converter が Plugins メニューに常駐します。XD ファイルを一度だけ開きたい場合は 1 回限りの実行でも構いませんが、今後 XD ファイルを扱う可能性があるならインストールのほうが手早いです。

2️⃣ ステップ 2 — Figma を開いて Pixel Fine Converter を起動する

Pixel Fine Converter をインストールした後:

Figma ファイルを作成または開く — 空の新規ファイルで構いません。変換後の XD コンテンツはこのファイルに配置されるため、宛先ファイル選びは重要です
Plugins メニューを開く — ツールバーの Actions メニュー（Figma ロゴ付近）から Plugins & widgets タブを選択、またはショートカット Cmd/Ctrl + / で Quick actions を開いてプラグイン名を検索
Plugins → Pixel Fine Converter を探す
クリックして起動 — Figma 内に Pixel Fine Converter の UI パネルが開きます

Pixel Fine Converter は Figma のウィンドウ内で動作し、別アプリには切り替わりません。ここから先の操作はすべて同じブラウザタブ／デスクトップウィンドウ内で完結します。

宛先ファイル選びのコツ

Pixel Fine Converter 起動時に開いていた Figma ファイルが、変換結果の配置先になります。単一の XD ファイルなら空の新規ファイルが最もクリーン。複数の XD ファイルを 1 つのデザインシステムに集約したい場合は、整理された Figma ファイルを先に用意してそこに複数回の変換セッションを流す形が向いています。

3️⃣ ステップ 3 — .xd ファイルをアップロードする

Pixel Fine Converter のパネルにはアップロードエリアがあります — ドラッグアンドドロップゾーン + 「Browse」「Choose file」のフォールバックボタンという構成です。

ファイルエクスプローラー / Finder から .xd ファイルを Pixel Fine Converter のアップロードゾーンにドラッグ、またはアップロードボタンをクリックしてファイルを選択
アップロード完了を待つ — Pixel Fine Converter はファイルを受け付けた時点でファイル名を表示します。アートボード数は解析開始時に N 件の artboard を検出として表示されます
“file too large” や “too many artboards for the free tier” のエラーが出た場合は、Free 枠の制限に当たっています。始める前のチェックリストを再確認

Pixel Fine Converter の Free 枠は変換あたり最大 3 アートボードまで。それ以上のファイルは Pro 枠が必要、または XD 側でファイルを分割してからエクスポートします。

プライバシーチェック — ファイルはどこへ行く？

Figma のコンバータープラグインがすべてローカル処理とは限りません。プラグインによっては .xd をベンダーの外部サーバーにアップロードしてから変換するものもあります。クライアント機密や NDA 対象のファイルを扱う場合は、プラグインのデータ取り扱いドキュメントを確認してからアップロードしてください。Pixel Fine Converter は例としてプラグイン内のクライアントサイドで処理し外部サーバーに送信しません — ただしこれはプラグインによって異なるので、決め打ちせず個別に確認するのが安全です。

4️⃣ ステップ 4 — 変換オプションを設定する

ファイルをアップロードすると、Pixel Fine Converter は実行前に変換オプションパネルを表示します。オプションは Auto Layout / Components / Export / Fine-tuning に分かれており、初回で特に効くのは次の項目です:

オプション	何をするか	有効にするタイミング
Auto Layout 推論	XD のスタック / リピートグリッドを検出し、適切な範囲で Figma Auto Layout を適用。	原則オン。後の手作業を大幅に削減できます。
コンポーネント保持	XD のシンボルを Figma のコンポーネント / インスタンスにマッピング。	共有コンポーネントを多用するファイルではオン。
テキスト精度補正	line-height / ベースライン / 日本語フォントメトリクスを XD の描画に近づける補正。	テキスト多めのファイル、特に日本語など CJK コンテンツではオン。
アートボード選択	ファイル全体ではなく特定のアートボードのみを変換対象に指定。	Free 枠で重要なアートボードを優先したいときに有用。

迷ったらPixel Fine Converter の既定値が妥当な開始点になります — 初回結果を見て調整したくなったら再実行すれば OK です。

初回から設定を詰め込み過ぎない

すべてのオプションを「最高品質」に設定したくなりますが、まずは既定値から開始するのがベターです。まず妥当な既定値で実行し、出力を見てから、特定の問題に応じてオプションを再調整して再実行する流れの方が結果として速いです。各オプションの効果を抽象的に当てるよりも、出力を見ながら判断する方が確実です。

5️⃣ ステップ 5 — 変換を実行する

Figma に変換 をクリックします。次に何が起きるかはファイルサイズ次第:

小規模ファイル（数アートボード）: 変換は数秒で完了、結果が Figma ファイルに出力される
中規模ファイル（Pro 枠で数十アートボード）: 30 秒〜数分、進捗インジケーターが見積もり時間を表示
超大規模ファイル: 処理が数分以上かかることがあり、一括変換より XD 側でのファイル分割のほうが早いのが通常

変換実行中は Figma や Pixel Fine Converter のパネルを閉じないでください。変換はブラウザ／デスクトップセッション内で処理を行うため、タブを閉じると中断されます。

変換が完了すると、変換後の Figma コンテンツがファイル内に表示されます。フレームやページは XD のアートボード名を踏襲した形式の命名になることが多く、すぐに判別しやすい状態になります。

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

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

6️⃣ ステップ 6 — ビジュアル品質の一次チェック

ここからが本題: 出力は意図通りに見えるか？ 詳細な編集に時間を投じる前に、以下の短い目視チェックを通します:

✅ すべてのアートボードが存在する — XD ファイルと同数（アートボード選択の制限分は除く）
✅ テキストが読める — 明らかな missing-font フォールバックがない、文字化けがない
✅ コンポーネントが保たれている — 繰り返し UI 要素のインスタンスが見た目上一貫している
✅ Auto Layout が適切に適用 — XD のスタック / リピートグリッドが Figma Auto Layout フレームに
✅ 色とスタイルが一致 — 塗り / ストローク / テキストスタイルが XD ソースに近い
✅ レイアウト位置が自然 — 劇的なずれや回転がない

これは網羅的な QA ではなく、明らかな変換の問題を発見するための最低限行うべき簡易的なチェックです。

ほとんどの項目が通れば次に進めます。複数の要素やレイヤーが同じような条件で失敗している場合（例: 全テキストが位置ずれ / Auto Layout がどこにも適用されていない）は、次セクションでよくある原因をカバーします。

🔧 よくあるビジュアル問題と即時対処

何度も出てくるパターンをピックアップ:

フォント欠落

症状: テキストがフォールバックフォント（Inter や Roboto が多い）で表示され、Figma に「Missing font」警告。

原因: XD ファイルが使っていたフォントが、ローカルマシンまたは Figma フォントライブラリで見つからない。

対処: 該当フォントをマシンにインストールする（デスクトップ Figma の場合）か、Text → Replace Missing Fonts から Figma で利用可能な等価フォントへ差し替える。日本語フォントについては、日本語テキストは Adobe XD から Figma へどこまで正確に移行できるか？にマッピングのガイダンスがあります。

Auto Layout が想定の場所に適用されない

症状: XD のスタックやリピートグリッドが、Auto Layout プロパティのない素のフレームに変換されている。

原因: プラグインの Auto Layout 推論がオフ、または元の構造を自信を持って特定できなかった。XD スタックは Figma Auto Layout に必ずしも 1 対 1 でマップできないため、プラグインによっては保守的な挙動を取る場合があります。

対処: Auto Layout 推論を明示的にオンにして再実行、または該当フレームに手動で Auto Layout を適用。詳しくは XD のスタック / リピートグリッドを Figma Auto Layout に変換するを参照。

テキスト位置が微妙にずれる

症状: テキストはおおむね正しいが、XD オリジナルと比べて数 px 縦／横にずれている。

原因: XD と Figma で line-height / テキストベースラインの計算が微妙に異なるため、同じフォントでも描画ギャップが残る。

対処: プラグインのテキスト精度補正をオンに。

コンポーネントがデタッチされたフレームとして出力される

症状: XD のシンボルが、Figma でコンポーネント／インスタンス関係を持たない通常フレームになっている。

原因: プラグインのコンポーネント保持オプションがオフ、または XD シンボルのオーバーライド構造をコンバーターが安全にマップできなかった。

対処: コンポーネント保持をオンにして再実行。残ったケースは XD のコンポーネント / シンボルを Figma Components に移行するで構造マッピングを深掘りしています。

再実行 vs その場で修正

問題が多数のアートボードに系統的に発生している場合は、オプションを調整して再実行するほうが各フレームを個別修正するよりも速いです。問題が数フレームに限られる場合はその場で修正でも構いません。境目はおおむね「影響フレーム 5 個超 → 再実行 / 5 個以下 → その場修正」です。

🚀 ファイルが開いた後にやること

変換ファイルがビジュアルチェックを通過したら、次のステップは目的次第です。

中を見るだけの場合

元の .xd ファイルはバックアップとして保持
Figma 版は読み取り専用の参照として扱う
ビジュアル品質の問題はメモしておくが、修正に時間を投じない

Figma で編集に進む場合

より広い QA 監査 — 5 分のビジュアルチェックの先、レスポンシブサイズ変更 / コンポーネントインスタンス / テキストスタイルを確認
ビジュアルチェックで挙げた問題の修正 — フォント / Auto Layout の欠落 / テキストの位置ずれ / デタッチされたコンポーネント
デザインシステムの再構築 — 色 / テキストスタイル / コンポーネントを Figma のネイティブライブラリに集約
XD ソースの扱いを決める — 読み取り専用アーカイブ / 削除 / 並行編集の選択（実践移行ガイドが詳しい）

大規模移行プログラムの一部の場合

このウォークスルーは少数ファイルに最適化されています。組織レベルの移行（数十〜数百ファイル、複数ステークホルダー、デザインシステムへの影響）はエンジニアリングチーム向けの 5 ステッププレイブックが扱います — オーナーシップ、成功基準、バッチ変換戦略、カットオーバー後のメンテナンスを網羅していて、スケール時に必須になります。

✅ まとめ

ここまでがフルウォークスルーです — 「.xd ファイルと Figma がある」状態から「ファイルが Figma に取り込まれて、一次の品質チェックが済んでいる」状態まで。

6 ステップを再掲します:

インストール: Figma Community からコンバータープラグインを
起動: 宛先ファイル内で Figma の Plugins メニューから
アップロード: .xd ファイルをプラグインへ
設定: オプション設定（既定値が妥当な開始点）
実行: 変換を走らせて完了を待つ
ビジュアルチェック: 出力を XD オリジナルと照合

このウォークスルーで例として使った Pixel Fine Converter は、Figma Community プラグインで、ファイルをクライアントサイドで処理（外部サーバーへの送信なし）、Free 枠はウォーターマーク／サインアップなしで最大 3 アートボードまでカバーします。選択肢の 1 つにすぎず、3 ルート比較やコンバータープラグイン徹底比較が、どのプラグインがどんなファイルに向くかをより広く扱っています。