Better Design Systems with Adobe XD for Visual Studio Code | Envato Tuts+ (2024)

In this quick tip, I’m going to show you how to create Design System Packages (or DSPs) with Adobe XD and a new extension for Visual Studio Code.

Adobe XD New Features

To mark its third birthday at Adobe MAX 2020, Adobe XD received a bunch of new features including a new form of integration for Visual Studio Code (or VS Code). This integration allows designers and developers to create and maintain design systems.

• Learn all about Design Systems in our complete guide.

Here’s a complete video version of this Adobe XD tutorial. Don’t forget to subscribe to ourEnvato Tuts+ YouTube channelfor tutorials, free courses, and more!

How to Work with VSCode

Let’s see how this works. We begin with an Adobe XD document (this here is an example I used in a tutorial about 3D Transforms in Adobe XD):

Under the Libraries tab I can then choose Document Assets which in this case gives me something like this:

In here you’ll see I’ve defined four colors (which all have a name), some character styles, and two components (the card and the button).

Publish as a Library

I’m going to click the button up top, to the left, which says Publish as a Library when hovered over. In the pop up I can then hit the Publish button next to the current file (this may take a moment).

Once done publishing I can hit Browse:

Then in the following screen I can select the library I just published, then click Get Linkwhich I can copy in preparation for the next step.

Switch to VS Code

Once in Visual Studio Code open up the Extensions panel and search for Adobe XD:

The very first extension is the one we’re looking for, so install it.

Once installed you’ll notice a small Adobe XD button in the bottom right of your application window. Click it to open the following panel:

From here you can either load a package or create one. We’re going to create one, so click Create package.Then:

1. Give the package a name
2. Select a file location
3. Choose code languages you want to develop this package in (CSS, perhaps SCSS, and JavaScript in our case)

At this point you’ll be asked to connect VS Code to Creative Cloud so you’ll need to authenticate using an Adobe ID. Alternatively you can skip this step and enter the CC Library link we just copied instead.

The success screen tells us we’ve imported our library into a new Design System Package (or DSP).

Sorry, What is a Design System Package?

I’m glad you asked. DSP is a new open format folder structure created specifically by Adobe and friends so that teams can share design system information across various tools. You can read more from the creators on GitHub, but needless to say it’s the ideal way of working between a design tool like Adobe XD and a development environment like Visual Studio Code.

How to Work With Your DSP

To work with your new design system package begin by creating a new HTML file. Then, hit the Adobe XD button again to open up the Adobe XD panel. From there, you can Load package and select the package we just successfully created.

So we now have our blank HTML file to the left, and our DSP to the right. You’ll see we have access to DesignTokens such as our colors and character styles, and Components like our button and card.

Using our button, for example, we can then click Edit and build a code snippet for it. We add a trigger like 3d-button, select a code language (HTML for this), then include a code snippet which will be used:

Finish the editing, then you’ll be told you need to install one more thing (Style Dictionary) in order for VS Code to do the compiling. We’d better do as we’re told I think!

With that done, our project will compile and you’ll notice new files in the folder you original selected for the DSP; a CSS file, a JavaScript file, and an SCSS file (the three languages we selected if you recall). Each one at this stage will contain a bunch of variables for the colors and styles we need.

Using Our Button Component

We can now start writing markup in our HTML file. If I begin typing the trigger we designated (xd_3d-button) you’ll see the autosuggestion come up:

Hitting enter then inserts the code snippet we wrote.

Conclusion

And that’s a quick introduction to working with Adobe XD and Visual Studio Code on design systems! For more inspiration you can find publicly available DSP resources here, and don’t forget you can learn plenty more about Adobe XD right here at Tuts+.

• Introduction to Design SystemsAdi Purdila21 Apr 2020
• What is Adobe XD?Adi Purdila02 Jan 2024