How XD shadows and effects translate to Figma — Drop Shadow, Inner Shadow, and Blur behavior with Pixel Fine Converter's compensation logic

When designers move from Adobe XD to Figma, one of the more subtle migration complaints is about effects: “The shadow looks fine, but the blur feels a bit off,” or “the background blur looks washed out.” These differences are easy to overlook next to color and layout issues, but they reveal a genuine gap between how XD and Figma represent shadows and blurs internally.

This article walks through how XD shadows and effects translate to Figma, based on what Pixel Fine Converter actually does at runtime. We’ll cover Drop Shadow, Inner Shadow, Background Blur, and Layer Blur — grounded in the conversion code, the empirical correction factor it applies, and the transparency system that surfaces approximated conversions to the user.

Related reading

For the color and gradient layer, see How XD Colors and Gradients Translate to Figma. For the overall migration process, see the Adobe XD to Figma migration guide. This article focuses specifically on the shadow and effect layer.

📝 Introduction — Effects carry over, but the look can be subtly off

XD and Figma are both vector-based design tools, and their effect models are conceptually similar. Basic shadows and blurs carry over without major surprises, but a few subtle differences in internal representation are enough to make a blur look slightly stronger or weaker than it did in XD, or a drop shadow’s spread to silently disappear.

XD supports four effect types — Drop Shadow, Inner Shadow, Background Blur, and Layer Blur — and Figma supports the same four. The mapping between them is mostly aligned, but the numerical interpretation of blur amount and the handling of Figma-only attributes (like spread) are where differences show up.

Here are the five angles we’ll cover:

  1. Shadow transfer (Drop Shadow / Inner Shadow) — Which attributes carry through and where Figma-only attributes leave a gap
  2. Blur conversion (Layer Blur / Background Blur) — What the empirical correction factor compensates for
  3. Background Blur brightness compensation — How XD’s brightnessAmount is approximated in Figma
  4. The Conversion Notes system — How Pixel Fine Converter surfaces approximated conversions to the user
  5. Working around Figma constraints — A specific behavior in masked groups and how Pixel Fine Converter handles it

🎨 The four XD effect types — full coverage matrix

Figma supports the four effect types that map to XD’s offerings (two shadow types and two blur types), and Pixel Fine Converter handles all four in its conversion path. XD provides the same four as standard, so the mapping itself is straightforward.

EffectFigma internal nameXD supportTypical use
Drop ShadowDROP_SHADOW✅ StandardCard and button elevation, layered hierarchy emphasis
Inner ShadowINNER_SHADOW✅ StandardInset effects, input field inner shadows
Background BlurBACKGROUND_BLUR✅ StandardFrosted-glass surfaces, modal backdrop blur
Layer Blur (Object Blur)LAYER_BLUR✅ StandardBlurring the element itself, depth-of-field treatments

Effect conversion is Free / Pro parity

Pixel Fine Converter’s shadow and blur conversion uses the same logic on Free and Pro. There are no paywalled features in this area — all four effect types are supported on either tier.

🌑 Shadow transfer — Drop Shadow and Inner Shadow

Shadows have nearly the same attribute set in XD and Figma, so this is the most straightforward part of the conversion. Pixel Fine Converter detects both dropShadow and innerShadow types from the XD side and routes them to Figma’s DROP_SHADOW / INNER_SHADOW.

Attributes that carry over

AttributeXDFigmaCarryover
Offsetdx, dyoffset.x, offset.y✅ As-is
Blur radiusblurradius✅ As-is
Colorcolor (RGB + alpha)color (RGBA)✅ As-is
Blend modeblendModeblendMode✅ As-is
Visibilityvisiblevisible✅ As-is

A card with “black 30% / offset (0, 4) / blur 8” set in XD comes through with the same numbers on the Figma side. The shadow’s position, intensity, and softness closely match what you authored.

Figma-only attributes that leave a gap

Two Figma-side attributes have no XD counterpart and need to be set manually after migration:

  • spread: Controls how far the shadow extends from the element. XD doesn’t have an equivalent concept, so Pixel Fine Converter always emits spread: 0. If you want spread in Figma, set it manually after conversion.
  • showShadowBehindNode: A Figma-specific flag that controls whether the shadow renders behind a semi-transparent element. XD has no matching setting, so the Figma default applies after migration.

Inner Shadow uses the same code path

Pixel Fine Converter processes dropShadow and innerShadow through the same code path (buildEffectsFromFilters) and branches on the type value. Both have equivalent transfer fidelity. If you’ve used Inner Shadow for inset effects in XD, the look carries through to Figma.

🌫️ Blur conversion — Layer Blur, Background Blur, and the empirical correction factor

Blur has more internal-representation divergence than shadows, and Pixel Fine Converter applies numerical compensation behind the scenes.

Empirical correction factor: XD blurAmount × 2 = Figma radius

