XD Plugins for Developer Workflows

BEGINNER

Extend Adobe XD with plugins that improve developer handoff, accessibility testing, token export, and content generation — and understand how each plugin output maps to implementation tasks in your codebase.

90 min

Tutorial 10 of 18

Learning Objectives

Install XD plugins from the Plugin Manager and configure them for a developer-focused workflow
Use the Stark plugin to check color contrast ratios and vision simulation directly inside XD
Export design tokens to JSON format using the Design Tokens plugin and import them into a CSS custom property system
Use the Zeplin plugin to publish artboards to Zeplin for enhanced developer handoff with measurements and assets
Identify which XD plugins have been discontinued due to XD's end-of-sale status and plan alternative workflows

Introduction

Adobe XD's Plugin Manager provides access to hundreds of third-party plugins that extend its capability for design and developer workflows. While XD was discontinued for new sales in 2023, many teams still use existing XD licenses and the plugin ecosystem remains functional.

For developers, the most valuable XD plugins are those that improve handoff quality — accessibility checking, token export, measurement overlays, and integration with developer-facing tools like Zeplin. Understanding which plugins exist and what they output helps you extract structured data from XD files rather than manually reading values from the Inspect panel.

This lesson covers the most important XD plugins for developer workflows, their outputs, and how to use that output in your codebase.

Plugin Manager: Installing and Managing XD Plugins

Accessing the Plugin Manager:

Plugins menu → Discover Plugins (opens the Plugin Manager panel)
Search by name or browse by category (Developer Tools, Accessibility, Content, etc.)
Click Install on any plugin to add it
Installed plugins appear in Plugins menu and sometimes as right-panel tabs

Plugin categories relevant to developers:

Accessibility plugins: Stark, Able, Color Contrast Analyzer

Check WCAG contrast ratios before handoff
Simulate color blindness and low vision
Identify touch target sizing issues

Content generation plugins: Lorem Ipsum, Content Generator, Unsplash

Fill placeholders with realistic content
Replace lorum ipsum with real text for better design review

Export and handoff plugins: Zeplin, Avocode, Design Tokens

Publish artboards to specialized handoff tools
Export tokens to JSON, CSS, or SCSS

Measurement plugins: Markly, Overlay

Add measurement redlines to artboards
Generate spec sheets for offline review

UI kit plugins: iOS UI Kit, Material Design, and community kits

Import platform-specific design patterns

Running a plugin:

Select elements you want to analyze or export
Plugins menu → click the plugin name
Configure options in the plugin panel
Click Run or Apply

Plugin results:

Some plugins add annotations to the canvas (measurement overlays)
Some open panels with data tables (contrast results)
Some export files to your filesystem (JSON tokens, SVG assets)
Some open browser windows (Zeplin, Avocode)

Stark: Accessibility Checking Inside XD

Stark is a comprehensive accessibility plugin for XD (and Figma) that checks color contrast, simulates color blindness, and validates touch target sizes.

Installing Stark:

Plugin Manager → search 'Stark'
Install → requires a Stark account (free tier available)

Contrast checking workflow:

Select a text element and its background element
Plugins → Stark → Contrast Checker
Stark shows the contrast ratio and WCAG AA/AAA pass/fail status
Green = pass, Red = fail
If failing, Stark suggests the nearest passing color

WCAG contrast requirements (for developer reference):

Text

1Text on background (WCAG AA):
2  Normal text (< 18px regular or < 14px bold): minimum 4.5:1
3  Large text (≥ 18px regular or ≥ 14px bold): minimum 3:1
4
5Text on background (WCAG AAA):
6  Normal text: minimum 7:1
7  Large text: minimum 4.5:1
8
9UI components (buttons, inputs, focus rings):
10  Minimum 3:1 against adjacent colors (WCAG AA)

Color blindness simulation:

