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
To create a component container:
- In Sketch, click the legacy DSM icon ().
- 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.
- Right-click and choose Create a Component.
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:
- In the legacy DSM Sketch plugin window, select the appropriate component.
- In the right panel, click the Open in web icon ().
- On the DSM documentation site, to the right of the Links tab, click Add tab.
- Under the Code section, click the appropriate framework (React, Vue, Angular, or HTML).
You can now begin connecting the Storybook story to its component container in DSM.