Creating a Design System

This guide references the new DSM. Built on customer feedback, the new DSM offers a completely redesigned experience. Learn more about why we made the new DSM.

Depending on your preferred workflow, you can create a new design system from either the DSM website or the Craft plugin in Sketch. It is possible to bring design files from Sketch and Figma into DSM.

Creating a design system via DSM on the web

To create a new design system via DSM on the web:

1. Sign in to DSM on the web.
2. Near the top right, click the Create button.
   If you’re a legacy DSM customer, and you want to create a legacy design system, toggle on Create a legacy library. If you're not sure which one to choose, check out this article: Should I Upgrade to the New DSM?
3. Enter a name for your design system.
4. Optionally, add a description and upload an image. This image will be used as the system’s icon in the design systems list.
5. Set the permissions to Only people invited can view or Anyone at your organization can view.
6. Click Create.

Creating a design system via Craft

To create a new design system via the Craft DSM tool in Sketch:

1. In the DSM Sketch plugin panel above the left-hand layers list, click the DSM icon ().
2. At the top right of the DSM window, click the settings icon ().
3. Click New Design System.
4. Enter a name. Optionally, add a description and upload an image.
5. Set the permissions to Only people invited can view or Anyone at your organization can view.
6. Click Create.

Uploading a Sketch file to DSM

To begin developing your design system, you’ll need to upload one or more Sketch files that contain all your assets.

To upload a Sketch file:

1. Open the Sketch file you want to use as the basis for your design system.
2. In the DSM Sketch plugin panel above the left-hand layers list, click the upload icon ().
   
   Depending on whether or not you've previously uploaded a document, the plugin panel will show either Upload document or Push changes.
3. In the DSM window, next to your preferred design system, click the upload icon (). If it's the first document added, you can alternatively click the Upload Sketch document button.
4. Click the upload button ().

Once the file is uploaded, it becomes a DSM managed library that can be added to Sketch.

To learn more about DSM managed libraries and how to add them to Sketch, check out this article: What Are DSM Managed Libraries?

Linking a Figma file to DSM

Before getting started

• The DSM Figma integration is only available for V7 customers.
• DSM can’t import design tokens from Figma libraries yet.

Link a Figma library

To link a Figma file to DSM:

1. Sign in to DSM on the web.
2. In the toolbar at the bottom, click Settings.
   

   

3. In the side panel, navigate to Libraries.
4. Click Connect New Library.
   

   

5. In the Connect a Library modal, click Link Figma Library.
   

   

6. Click Authorize to give InVision read-only access to your Figma file.
   

   

7. Enter your Figma credentials, then click Allow access to finish setting up the integration.
   

   

8. Copy a share link from Figma, paste it in the Add new Figma library modal, then click Add Library. The library might take a few moments to upload.
   

   

The Figma library will now be available in DSM.

Update a linked Figma library

1. Sign in to DSM on the web.
2. In the toolbar at the bottom, click Settings.
3. In the side panel, navigate to Libraries.
4. Click the Refresh () icon.
   

   

Disconnect a Figma library from DSM

1. Sign in to DSM on the web.
2. In the toolbar at the bottom, click Settings.
3. In the side panel, navigate to Libraries.
4. Click the Disconnect () icon.