XD’s blurAmount and Figma’s radius don’t produce the same visual blur for the same numeric value. Empirical testing confirmed that XD’s blurAmount has roughly 2× the visual impact of Figma’s radius at the same number, so Pixel Fine Converter applies this compensation:

Figma radius = round(XD blurAmount × 2)

This isn’t a straight pass-through of the XD value — it’s an empirically derived factor for visual parity between the two tools.

Where the factor comes from

The × 2 factor is derived from side-by-side visual comparisons between XD and Figma at equivalent settings. It’s a close approximation, not a perfect match — at extreme values (very large blurAmount), small visual differences can still appear. Pixel Fine Converter surfaces this through Conversion Note C-4 (covered in the next section).

Background Blur brightness compensation — four-case branching

Background Blur is typically used for frosted-glass effects, so XD attaches two parameters to it: brightnessAmount (brightness adjustment) and fillOpacity (fill transparency). Figma’s BACKGROUND_BLUR doesn’t have direct counterparts to these, so Pixel Fine Converter approximates them by rewriting the element’s fill.

The combination of these two parameters splits into four cases:

CaseXD settingsPixel Fine Converter response
1fillOpacity = 0 + brightness > 0White semi-transparent fill (appears lighter while still serving as the surface for the blur)
2fillOpacity = 0 + brightness < 0Black semi-transparent fill (appears darker)
3fillOpacity = 0 + brightness = 0Nearly transparent white fill (a dummy so BACKGROUND_BLUR still renders)
4fillOpacity > 0Set fill opacity directly, plus a brightness overlay if needed

These are all approximations — they don’t reproduce XD’s appearance exactly. Slight color-tone differences can show up, so Pixel Fine Converter emits Conversion Note C-2 (covered below) to notify the user that an approximation was applied.

🔍 Conversion Notes — transparency for approximated conversions

Conversion Notes is a Pro feature

The Conversion Notes system covered in this section is a Pixel Fine Converter Pro feature. On the Free plan, shadow and blur conversion uses the same logic, but conversion note output (notification of approximations) is only available on Pro.

Conversion Notes is one of Pixel Fine Converter’s distinctive features. Rather than silently approximating, it explicitly surfaces the locations where approximations were applied — turning what would otherwise be a black-box transformation into something the user can inspect.

What Conversion Notes are

Conversion Notes are records that Pixel Fine Converter emits during conversion, with the format severity / id / summary / details. After the conversion finishes, you can open the auto-generated “Conversion Notes” section on the Figma side to see a list of every approximation that ran, layer by layer.

The notes relevant to this article

Two Conversion Notes relate to shadow and effect conversion:

  • C-2: Background blur brightness approximation

    • Emitted when: An XD Background Blur with brightnessAmount is encountered
    • Content: “Brightness adjustment (brightnessAmount=N) was approximated; color tone may differ slightly”
    • Related issue: #2 in the Pixel Fine Converter repository

  • C-4: Blur amount difference

    • Emitted when: Every Layer Blur conversion
    • Content: “Applied empirical correction XD blurAmount=N → Figma radius=N×2. Minor visual differences between XD and Figma blur effects can remain”

Why this matters

The Conversion Notes system reflects a design principle: Pixel Fine Converter doesn’t hide what it approximated. When a designer or engineer is reviewing migration output, the notes serve as a checklist: “this area was approximated, so double-check the visual result in Figma against the XD original.”

Some XD-to-Figma plugins apply approximations silently. Pixel Fine Converter’s design treats transparency as a first-class concern, and the Conversion Notes system implements that principle in the conversion pipeline.

Where to find Conversion Notes

After running Pixel Fine Converter, a “Conversion Notes” section appears at the bottom of the converted Figma page. Notes are organized by severity (A / B / C labels), and each one lists the layer path along with the nature of the approximation. The C-2 and C-4 notes covered in this article are both severity C (minor approximations).

🛠️ Working around Figma constraints — BG Blur promotion in masked groups

A Figma behavior confirmed through Pixel Fine Converter’s hands-on testing: BACKGROUND_BLUR doesn’t render correctly inside a masked group. Pixel Fine Converter detects this case during conversion and reshapes the output to work around it.

What goes wrong

If an XD design places a background blur inside a masked group, converting it as-is into Figma can result in the blur not displaying as expected. This stems from how Figma’s isMask property interacts with BACKGROUND_BLUR, and it’s not obvious for users to detect on their own.

Pixel Fine Converter’s response

Pixel Fine Converter runs these checks during conversion:

  1. Does the group contain a child with isMask?
  2. Does the topmost child have a BACKGROUND_BLUR?
  3. If both, promote the BACKGROUND_BLUR to a frame-level LAYER_BLUR and remove it from the child.

This promotion produces nearly the same visual result while ensuring the blur actually renders on the Figma side.

