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 web view will present the design and code version side by side.
Creating a component container in Sketch
To create a component container:
In Sketch, open the DSM Sketch tool.
If you already have symbols uploaded to your DSM library, 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 DSM library, you can create the component container first. In the DSM Sketch tool, 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 the code tab in the DSM web view
After creating a component in Sketch, you will need to add a code tab to the component in the DSM web view.
To add the code tab:
In the Sketch DSM tool, select the appropriate component
In the right panel, click the Open in web icon ().
In the DSM web view, to the right of the Links tab, click Add Code.
Click the appropriate framework (React, Vue, Angular, or HTML).
You can now begin connecting the Storybook story to its component container in DSM.