Figma で XD の図形を変換するプラグイン — 5 種類の図形タイプ別の変換結果

Adobe XD から Figma へファイルを変換したとき、「四角は綺麗に入ったけど、複合パスや boolean を使った図形が崩れた」「角丸が一部消えた」という声を聞くことがあります。boolean を使った図形とは、例えば雲型・三日月型・矢印・ハート型など、複数のシェイプを Union / Subtract / Intersect / Exclude などで組み合わせて作る形状のことです。こうした崩れは多くの場合、Figma 側の問題ではなく、変換プラグインがどこまで XD の図形タイプを再現できるかという変換精度の差から起きています。

本記事では、XD で扱える図形を 5 つのタイプに整理し、それぞれが Figma にどう変換されるかを Pixel Fine Converter（以下 PFC）の挙動をベースに解説します。プラグイン選定で迷ったときの判断材料として、4 つのポイントと比較表もあわせて整理します。

あわせて読みたい関連記事

移行プロセス全体 は Adobe XD から Figma への移行実践ガイド、変換プラグインの直接比較 は XD→Figma 変換プラグイン徹底比較を参照してください。本記事は 図形変換の精度と選定ポイント にフォーカスしています。

📝 はじめに — XD の図形が Figma で「少しズレて」見える理由

XD と Figma はどちらもベクターベースのデザインツールですが、図形の内部表現には細かい違いがあります。例えば XD の Rectangle は四隅それぞれの corner radius を別の値で持てますが、Figma でも同じことは可能です。一方、boolean 演算（Union / Subtract / Intersect / Exclude）の合成結果は、両ツールが内部で「合成済みパス」として保持するか、「合成前のパス群 + 演算指定」として保持するかが分かれます。

つまり「同じ図形」を表現していても、ファイルに記録されている情報は両ツールで違うことがあります。変換プラグインは、この差分をどこまで埋められるかで精度が決まります。 単純な四角や円は、ほとんどのプラグインで問題なく変換できます。一方、複合パスや boolean を多用したアイコン・装飾要素では、プラグインの実装精度がそのまま見え方に出やすくなります。

本記事では、XD の図形を 5 つのタイプに分けて、それぞれの変換に関する動作を整理していきます。

🧩 XD の図形 5 タイプ — Rectangle / Circle / Polygon / Compound Path / Boolean

XD で扱える図形は、内部的には以下の 5 つの主要カテゴリに分類できます。それぞれの XD 上の特徴と、Figma に変換した際の対応ノード種別を整理します。

1. Rectangle（矩形 + corner radius）

XD でもっとも頻繁に使われるタイプです。四隅それぞれに独立した corner radius を設定できます（例: 左上のみ 16px、他は 0px の「タブ風」形状）。Figma 側にも一律値と 4 隅独立値の両方を表現できるプロパティが用意されているため、変換プラグインが XD ファイルから個別 corner radius を読み取れていれば、Figma の RECTANGLE ノードとしてそのまま再現できます。

2. Circle / Ellipse（円・楕円）

XD の Ellipse は幅と高さが同じなら円、違えば楕円として扱われます。Figma では ELLIPSE ノードとして変換され、塗り・線・効果は基本的にそのまま引き継がれます。

3. Polygon / Line（多角形・直線）

XD の Polygon は辺の数を指定できる正多角形（三角形、五角形、六角形など）です。Line は始点と終点を持つ直線。Figma ではそれぞれ POLYGON / LINE または VECTOR ノードに変換されます。プラグインによっては Polygon を VECTOR ノードに統一して変換するものもあります。

4. Compound Path（複合パス）

複数のパスを 1 つの図形として扱う形式です。例えば「ドーナツ型」を作るときに、外側の円と内側の円を組み合わせて 1 つの図形にしているケースが該当します。Figma では VECTOR ノードに変換され、塗りの判定方式（Figma 上の Fill Rule、内部 API では windingRule）で穴の表現を制御します。ここから変換プラグインの実装差が見え始めます — 内側のパスを「穴」として認識できるかどうかで、見え方が変わります。