Why this matters

Detecting and manually working around Figma’s known behaviors isn’t realistic for users. Pixel Fine Converter absorbs Figma’s constraints inside the conversion logic, which cuts down on post-migration rework. The same XD file run through another plugin can result in the blur not rendering as expected — an area where Pixel Fine Converter typically differentiates.

📌 Edge cases that don’t translate cleanly

Shadow and effect conversion is generally smooth, but a few edge cases warrant extra attention.

1. When Drop Shadow spread is needed

XD has no concept of spread, so Pixel Fine Converter emits spread: 0. If you want spread in Figma, set it manually after conversion.

2. Round-tripping Figma designs that use showShadowBehindNode

This doesn’t apply to XD → Figma conversion, but if your workflow involves cycling files back to XD, the showShadowBehindNode setting is lost on the XD side.

3. Multiple stacked blurs on a single element

If an XD element has multiple blur effects stacked, Pixel Fine Converter adds them to Figma’s effects array in order. The rendering and compositing behavior on the Figma side may not match XD exactly, so visually verify the result on critical elements.

4. Extreme blurAmount values

The × 2 empirical correction was validated within typical usage ranges. At much higher values, the approximation accuracy can drop and you may need to fine-tune the result in Figma.

5. Effects applied to text or complex vector shapes

Effects applied to text layers or complex vector paths (compound shapes), in combination with blend modes, can produce unexpected results. Pixel Fine Converter performs the conversion, but the final appearance depends on Figma’s rendering engine.

⚖️ How Pixel Fine Converter compares to other plugins

XD-to-Figma converter plugins vary in how faithfully they handle shadows and blurs.

  • Pixel Fine Converter — Converts all four effect types; applies the empirical blur correction factor; surfaces approximations via the Conversion Notes system; works around Figma’s masked-group BG Blur constraint
  • Other plugins — Basic shadow and blur conversion is broadly supported, but correction factors, transparency systems, and automatic constraint workarounds are areas where Pixel Fine Converter typically differentiates

For a full head-to-head, see XD→Figma conversion plugins compared.

🚀 Install on Figma (Free)

One-click install from Figma Community

❓ FAQ

Q1. Do XD shadows transfer to Figma cleanly?

Yes. Offset, blur radius, color, blend mode, and visibility transfer as-is. Drop Shadow and Inner Shadow have equivalent fidelity.

Q2. What happens to Drop Shadow spread?

XD has no concept of spread, so Pixel Fine Converter always emits spread: 0. If you want spread on the Figma side, set it manually after conversion.

Q3. Does Background Blur brightness survive the migration?

It’s approximated. Pixel Fine Converter converts XD’s brightnessAmount into a corresponding fill color and opacity adjustment in Figma, and emits Conversion Note C-2 to flag that an approximation was applied. The result is a close visual match, not an exact one — verify critical elements visually after migration.

Q4. Does Background Blur work inside masked groups?

Yes. Pixel Fine Converter automatically promotes BACKGROUND_BLUR to a frame-level LAYER_BLUR so the blur renders correctly on the Figma side. The visual result stays close to the XD original.

Q5. What are Conversion Notes and where can I see them?

Conversion Notes are a Pixel Fine Converter mechanism that surfaces approximated conversions to the user. After conversion completes, a “Conversion Notes” section is auto-generated at the bottom of the Figma page, organized by severity (A / B / C). Each note includes the layer path, a summary, and the details of what was approximated. Note that Conversion Notes output is a Pro feature.

Q6. What happens with multiple stacked effects on one element?

Pixel Fine Converter adds all XD-side effects to Figma’s effects array in order. Figma’s compositing behavior may not match XD exactly, so visually verify critical elements after migration.

🎯 Wrap-up

Shadow and effect transfer from XD to Figma is straightforward for the numerical-attribute layer. The differences show up around the interpretation of blur amount and the brightness compensation for Background Blur, where the internal representations diverge — Pixel Fine Converter absorbs both with empirical corrections and approximated conversions.

  • Shadows (Drop Shadow / Inner Shadow): Offset, blur, color, and blend mode carry through cleanly; only spread needs to be re-applied in Figma
  • Blurs (Layer Blur / Background Blur): XD blurAmount × 2 = Figma radius empirical correction; Background Blur brightness handled through four-case fill approximation
  • Conversion Notes system (Pro): Surfaces approximations as C-2 / C-4, preserving conversion transparency
  • Figma constraint workaround: Promotes BACKGROUND_BLUR to frame-level LAYER_BLUR for masked groups

If “the blur feels slightly different” or “the background blur looks washed out” sounds familiar, the cause is most often in the internal-representation gap between the two tools. Pixel Fine Converter compensates inside the conversion logic and surfaces the approximation through Conversion Notes — so when you review the result, you know exactly where to double-check against the XD original.