XD のカラー・グラデーションは Figma でどう変換される？ — 4 種のグラデーションと角度補正の実機検証

Adobe XD から Figma への移行で、「色はそのまま入った、でもグラデーションが少し違って見える」「角度が変わった気がする」という声を聞くことがあります。実際のところ、XD のカラーとグラデーションは Figma へどう変換されるのでしょうか。そして、変換の精度を左右しているのは何でしょうか。

本記事では、Pixel Fine Converter で変換を実行した際の挙動をベースに、XD のカラー・グラデーションが Figma にどう引き継がれるかを整理します。単色 / グラデーション 4 種類 / ストップ / 変換マトリクス / 非正方形要素の角度補正のそれぞれで何が起きているかを、コードの裏付けとあわせて確認していきます。

関連記事もあわせてどうぞ

移行プロセス全体 は XD → Figma 移行 実践ガイド を、変換プラグインの直接比較 は XD → Figma コンバーター プラグイン徹底比較 をご参照ください。本記事は カラー・グラデーション領域の変換精度 にフォーカスしています。

📝 はじめに — 色は引き継がれる、グラデーションは型による

XD と Figma はどちらもベクターベースのデザインツールなので、色（特に単色の塗り）は比較的素直に引き継がれます。一方でグラデーションは、両ツールの内部表現の違いが現れやすい領域です。

XD は Linear / Radial / Angular の 3 種類をネイティブで作成でき、Figma はそれに Diamond（菱形）を加えた 4 種類をサポートしています。両者の対応はおおむね取れているものの、グラデーションの「角度」「中心位置」「アスペクト比」をどう扱うかで挙動が分かれる場面があります。

本記事で扱う観点は次の 5 つです。

  1. 単色塗り（Solid Fill / Stroke） — どこまで正確に引き継がれるか
  2. カラーアセット（XD の色変数 / Color Asset） — Figma の Color Style として保存されるか
  3. グラデーションの型 — Linear / Radial / Angular / Diamond の対応関係
  4. グラデーションストップ（グラデーション内で色が切り替わる位置）と変換マトリクス — 内部表現の違い
  5. 非正方形要素の角度補正 — XD と Figma の挙動差を埋める Pro 機能

🎨 カラーの引き継ぎ — Solid Fill / Stroke / カラーアセット

単色塗り — 実質ロスなし

XD の単色 Fill / Stroke は、Pixel Fine Converter を経由しても色値（RGB + アルファ）がそのまま引き継がれます。Figma 側の Fill タイプは SOLID となり、#FF6B35 のような HEX 値が完全一致する形で再現されます。

不透明度（Opacity）も独立した属性として保存されるため、「色 + 透過」の組み合わせは Figma 側でもそのまま再現されます。

色値の精度はロスレス

Pixel Fine Converter のコードでは ensureColorAlpha で {r, g, b, a} の 4 成分を常に揃える形にしており、丸め誤差が出にくい設計になっています。実機で確認しても、XD 側の HEX 値と Figma 側の HEX 値は同じ表記になります。

Stroke（線）

Stroke も Fill と同様に色値・不透明度が引き継がれます。線幅・線端処理（Cap / Join）・ダッシュパターンは別系統で扱われるため、本記事のスコープからは外しますが、色の引き継ぎ精度自体は Fill と同等と考えて差し支えありません。

カラーアセット — Figma の Color Style として保存されるか

XD には「Color Asset」と呼ばれる名前付きカラー機能があります。primary-blue のような名前で色を定義し、複数の要素から参照する仕組みです。

Pixel Fine Converter では、Pro 版で「Local Styles として登録」オプションを ON にした場合に限り、XD の Color Asset を Figma の Paint Style（Color Style）として登録します。Free 版またはオプション OFF の状態では、各要素にベタの色値として展開される挙動になります。

Pro オプション ON で Paint Style 化される利点は、移行後も「色を一括で変更できる仕組み」をそのまま使える点です。Free 版でベタ展開された場合は、Figma 側で改めて Color Style を作り直す手順が必要になります。なお、グラデーション系の Color Asset は現状 Paint Style 登録の対象外で、Pro / Free にかかわらず各要素にベタ展開されます。

🌈 XD のグラデーション 4 種類 — Linear / Radial / Angular / Diamond

Figma は次の 4 種類のグラデーションをサポートしており、Pixel Fine Converter は そのすべて に対応しています。XD 側でネイティブに作成できるのは Linear / Radial / Angular の 3 種類で、Diamond だけが Figma 固有の表現になります。

型Figma 内部名XD で使えるか主な用途
線形GRADIENT_LINEAR✅ 標準上下 / 左右の色変化、背景の奥行き
放射GRADIENT_RADIAL✅ 標準光源表現、円形のハイライト
角度（円錐）GRADIENT_ANGULAR✅ 標準カラーホイール、円形プログレス
菱形GRADIENT_DIAMOND⚠️ Figma 側のみ菱形のスポットライト、装飾