Select any artboard or frame
Stark → Vision Simulator
Choose simulation type: Protanopia (no red), Deuteranopia (no green), Tritanopia (no blue), Achromatopsia (no color)
Stark renders a simulation overlay on the canvas

What to check in the simulation:

Can you still read all text?
Are status colors (red = error, green = success) distinguishable without relying on color alone?
Do links look distinct from body text?

Developer action from Stark failures:

CSS

1/* BEFORE: error shown by red color only (fails for color-blind users) */
2.input-error {
3  border-color: #dc2626;
4  /* NO icon, no text label */
5}
6
7/* AFTER: error shown by color + icon + text (accessible) */
8.input-error {
9  border-color: #dc2626;
10}
11.input-error-wrapper::before {
12  content: '⚠';
13  color: #dc2626;
14  margin-right: 0.25rem;
15}
16/* Plus: aria-describedby pointing to error message text */

Touch target checker:

Stark highlights elements smaller than 44×44px (Apple) or 48×48dp (Google Material). As a developer, implement:

CSS

1/* Minimum touch target without affecting visual size */
2.icon-button {
3  position: relative;
4}
5.icon-button::before {
6  content: '';
7  position: absolute;
8  inset: -12px;  /* extends clickable area 12px in all directions */
9  /* Visual size: 24px icon → touch target: 48px */
10}

Design Tokens Plugin: Exporting Tokens to JSON

The Design Tokens plugin (by Lukas Oppermann, or the community plugin 'Tokens Studio for XD') exports all named colors, character styles, and spacing values from XD to a structured JSON file that can be imported into your CSS or design token pipeline.

Installing and running Design Tokens:

Plugin Manager → search 'Design Tokens' → Install
Select the artboard or component library frames
Plugins → Design Tokens → Export Tokens
Choose output format: JSON, SCSS variables, or CSS custom properties
Save to your project directory

Sample exported JSON output:

JSON

1{
2  "color": {
3    "primary": {
4      "600": {
5        "value": "#2563eb",
6        "type": "color",
7        "description": "Primary action color"
8      },
9      "700": {
10        "value": "#1d4ed8",
11        "type": "color"
12      }
13    },
14    "neutral": {
15      "900": { "value": "#111827", "type": "color" },
16      "200": { "value": "#e5e7eb", "type": "color" }
17    }
18  },
19  "spacing": {
20    "4":  { "value": "4px",  "type": "spacing" },
21    "8":  { "value": "8px",  "type": "spacing" },
22    "16": { "value": "16px", "type": "spacing" },
23    "24": { "value": "24px", "type": "spacing" }
24  },
25  "typography": {
26    "heading": {
27      "fontFamily": { "value": "Inter", "type": "fontFamilies" },
28      "fontSize":   { "value": "36px",  "type": "fontSizes" },
29      "fontWeight": { "value": "600",   "type": "fontWeights" },
30      "lineHeight": { "value": "1.3",   "type": "lineHeights" }
31    }
32  }
33}

Transforming JSON tokens to CSS custom properties using Style Dictionary:

Bash

1# Install Style Dictionary
2npm install -D style-dictionary

JavaScript

1// style-dictionary.config.js
2module.exports = {
3  source: ['tokens/xd-export.json'],
4  platforms: {
5    css: {
6      transformGroup: 'css',
7      prefix: 'db',  /* db = DevBootstrap */
8      buildPath: 'src/styles/',
9      files: [{
10        destination: 'tokens.css',
11        format: 'css/variables',
12        options: { outputReferences: true }
13      }]
14    }
15  }
16};

Generated CSS output:

CSS

1:root {
2  --db-color-primary-600: #2563eb;
3  --db-color-primary-700: #1d4ed8;
4  --db-color-neutral-900: #111827;
5  --db-spacing-4: 0.25rem;
6  --db-spacing-8: 0.5rem;
7  --db-spacing-16: 1rem;
8  --db-typography-heading-font-family: Inter;
9  --db-typography-heading-font-size: 2.25rem;
10}

