Getting your library into DSM

Copied URL to clipboard

Tutorial Breakdown

It’s easy to build your first DSM library. The first step is installing Craft, InVision’s suite of Sketch plugins. With Craft’s DSM Sketch plugin, it only takes a few simple clicks to quickly populate your DSM library with elements from your design files.

Colors, text and layer styles, icons, components—all of them defined, organized however you see fit, and ready to go right from the start. Plus, your libraries are as easy to maintain, update, and sync as they are to build. Welcome to your new design language!


It’s time to start building your first DSM Library.

First, you’ll want to download DSM Sketch plugin. It’s included as part of our entire suite of plugins for Sketch—called Craft.

Once you’ve installed Craft, you can head to Sketch, open the DSM plugin, log in to your account, and then you’ll be ready to select elements in your design files and add them to your library.

Colors, text styles, layer styles, icons, and components are each added to your library using the same Add button in the lower right hand corner of the panel—but each has its own unique way of keeping your workflow as streamlined as possible.

With Colors selected in the DSM panel—create a folder, and give it a name to give our first group of colors a place to live. With your new folder selected, click the Add button. This will display a dialogue box where you can click to choose which colors to add to your DSM library. Here, you’ll find the colors of any selected objects as well as any document colors and global colors saved within Sketch.

Text Styles and Layer Styles work almost exactly the same way, the only difference being that we don’t organize them into folders. With Text Styles or Layer Styles selected, clicking the Add button will display all of the respective styles saved within your document. You can manually select styles to add, or click Select All to bring everything into your DSM library at once.

Next, we have Icons, which have a very special trick up their sleeve. A vector layer, symbol, or group of vector layers added to a folder within Icons, will automatically be made available as a downloadable SVG on your web view. We’ll get deeper into this in a later video.

Finally we have Components. The Components folder, as well as any additional folders created below, give you free reign to organize and store any design elements in your document. You can organize your components any way you’d like. For example, using the atomic design methodology to organize your most basic elements, all the way up to more complex layouts.

When a component changes within your document and needs updating in your library, just re-add the component to the same folder, and DSM will give you the opportunity to update it and sync those changes to your team.

Once you’ve populated your library with content, yourself and your team will be able to start using it to design. Using icons and components is as easy as dragging and dropping them onto the design canvas. Symbols (and even nested symbols) will import into your document automatically.

And here’s a cool pro-tip—DSM will automatically identify and import child symbols of the same size and bring them in for use as nested symbol overrides. No need to worry about missing all of those alternate button states.

As for colors, text styles, and layer styles, just select a layer or several layers, and click the color or style to apply it. Voila! That easy.

Read More

Explore how DSM transforms the way design and development work together

Get Started