Mapping XD Artboards to Figma Frames — Conversion Details and Pixel Fine Converter's Accuracy

“When I migrate from Adobe XD to Figma, do artboard names and sizes carry over as-is?” “I want to move multiple artboards in one pass.” “How are background colors and coordinates handled?” — Once you start migrating to Figma in earnest, how artboards map to frames is a question that tends to come up.

An artboard is the top-level structure in an XD file — a screen-level design region. Figma has a corresponding concept called a Frame, and the two are conceptually close, but their internal representations differ. What carries over 1:1, what gets transformed, and what is restricted — knowing these answers up front dramatically reduces post-migration rework.

This article walks through, based on Pixel Fine Converter’s actual conversion code, the detailed mapping from XD artboards to Figma frames. We cover behavior for name / size / background color / clipping / coordinate system, the Free plan’s 3-artboard limit and Pro’s unlimited artboards, group hierarchy handling — the technical details migration practitioners need to know.

📝 Introduction — How XD artboards relate to Figma frames

XD and Figma are both vector-based design tools, and both have a notion of screen-level regions. XD calls them Artboards, Figma calls them Frames. The two are conceptually close, and migration generally produces 1:1 correspondence.

That said, internal representations differ in a few ways.

XD Artboards:

• Placed as the top-level structure in a file, a screen-level region
• Have name / size / background color / child elements
• Inter-artboard absolute coordinates are stored as “position within the file”

Figma Frames:

• A “container element” placeable at any depth on a page
• Can serve as both top-level frames (artboard equivalents) and nested inner frames
• Position is local coordinates within the page

In other words, an XD artboard is essentially “a frame restricted to the top level”. The difference is that XD can’t promote child elements or other artboards into artboards, while Figma frames are usable at any depth.

This difference means the following points need attention during conversion:

1. Name / size / background color — can they carry over 1:1?
2. Coordinate system — how is the transformation handled (XD global coordinates → Figma local coordinates)?
3. Clipping (cutting off content beyond the boundary) — how is it treated?
4. Large artboard counts — are there plan-level restrictions?

The rest of this article walks through each of these, grounded in Pixel Fine Converter’s conversion code.

🎯 The basic mapping — artboard to frame

First, a table summarizing the 1:1 correspondence between XD artboards and Figma frames.

Out of the five primary attributes, four are preserved as-is, and only the coordinate system is normalized. The coordinate-system transformation rewrites “absolute positions within the file” into “relative positions within the frame.”

A concrete example: an element placed at (100, 200) in XD, sitting inside an artboard located at (50, 50), becomes (50, 150) in local coordinates inside the Figma frame. The visual remains identical — only the coordinate representation is rebased to the frame’s origin.

⚙️ Pixel Fine Converter’s artboard conversion behavior

Pixel Fine Converter’s artboard conversion runs through 6 steps per artboard. The summary below is grounded in Pixel Fine Converter’s actual conversion behavior.

Step 1: Frame creation and naming

frame = backend.createFrame()
frame.name = artboard.name

The XD artboard name becomes the frame name as-is. Japanese names, mixed alphanumeric, slash separators (Home/Default) — all carry through unchanged.

Step 2: Size assignment

frame.resize(artboard.width, artboard.height)

Pixel-level width and height are passed directly. An XD artboard sized 375 × 812 (iPhone X target) becomes a 375 × 812 Figma frame.

Step 3: Enable clipping

frame.clipsContent = true

Figma frames have optional clipping by default, but Pixel Fine Converter always enables clipsContent: true on artboard-equivalent frames. This aligns with XD’s behavior of hiding content beyond the artboard boundary.

Step 4: Background color extraction and application

The XD artboard’s background color is extracted by finding the node with type === 'artboard' inside artboard.content.children and reading its style.fill. If fill.type === 'solid', RGB + alpha are extracted and applied to Figma’s frame.fills as SOLID + opacity. If no background color is set, a default white background ({ r: 1, g: 1, b: 1 }) is applied.

Step 5: Coordinate system normalization

coordContext = {
  artboardX, artboardY,
  parentX: 0, parentY: 0,
  artboardWidth, artboardHeight,
  artboardName,
}

A coordinate context is built to translate XD’s global coordinates into Figma’s local coordinates. Using the artboard’s own position (artboardX, artboardY) as the origin, child element coordinates are made relative.

Step 6: Prototype ID preservation

