Manually updating to the new DSM
  • 27 Jan 2023
  • 2 Minutes to read
  • Dark
    Light

Manually updating to the new DSM

  • Dark
    Light

Article Summary

Built on feedback from DSM customers, the new DSM offers a completely redesigned experience. As part of the upgraded experience, you can import your legacy DSM design systems into the new DSM.

We recommend exploring the new DSM now. Please note that the new DSM includes a new design tokens management experience that’s different from the one in legacy. You can read about how to take advantage of the new workflow it enables here: Managing Design Tokens in DSM

Tip: If you decide to upgrade, you won’t lose access to legacy DSM. For the time being, your legacy design systems will continue to function as they did previously. When you import legacy DSM into the new DSM, you are copying data—not overwriting existing data.

Preparing to import

Before importing from legacy DSM, take these steps to ensure a smooth process:

  • Use Sketch master files alongside your DSM design system, and keep them updated (i.e., use the Sync to document button if changes are made outside of the master files). If you don't have a master Sketch file, DSM can generate one for you automatically
  • Convert all layer groups into symbols. Sketch libraries and the new DSM will only work with symbols, text styles, and layer styles.
  • To add icons to your design system, save them as symbols and mark them for SVG export in your Sketch file.
  • Create layer styles that use the colors you want in your DSM design system, and upload them to the legacy design system. This is necessary because, in the new DSM, colors are pulled from layer styles only.
  • In the legacy DSM plugin, organize Sketch symbols into component containers. To ensure compatibility with live components, place related symbols (like states and variants) in a single component container. If a symbol isn't in a component container, it won't be imported to DSM.

Manually importing

While you can automatically import a legacy design system to the new DSM, you can also manually import. This could give you the opportunity to completely restructure your design system if needed.

If you’ve made the recommended preparations, take the following steps to manually import:

  1. Create a new DSM design system.
  2. Upload your Sketch files via the new DSM plugin. As part of this process, consider following our best practices for using Sketch with DSM.
  3. Create your documentation structure on the web, taking into consideration of how you want your design system to be presented and consumed by cross-functional users.
  4. Embed design assets into your DSM documentation site. These assets can come from uploaded Sketch documents, Storybook projects, and other third-party component libraries.
  5. Copy and paste rich text, documentation, images, and external links from your legacy design system into the new DSM design system.
  6. Add the new DSM design system component IDs to duplicated Storybook entries and republish. (You can keep the IDs from the original entries.)
  7. Invite teammates to your new design system and configure each person’s permissions.
  8. Share your new design system more broadly by configuring privacy settings for that specific design system.

Automatically importing your existing design systems

To learn how to automatically import your legacy design systems to the new DSM, continue to the next article: Importing legacy DSM to the new DSM


Was this article helpful?