Overview Auto Layout Components Prototype Japanese fonts Fine-tuning

Taps, hovers, screen transitions — your Adobe XD prototype keeps running in Figma!

The prototype you put together in XD — screen transitions, overlays, hover effects, button pressed states. Recreating all of that in Figma by hand is arguably more tedious than rebuilding the designs themselves. (For the “structural” side of conversion, see “Faithfully recreate your XD components — drop them straight into Figma!” and “Skip the XD-stack rebuild — drop your layouts straight into Figma Auto Layout!” as well!)

As your screen count grows, the number of connections grows exponentially. For a 100-screen app you’ve already got several hundred arrows — and somewhere along the way one gets missed.

Pixel Fine Converter restores your XD prototype connections as Figma prototype flows. On top of that, XD component states (hover, pressed, etc.) are converted as interactive switches between Figma Variants, so your prototype actually runs in Figma once conversion is done. Our goal is straightforward: hit the preview button right after conversion, and the motion you built in XD just plays.

Note: Prototype conversion is a Pro plan ($29, one-time purchase) feature. The plugin itself is free to install, and the Free plan still handles structure, styles, groups, and other basic conversions.

📋 Interactions the conversion reproduces

🖱️ Triggers

User-operation triggers set in XD are mapped to their Figma equivalents:

XD triggerFigma triggerUse
TapON_CLICKButton / link click or tap
HoverON_HOVERMouse-over effects
DragON_DRAGSwipe or drag interactions

🎯 Navigation

The navigation types that follow the trigger — “what happens next” — are converted to the corresponding Figma actions:

XD navigationFigma actionDescription
Screen transitionNAVIGATEMove to a different artboard (screen)
OverlayOVERLAYModal or popover display
BackBACKReturn to the previous screen (no destination needed)
Auto-AnimateSMART_ANIMATEXD property interpolation → Figma Smart Animate
Scroll toSCROLL_TOScroll to a specific position inside a frame
Change stateCHANGE_TOSwitch component variants (paired with state conversion)

🎞️ Transitions & easing

Animation effects attached to screen transitions are also converted:

XD transitionFigma transition
DissolveDISSOLVE
Slide (left / right / up / down)SLIDE_IN + direction
PushPUSH + direction
NoneImmediate transition (no animation)

Easing curves (ease-out / ease-in / ease-in-out / linear) and duration (in seconds) carry over as well. Fine-grained “smoothness” tuning is preserved, so the feel of the motion you crafted in XD comes along with it.

🔁 States to Variants

XD lets you attach “states” to components — Default, Hover, Pressed, Disabled — so you can switch between them inside a single component.

Figma doesn’t have the “state” concept per se, but you can express the same structure with Variants inside a Component Set. Pixel Fine Converter maps them like this:

XDFigma
Component + state setComponent Set (variant properties like State=Default, State=Hover, etc.)
State change interactionCHANGE_TO action (switch between variants)
Default stateState=Default variant (generated from the master)

Linked with prototyping: state conversion and prototype-interaction conversion are wired together. An XD interaction like “on hover, switch to the Hover state” is reproduced in Figma as “ON_HOVER trigger, CHANGE_TO the State=Hover variant.” After conversion you can open Figma’s prototype mode and verify the behavior directly.

🧩 Why this is technically hard

Prototype conversion is, more than visuals, all about handling reference relationships. Connections between nodes, cross-references between states, phantom links to deleted nodes — we have to carry all of this from XD to Figma without breaking anything.

🔗 Bridging node IDs

Prototype connections are reference relationships — “tapping node A navigates to node B.” XD’s node IDs and Figma’s node IDs are obviously different, so we build an ID mapping table during conversion.

Pixel Fine Converter applies prototype connections after every node has been converted. Doing it the other way round would drop any connection pointing to a not-yet-created node. Artboard IDs are tracked in their own map to resolve navigation destinations correctly. It’s tedious plumbing — but skipping it leaves your connections in tatters.

👻 Handling destinations that no longer exist

Depending on the XD file’s edit history, interactions pointing to deleted artboards or components can stick around. These are “ghost links” — invisible even to the person who made them.

We validate destination nodes during conversion and skip invalid connections, counting them as we go. The applied/skipped numbers are logged, and you can review them in the conversion notes — a way to surface errors that would otherwise stay hidden.

🛡️ Safety for state conversion

Since XD states can reference other states, cyclic references are possible in theory. Before generating variants, we walk the state reference graph and, if a cycle exists, safely skip it. A guard against the worst case: a conversion stuck in an infinite loop.

For large components (500+ nodes), we also cap default-variant generation to respect Figma plugin memory limits.

✨ Auto-Animate → Smart Animate

XD’s Auto-Animate corresponds to Figma’s Smart Animate, but the interpolation logic isn’t perfectly identical. The core principle — interpolating properties between same-named layers — is shared, so most cases land naturally, but complex path animations or transitions involving mask changes can diverge.

