Build interactive prototypes in Adobe XD using Prototype mode — wire frames together, configure transition types and easing, set interaction triggers, and share prototype links for developer and stakeholder review.
Prototype mode transforms static artboards into clickable flows that simulate real application behavior. In Adobe XD, switching from Design mode to Prototype mode reveals wiring tools that let you connect artboards with interaction triggers and animated transitions.
As a developer reviewing XD prototypes, you will use prototype links to understand navigation flow, modal behavior, hover states, and micro-interactions before writing code. Understanding how prototypes are constructed helps you ask precise questions: what is the easing function? How long is the transition? Does the overlay close on outside click?
This lesson covers the complete XD prototype workflow — wiring frames, configuring transitions, and sharing review links.
Switching to Prototype mode (Shift+E or the Prototype tab at the top) changes the canvas into a wiring interface. Every artboard grows a blue circle (connection handle) on its right edge when hovered.
Building a connection:
Interaction panel anatomy:
Trigger (what the user does):
Action (what happens next):
Transition (animation between states):
Easing options (map directly to CSS cubic-bezier values):
1XD 'Ease In' → cubic-bezier(0.4, 0, 1, 1)
2XD 'Ease Out' → cubic-bezier(0, 0, 0.2, 1)
3XD 'Ease In Out' → cubic-bezier(0.4, 0, 0.2, 1)
4XD 'Linear' → linear
5XD 'Wind Up' → cubic-bezier(0.5, -0.5, 0.5, 1.5)Duration: set in milliseconds (0–4000ms). Maps directly to CSS transition-duration or animation duration in milliseconds.
Developer workflow when reading a wired prototype:
Auto-Animate is XD's most powerful prototype feature — it automatically interpolates visual properties between two artboards that share matching layer names, enabling micro-interaction prototyping without frame-by-frame animation.
How Auto-Animate works:
Properties that Auto-Animate can interpolate:
Developer translation workflow when seeing Auto-Animate:
1/* Example: Auto-Animate button Default → Hover, 200ms Ease Out */
2.btn-primary {
3 background-color: #2563eb; /* artboard A fill */
4 transform: scale(1);
5 box-shadow: none;
6
7 /* Transition the properties that change in artboard B */
8 transition:
9 background-color 200ms cubic-bezier(0, 0, 0.2, 1),
10 transform 200ms cubic-bezier(0, 0, 0.2, 1),
11 box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
12}
13
14.btn-primary:hover {
15 background-color: #1d4ed8; /* artboard B fill */
16 transform: scale(1.02); /* artboard B scale */
17 box-shadow: 0 4px 12px rgb(37 99 235 / 0.3); /* artboard B shadow */
18}Note on height/auto animations:
CSS cannot animate height: auto. When Auto-Animate shows an expanding element:
1/* Use grid-template-rows for smooth height animation */
2.expandable-content {
3 display: grid;
4 grid-template-rows: 0fr; /* artboard A: collapsed */
5 transition: grid-template-rows 300ms cubic-bezier(0, 0, 0.2, 1);
6}
7.expanded .expandable-content {
8 grid-template-rows: 1fr; /* artboard B: expanded */
9}
10.expandable-content > * { overflow: hidden; }The Overlay action type opens a second artboard on top of the current one — equivalent to a modal dialog, bottom sheet, or tooltip. Understanding XD overlay settings gives you exact implementation specs.
Overlay configuration options and their CSS equivalents:
Overlay position:
Close when clicking outside:
Background dim:
Scrollable overlay:
Complete modal implementation from XD overlay specs:
1/* Backdrop: position fixed, covers viewport, dims at 50% (from XD) */
2.modal-backdrop {
3 position: fixed;
4 inset: 0;
5 background-color: rgb(0 0 0 / 0.5); /* XD dim opacity: 0.5 */
6 display: grid;
7 place-items: center; /* XD position: Center */
8 z-index: 50;
9 animation: fade-in 200ms cubic-bezier(0, 0, 0.2, 1) both;
10}
11
12@keyframes fade-in {
13 from { opacity: 0; }
14 to { opacity: 1; }
15}
16
17/* Modal panel: size and radius from XD overlay artboard */
18.modal-panel {
19 background-color: #ffffff;
20 border-radius: 0.75rem; /* 12px from XD artboard corner radius */
21 width: 28rem; /* 448px from XD artboard width */
22 max-width: calc(100vw - 2rem);
23 max-height: calc(100vh - 4rem);
24 overflow-y: auto; /* XD scrollable overlay */
25 box-shadow: 0 20px 60px rgb(0 0 0 / 0.15);
26 animation: modal-in 200ms cubic-bezier(0, 0, 0.2, 1) both;
27}
28
29@keyframes modal-in {
30 from { opacity: 0; transform: scale(0.95) translateY(-8px); }
31 to { opacity: 1; transform: scale(1) translateY(0); }
32}JavaScript for backdrop close (when XD 'close on click outside' is enabled):
1backdropEl.addEventListener('click', (e) => {
2 if (e.target === backdropEl) closeModal();
3});
4document.addEventListener('keydown', (e) => {
5 if (e.key === 'Escape') closeModal();
6});XD provides two types of share links: prototype links for interactive review and development links for developer handoff. Both are accessible from the Share menu.
Creating a share link:
Development share link (most important for developers):
XD Inspect panel value extraction:
1Property in XD → CSS property
2Fill color → background-color or color (text)
3Opacity → opacity: 0.0–1.0
4Border/Stroke → border: {width}px solid {color}
5Corner Radius → border-radius: {value}px
6Drop Shadow → box-shadow: {x}px {y}px {blur}px {spread}px {color}
7Blur (Background) → backdrop-filter: blur({value}px)
8W × H → width / height in px (divide by 16 for rem)
9Font Family → font-family (add system fallback stack)
10Font Size → font-size (divide by 16 for rem)
11Font Weight → font-weight: 100–900
12Line Height → divide by font-size for unitless value
13Letter Spacing → letter-spacing in em or px
14Character Align → text-align: left | center | rightWorkflow for a developer receiving an XD development link:
Key developer question to ask the designer:
Reading an XD Auto-Animate prototype showing tab switching and implementing the sliding indicator in pure CSS.
1/* XD Prototype analysis:
2 - 3 artboards: Overview active, Curriculum active, Reviews active
3 - Interaction: Tap tab label → Navigate To next artboard
4 - Transition: Auto-Animate, 250ms, Ease Out
5 - Changed layers: 'Active Indicator' moves horizontally between tabs
6 - Changed properties: label color #6B7280 → #2563EB (active label)
7 - Tab content: opacity 0 → 1, 200ms delay after switch */
8
9/* CSS implementation matching the XD Auto-Animate prototype */
10
11.tabs {
12 display: flex;
13 flex-direction: column;
14 width: 100%;
15}
16
17/* Tab list: Auto Layout horizontal from XD, border-bottom */
18.tab-list {
19 display: flex;
20 flex-direction: row;
21 border-bottom: 1px solid #e5e7eb;
22 list-style: none;
23 padding: 0;
24 margin: 0;
25}
26
27/* Tab button: 14px 20px padding from XD artboard measurement */
28.tab-trigger {
29 display: inline-flex;
30 align-items: center;
31 padding: 0.875rem 1.25rem;
32 font-size: 0.9375rem; /* 15px */
33 font-weight: 500;
34 color: #6b7280; /* default label: #6B7280 from XD Inspect */
35 background: none;
36 border: none;
37 cursor: pointer;
38 position: relative;
39 transition: color 250ms cubic-bezier(0, 0, 0.2, 1); /* 250ms Ease Out from XD */
40}
41
42/* Active indicator: 2px blue underline (the Auto-Animated layer) */
43.tab-trigger::after {
44 content: '';
45 position: absolute;
46 bottom: -1px;
47 left: 0;
48 right: 0;
49 height: 2px;
50 background-color: #2563eb;
51 border-radius: 2px 2px 0 0;
52 opacity: 0;
53 transform: scaleX(0);
54 transform-origin: center;
55 transition:
56 opacity 250ms cubic-bezier(0, 0, 0.2, 1),
57 transform 250ms cubic-bezier(0, 0, 0.2, 1);
58}
59
60/* Active tab: color #2563EB + indicator visible */
61.tab-trigger[aria-selected="true"] {
62 color: #2563eb;
63 font-weight: 600;
64}
65
66.tab-trigger[aria-selected="true"]::after {
67 opacity: 1;
68 transform: scaleX(1);
69}
70
71/* Tab panels: fade in with 50ms delay */
72.tab-panel[data-active="true"] {
73 display: block;
74 animation: tab-fade-in 200ms 50ms cubic-bezier(0, 0, 0.2, 1) both;
75}
76
77.tab-panel:not([data-active="true"]) { display: none; }
78
79@keyframes tab-fade-in {
80 from { opacity: 0; transform: translateY(4px); }
81 to { opacity: 1; transform: translateY(0); }
82}The XD Auto-Animate shows the 'Active Indicator' layer sliding between tabs. In CSS, this is scaleX(0) → scaleX(1) on the active tab's ::after pseudo-element. The 250ms Ease Out easing from XD is cubic-bezier(0, 0, 0.2, 1). Tab label color transitions from #6B7280 to #2563EB — both values read directly from the XD Inspect panel on the Default and Active artboards. The tab content fade uses 200ms with 50ms delay to stagger after the indicator animation.
The next lesson covers Responsive Resize and Padding Groups — how XD's responsive constraints translate to CSS clamp(), min(), max(), and modern responsive layout techniques.
Your progress is saved in this browser, on this device only.