Use Creative Cloud Libraries in Adobe XD to share colors, character styles, components, and assets across design files — and understand how library-driven design tokens map to CSS custom properties and design system implementations.
Creative Cloud Libraries are Adobe's shared asset system — a centralized store of colors, character styles, graphics, and components that can be used across XD, Photoshop, Illustrator, and After Effects files. For developers, a library represents the design system: every color in the library should become a CSS custom property, every character style should become a font utility class, and every component should become a React component.
Understanding how XD libraries work helps you maintain alignment between design and code. When a designer updates a library color from #2563EB to #1d4ed8, you know exactly which CSS variable to update, and the change ripples through every component automatically.
This lesson covers how to read Creative Cloud Libraries in XD, translate library assets to CSS tokens, and build a token system that mirrors the library structure.
A Creative Cloud Library contains four types of assets relevant to developers:
Reading library colors in XD:
Translating library colors to CSS custom properties:
1XD Library color 'Primary / 600' hex #2563EB → --color-primary-600: #2563eb
2XD Library color 'Primary / 500' hex #3B82F6 → --color-primary-500: #3b82f6
3XD Library color 'Neutral / 900' hex #111827 → --color-neutral-900: #111827
4XD Library color 'Neutral / 0' hex #FFFFFF → --color-neutral-0: #ffffff
5XD Library color 'Success / 600' hex #16A34A → --color-success-600: #16a34a
6XD Library color 'Danger / 600' hex #DC2626 → --color-danger-600: #dc2626CSS custom properties (design tokens):
1:root {
2 /* Primary palette */
3 --color-primary-500: #3b82f6;
4 --color-primary-600: #2563eb;
5 --color-primary-700: #1d4ed8;
6
7 /* Neutral palette */
8 --color-neutral-0: #ffffff;
9 --color-neutral-50: #f9fafb;
10 --color-neutral-100: #f3f4f6;
11 --color-neutral-200: #e5e7eb;
12 --color-neutral-300: #d1d5db;
13 --color-neutral-400: #9ca3af;
14 --color-neutral-500: #6b7280;
15 --color-neutral-600: #4b5563;
16 --color-neutral-700: #374151;
17 --color-neutral-900: #111827;
18
19 /* Semantic tokens (reference palette tokens) */
20 --color-background: var(--color-neutral-0);
21 --color-text: var(--color-neutral-900);
22 --color-muted: var(--color-neutral-500);
23 --color-border: var(--color-neutral-200);
24 --color-action: var(--color-primary-600);
25 --color-action-hover: var(--color-primary-700);
26}Reading character styles from the library:
1XD style 'Display / XL' → font-size: 4rem, weight: 700, line-height: 1.2
2XD style 'Heading / LG' → font-size: 1.875rem, weight: 600, line-height: 1.3
3XD style 'Body / MD' → font-size: 1rem, weight: 400, line-height: 1.6
4XD style 'Caption' → font-size: 0.75rem, weight: 400, line-height: 1.4Library components in XD are reusable symbols published to the shared library. When a designer places a component from the library, every instance is linked — updating the main component in the library updates all instances across all files.
This mirrors how React component libraries work: if you update Button in your component library, every page that imports Button gets the update automatically.
Reading library components in XD:
Library component naming conventions and their developer equivalents:
1Library structure: React component:
2Button/Primary → <Button variant="primary">
3Button/Secondary → <Button variant="secondary">
4Button/Ghost → <Button variant="ghost">
5Input/Default → <Input>
6Input/Error → <Input error="..."> or aria-invalid
7Card/Course → <CourseCard>
8Card/Blog → <BlogCard>
9Navigation/Desktop → <DesktopNav>
10Navigation/Mobile → <MobileNav>When XD uses linked library components:
Component property to React prop mapping:
1XD Boolean property 'Icon: Yes/No' → prop: icon?: ReactNode
2XD Text property 'Label' → prop: children: string
3XD Variant property 'Size: SM/MD/LG' → prop: size?: 'sm' | 'md' | 'lg'
4XD Variant property 'State: Disabled' → prop: disabled?: booleanA well-maintained Creative Cloud Library uses a two-layer token system:
Reading a two-layer token system in XD:
1Library 'Primitives' folder:
2 Blue 600: #2563EB
3 Blue 700: #1D4ED8
4 Red 600: #DC2626
5 Gray 900: #111827
6
7Library 'Semantic' folder:
8 Action: links to Blue 600
9 Action Hover: links to Blue 700
10 Danger: links to Red 600
11 Text Primary: links to Gray 900CSS custom property implementation matching this token structure:
1/* Primitive layer */
2:root {
3 --primitive-blue-600: #2563eb;
4 --primitive-blue-700: #1d4ed8;
5 --primitive-red-600: #dc2626;
6 --primitive-gray-900: #111827;
7}
8
9/* Semantic layer */
10:root {
11 --color-action: var(--primitive-blue-600);
12 --color-action-hover: var(--primitive-blue-700);
13 --color-danger: var(--primitive-red-600);
14 --color-text-primary: var(--primitive-gray-900);
15}
16
17/* Dark mode: only update semantic layer */
18@media (prefers-color-scheme: dark) {
19 :root {
20 /* Primitives remain the same */
21 /* Only semantic tokens change */
22 --color-action: var(--primitive-blue-400); /* lighter for dark bg */
23 --color-text-primary: var(--primitive-gray-100); /* near-white */
24 }
25}Why this matters: when the designer updates 'Action' from Blue 600 to Blue 500 in the library, you update one CSS variable (--color-action) and every component that uses it updates automatically — exactly like how library updates propagate in XD.
Token naming conventions:
1/* Format: --{category}-{property}-{modifier?} */
2--color-text-primary
3--color-text-muted
4--color-background-page
5--color-background-card
6--color-border-default
7--color-border-focus
8--space-2xs: 0.25rem; /* 4px */
9--space-xs: 0.5rem; /* 8px */
10--space-sm: 0.75rem; /* 12px */
11--space-md: 1rem; /* 16px */
12--space-lg: 1.5rem; /* 24px */
13--space-xl: 2rem; /* 32px */
14--space-2xl: 3rem; /* 48px */
15--radius-sm: 0.25rem; /* 4px */
16--radius-md: 0.5rem; /* 8px */
17--radius-lg: 0.75rem; /* 12px */
18--radius-full: 9999px;Not every color in an XD file is a library token. Designers sometimes use hardcoded values for one-off adjustments or placeholder content. As a developer, knowing the difference prevents you from creating unnecessary CSS variables.
How to tell library-linked from hardcoded in XD:
In the Inspect panel (developer share link):
Developer decision tree:
1Is the color linked to a library token?
2 YES → Use the corresponding CSS custom property
3 NO → Is the color used in more than 3 places?
4 YES → Discuss with designer, likely should be a token
5 NO → Use the hex value directly inline or as a local variableChecking consistency in XD files:
If you notice the same hex color (#2563EB) appearing in 20 different elements but none of them are library-linked, that is a design debt signal — those should all be using the library color. Flag this to the designer.
Library updates workflow:
1/* Before library update */
2:root { --color-action: #2563eb; }
3
4/* After designer updates library 'Action' to #1E40AF */
5:root { --color-action: #1e40af; } /* one-line change updates entire site */This single-source-of-truth approach is why CSS custom properties at the :root level are the correct implementation of design system tokens.
Reading a complete XD library with primitives and semantic tokens, then implementing the full CSS custom property system that mirrors the library structure.
1/*
2XD Creative Cloud Library: 'DevBootstrap Design System'
3
4Primitives > Colors:
5 Blue: 50=#EFF6FF, 100=#DBEAFE, 500=#3B82F6, 600=#2563EB, 700=#1D4ED8, 900=#1E3A8A
6 Green: 600=#16A34A, 700=#15803D
7 Red: 600=#DC2626, 700=#B91C1C
8 Yellow: 500=#EAB308
9 Neutral: 0=#FFF, 50=#F9FAFB, 100=#F3F4F6, 200=#E5E7EB,
10 300=#D1D5DB, 400=#9CA3AF, 500=#6B7280, 600=#4B5563,
11 700=#374151, 800=#1F2937, 900=#111827
12
13Primitives > Typography:
14 Font: Inter, system-ui, sans-serif
15 Sizes: 12, 13, 14, 15, 16, 18, 20, 24, 30, 36, 48, 60px
16 Weights: 400, 500, 600, 700
17
18Primitives > Spacing:
19 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96px
20
21Semantic > Colors:
22 Background Page: Neutral/0
23 Background Surface: Neutral/50
24 Text Primary: Neutral/900
25 Text Muted: Neutral/500
26 Border Default: Neutral/200
27 Border Focus: Blue/600
28 Action: Blue/600
29 Action Hover: Blue/700
30 Success: Green/600
31 Danger: Red/600
32 Warning: Yellow/500
33
34Character Styles:
35 Display: 60px/700/1.2
36 H1: 48px/700/1.25
37 H2: 36px/600/1.3
38 H3: 24px/600/1.35
39 H4: 20px/600/1.4
40 Body LG: 18px/400/1.6
41 Body MD: 16px/400/1.6
42 Body SM: 14px/400/1.5
43 Caption: 12px/400/1.4
44 Label: 13px/500/1.4
45*/
46
47/* CSS implementation of the XD library */
48:root {
49 /* Primitive color tokens */
50 --blue-50: #eff6ff;
51 --blue-100: #dbeafe;
52 --blue-500: #3b82f6;
53 --blue-600: #2563eb;
54 --blue-700: #1d4ed8;
55 --blue-900: #1e3a8a;
56
57 --green-600: #16a34a;
58 --green-700: #15803d;
59 --red-600: #dc2626;
60 --red-700: #b91c1c;
61 --yellow-500: #eab308;
62
63 --neutral-0: #ffffff;
64 --neutral-50: #f9fafb;
65 --neutral-100: #f3f4f6;
66 --neutral-200: #e5e7eb;
67 --neutral-300: #d1d5db;
68 --neutral-400: #9ca3af;
69 --neutral-500: #6b7280;
70 --neutral-600: #4b5563;
71 --neutral-700: #374151;
72 --neutral-800: #1f2937;
73 --neutral-900: #111827;
74
75 /* Semantic color tokens */
76 --color-bg-page: var(--neutral-0);
77 --color-bg-surface: var(--neutral-50);
78 --color-text: var(--neutral-900);
79 --color-text-muted: var(--neutral-500);
80 --color-border: var(--neutral-200);
81 --color-border-focus: var(--blue-600);
82 --color-action: var(--blue-600);
83 --color-action-hover: var(--blue-700);
84 --color-success: var(--green-600);
85 --color-danger: var(--red-600);
86 --color-warning: var(--yellow-500);
87
88 /* Primitive spacing tokens */
89 --space-1: 0.25rem; /* 4px */
90 --space-2: 0.5rem; /* 8px */
91 --space-3: 0.75rem; /* 12px */
92 --space-4: 1rem; /* 16px */
93 --space-5: 1.25rem; /* 20px */
94 --space-6: 1.5rem; /* 24px */
95 --space-8: 2rem; /* 32px */
96 --space-10: 2.5rem; /* 40px */
97 --space-12: 3rem; /* 48px */
98 --space-16: 4rem; /* 64px */
99 --space-20: 5rem; /* 80px */
100 --space-24: 6rem; /* 96px */
101
102 /* Typography tokens */
103 --font-family: 'Inter', system-ui, -apple-system, sans-serif;
104 --text-xs: 0.75rem; /* 12px */
105 --text-sm: 0.8125rem; /* 13px */
106 --text-base: 0.875rem; /* 14px */
107 --text-md: 0.9375rem; /* 15px */
108 --text-lg: 1rem; /* 16px */
109 --text-xl: 1.125rem; /* 18px */
110 --text-2xl: 1.25rem; /* 20px */
111 --text-3xl: 1.5rem; /* 24px */
112 --text-4xl: 1.875rem; /* 30px */
113 --text-5xl: 2.25rem; /* 36px */
114 --text-6xl: 3rem; /* 48px */
115 --text-7xl: 3.75rem; /* 60px */
116
117 /* Border radius tokens */
118 --radius-sm: 0.25rem;
119 --radius-md: 0.5rem;
120 --radius-lg: 0.75rem;
121 --radius-xl: 1rem;
122 --radius-full: 9999px;
123}
124
125/* Dark mode: only semantic tokens change */
126@media (prefers-color-scheme: dark) {
127 :root {
128 --color-bg-page: var(--neutral-900);
129 --color-bg-surface: var(--neutral-800);
130 --color-text: var(--neutral-50);
131 --color-text-muted: var(--neutral-400);
132 --color-border: var(--neutral-700);
133 --color-action: var(--blue-400, #60a5fa);
134 --color-action-hover: var(--blue-300, #93c5fd);
135 }
136}
137
138/* Character style utility classes (from XD library) */
139.text-display {
140 font-size: var(--text-7xl);
141 font-weight: 700;
142 line-height: 1.2;
143}
144.text-h1 {
145 font-size: var(--text-6xl);
146 font-weight: 700;
147 line-height: 1.25;
148}
149.text-h2 {
150 font-size: var(--text-5xl);
151 font-weight: 600;
152 line-height: 1.3;
153}
154.text-body-md {
155 font-size: var(--text-lg);
156 font-weight: 400;
157 line-height: 1.6;
158}
159.text-caption {
160 font-size: var(--text-xs);
161 font-weight: 400;
162 line-height: 1.4;
163}Every CSS variable in this system maps directly to a named asset in the XD Creative Cloud Library. Primitive tokens are the raw values (--blue-600: #2563eb). Semantic tokens reference primitives (--color-action: var(--blue-600)). Dark mode only reassigns semantic tokens — primitives stay the same. When the designer updates the library 'Action' color, you update one line in the semantic layer and the change propagates through every component. This is the same propagation model that XD uses internally when library assets are updated.
The next lesson covers XD Plugins for developers — the ecosystem of plugins that enhance XD for developer workflows including accessibility checking, token export, and Zeplin integration.
Your progress is saved in this browser, on this device only.