“,”resolvedBy”:”manual”}” data-block-type=”32″ id=”block-yui_3_17_2_1_1602888907948_21308″>

” data-provider-name=””>

Design systems are the link between Design and Development. To build a successful, tailored, and widely-adopted system, both designers and developers need to have a seat at the table. The new Adobe XD extension for Visual Studio Code allows developers to visually map design sources, created in XD and available in Creative Cloud Libraries, to platform-specific code using design tokens. DesignOps teams will be able to create shareable Design System Packages (DSPs) that contain all the information developers need to consume while coding, including code snippets and documentation.

Getting Started with Design Tokens

Understand what design tokens are, what they do, and how they get compiled to platform-specific code.

Consuming a Design System Package (DSP) in VS Code

Learn how to load DSPs to build apps and websites, accessing documentation, design tokens, and code snippets, without ever leaving Visual Studio Code.

Design System Packages (DSP) Importing Assets from Libraries

Create and manage your DSPs, visually. And if you import from Creative Cloud Libraries, you get colors, character styles, and XD components, in seconds.

Publicly available DSPs & Tools

Adobe Spectrum DSP

Adobe’s design system package, including React Spectrum code snippets.

Streamline Icons DSP

1,285 essential icons for interfaces.

Bootstrap 5 DSP

Components and code snippets for the latest Bootstrap library, created by Foxbox Digital.

Material Design DSP

Coming soon a DSP for Material Design, including tokens and components.

Dracula UI DSP

Beautiful DSPs from the popular dark-mode-first color theme.

DSP Reader for XD

External plugin to allow designers to load DSPs in Adobe XD.

Knapsack

SaaS platform for unifying and managing your system with open-source export to DSP.

Specify

Generate and distribute DSPs—automatically.