5. Boolean Operation（ブール演算）

XD では Union / Subtract / Intersect / Exclude の 4 種類の boolean 演算をサポートします。Figma でも同じ 4 種類が BOOLEAN_OPERATION ノードとしてサポートされていますが、XD ファイルが保持しているのは多くの場合 boolean 演算後の合成済みパス です。そのため変換プラグインは、合成済みパスを VECTOR ノードとして取り込む方式が一般的で、Figma 上で再度 BOOLEAN_OPERATION として組み直すには手動操作が必要になります。

⚖️ 変換プラグイン選定の 4 つのポイント

5 タイプそれぞれを「どこまで正確に変換できるか」がプラグインによって違うため、選ぶときは以下の 4 つのポイントで比較するのが現実的です。

ポイント 1: 変換精度（座標 / サイズ / 回転 / 色）

図形の位置・サイズ・回転角度・塗り色が XD の元値と一致するか。XD は 0.001 単位の浮動小数点で座標を持ちますが、変換時に丸めが入ると 0.5px〜数 px のズレが出ることがあります。アイコンを並べたパネル UI などでは、わずかなズレが視覚的に目立ちます。

ポイント 2: 対応タイプの範囲

5 つの図形タイプすべてに対応しているか、それとも一部のみか。Rectangle と Circle だけならどのプラグインも対応していますが、Compound Path / Boolean Operation までカバーできるかで差が出ます。

ポイント 3: corner radius の保持

四隅独立の corner radius を再現できるかは、UI 系デザインで重要な判断ポイントです。「左上だけ角丸の見出しバー」「右側だけ角丸のカード」などのケースで、プラグインが個別 corner radius を読み取れないと、4 隅すべて同じ値（一番大きい値 or 0px）に丸められるケースがあります。

ポイント 4: 価格・無料枠

完全無料のプラグイン、無料枠 + 有料アップグレード型、買切型、サブスク型など、料金体系の違いがあります。図形変換だけが必要なら無料枠で足りるか、複雑なファイルなら有料機能まで必要かを判断します。

📊 プラグイン比較表 — Pixel Fine Converter / Angel Converter / Convertify Sketch/Adobe/Google / 手動エクスポート

主要な XD → Figma 変換プラグインと、手動エクスポート（XD から SVG を書き出して Figma にインポートする方法）を比較します。各プラグインの正確な対応状況は実機検証が必要なため、ここでは PFC の対応状況を公式仕様ベースで明示し、他プラグインは公式情報での確認可否を示す形 にしています。

ポイント	Pixel Fine Converter	Angel Converter	Convertify Sketch/Adobe/Google	手動エクスポート（SVG）
Rectangle（4 隅 corner radius）	✅ 個別保持	公式情報での明確な記述なし	公式情報での明確な記述なし	✅ 保持（SVG `rx` 属性、ただし複雑な corner radius は表現に限界）
Circle / Ellipse	✅ 対応	一般的に対応	一般的に対応	✅ SVG `ellipse`
Polygon / Line	✅ 対応	一般的に対応	一般的に対応	✅ SVG `polygon` / `line`
Compound Path	✅ 対応（VECTOR + Fill Rule “Even-odd” を XD の winding に応じて設定）	公式情報での明確な記述なし	公式情報での明確な記述なし	△ SVG として保持されるが Figma 側で編集難
Boolean Operation	△ 合成済みパスとして VECTOR ノードへ変換（Figma 上で再 BOOLEAN_OPERATION 化は手動）	公式情報での明確な記述なし	公式情報での明確な記述なし	❌ 演算前の構造は失われ、合成済みパスのみ
価格	Free + Pro $29 買切	Freemium（無料枠 + 有料）	Freemium（無料枠 + 有料）	完全無料（ツール標準機能）

