Use Adobe XD Co-editing to work simultaneously on design files with multiple collaborators — understand how co-editing affects developer handoff timing, version states, and when to extract CSS values from a live-editing file.
Adobe XD's Co-editing feature allows multiple team members to edit the same cloud document simultaneously. Designers can work on different artboards at the same time, see each other's cursors in real-time, and collaborate without file conflicts.
For developers, understanding Co-editing matters because it affects when you can safely extract measurements and assets. A file that is actively being edited by three designers simultaneously may have unstable values — colors being revised, spacing being adjusted, components being renamed.
This lesson covers how Co-editing works from both a designer and developer perspective, and how to coordinate handoff timing when a file is under active collaborative design.
XD Co-editing requires saving a document to Creative Cloud (File → Save to Cloud). Local documents cannot be co-edited.
Inviting collaborators:
Permission levels in XD:
Opening a co-edited file:
Co-editing indicators:
Saving in co-editing:
XD prevents edit conflicts by using element-level locks — when one user selects and edits an element, other users cannot select that same element simultaneously. This is different from Figma's last-write-wins approach.
How XD handles simultaneous edits:
Scenario 1: different artboards
Scenario 2: same artboard, different elements
Scenario 3: same element
Conflict-safe co-editing practices for design teams:
For developers watching a co-edited file:
XD's Comments feature (available in both Design mode and via share links) allows developers and designers to communicate within the context of the design itself — pinned to specific elements or locations on the canvas.
Adding comments in XD:
Comment types useful for developer-designer communication:
Developer questions (pinned to elements):
1@sarah — should the hover color here match var(--color-action-hover) from
2the style guide, or is this a one-off? #6B7280 doesn't match any token. 🔍Designer specification notes:
1@dev-team — this modal should use the Overlay interaction from prototype
2(slide up, 300ms ease-out). Check the prototype link for the easing details.
3Close button should dismiss overlay AND navigate back. 📐Handoff status annotations:
1SECTION READY FOR IMPLEMENTATION: Hero Section v3 (artboard 'Home - Desktop')
2All values finalized, assets exported to /design-assets/hero/. ✅Resolving comments:
Comment-based handoff protocol (suggested team workflow):
If your team is migrating from XD Co-editing to Figma multiplayer, understanding the differences helps manage expectations and workflow adjustments.
Feature comparison:
1Capability XD Co-editing Figma Multiplayer
2Real-time cursors Yes Yes
3Element-level lock Yes No (last-write-wins)
4Conflict resolution Automatic lock Manual awareness needed
5Comment system Yes Yes + Figma Dev Mode comments
6Version history Yes (cloud saves) Yes (named versions)
7Maximum collaborators 8 simultaneous Unlimited (plan-dependent)
8Offline mode No (cloud required) No (browser-based)
9Developer access Can View role Developer/Viewer role (free)
10Plugin ecosystem Discontinued Active developmentKey workflow differences:
Conflict handling: XD locks prevent conflicts; Figma lets multiple users edit the same element and last save wins. In Figma, teams rely on verbal coordination (Slack) instead of automatic locks.
Developer access cost: In XD, you need a Creative Cloud seat to view co-edited files live. In Figma, developers can view any file for free with the Viewer role — a significant cost difference for large dev teams.
Plugin ecosystem: XD plugins are frozen as of 2023. Figma plugins are actively developed — better coverage for token export, accessibility, and developer tools.
Migration plan for teams moving from XD Co-editing:
Maintaining XD files during transition:
1For files still in XD:
2- Continue using XD development share links
3- Export tokens to JSON for any new implementation work
4- Keep XD files as reference, not source of truth, during migration
5- Freeze XD files once Figma equivalent is validatedEstablishing a comment-based workflow to coordinate implementation start, freeze periods, and review checkpoints in a Co-edited XD file.
1/*
2Developer-Designer Co-editing Handoff Protocol
3(Implemented as XD Comments + team chat coordination)
4
5PHASE 1: Implementation Request
6--------------------------------------------
7[Developer adds XD comment pinned to 'Course Detail' artboard]
8"@design-team Starting sprint 3 implementation of Course Detail page.
9Planning to start Monday. Can you freeze major structural changes
10to this artboard and mark it ready? Specifically need:
11- Final lesson list item height (currently shows 64px and 72px across artboards)
12- Correct progress bar color — Inspect shows both green-600 and blue-600 in different spots
13- Confirmation on tab behavior: slide transition or instant?
14Thanks! 🔍"
15
16PHASE 2: Designer Response
17--------------------------------------------
18[Designer resolves 3 questions and marks artboard]
19"@developer — answers inline:
201. Lesson list item: 64px is final. 72px on tablet artboard was a mistake, fixing now.
212. Progress bar: green-600 (#16A34A) everywhere. Blue was a test, reverted.
223. Tabs: slide left/right at 250ms ease-out. Check prototype link section 3.
23Artboard frozen as of 14:30 today — no structural changes until review complete. ✅"
24
25PHASE 3: Implementation
26--------------------------------------------
27/* Developer implements based on locked artboard values */
28
29.lesson-item {
30 display: flex;
31 align-items: center;
32 gap: 0.75rem;
33 height: 4rem; /* 64px — confirmed with designer @2 */
34 padding: 0 1rem;
35 border-bottom: 1px solid var(--color-border);
36 transition: background-color 150ms ease;
37}
38
39.lesson-item:hover {
40 background-color: var(--color-bg-surface);
41}
42
43/* Progress bar: green-600 (confirmed with designer @2) */
44.progress-fill {
45 background-color: #16a34a; /* green-600 — confirmed NOT blue */
46 border-radius: 9999px;
47 height: 100%;
48 transition: width 400ms cubic-bezier(0, 0, 0.2, 1);
49}
50
51/* Tab transition: slide left/right 250ms ease-out (from prototype @3) */
52.tab-content-wrapper {
53 display: grid;
54 overflow: hidden;
55}
56
57.tab-panel {
58 grid-column: 1;
59 grid-row: 1;
60 animation: slide-in 250ms cubic-bezier(0, 0, 0.2, 1) both;
61}
62
63@keyframes slide-in {
64 from { opacity: 0; transform: translateX(1rem); }
65 to { opacity: 1; transform: translateX(0); }
66}
67
68/* PHASE 4: Review Request */
69/*
70[Developer adds XD comment after implementation]
71"@design-team — Course Detail page implemented on branch feat/course-detail.
72Preview: http://localhost:3000/courses/css-mastery
73
74Please compare against artboard 'Course Detail - Desktop' and
75'Course Detail - Mobile'.
76
77Known differences I made deliberately:
78- Added sticky header on scroll (not in XD — functional requirement)
79- Tab animation: added translateX for perceived direction
80 (XD prototype shows fade only, but slide matches the navigation mental model)
81
82Let me know any corrections needed. 🔍"
83*/The comment-based protocol creates a lightweight handoff contract inside XD: developer requests clarification, designer answers and freezes the artboard, developer implements with documented decisions, then requests review. The three specific questions (element height ambiguity, color inconsistency, animation type) are exactly the type of values that cannot be read from a single artboard — they require designer intent to resolve. The developer's phase 4 note about deliberate differences (sticky header, enhanced animation) maintains transparency about implementation choices that deviate from the static design.
The next lesson covers Developer Specifications — how to read XD's CSS code generation and use the Inspect panel in the development share link to extract every value needed for implementation without needing to open XD itself.
Your progress is saved in this browser, on this device only.