This is where the “how close can we get” question matters most, but at the property level (position, size, opacity, rotation, etc.) we reproduce things faithfully.

⚠️ Limits and scope (being upfront about it)

We’ve walked through the mechanics of prototype conversion, but XD and Figma’s prototype systems are designed differently, and they won’t ever behave identically. Some things worth calling out:

  • Interactions that reference deleted nodes can’t be converted (they’re skipped and counted in the log)
  • XD Auto-Animate and Figma Smart Animate aren’t identical. Simple property changes (position, size, opacity, rotation) are faithful, but complex path transformations or transitions involving mask changes may differ
  • If no instance of a stateful component exists, CHANGE_TO has nowhere to point and is skipped
  • Large components (500+ nodes) may have variant generation limited due to memory constraints
  • Push transition direction is discarded — every Push lands as LEFT (even if you specified right / up / down Push in XD, the Figma side unifies to LEFT). SLIDE transitions, on the other hand, preserve each direction (LEFT / RIGHT / TOP / BOTTOM) faithfully, so switching to SLIDE is the workaround when direction matters
  • Overlay anchor positions: XD’s free-form placement and Figma’s anchor presets can land at slightly different pixel positions
  • Unknown trigger / navigation types (e.g., future XD extensions) fall back safely to NAVIGATE-equivalent behavior
  • State=Default naming: the master state is always emitted as State=Default (even if you used a different name in XD, such as Normal or Idle)

The detailed behavior and workarounds for these cases are covered in Blog: Auto-Converting XD Prototypes to Figma. The full option behavior is documented in Guide: Export option reference.

Even if the behavior isn’t perfectly identical, our goal is: “open Figma’s prototype mode right after conversion, and what you built in XD just plays.” We keep refining the plugin with that in mind, and we’ll keep working to make it one you can genuinely rely on.

❓ Frequently asked questions (FAQ)

Q1. Are there XD prototype features that aren’t supported?

XD supports Time (time-based) / Voice / Keys & Gamepad triggers in addition to Tap / Hover / Drag, but Pixel Fine Converter only converts Tap / Hover / Drag. Figma has no Voice equivalent, and Time / Keys & Gamepad are deferred based on usage-frequency tradeoffs in the plugin implementation. We focus on the practically common Tap / Hover / Drag triggers and the navigation and state transitions that follow them.

Q2. How close do Auto-Animate and Smart Animate get?

The core principle — interpolating properties between same-named layers — is shared, so position / size / opacity / rotation changes carry over faithfully. Path transformations and mask-change transitions may show small visual differences due to the divergence in interpolation logic. Previewing in the actual prototype mode is the reliable check. See Blog: Auto-Converting XD Prototypes to Figma for details.

Q3. How do I check which interactions failed to convert?

Skipped connections are logged with their count and source node names during conversion. Enabling the “Generate conversion notes” option in the Export panel produces a conversion report inside the Figma page, where you can review skipped connections visually. See Guide: Export option reference for the option details.

Q4. Are all Push transition directions converted?

Push transitions have their direction information discarded — every Push lands as LEFT in Figma (even if you specified right / up / down Push in XD). SLIDE transitions, on the other hand, preserve each direction (LEFT / RIGHT / TOP / BOTTOM) faithfully. If direction matters for a particular interaction, switching it to SLIDE is the practical workaround.

Q5. Does it work for large prototypes (500+ nodes)?

Standard prototype connections (screen transitions, overlays, etc.) work regardless of scale. Within a single component containing 500+ nodes, variant generation is capped by a safety guard that respects Figma plugin memory limits. This is a safety valve to prevent conversion from hanging, and any caps are logged.

Q6. Can I customize XD state naming on the Figma side?

Pixel Fine Converter converts states to variant properties in the State=<name> format, and the master state is always emitted as State=Default. If you used a different name in XD (e.g., Normal, Idle), it becomes Default on the Figma side. After conversion you’re free to rename variants in Figma as needed.

Q7. Can I try prototype conversion on the Free plan?

Prototype conversion and state-to-variant conversion are Pro plan ($29, one-time purchase) features. The plugin itself is free to install, and the Free plan handles structure, styles, groups, and other basic conversions. We recommend confirming the baseline conversion quality on the Free plan first, then upgrading to Pro when you need the prototype conversion layer.

🚀 Try the Free plan first to check conversion quality

Pixel Fine Converter is free to install from the Figma Community. The Free plan includes the full set of basic conversions — shapes, text, styles, groups, masks, images, transforms — so you can check the conversion quality on your own .xd file right away.

If you need prototype connections or state-to-variant conversion, you can unlock them with the Pro plan ($29, one-time purchase — no subscriptions).

🚀 Install on Figma (Free)

One-click install from Figma Community