比較表の読み方

PFC の対応欄は Figma Community 掲載仕様と内部実装の仕様に基づきます。他プラグインの「公式情報での明確な記述なし」は、各プラグインの掲載ページで対応可否が明示されていない項目を指し、非対応を意味するわけではありません。実機でのテストが必要です。

🎯 Pixel Fine Converter での図形変換 — タイプ別の挙動

PFC は XD ファイルを直接読み取り、ネイティブな Figma ノードに変換する設計です。各図形タイプでどのような変換が行われるかを整理します。

Rectangle

XD の Rectangle は Figma の RECTANGLE ノードに変換されます。corner radius は XD ファイルが配列で 4 隅独立の値を持っていれば、それぞれを Figma の 4 隅プロパティ（左上 / 右上 / 右下 / 左下）に個別マッピングします。一律の半径として記録されている場合は cornerRadius プロパティとしてそのまま設定します。塗り・線・効果（シャドウ・ブラー）は別途処理されるため、ここでは図形そのものの形状再現に絞って扱います。

Circle / Ellipse

幅と高さの値をそのまま読み取り、Figma の ELLIPSE ノードに変換します。XD と Figma で楕円の中心点・半径の扱いがほぼ一致するため、変換時のズレはほとんど発生しません。

Polygon / Line

XD の Polygon と Line は、いずれも Figma の VECTOR ノードとして変換されます。Polygon は辺の数と外接円半径から計算されたパスデータを VECTOR の vectorPaths にそのまま渡します。Line は Figma の LINE ノードではなく VECTOR を使う実装になっています。これは Figma の LineNode で線を描くと strokeWeight の半分だけ縦方向にずれてしまう既知の挙動を避けるためで、VECTOR ノードを使うことで XD と Figma で線の位置が揃うようにしています。

Compound Path

XD で「複数のパスを 1 つの図形として結合」した形式は、Figma の VECTOR ノードとして変換され、XD ファイルの winding 指定（evenodd か否か）に応じて Fill Rule が Even-odd または Non-zero に設定されます。これにより、外側のパスと内側のパスの重なりが「穴」として正しく描画されます。ドーナツ型・歯車型・「O」「8」「0」のような文字を象った装飾要素で、見え方の差が出やすい部分です。

Boolean Operation

XD ファイル内で Union / Subtract / Intersect / Exclude のいずれかの boolean 演算が適用された図形は、多くの場合 演算結果の合成済みパス として XD ファイルに記録されています。PFC はこの合成済みパスを Figma の VECTOR ノードとして取り込みます。Figma 側で再び BOOLEAN_OPERATION ノードとして演算前の構造を編集したい場合は、構成要素を分けて手動で組み直す必要があります。

変換結果の編集可能性

PFC は「変換後も編集できる状態を保つ」ことを設計方針にしているため、ベクター単体の図形・compound path・boolean 演算結果のいずれも、Figma 上で頂点・パス・塗りを編集できる VECTOR ノードとして出力されます。「ロックされた画像」のような編集不能な形式にはなりません。

🏗️ 複雑な図形を含むデザインで PFC を選ぶ理由

シンプルな四角や円だけのデザインなら、どの変換手段を選んでも大きな差は出ません。差が出るのは、以下のような「複雑な図形」を含むデザインを移行するときです。

1. アイコン / 装飾要素

サービスのロゴ・アイコン・装飾要素は、boolean / compound path を多用していることが多い領域です。PFC は boolean の合成結果も compound path も、編集可能な VECTOR ノードとして取り込みます。位置・サイズ・色は XD と精密に一致するため、デザインの一貫性を保ったまま Figma 側で細部の微調整を行うことができます（boolean の構造そのものを Figma 上で再演算したい場合は、構成パスを分けて手動で組み直す必要があります）。

2. UI コンポーネント内の図形（Pro 機能との連携）

