Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


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 DSM Sketch plugin.

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.
This GIF demonstrates the steps for  creating a new design system via DSM on the web.

Creating a design system via Sketch

To create a new design system via the DSM Sketch plugin:

  1. In the DSM Sketch plugin panel above the left-hand layers list, click the DSM icon (This image is the DSM icon that users click in Sketch to open the DSM plugin.).
  2. At the top right of the DSM window, click the settings icon (This image is the Settings icon that users click in the DSM plugin modal to adjust settings.).
  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.
This GIF demonstrates the steps for creating a new design system via the DSM plugin in Sketch.

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 get the most out of your DSM experience, we recommend applying a certain structure to your Sketch file. For more information on how to best structure a Sketch file for uploading to DSM, check out this article: Best practices for using Sketch with DSM

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 (This image is the Upload icon that users click, in the DSM Sketch plugin panel, to begin uploading a Sketch file to DSM on the web.).
    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 (This image is the Upload icon that users click, in the DSM window, to upload a specific design system.). If it's the first document added, you can alternatively click the Upload Sketch document button.
  4. Click the upload button (This image is the Upload button that users click to confirm that the Sketch file should be uploaded to DSM.).
This GIF demonstrates the steps for uploading a Sketch file to DSM.

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

This image shows the button, labeled Add All to Sketch, that users click to add a managed DSM library 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?


Learn something new

Getting Started Guides