Designing products and digital experiences is a collaborative, cross-functional process that requires alignment and a shared language. Design systems are the shared language used across design and development teams to create a shared narrative around colours, character styles, components and more.
To craft a successful and well integrated design system, both design and development should be present; A system that addresses the needs of just one discipline is not complete. Adobe XD provides several powerful features for design teams to align, including Creative Cloud Library support. With the Adobe XD extension for Microsoft Visual Studio Code, teams can now integrate their design libraries with development tooling to create a complete design system.
The Adobe XD extension for Microsoft Visual Studio Code allows developers to visually map design resources like colours, character styles and components, created in Adobe XD, to code.
Using this extension, DesignOps teams will be able to create shareable Design System Packages (DSPs) that contain all the information developers need to consume while coding, including compiled design tokens, code snippets and design systems documentation.
At the root of the VSCode integration with Adobe XD is a Design Systems Package, otherwise known as a DSP, a new open-format folder-structure created to help teams share design system information across tools. A DSP is a folder made up of various subfolders of assets and JSON files with agnostic design tokens and component information that define a particular design system. Think of a DSP as PDF for design systems.
To accelerate the creation of a DSP, colours, character styles and Adobe XD Components can be imported from a Library using a public shared link. This allows development teams to easily ingest the defined styles created within Adobe XD and leverage that information as design tokens in the DSP.
Don’t know what design tokens are? Watch the 5-minute video below to understand what they are and what they do.
How to consume a Design System Package (DSP) in VSCode
Once a DSP is created, it can be consumed in VSCode to access documentation, design tokens and code snippets without leaving Visual Studio Code.
In this guide, learn how to consume the DSP in Visual Studio Code and start using the design system inline with auto-complete suggestions while writing code.
Importing Library assets into a Design Systems Package
In this guide learn how to import Library assets into a DSP and begin using them in code.
Access publicly available Design System Packages
Adobe has worked with industry partners to create a collection of DSPs for some of the most popular libraries and frameworks so your team can get started straightaway leveraging the power of the Visual Studio Code extension for Adobe XD.
Along with Adobe XD and the Microsoft Visual Studio Code extension, there are a number of tools available to make working with DSPs easier. From opening DSPs within Adobe XD, to DSP distribution tools, these tools will improve your DesignOps workflows.
Looking to load DSP files within Adobe XD? This plugin allows DSP files to be consumed and viewed within Adobe XD. As a designer, consume colour and typographic tokens, as well as inspect documentation for tokens and components.
Specify is the first Design Data Platform allowing you to create a continuous delivery workflow between various design system tools. Specify helps you to manage your distribution of DSPs over GitHub and leverage them in VSCode.