ボタン・カード・モーダルなど、コンポーネント内に図形を含む UI 要素では、図形変換の精度に加えて コンポーネント構造の保持 も重要になります。PFC の Pro 機能では、XD のシンボルが Figma の Components として変換されるため、コンポーネント内部の図形構造もそのまま保たれます。詳細は XD のコンポーネント / シンボルを Figma Components に移行する完全ガイドを参照してください。

3. Auto Layout 内の図形

XD の Stack で並べられた図形は、PFC の Pro 機能で Figma の Auto Layout に変換されます。Auto Layout 内では各図形が「子要素」として独立して管理されるため、レスポンシブ挙動も再現されます。詳細は Adobe XD のスタックとリピートグリッドを Figma Auto Layout に変換するを参照してください。

4. 効果との組み合わせ

シャドウ・ブラー・グラデーションなどの効果が適用された図形は、図形そのものの変換だけでなく、効果の再現精度も問われます。PFC でのシャドウ・効果の変換に関する動作は XD のシャドウとエフェクトは Figma にどう変換される？で詳しく扱っています。

⚠️ 失敗パターンと回避策

図形変換でつまづきやすいパターンと、それぞれの回避策をまとめます。

パターン 1: corner radius が一律になる

症状: 「左上だけ 16px、他は 0px」の Rectangle が、4 隅すべて 16px または 0px になる。

原因: 一部のプラグインは XD ファイル内に一律値として記録された corner radius のみを読み取り、配列形式で四隅の値が記録されているケースを無視しています。

回避策: 個別 corner radius を保持できるプラグイン（PFC など）を選ぶか、特殊な形状の Rectangle は事前に SVG として書き出して個別インポートします。

パターン 2: Boolean Operation の構造が再編集できない

症状: XD で Union していた図形を Figma に取り込んだ後、boolean の演算前構造を編集したい場面で、合成済みパスとして取り込まれていることに気づく。

原因: XD ファイル自体が boolean 演算の結果パスのみを保持しているケースが多く、演算前の各パスと演算種別を残したまま変換するのは技術的に困難です。これは PFC を含む多くの変換プラグインに共通する制約です。

回避策: アイコンとして取り込むだけなら合成済みパスでも編集可能（頂点・色・塗りの編集は可能）。boolean の構造を保ちたい場合は、XD 側で構成パスを分けた状態のまま移行し、Figma 側で再度 boolean 演算を適用します。

パターン 3: Compound Path の「穴」が塗りつぶされる

症状: ドーナツ型・歯車型の図形が、Figma で塗りつぶされた円・歯車として表示される。

原因: 複合パスの Fill Rule（穴の判定方法、Figma の内部 API では windingRule）が変換時に正しく設定されていません。

回避策: Fill Rule を正しく Even-odd に設定するプラグイン（PFC など）を選ぶか、Figma 側で対象 VECTOR の Fill Rule を Even-odd に手動で切り替えます。

📌 まとめ — 個人とチームでの使い分け

XD から Figma への図形変換は、「単純な四角・円なら問題なし、複雑な図形は変換プラグインの精度差が出る」と整理できます。

個人デザイナー / 小規模プロジェクト: シンプルな図形が中心なら、無料枠で十分対応できます。PFC の Free 版は 3 アートボード / 30 MB まで対応し、Rectangle / Circle / Polygon / Compound Path / Boolean の全タイプが Free 機能としてカバーされています。
チーム / 中〜大規模デザインシステム: アイコン群 / コンポーネント / Auto Layout を含むファイルなら、Pro 機能との組み合わせで「変換後も Figma ネイティブで編集できる構造」を確保する価値があります。

図形変換は移行プロジェクトのスタートラインです。図形が崩れずに移行できれば、その上に積み上げる Components / Auto Layout / 効果の再現にも安心して取り組めます。まずは無料枠で 1〜2 アートボードを試し、複雑な図形が含まれるファイルでも精度が出るかを確認してから本格移行に進むのが現実的な進め方です。

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

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