if (artboardNode?.id) {
  ctx.idMap.set(artboardNode.id, frame)
}

The XD AGC artboard node ID (an internal identifier from the XD file format) is recorded in the internal idMap. This serves as the reference table for connecting XD-side prototype navigation (tap → artboard A to B) to Figma’s prototype features.

💎 The Free plan’s 3-artboard limit and Pro’s unlimited artboards

The conversion behavior covered so far uses the same logic on Free and Pro. The only difference is how many artboards can be converted.

Free plan: up to 3 artboards

Pixel Fine Converter’s Free plan sets the artboard limit at 3. If you convert an XD file with 4 or more artboards, only the first 3 are converted and the rest are skipped.

When this happens, the progress bar displays a message like “Found {total} artboard(s). Converting first {limit} (free plan limit).” so users can recognize that some artboards were omitted due to the limit.

Pro plan: no artboard count limit

On Pro, the internal artboard limit check is bypassed and all artboards proceed to conversion, so there is no artboard count limit. Large XD files with 50 or 100 artboards are all converted in a single pass.

When is Free enough vs. switching to Pro

Conversion accuracy is identical on Free and Pro, so the realistic flow is: try Free with 3 artboards first, validate accuracy, then switch to Pro once you’re convinced.

📐 Handling group hierarchy and nested structures

XD artboards contain groups and nested structures. Pixel Fine Converter reproduces the group hierarchy as-is on the Figma side, using Groups or Frames as appropriate.

XD groups → Figma groups / frames

XD distinguishes “groups” from “components,” but on the Figma side they map to one of the following depending on use:

• Simple grouping only → Figma Group (position and size from bounding box)
• Regions needing background color or clipping → Figma Frame (more capable container)
• Componentized elements → Figma Component (instance-aware)

Children of groups inside Auto Layout structures are automatically converted to Frames with SCALE constraints before Auto Layout is applied, preserving child element positioning integrity.

Nested structure preservation

Three-or-more-level nesting is preserved as-is. For example, an XD structure like:

Home (Artboard)
└── Header (Group)
    └── Logo + NavMenu (Group)
        ├── Logo (Image)
        └── NavMenu (Group)
            ├── Item1 (Text)
            ├── Item2 (Text)
            └── Item3 (Text)

becomes this in Figma:

Home (Frame)
└── Header (Group)
    └── Logo + NavMenu (Group)
        ├── Logo (Image)
        └── NavMenu (Group)
            ├── Item1 (Text)
            ├── Item2 (Text)
            └── Item3 (Text)

Name / hierarchy / order all carry through, so finding layers after migration still relies on the same mental model you had in XD.

🧭 Layout and placement between artboards

Converting multiple artboards introduces the question of how they’re arranged on the Figma page. Pixel Fine Converter does not include explicit artboard placement logic — it defers to Figma’s default behavior.

How placement works

• Each converted artboard frame has no explicit frame.x / frame.y assignment
• Figma’s default behavior handles positioning, which means multiple artboards may appear stacked at the same location
• The original XD-side artboard order is preserved as processing order, but there’s no guarantee it’ll be reflected as visual order on the Figma page
• Manual positioning adjustment is expected after conversion if needed

Output to a new page

Pixel Fine Converter writes its conversion result to a new Figma page (figma.createPage()). This prevents accidentally overwriting existing pages. The page name includes the XD file name and conversion timestamp, so multiple conversions leave a history.

✅ Pre-migration artboard checklist

When migrating artboards to Figma, working through these checks in order reduces oversights.

1. Duplicate artboard names

XD files commonly contain same-named artboards (e.g., Home, Home 2, Home Copy). Once converted to Figma, duplicate frame names still work but make it harder later to identify “which is the canonical one.” Cleaning up naming on the XD side before migration makes post-migration operations easier.

2. Background color check

XD artboards with no background color set get a default white background from Pixel Fine Converter. If the intended design is “light gray,” “dark mode black,” or similar, you’ll need to fix these manually post-conversion.

3. Artboard size consistency

When the file contains different screen sizes (mobile 375 × 812 and desktop 1440 × 900 mixed), conversion still proceeds without issue, but organizing pages by screen size is the common Figma-side convention for responsive review.

4. Prototype connection check

