XD のシャドウとエフェクトは Figma にどう変換される？ — Drop Shadow / Inner Shadow / Blur の挙動と Pixel Fine Converter の補正実装
Adobe XD から Figma への移行で、「シャドウやブラーは変換できた、でも見た目が少し違う気がする」「ぼかしの強さが微妙にずれている」という声を聞くことがあります。色やグラデーションに比べると見落とされがちな領域ですが、シャドウとブラーは XD と Figma の内部表現の差が現れやすい領域です。
本記事では、Pixel Fine Converter で変換を実行した際の挙動をベースに、XD のシャドウ・エフェクトが Figma にどう引き継がれるかを整理します。Drop Shadow / Inner Shadow / Background Blur / Layer Blur のそれぞれで何が起きているかを、コードの裏付けとあわせて確認していきます。
関連記事もあわせてどうぞ
カラー・グラデーション変換 は XD のカラー・グラデーションは Figma でどう変換される？ を、移行プロセス全体 は XD → Figma 移行 実践ガイド をご参照ください。本記事は シャドウ・エフェクト領域の変換精度 にフォーカスしています。
📝 はじめに — エフェクトは変換されるけど、見た目が少し違うことがある
XD と Figma はどちらもベクターベースのデザインツールで、シャドウとブラーの考え方は共通しています。基本的なエフェクトは引き継がれますが、両ツールの内部表現には微妙な差があり、それが「ぼかしが少し強い / 弱い」「シャドウのスプレッドが効いていない」といったずれとして現れることがあります。
XD は Drop Shadow / Inner Shadow / Background Blur / Layer Blur の 4 種類のエフェクトをサポートしており、Figma も同じ 4 種類を提供しています。両者の対応はおおむね取れているものの、ブラーの量を表す数値の解釈 や、Figma 専用の属性（spread など） の扱いで挙動が分かれる場面があります。
本記事で扱う観点は次の 5 つです。
- シャドウ変換（Drop Shadow / Inner Shadow） — どの属性が引き継がれ、どこに Figma 専用属性のギャップがあるか
- ブラー変換（Layer Blur / Background Blur） — 経験的補正係数で何を補正しているか
- Background Blur の明度補正 — XD 側の
brightnessAmountを Figma でどう近似するか - 変換ノートシステム — 近似変換を Pixel Fine Converter がどう開示しているか
- Figma 制約の自動回避 — マスク付きグループで起きる挙動と Pixel Fine Converter の対処
🎨 XD のエフェクト 4 種類 — 全種類対応の対応マトリクス
Figma は XD と対応する 4 種類のエフェクト（シャドウ系 2 + ブラー系 2）をサポートしており、Pixel Fine Converter は そのすべて に対応しています。XD 側でも同じ 4 種類が標準で用意されているため、変換マッピング自体はシンプルです。
| エフェクト | Figma 内部名 | XD での扱い | 主な用途 |
|---|---|---|---|
| Drop Shadow | DROP_SHADOW | ✅ 標準 | カード・ボタンの浮き上がり、要素の階層強調 |
| Inner Shadow | INNER_SHADOW | ✅ 標準 | 凹み表現、入力フィールドの内側影 |
| Background Blur | BACKGROUND_BLUR | ✅ 標準 | すりガラス風背景、モーダル背景のぼかし |
| Layer Blur (Object Blur) | LAYER_BLUR | ✅ 標準 | 要素自体のぼかし、被写界深度的な表現 |
エフェクト変換は Free / Pro 共通
Pixel Fine Converter のシャドウ・ブラー変換は Free プランでも Pro プランでも同じロジック で動作します。エフェクトに関しては有料制限がなく、4 種類すべての変換が利用できます。
🌑 シャドウ変換 — Drop Shadow / Inner Shadow
シャドウは XD と Figma で持っている属性がほぼ同じで、ロジック上は素直に変換できる領域です。Pixel Fine Converter は両方の dropShadow / innerShadow を判定して、Figma 側の DROP_SHADOW / INNER_SHADOW に振り分けます。
引き継がれる属性
| 属性 | XD | Figma | 引き継ぎ |
|---|---|---|---|
| オフセット | dx, dy | offset.x, offset.y | ✅ そのまま |
| ぼかし半径 | blur | radius | ✅ そのまま |
| 色 | color (RGB + alpha) | color (RGBA) | ✅ そのまま |
| ブレンドモード | blendMode | blendMode | ✅ そのまま |
| 表示状態 | visible | visible | ✅ そのまま |
XD で「黒 30% / オフセット (0, 4) / ぼかし 8」のドロップシャドウを設定したカードは、Figma 側でも同じ数値で再現されます。実機で確認しても、シャドウの位置・濃さ・ぼかし量はほぼ見た目通りに引き継がれます。
Figma 専用属性のギャップ
XD 側にない概念で、Figma 側で再設定が必要になる属性が 2 つあります。
spread（スプレッド）: シャドウが要素から「広がる」距離を指定する属性。XD 側に対応する概念がないため、Pixel Fine Converter は常にspread: 0で出力します。Figma で意図的にスプレッドを使いたい場合は、変換後に手動で設定します。showShadowBehindNode（要素背面のシャドウ表示）: 半透明要素の背面でシャドウを表示するかを制御する Figma 専用フラグ。XD には同等概念がないため、Figma 側のデフォルトの挙動に従います。
Inner Shadow も同じパスで処理
Pixel Fine Converter は dropShadow / innerShadow を 同じコードパス（buildEffectsFromFilters）で処理し、type 値で振り分けます。両者の引き継ぎ精度は同等です。XD で凹み表現に Inner Shadow を使っていた場合も、Figma 側で同じ見た目を維持できます。
🌫️ ブラー変換 — Layer Blur / Background Blur と経験的補正係数
ブラーはシャドウより内部表現の差が大きく、Pixel Fine Converter 内部で 数値補正 を行っています。
経験的補正係数: XD blurAmount × 2 = Figma radius
XD の blurAmount と Figma の radius は、同じ数値を入れても 見た目のぼかし強度が一致しません。実機検証の結果、XD 側の blurAmount は Figma 側の radius に対して 約 2 倍の見た目の強度 があることが確認されており、Pixel Fine Converter は次の補正を適用しています。
Figma radius = round(XD blurAmount × 2)これは XD ファイルから読み取った数値をそのまま Figma に渡すのではなく、実機で見た目を揃えるための経験的な係数 です。
補正係数の根拠
この × 2 という係数は、XD と Figma の同条件での見た目比較から導かれた経験的な値です。完全に一致するわけではなく、極端な値（XD blurAmount が非常に大きい場合など）では微妙な視覚差が出ることがあります。この差については変換ノート C-4 で通知されます（次章で詳しく扱います）。
Background Blur の明度補正 — 4 ケース分岐
Background Blur はすりガラス風の表現に使われるため、XD 側には brightnessAmount（明度調整） と fillOpacity（fill 透明度） という 2 つのパラメータが付随します。Figma 側の BACKGROUND_BLUR にはこれらの直接対応属性がないため、Pixel Fine Converter は 要素の fill を書き換える ことで近似しています。
組み合わせによって 4 つのケースに分岐します。
| ケース | XD 側設定 | Pixel Fine Converter の対応 |
|---|---|---|
| 1 | fillOpacity = 0 + brightness > 0 | 白の半透明 fill（明るく見せつつ、ぼかし面として機能） |
| 2 | fillOpacity = 0 + brightness < 0 | 黒の半透明 fill（暗く見せる） |
| 3 | fillOpacity = 0 + brightness = 0 | ほぼ透明な白 fill（BACKGROUND_BLUR を動作させるためのダミー） |
| 4 | fillOpacity > 0 | fill の透明度を設定 + 必要なら brightness を overlay で追加 |
これらはあくまで 近似変換 であり、XD 側の見た目を完全に再現するわけではありません。カラートーンの微妙な差が出ることがあるため、Pixel Fine Converter は変換時に変換ノート C-2（後述）を出力してユーザーへ通知します。
🔍 変換ノートシステム — 近似変換の透明性
変換ノートは Pro 機能
本セクションで扱う変換ノートシステムは、Pixel Fine Converter Pro 限定機能 です。Free プランでもシャドウ・ブラー変換そのものは同じロジックで動作しますが、近似変換の通知（変換ノート出力）は Pro プランで利用可能になります。
変換ノートは Pixel Fine Converter の特徴の一つです。近似的な変換を行った箇所をユーザーへ明示する仕組み を持っており、ブラックボックスで変換するのではなく「どこで何の近似をしたか」が確認できます。
変換ノートとは
変換ノート（Conversion Note）は、Pixel Fine Converter が変換時に severity（重要度）/ id / summary（要約）/ details（詳細） の形で出力する変換情報の集合です。変換完了後に Figma 側で「Conversion Notes」セクションを開くと、各レイヤーで起きた近似や注意事項が一覧で確認できます。
本記事に関連するノート
本記事のテーマに関係する変換ノートは 2 種類あります。
-
C-2: Background blur brightness approximation
- 出力タイミング: XD の Background Blur に
brightnessAmountが設定されている場合 - 内容: 「明度調整 (
brightnessAmount=N) を近似変換しているため、カラートーンの差が出る可能性があります」 - 関連 issue: Pixel Fine Converter リポジトリの issue #2
- 出力タイミング: XD の Background Blur に
-
C-4: Blur amount difference
- 出力タイミング: Layer Blur 変換時（毎回）
- 内容: 「XD
blurAmount=N→ Figmaradius=N×2の経験的補正を適用しています。XD と Figma のブラー効果には微小な視覚差があります」
訴求の根拠
変換ノートシステムは、Pixel Fine Converter が 「どこをどう近似したか」を隠さずに示す という設計思想を反映したものです。デザイナーやエンジニアが移行結果を確認する際、「ここは Figma で見た目を再調整すべき」「ここは XD の見た目から離れている可能性がある」という判断を、ノートを見ながら行えます。
変換プラグインの中には、近似処理の事実をユーザーに明示していないものもあります。Pixel Fine Converter は 変換の透明性を意識して設計 されており、変換ノートシステムでこれを実装に落とし込んでいます。
変換ノートはどこで見られますか
Pixel Fine Converter で変換を実行した後、Figma のページ末尾に「Conversion Notes」というセクションが自動生成されます。severity（A/B/C のラベル）ごとに整理されており、各レイヤーパスとともに近似の内容が確認できます。本記事で扱った C-2 / C-4 はいずれも C ランク（軽微な近似）に分類されています。
🛠️ Figma 制約の自動回避 — マスク付きグループでの BG Blur 昇格
Figma の挙動として、Pixel Fine Converter の実機検証で マスク付きのグループ内で BACKGROUND_BLUR が正しく動作しない ケースを確認しています。Pixel Fine Converter はこの状況を自動検出し、別の構造に変換して回避しています。
何が起きるか
XD で「マスクの中に背景ぼかしを置く」構造を作っていた場合、そのまま Figma へ変換すると BACKGROUND_BLUR が期待通りに表示されないことがあります。これは Figma 側の isMask プロパティと BACKGROUND_BLUR の相互作用に起因する挙動で、ユーザー側で気づくのが難しい部分です。
Pixel Fine Converter の対処
Pixel Fine Converter は変換時に以下のチェックを行います。
- グループ内に
isMaskを持つ子要素があるか確認 - 最上位の子要素が
BACKGROUND_BLURを持っているか確認 - 該当する場合、
BACKGROUND_BLURを フレームレベルのLAYER_BLURに昇格 させ、元の子要素からは削除
この昇格処理により、視覚的にはほぼ同じ結果を維持しつつ、Figma 側で確実にブラー効果が表示される構造になります。
訴求の根拠
このような Figma 側の既知の挙動を、ユーザーが手動で検出して回避するのは現実的ではありません。Pixel Fine Converter は Figma の制約を変換ロジック側で吸収する ことで、移行後の手戻りを減らしています。同じ条件のファイルを他プラグインで変換した際に、ブラーが期待通りに表示されないケースが起きうる領域です。
📌 引き継がれにくいパターンと対策
シャドウとエフェクトの変換は概ね素直ですが、いくつかの境界事例では追加対応が必要になります。
1. Drop Shadow の spread が必要なケース
XD には spread の概念がないため、Pixel Fine Converter は spread: 0 で出力します。Figma 側でシャドウを広げたい場合は、変換後に手動で spread を設定します。
2. showShadowBehindNode を使った Figma デザインからの逆移行
XD → Figma 方向の変換では関係ありませんが、Figma で showShadowBehindNode を使った設計を XD と往復させる前提のワークフローでは、この属性は失われます。
3. 複数のブラーを重ね合わせているケース
XD で 1 つの要素に複数のブラーを設定している場合、Pixel Fine Converter は 配列順 に Figma の effects に追加しますが、Figma 側のレンダリング順序や合成挙動が XD と完全に一致するとは限りません。重要な要素では、移行後の目視確認をおすすめします。
4. 極端な値の blurAmount
XD blurAmount × 2 の経験的補正は、一般的に使われる範囲を想定した検証に基づいています。それを大きく超える値では補正の精度が落ちる可能性があり、Figma 側で再調整が必要になる場合があります。
5. テキストやベクター複合形状にかけたエフェクト
テキストや複雑なベクターパス（複合シェイプ）にエフェクトをかけている場合、blend mode との組み合わせで予期せぬ結果になることがあります。Pixel Fine Converter は変換自体は行いますが、最終的な見た目は Figma 側のレンダリングエンジンに依存します。
⚖️ 他プラグインとの違い
XD → Figma 変換プラグインは複数ありますが、シャドウとブラーの引き継ぎ精度には差があります。
- Pixel Fine Converter — Drop Shadow / Inner Shadow / Background Blur / Layer Blur の 4 種類すべてを変換、ブラーの経験的補正係数を適用、近似変換は変換ノートで明示、Figma 制約（マスク + BG Blur）を自動回避
- 他プラグイン — 基本的なシャドウ・ブラー変換はサポートする一方、補正係数や変換ノートシステムのような透明性機能、Figma 制約の自動回避については Pixel Fine Converter との差が出やすい領域
詳細な比較は XD → Figma コンバーター プラグイン徹底比較 を参照してください。
Figma Communityから1クリックで追加できます
❓ よくある質問
Q1. XD のシャドウは Figma にそのまま引き継がれますか？
はい、オフセット・ぼかし半径・色・ブレンドモード・表示状態がそのまま引き継がれます。Drop Shadow / Inner Shadow とも同じ精度で変換されます。
Q2. Drop Shadow の spread（スプレッド）はどうなりますか？
XD 側に spread の概念がないため、Pixel Fine Converter は常に spread: 0 で出力します。Figma 側でスプレッドを使った表現にしたい場合は、変換後に手動で設定してください。
Q3. Background Blur の brightness（明度調整）は維持されますか？
近似変換で再現します。Pixel Fine Converter は XD の brightnessAmount を Figma 側の fill の色・透明度に変換しており、変換ノート C-2 で「明度近似が行われた」ことを通知します。完全一致ではないため、重要な要素では移行後に目視確認をおすすめします。
Q4. マスク付きグループ内の Background Blur は動きますか？
はい、Pixel Fine Converter が自動的に BACKGROUND_BLUR をフレームレベルの LAYER_BLUR に昇格させて、Figma 側で正しく表示される構造に変換します。視覚的にはほぼ同じ結果になります。
Q5. 変換ノートとは何ですか？どこで見られますか？
Pixel Fine Converter が変換時に「近似的な処理を行った箇所」を明示する仕組みです。変換完了後、Figma のページ末尾に「Conversion Notes」セクションが自動生成され、severity（A/B/C）・id・要約・詳細とともに各レイヤーで起きた近似が確認できます。なお、変換ノート出力は Pro プランで利用可能な機能 です。
Q6. 複数のエフェクトを重ね合わせている場合はどうなりますか？
Pixel Fine Converter は XD 側で設定されたすべてのエフェクトを配列順に Figma の effects に追加します。ただし、Figma 側の合成結果が XD と完全に一致するとは限らないため、重要な要素では、目視確認をおすすめします。
🎯 まとめ
XD から Figma へのシャドウ・エフェクト変換は、基本的な部分は数値レベルで素直に引き継がれます。一方で、ブラーの量の解釈 と Background Blur の明度補正 には両ツールの内部表現の差があり、Pixel Fine Converter はこれらを経験的補正と近似変換で吸収しています。
- シャドウ（Drop Shadow / Inner Shadow）: オフセット・ぼかし・色・ブレンドモードがそのまま引き継ぎ、
spreadのみ Figma で再設定 - ブラー（Layer Blur / Background Blur）:
XD blurAmount × 2 = Figma radiusの経験的補正、Background Blur の明度は 4 ケース分岐で近似 - 変換ノートシステム（Pro）: 近似変換を C-2 / C-4 として明示、変換の透明性を担保
- Figma 制約の自動回避: マスク付きグループの
BACKGROUND_BLURをフレームレベルLAYER_BLURに昇格
「ブラーの強さが少し違う」「Background Blur が真っ白になっている」と感じる場面の多くは、両ツールの内部表現の差に起因します。Pixel Fine Converter は変換ロジックでそれを補正しつつ、補正の事実を変換ノートで開示しているため、移行後にどこを目視確認すべきかを判断する手がかりが残ります。
関連記事
- XD のカラー・グラデーションは Figma でどう変換される？ — ビジュアル精度シリーズの前作、カラー・グラデーション編
- Adobe XDからFigmaへの移行 実践ガイド — 移行プロセス全体の手順とハマりどころ
- XD → Figma コンバーター プラグイン徹底比較 — 各プラグインの精度比較
- XD から Figma へ無料で変換 — 有料プラグインに切り替えるべきタイミング — 無料 / 有料の使い分け判断
- XD から Figma への移行 — エンジニアリングチームのための 5 ステップ プレイブック — エンジニアリング視点の段階的移行
- Figma で XD ファイルを開く手順 — デザイナー向けビジュアル ウォークスルー — プラグイン経路の UI 操作手順