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.
SaaS platform for unifying and managing your system with open-source export to DSP.
Generate and distribute DSPs—automatically.