Building and using a legacy DSM design system

You can add the following elements to your legacy DSM design system:

• Colors
• Text Styles
• Layer Styles 
• Icons
• Components 

Check out the best practices video below, and then read the rest of this article to learn how to add each of these elements to your legacy design system, as well as how to apply these elements to your designs.

Adding and applying colors

To add a color to your legacy design system:

1. In Sketch, select the layer containing the color. Otherwise, you’ll be prompted to add a global color.
2. Click the legacy DSM icon ().
3. Click the Colors category or choose an existing subfolder.
   You can create a new folder by clicking Add Folder.
4. At the bottom right of the DSM window, click the + button.
5. Click the color you want to add, and then click Add Colors.

To add all colors in your document to DSM, first select all layers in your document using the shortcut Command + A. After doing so, continue to follow the steps for adding a color.

To apply a color to your legacy design system:

1. Select the desired layer in your design file.
   If you select a group instead, you may find that the color is applied to multiple layers. For example, selecting a group that includes a text layer will also change the text color.
2. Click the legacy DSM icon ().
3. Click the desired color swatch.

The color should now be applied to that layer. Alternatively, you can drag and drop the color onto your artboard, creating a rectangle with that same color fill.

If you're trying to apply a color to a text layer, keep these constraints in mind:

• You can only apply the color if the text layer is selected. If any text inside the layer is selected, you cannot apply the color.
• If a text layer has a fill, it will hide the effect of changing the text color. This is because Sketch draws the fill on top of the text color.

Adding and applying text styles

To add a text style to your legacy design system, you’ll first need to define the text styles within Sketch. After defining the text styles:

1. Click the legacy DSM icon ().
2. Click Text Styles and, at the bottom right, click the + button.
3. Click your desired text styles, and then click Add Text Styles.

To apply a text style:

1. Select your target text layer.
2. Click the legacy DSM icon ().
3. Click Text Styles, and then click the desired text style.

The style should now be applied to that layer. Alternatively, you can drag and drop a desired text style into your document, which will create a text layer with those same styles applied.

Adding and applying layer styles

To add layer styles to your legacy design system:

1. Click the legacy DSM icon ().
2. Click the Layer Styles category and, if needed, click an existing subfolder.
   You can create a new folder by clicking Add Folder.
3. At the bottom right of the DSM modal, click the + button.
4. Click the layer styles you want to add. You can also select all the layers at once by checking the box Select All.
5. Click Add Shared Styles.

The layer styles should now be added to your legacy design system.

To apply a layer style from legacy design system:

1. Select the layer you want to apply the style to.
2. Click the legacy DSM icon ().
3. Select the Layer Styles category, and then click a specific layer style. 

That style should now be applied to the layer.

Adding and placing icons

To add an icon to your legacy design system:

1. Select the element in your Sketch file.
2. Click the legacy DSM icon ().
3. Click the Icons category or choose an existing subfolder.
   You can create a new folder by clicking Add Folder.
4. At the bottom right, click the + button.

The icon should now exist in your legacy design system.

To place an icon from your legacy design system:

1. Click the legacy DSM icon ().
2. Click the Icons category.
3. Drag the icon to your Sketch file.

Adding and placing components

To add a component:

1. Select the element in your Sketch file.
2. Click the legacy DSM icon ().
3. Click the Components category or choose an existing subfolder.
   
   You can create a new folder by clicking Add Folder.
4. At the bottom right, click the + button.

You can add a component to any selected group. A component can be defined as any:

• Layer
• Symbol
• Group of symbols, layers, or groups

The addition of a symbol is recursive. DSM will add all nested symbols within a symbol that’s added to the design system as a component.

To place a component from your legacy design system:

1. Click the legacy DSM icon ().
2. Click the Components category.
3. Drag the component to your Sketch file.

If the component is a symbol, then you can set overrides once you have placed the component. Those overrides will only apply to that instance of the component. Overrides are maintained even if the component color, text, or styles in the DSM entry are changed.