Artwork by Matt Rae
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 colors, 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.
Learn more about the end to end experience of creating a design system in Adobe XD with the VSCode Extension.
What is the VSCode Extension?
The Adobe XD extension for Microsoft Visual Studio Code allows developers to visually map design resources like colors, 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.
Install the Adobe XD extension for Microsoft Visual Studio Code.
Getting started with the VSCode extension
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, colors, 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
Populating a DSP can be accelerated by importing assets from an existing Library, created in Adobe XD. Colors, character styles and Adobe XD components can be imported into the DSP within seconds, and used to create documentation, and compile tokens to platform-specific code including CSS, SCSS, JavaScript, Swift, Android, Objective-C and Flutter, powered by Style Dictionary.
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 right away leveraging the power of the Visual Studio Code extension for Adobe XD.
Tools for working with Design System Packages
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 color and typographic tokens, as well as inspect documentation for tokens and components.
Knapsack is a SaaS platform for unifying and managing your design system with open-source export to the DSP format.
Specify is the first Design Data Platform allowing you to create a continuous delivery workflow between various design system tools. Specify helps you manage your distribution of DSPs over GitHub, and leverage them in VSCode.
Arcade makes it easy to export a tokens.json file containing your design systems information for import into a DSP file.
Additional resources
Pro-tips
If you’re already making use of the Visual Studio Code extension, and want to learn how to power up your workflow, this collection of pro tips will take your DSP and VSCode skills to the next level.
Discover pro-tips for working with the VSCode extension for Adobe XD
VSCode extension crash course from DesignCourse
Join DesignCourse for an in-depth overview of working with the Adobe XD extension for VS Code, from installing the extension to importing assets into the DSP and leveraging it in VSCode.