Pixel Fine Converter の変換コードでは、これら 4 つの型を同じパスで処理しており、いずれもグラデーションストップ（色 + 位置）と変換マトリクス（角度・位置・スケール）をそのまま引き継ぎます。XD 側で Linear / Radial / Angular として作られたグラデーションは、Figma でも同じ型として再現されると考えて差し支えありません。

Diamond は Figma 固有

Diamond は XD のネイティブグラデーションでは作れません。XD で「菱形のグラデーション風」の表現をしている場合、複数の Fill を重ねている可能性があり、Figma 移行後にネイティブの Diamond グラデーションに作り直す方が結果的にきれいになります。Linear / Radial / Angular はどちらのツールでも標準サポートのため、変換でそのまま引き継がれます。

📐 グラデーションストップ + 変換マトリクス

グラデーションは「どの位置にどの色を置くか（ストップ）」と「どの方向・スケールで色を流すか（変換マトリクス）」の 2 つで決まります。Pixel Fine Converter はこの両方を XD から読み取って Figma 側に渡しています。

ストップ（Gradient Stops）

ストップは [{ color, position }] の配列として表現され、position は 0.0 〜 1.0 の正規化された値です。XD で 5 つのストップを置いた場合、Pixel Fine Converter は同じ 5 つを Figma 側にも引き継ぎ、色値・位置・アルファをそのまま再現します。

ストップの順序・色値・透過は ロスレスで引き継がれる と考えてよく、実機の Before / After で比較してもストップの構成は完全に一致します。

変換マトリクス（Gradient Transform）

ここは少し技術的な話になりますが、Figma のグラデーションは 2×3 のアフィン変換行列（2 行 × 3 列、計 6 スカラー）で「角度・中心位置・スケール」を表現しています。m00, m01, m02, m10, m11, m12 の 6 つのスカラーが、グラデーションをどの方向にどの距離で流すかを定義する仕組みになっています。

Pixel Fine Converter は XD のグラデーション情報からこのマトリクスを構築し、Figma の gradientTransform プロパティとして書き込みます。XD と Figma で内部表現が違うため、Pixel Fine Converter はこの「翻訳」を内部で行っています。

マトリクスの違いが角度の不一致を生む

XD と Figma で同じ「45 度のグラデーション」を作っても、内部マトリクスの基準（要素の左上を原点にするか中心にするか、アスペクト比を考慮するか）が違うため、変換後に角度がわずかにずれて見える ことがあります。次のセクションで扱う「角度補正」がここに効いてきます。

🎯 非正方形要素の角度補正 — Pro 機能で何が変わるか

XD と Figma のグラデーション仕様の違いが最も顕在化するのが、非正方形要素（横長 / 縦長の矩形・楕円など）にグラデーションをかけたケースです。

なぜ角度がずれるのか

少し技術的な話になりますが、XD は要素のアスペクト比を考慮しない座標系でグラデーションを定義するのに対し、Figma は要素の bounding box に対する正規化座標系を使う、という違いが原因です。具体例で見るとイメージしやすいので、以下のケースで挙動を確認します。

XD で「左から右に 45 度」と指定したグラデーションを、横長の長方形（例: 400×100px）に適用すると、XD 側では幅と高さの比率を考慮した角度として描画されます。一方で Figma は要素サイズに合わせた正規化座標で角度を解釈するため、同じ「45 度」でも見た目の角度が変わって見えます。

角度補正オプションが用意されています

Pixel Fine Converter には、非正方形要素のグラデーション角度を補正するオプション（UI 上の表示名: Correct gradient angle for non-square elements）が用意されています。これを有効にすると要素のアスペクト比を考慮して角度を再計算し、XD 側の見た目に近い形で Figma に出力します。

角度補正は Pro 機能

この角度補正オプションは Pixel Fine Converter Pro 限定機能 です。Free プランでは無効化された状態で表示されます。横長 / 縦長のヒーロー背景・ボタン・カード等にグラデーションを多用しているプロジェクトでは、Pro 版の精度差が実感しやすい部分になります。

Before / After の典型例

  • 正方形（200×200px） に Linear グラデーション 45 度 → Free / Pro どちらも見た目はほぼ一致
  • 横長（400×100px） に Linear グラデーション 45 度 → Free では角度が浅く見える / Pro では XD 側の見た目に近づく
  • 縦長（100×400px） に Linear グラデーション 45 度 → Free では角度が急に見える / Pro では XD 側の見た目に近づく

実プロジェクトでは、ヒーローセクションのボタン・カード背景・モーダル背景など、非正方形要素にグラデーションをかけているケースが多く、Pro 機能の角度補正は ピクセル精度を求める場面ほど効果が出やすい 領域です。

📌 引き継がれにくいパターンと対策

カラー・グラデーションの引き継ぎは比較的素直ですが、いくつかの境界事例では追加対応が必要になります。

