Adobe XD Extension for Visual Studio Code 1.1 Update
By: Demian Borba
Tags: Plugin, Adobe Xd, Vscode, Adobe Creative Cloud, Design Systems

Adobe XD Extension for Visual Studio Code 1.1 Update

Editor’s Note: Demian Borba is a Product Manager on the Adobe XD team responsible for its developer ecosystem — APIs and developer tools — more recently focused on the first Adobe XD extension for Visual Studio Code.

— Erin Finnegan, Community Engineer, Creative Cloud

This article is for developers and designers who use the Adobe XD extension for Visual Studio Code.

Being a developer at heart and inspired by the interesting fact that people prefer avoiding losses to acquiring equivalent gains, I decided to ask developers what is their biggest “fear of losing” concern:

The answer: Time. Developers hate losing time, always seeking opportunities for automation and efficiency. When answering the same questions again and again or repeating the same task, developers will probably start thinking about automation.

Focused on increasing developer velocity and improving designer-developer collaboration in the context of design systems, at MAX 2020, we announced a brand new extension for Visual Studio Code called “Adobe XD for Visual Studio Code.” The plugin allows developers to visually map design sources, created in Adobe XD and available in Creative Cloud Libraries, to platform-specific code using design tokens. Using the extension, DesignOps teams can create shareable Design System Packages (DSPs) that contain all the information developers need to consume while coding, including code snippets and documentation.

The main goal was to meet developers where they are, in this case, VS Code, the most widely used code editor in the world. We wanted to expose the information developers need when they need it, and prevent them from breaking their flow by having to jump from their code editor to multiple websites with documentation.

We are happy to share an update to the Adobe XD extension for Visual Studio Code (v1.1) focused on improving DSP consumption so that developers can save time when coding!

Update 1: Only see code snippets that matter to your project

When loading a new Design System Package (DSP), developers can filter out the code snippets that are not relevant to their current project.

For instance, if you are a developer building React Spectrum applications, you can load the Adobe Spectrum DSP, see all types of code snippets available in the package such as Spectrum CSS, React Spectrum, Spectrum Web Components, or Spectrum Android, and select only the snippets you need, in this case, React Spectrum.

Loading a new Design System Package (DSP) with multiple code snippet types

And then only React Spectrum code snippets will show up in the panel and in code completion:

Panel in VS Code showing only React Spectrum code snippets

Code completion in VS Code showing only React Spectrum code snippets

Update 2: Copy compiled design tokens to your project folders

When loading a new Design System Package (DSP) that contains design tokens compiled to multiple platforms, developers can copy the tokens to specific folders in their projects to accelerate consumption.