Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe XD

Better Design Systems with Adobe XD for Visual Studio Code

by
Difficulty:BeginnerLength:ShortLanguages:

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.

Design System Packages or DSPs

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.

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

How to Work with VS Code

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):

adobe xd document

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

document assets

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:

browse

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

get library link adobe xd

Switch to VS Code

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

extensions panel

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:

xd 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.

success

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 Design Tokens such as our colors and character styles, and Components like our button and card.

xd panel dsp

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:

edit buton

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!

install style dictionary

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:

auto suggest trigger

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+.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.