1. テキストにかけたグラデーション

XD でテキストに直接グラデーションを適用していた場合、Figma 側の表現が異なるため、見た目が変わることがあります。テキスト全体に均一なグラデーションをかけたケースは引き継がれることが多い一方、文字ごとに異なるグラデーションを設定していたケースでは、Figma 側で個別に再設定が必要になります。

2. 複数 Fill の重ね合わせ

XD で 1 つの要素に複数の Fill を重ねていた場合、Figma 側も複数 Fill として引き継がれますが、ブレンドモードや不透明度の組み合わせによっては最終的な見た目が変わる可能性があります。重要な要素ほど、移行後に目視で確認することをおすすめします。

3. グラデーションの中心位置のずれ

Radial グラデーションで中心位置を要素の中央から大きくずらしている場合、変換マトリクスの座標系の違いから位置が微妙にずれることがあります。移行後にハイライト位置の目視確認が必要です。

4. ブレンドモードと組み合わせたグラデーション

ブレンドモード（Multiply / Screen / Overlay 等）と組み合わせたグラデーションは、両ツール間のブレンド計算の差で最終出力が変わることがあります。これは Pixel Fine Converter 側の問題というより、XD と Figma のレンダリングエンジンの差です。

5. XD の Angular Gradient（一部 β 対応）

Pixel Fine Converter は現在、XD で作成された Angular Gradient の変換について一部未対応の領域があります。今後のフェーズで完全対応を予定しており、現時点では Angular Gradient を多用しているデザインの場合、Figma 側で再設定が必要になるケースがあります。Linear / Radial については正式対応済みのため、まずはこの 2 種類を中心に運用することをおすすめします。

⚖️ 他プラグインとの違い

XD → Figma 変換プラグインは複数ありますが、カラー・グラデーションの引き継ぎ精度には差があります。

  • Pixel Fine Converter — 4 種類のグラデーションをすべて変換、Pro で非正方形要素の角度補正が利用可能
  • 他プラグイン — Linear / Radial の基本変換はサポートする一方、角度補正やストップの精度では Pixel Fine Converter との差が出やすい領域

詳細な比較は XD → Figma コンバーター プラグイン徹底比較 を参照してください。

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

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

❓ よくある質問

Q1. XD で作った単色は Figma にそのまま引き継がれますか？

はい、HEX 値・アルファ値・不透明度がそのまま引き継がれます。HEX レベルで完全に一致する精度で変換されます。

Q2. XD の Color Asset（色変数）は Figma の Color Style として保存されますか？

Pixel Fine Converter Pro 版で「Local Styles として登録」オプションを ON にしている場合のみ、XD の単色 Color Asset が Figma の Paint Style として登録されます。Free 版またはオプション OFF の場合は、各要素にベタの色値として展開されます。グラデーション系の Color Asset は現状 Paint Style 登録の対象外で、常にベタ展開となります。

Q3. グラデーションが Figma 側でずれて見えるのですが、なぜですか？

非正方形要素（横長 / 縦長）に Linear / Radial グラデーションを適用しているケースでは、XD と Figma の座標系の違いから角度がずれて見えることがあります。Pixel Fine Converter Pro の「Correct gradient angle for non-square elements」オプションで補正が可能です。

Q4. Diamond（菱形）グラデーションは XD で作れますか？

XD のネイティブ機能では Diamond は作成できません（XD は Linear / Radial / Angular の 3 種類が標準）。複数の Fill 重ね合わせで近似していた場合は、Figma 側でネイティブの Diamond に作り直す方がきれいになります。

Q5. テキストにかけたグラデーションは引き継がれますか？

テキスト全体に均一なグラデーションをかけた場合は引き継がれることが多いですが、文字単位・行単位で異なるグラデーションを設定している場合は、Figma 側で個別の再設定が必要になることがあります。

Q6. グラデーションのストップは正確に引き継がれますか？

はい、ストップの順序・色値・位置・透過はロスレスで引き継がれます。

🎯 まとめ

XD から Figma へのカラー・グラデーション変換は、基本的な部分はロスレスに近い精度で行われます。一方で、非正方形要素のグラデーション角度は内部仕様の違いが現れやすい領域で、ここに Pixel Fine Converter Pro の差別化機能（角度補正）が効いてきます。

  • 単色（Solid Fill / Stroke）: 実質ロスなし、HEX 完全一致
  • グラデーション 4 種類: Pixel Fine Converter はすべての型に対応、ストップと変換マトリクスを引き継ぐ
  • 非正方形要素: Pro の角度補正で XD 側の見た目に近い形で変換
  • 境界事例（テキスト・複数 Fill・ブレンドモード）: 移行後に目視確認推奨

「色は問題ないがグラデーションが少し違う」と感じる場面のほとんどは、非正方形要素の角度差に起因しています。プロジェクトでグラデーションを多用している場合は、Pro 版の角度補正を試してみる価値があります。

関連記事