XD Post-Discontinuation Strategies and Long-Term Migration

Before migrating anything, build a complete picture of what exists. Most teams underestimate how many XD files they have spread across personal and shared Creative Cloud accounts.

Audit sources:

1. Creative Cloud Home (home.creativecloud.adobe.com): all cloud documents
2. Shared documents: files shared with your account by others
3. Local files: .xdc files saved to local drives
4. Zeplin: all XD-sourced projects in Zeplin
5. Google Drive / Dropbox: design backups shared outside Creative Cloud

File categorization framework:

1Category A — Active Production (migrate first, high priority):
2  - Files being actively updated in current sprint
3  - Components that are being shipped to production
4  - Design system files used as library source
5
6Category B — Reference Material (migrate second, medium priority):
7  - Completed projects still referenced by developers
8  - Design tokens or component specs still active
9  - Files linked in Confluence/Notion documentation
10
11Category C — Historical Archive (migrate last or preserve offline):
12  - Completed and shipped projects no longer modified
13  - Rejected concepts and exploration files
14  - Onboarding materials and design guidelines
15  - Old versions and iteration history
16
17Category D — Deprecate (do not migrate):
18  - Outdated designs superseded by newer work
19  - Personal exploration files with no team value
20  - Duplicate or backup copies of migrated files

Spreadsheet columns for the audit:

1File Name | CC Location | Last Modified | Category | Owner | Figma Status

Estimating migration effort:

• Simple artboard file (< 20 artboards): 2–4 hours
• Medium file with components (20–100 artboards): 1–2 days
• Design system library (shared components + tokens): 3–5 days
• Complex prototype with many interactions: + 1 day per 20 interactions

The most critical step before any XD license expires is creating an offline archive that preserves design decisions regardless of Creative Cloud access.

Archive what from each Category A and B file:

1. The raw .xdc file:

File → Save As → save to a local drive and Git repository

.xdc files can be opened by other team members with XD licenses

1. All artboards as PDF:

File → Export All → PDF format

Vector, searchable, viewable without XD

Preserves exact visual appearance permanently

1. All design tokens as JSON:

Use Design Tokens plugin → Export to tokens.json

Preserves every color, spacing, and typography value

1. All assets as SVG:

File → Export → Batch → SVG → all marked-for-export items

Stores all icons, logos, and illustrations independently

1. Screenshots of all prototype flows:

Record a video walkthrough of the prototype in Presentation mode

Captures interaction intent that does not survive migration

1. Design rationale documentation:

Export all XD comments as a screenshot or copy-paste to Confluence

Captures why decisions were made, not just what they are

Git repository structure for XD archive:

1design-archive/
2├── xd-files/
3│   ├── design-system/
4│   │   └── design-system-v4.xdc
5│   ├── web-app/
6│   │   ├── home-page-v3.xdc
7│   │   └── checkout-flow-v2.xdc
8│   └── README.md  ← document what each file contains
9├── tokens/
10│   ├── design-system-tokens.json
11│   └── README.md
12├── assets/
13│   ├── icons/ (all SVGs)
14│   ├── illustrations/
15│   └── images/
16├── pdfs/
17│   ├── design-system-artboards.pdf
18│   └── web-app-artboards.pdf
19└── prototype-recordings/
20    └── checkout-flow-walkthrough.mp4

Setting up Git LFS for binary files:

1# Initialize repository
2git init design-archive
3git lfs install
4
5# Track binary file types
6git lfs track '*.xdc'
7git lfs track '*.pdf'
8git lfs track '*.mp4'
9git lfs track '*.png'
10
11# .gitattributes file is created automatically
12git add .gitattributes
13git add .
14git commit -m 'Initial XD design archive'

A well-organized Figma workspace mirrors the XD project structure, making the transition easier for both designers and developers who know where to find things.

Figma organizational hierarchy:

1Figma Organization
2└── Team: DevBootstrap Design
3    ├── Project: Design System          ← was: XD shared library
4    │   ├── File: Components            ← was: components.xdc
5    │   ├── File: Foundation Tokens     ← was: tokens in CC Library
6    │   └── File: Documentation         ← new: design rationale
7    ├── Project: Web Application        ← was: web-app.xdc folder
8    │   ├── File: Home Page             ← was: home-page.xdc
9    │   ├── File: Course Detail         ← was: course-detail.xdc
10    │   └── File: Checkout Flow         ← was: checkout-flow.xdc
11    ├── Project: Archive (XD Legacy)    ← imported XD files
12    │   └── [all imported XD files]     ← read-only reference
13    └── Project: Explorations           ← was: personal CC folder

Setting up Figma Library from XD design system:

1. Create 'Design System' Figma file
2. Import XD components (File → Import → select .xdc)
3. Manually convert imported frames to Figma components
4. Add the component library file to the team (right-click → Publish)
5. Enable the library in all working files (Assets → Libraries → toggle)

Figma variable (token) setup from XD library:

1. In Figma: Create Variables panel (Edit → Local variables)
2. Create Collections: Colors, Spacing, Typography
3. Add each value from the exported XD tokens JSON
4. Apply variables to components by selecting fills and choosing variables

JavaScript to convert XD tokens JSON to Figma-ready format:

1// Convert XD Design Tokens JSON to Figma variable import format
2const xdTokens = require('./tokens/design-system-tokens.json');
3
4function flattenTokens(obj, prefix = '') {
5  return Object.entries(obj).flatMap(([key, val]) => {
6    const name = prefix ? `${prefix}/${key}` : key;
7    if (val.value !== undefined) {
8      return [{ name, value: val.value, type: val.type }];
9    }
10    return flattenTokens(val, name);
11  });
12}
13
14const flat = flattenTokens(xdTokens);
15console.log(JSON.stringify(flat, null, 2));
16// Output: [{name: 'color/primary/600', value: '#2563eb', type: 'color'}, ...]

A four-phase migration minimizes disruption to active development while methodically moving the design system to Figma.

Phase 1: Parallel Setup (Weeks 1–2)

Goal: Get Figma ready without stopping any XD work

• Set up Figma team workspace with correct project structure
• Import existing XD files as read-only Figma reference
• Set up Figma variables matching XD token library
• Invite all designers to Figma (editors) and developers (viewers)
• Brief all developers: 'Figma is coming, XD links stay active for now'

Phase 2: Design System Migration (Weeks 3–4)

Goal: Migrate the design system first — all other work depends on it

• Rebuild all components from scratch in Figma (do not rely on import)
• Why rebuild not just import: imported XD components become frames, not real Figma components
• Rebuild in priority order: Button, Input, Card, Navigation, Modal (most used first)
• Publish Figma component library when first 20 components are ready
• Keep XD library active for any sprint still using XD artboards

Phase 3: Active Project Migration (Weeks 5–8)

Goal: Move current sprint work to Figma

• Each sprint: new pages designed in Figma, referencing the new Figma library
• Existing XD pages: keep the XD share link active as developer reference
• Do not migrate mid-sprint pages — wait for natural sprint boundary
• Update all Confluence/Notion documentation links as each page migrates

Phase 4: Archive and Close (Week 9+)

Goal: Finalize archive, communicate completion, archive XD files

• Archive all XD files in Git LFS repository
• Confirm all Confluence/Notion links are updated to Figma
• Confirm all developers have accepted Figma invitations
• Remove XD from onboarding documentation
• Update design system documentation to reference Figma
• Keep .xdc files in archive for at least 2 years

Communication template for development team:

1## Design System Now Live in Figma
2
3As of [date], the DevBootstrap design system is fully migrated to Figma.
4
5**New design system link**: https://figma.com/file/xxx/DevBootstrap-Design-System
6**Developer access**: You already have Viewer access (check your Figma inbox)
7
8**What changed**:
9- All new designs are now in Figma
10- XD share links remain active for any implementation still in progress
11- Design tokens are the same values — CSS custom properties unchanged
12
13**Old XD links**: Archived at [Confluence page] for historical reference
14
15**Dev Mode**: Press Ctrl+Shift+D in Figma (same as XD shortcut)