Creating component containers for legacy DSM
  • 10 Jan 2023
  • 1 Minute to read
  • Dark
    Light

Creating component containers for legacy DSM

  • Dark
    Light

Article Summary

This article references how to create component containers for a legacy DSM design system. If you're using a new DSM design system, check out this article instead.

DSM component containers help you group multiple component implementations across design and development. This allows you to create centralized component documentation and ensure different implementations are in sync.

For example, you can use a component container to group multiple design assets—i.e., Sketch symbols—that represent component variants. You can also add a React coded component to the same component container, and the DSM documentation site will present the design and code side by side.

Creating a component container in Sketch

Warning:

Sketch 85 is the last version of Sketch supported by the legacy DSM plugin.

To create a component container:

  1. In Sketch, click the legacy DSM icon (craft-dsm-icon.png).
  2. If you already have symbols uploaded to your legacy DSM design system, select the symbols you’d like to include in the new component.

    To select multiple symbols, use Command + click.

  3. Right-click and choose Create a Component.

dsm-create-component-container-in-sketch__1_.gif

Tip:

If you haven't already uploaded symbols to your design system, you can create the component container first. In the legacy DSM Sketch plugin, open a folder within the Components section and click Add Component.

You can also rename a component container by right-clicking and choosing Rename.

There are typically multiple design instances of the same coded component in a UI toolkit, representing different component variants (for example, a button might have a hover state and a click state). This method enables you to easily group multiple instances in one component.

Adding a code tab on the DSM documentation site

After creating a component in Sketch, you will need to add a code tab to the component on the DSM documentation site.

To add a code tab:

  1. In the legacy DSM Sketch plugin window, select the appropriate component.
  2. In the right panel, click the Open in web icon (open-in-web-icon__1_.png).
    dsm-open-component-in-web__1_.png
  3. On the DSM documentation site, to the right of the Links tab, click Add tab.
  4. Under the Code section, click the appropriate framework (React, Vue, Angular, or HTML).

dsm-add-code-tab-for-live-component__1_.gif

You can now begin connecting the Storybook story to its component container in DSM.


Was this article helpful?