XD Discontinuation: Migration and Alternative Tools

Adobe discontinued new XD licenses in January 2023. Existing subscribers can continue using XD, but no new features are being developed. If your team uses XD files, you need a plan for reading those files and eventually migrating to Figma or Penpot.

Current state (2026):

Existing XD subscribers can still use XD and its plugin ecosystem
Creative Cloud storage for XD files continues to work
XD Develop links and share links remain functional for existing files
New team members cannot purchase XD licenses — they use alternative tools

Migrating XD files to Figma:

In XD: File → Export All Artboards as SVG (partial migration)
Use the 'XD to Figma' community plugin in Figma (File → Plugins → XD to Figma)
Open Figma → drag-and-drop the XD .xdc file (Figma 2024+ supports XD import)
Review the imported file — complex interactions and prototypes may need manual re-linking
Republish components to Figma library to restore design system functionality

Migration checklist:

[ ] Export all color styles as JSON tokens
[ ] Export all character styles
[ ] Document all prototype interactions before migrating (they may not transfer)
[ ] Re-link components after import
[ ] Verify all artboard names match the new Figma page structure
[ ] Test all share links after migration to confirm they work

Alternative tools for new projects (2026):

Text

1Figma          — Industry standard, best developer handoff, active development
2Penpot         — Open-source alternative, SVG-based, self-hostable
3Sketch         — macOS only, strong plugin ecosystem, active development
4Affinity Designer — One-time license, no subscription, good for static designs

For developer-only workflows (reading specs, not designing):

Figma Viewer access is free — developers can read any Figma file at no cost
Use Figma's Dev Mode (Ctrl+Shift+D) for the same inspection workflow as XD
Existing XD development links continue working for archived projects

Accessibility Audit with Stark and Fixing CSS Contrast Issues

Running a Stark contrast audit on an XD mockup and implementing the accessibility fixes in CSS without changing the brand palette.

Example CodeYAML