If XD had prototype connections between artboards (tap from A → B), on the Pro plan Pixel Fine Converter auto-converts prototype connections — tap / hover / drag triggers, dissolve / smart-animate / slide / push transitions, navigation (navigate / overlay / back / scroll-to), and state transitions. On the Free plan, only artboard IDs are recorded in idMap and the connections themselves are not auto-reproduced — upgrade to Pro or rebuild manually in Figma post-conversion.

5. When the file exceeds the Free plan limit

If your XD file has 4 or more artboards, only the first 3 are converted on Free. Always check the progress bar message “Found {total} artboard(s). Converting first {limit} (free plan limit).” and decide whether to switch to Pro or split the file.

❓ Frequently asked questions

Q1. Do XD artboard names carry over to Figma as-is?

Yes. artboard.name becomes frame.name directly. Japanese names, mixed alphanumeric, slash separators (Home/Default etc.) — all carry through unchanged.

Q2. Are artboard sizes preserved at pixel precision?

Yes. width and height are passed pixel-for-pixel to frame.resize(width, height). A 375 × 812 XD artboard becomes a 375 × 812 Figma frame.

Q3. Is the artboard background color preserved?

It is. SOLID (single-color) backgrounds carry through with RGB + alpha applied directly to frame.fills. If no background color is set, a default white background is applied.

Q4. Do artboard coordinates change?

XD’s global coordinates (position within the entire file) are rewritten into Figma’s frame-local coordinates (frame origin = (0, 0)). The visual stays identical — only the coordinate representation is rebased to the frame’s origin.

Q5. How many artboards can Free convert?

Up to 3 artboards. If the XD file has 4 or more, only the first 3 are converted and the rest are skipped. The progress bar shows “Found {total} artboard(s). Converting first {limit} (free plan limit).”

Q6. Does Pro remove the artboard count limit?

Yes. On Pro, the internal artboard limit check is bypassed and all artboards proceed to conversion, so there is no limit. Large XD files with 50 or 100 artboards are all converted.

Q7. Are XD prototype connections (screen transitions) reproduced in Figma?

On the Pro plan, XD prototype connections (triggers, transitions, navigation, state transitions) are auto-reproduced on the Figma side. On the Free plan, only artboard IDs are recorded in idMap and the connections themselves need to be rebuilt manually. Some complex custom connections may still need manual adjustment even on Pro.

Q8. What happens to nested groups within artboards?

The XD group hierarchy is reproduced as-is in Figma. Three-or-more-level nesting is preserved, and name / hierarchy / order all carry through. Groups inside Auto Layout structures are converted to Frames during processing.

🎯 Wrapping up

XD artboard to Figma frame conversion is fundamentally about 1:1 mapping of five attributes + normalization of the coordinate system. Pixel Fine Converter earns its accuracy through disciplined 1:1 mapping.

Key takeaways

• Name / size / background color / clipping: four attributes are preserved 1:1
• Coordinate system: global coordinates → frame-local coordinates (visual is identical)
• Free plan limit: up to 3 artboards (conversion accuracy is identical to Pro)
• Pro plan: no artboard count limit, large XD files convert in one pass
• Group hierarchy: name / hierarchy / order are preserved
• Prototype ID: recorded internally; on Pro, prototype connections are auto-converted; on Free, manual rebuild is needed

Migration approach

1. Try Free with 3 artboards first — enough material to judge accuracy
2. Once accuracy is validated, switch to Pro and convert the rest in one pass
3. After conversion, verify on the new Figma page — existing pages are untouched
4. Prototype connections are auto-converted on Pro (including Smart Animate / various transitions / state transitions); on Free, rebuild them manually in Figma

Migration from XD to Figma is less about switching tools and more about securing the long-term durability of your design data. Once artboard mapping is 1:1, all subsequent work — style management, componentization, responsive layout — runs on Figma’s native features.

Related pages

• Adobe XD to Figma migration — a practical guide — end-to-end migration process and approach comparison
• XD→Figma conversion plugins compared — side-by-side plugin review
• Migrate XD to Figma — a 5-step playbook for engineering teams — team operations perspective
• Bringing Adobe XD’s Stack and Repeat Grid into Figma’s Auto Layout — layout transformation inside artboards
• There’s No “Artboard” in Figma — A Frame Guide for Adobe XD Users — creating, resizing, and exporting frames inside Figma
• Free XD to Figma conversion — when paid plugins are worth it — the Free / Paid decision axis
• Features: Fine-tuning — Pixel Fine Converter’s accuracy options
• Guide: Fine-tuning — full Fine-tuning option specification