1/*
2Stark audit results for DevBootstrap course card:
3
4FAIL: Course category label
5  Text: #6B7280 (neutral-500) on background #FFFFFF
6  Contrast ratio: 3.9:1 (needs 4.5:1 for normal text at 13px/500)
7  Fix: darken text to #4B5563 (neutral-600) → 5.9:1 ✓
8
9FAIL: Disabled button
10  Text: #9CA3AF (neutral-400) on background #F3F4F6 (neutral-100)
11  Contrast ratio: 2.1:1
12  Fix: use #6B7280 (neutral-500) on #F3F4F6 → 3.5:1 for large/bold disabled text ✓
13
14PASS: Body text
15  Text: #374151 (neutral-700) on background #FFFFFF
16  Contrast ratio: 10.5:1 ✓
17
18PASS: Primary button
19  Text: #FFFFFF on background #2563EB (blue-600)
20  Contrast ratio: 4.8:1 ✓ (large text at 15px/600)
21
22FAIL: Focus ring on white background
23  Ring: #93C5FD (blue-300) on #FFFFFF
24  Contrast ratio: 2.2:1 (UI component needs 3:1)
25  Fix: use #2563EB (blue-600) for focus ring → 4.8:1 ✓
26*/
27
28/* CSS fixes based on Stark audit */
29
30/* FIX 1: Course category label — darken from neutral-500 to neutral-600 */
31.course-card__category {
32  font-size: 0.8125rem;   /* 13px */
33  font-weight: 500;
34  color: #4b5563;         /* FIXED: was #6b7280 (3.9:1) → now #4b5563 (5.9:1) */
35  text-transform: uppercase;
36  letter-spacing: 0.05em;
37}
38
39/* FIX 2: Disabled button — visible text while still looking disabled */
40.btn-primary:disabled,
41.btn-primary[aria-disabled="true"] {
42  background-color: #f3f4f6;  /* neutral-100 */
43  color: #6b7280;              /* FIXED: was #9ca3af (2.1:1) → now #6b7280 (3.5:1) */
44  /* WCAG allows lower ratio (3:1) for disabled controls, but 3.5:1 is better */
45  cursor: not-allowed;
46  border: 1px solid #e5e7eb;  /* visible boundary for the disabled state */
47}
48
49/* FIX 3: Focus ring — use full blue-600 instead of light blue-300 */
50:focus-visible {
51  outline: 2px solid #2563eb;  /* FIXED: was #93c5fd (2.2:1) → now #2563eb (4.8:1) */
52  outline-offset: 2px;
53}
54
55/* Additional: error state without relying on color alone */
56.input-field[aria-invalid="true"] {
57  border-color: #dc2626;  /* red for color-sighted users */
58}
59
60/* Add icon + text error message — not color alone */
61.input-error-message {
62  display: flex;
63  align-items: center;
64  gap: 0.25rem;
65  font-size: 0.8125rem;
66  color: #dc2626;
67}
68
69.input-error-message::before {
70  content: '!';
71  display: inline-flex;
72  align-items: center;
73  justify-content: center;
74  width: 1rem;
75  height: 1rem;
76  background-color: #dc2626;
77  color: white;
78  border-radius: 50%;
79  font-size: 0.625rem;
80  font-weight: 700;
81  flex-shrink: 0;
82}
83
84/* Touch target fix: small icon buttons get a larger hit area */
85.icon-btn {
86  position: relative;
87  width: 1.5rem;   /* 24px visual size */
88  height: 1.5rem;
89  display: flex;
90  align-items: center;
91  justify-content: center;
92  background: none;
93  border: none;
94  cursor: pointer;
95  color: inherit;
96  border-radius: 50%;
97  transition: background-color 150ms ease;
98}
99
100/* Extend tap area to 44px minimum (Apple HIG) */
101.icon-btn::before {
102  content: '';
103  position: absolute;
104  inset: -0.625rem;  /* -10px on each side: 24 + 20 = 44px tap target */
105}
106
107.icon-btn:hover { background-color: var(--color-neutral-100, #f3f4f6); }

How It Works

All three Stark failures are fixed by adjusting color values to pass WCAG contrast ratios — none of these fixes require changing the brand palette, only choosing a slightly darker shade from the existing palette. The error state fix adds an icon using ::before pseudo-element so that error information is conveyed by shape (circle with !) plus color, not color alone — this ensures color-blind users can identify errors. The icon button touch target fix uses ::before with negative inset to create a 44px hit area without making the button visually larger.

Key Takeaways

The Stark plugin checks WCAG contrast ratios inside XD — normal text needs 4.5:1 for AA, large text needs 3:1, and UI components like buttons and focus rings need 3:1 against adjacent colors
The Design Tokens plugin exports XD colors, character styles, and spacing to JSON — use Style Dictionary to transform this JSON into CSS custom properties, SCSS variables, or JavaScript token objects
Accessibility failures found by Stark (low contrast, missing focus rings, touch target sizing) map directly to specific CSS fixes — never convey information by color alone, always add icon or text supplements
XD was discontinued for new sales in 2023 — use existing files with the Developer link for handoff, plan migration to Figma using the XD import feature, and export tokens to JSON before migrating
The Zeplin XD plugin publishes artboards to Zeplin for enhanced developer handoff — Zeplin adds measurement redlines, asset downloads, and comment threads beyond what XD's built-in share links provide

What's Next?

The next lesson covers Asset Export in XD — how to export SVG icons, PNG images, and PDF assets at the correct resolution for production use, and how to optimize them for web delivery.

Your progress is saved in this browser, on this device only.

Previous: Creative Cloud Libraries and XD Design Systems

Next: Asset Export in XD: SVG, PNG, and PDF for Production

UI/UX Design