Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Adding and Applying Library Elements

With Design System Manager, you can add the following elements to your library:

  • Colors
  • Text Styles
  • Layer Styles 
  • Icons (Symbols)
  • 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 DSM library as well as how to apply these elements to your designs.

 

Adding and applying colors

To add a color to your design library:

  1. In Sketch, select the layer containing the color. Otherwise, you’ll be prompted to add a global color.
  2. Click the DSM icon (craft-dsm-icon.png), or use the shortcut Command + L.
  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.
add-color-dsm.gif

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 (above).

To apply a color to your design library:

  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 DSM icon (craft-dsm-icon.png), or use the shortcut Command + L.
  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.

apply-color-dsm.gif

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 design library, you’ll first need to define the text styles within Sketch. After defining the text styles:

  1. Click the DSM icon (craft-dsm-icon.png), or use the shortcut Command + L.
  2. Click Text Styles and, at the bottom right, click the + button.
  3. Click your desired text styles, and then click Add Text Styles.
add-text-style-dsm.gif

To apply a text style:

  1. Select your target text layer.
  2. Click the DSM icon (craft-dsm-icon.png), or use the shortcut Command + L.
  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.

apply-text-style.gif

Adding and placing icons

To add an icon to your library:

  1. Select the element in your Sketch file.
  2. Click the DSM icon (craft-dsm-icon.png), or use the shortcut Command + L.
  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 DSM library.

add-icon-dsm.gif

To place an icon from your library:

  1. Click the DSM icon (craft-dsm-icon.png), or use the shortcut Command + L.
  2. Click the Icons category.
  3. Drag the icon to your Sketch file.

Text and simple symbols are usually placed quickly, but images and complex symbols may take longer to place.

place-icon-dsm.gif

Adding and placing components

To add a component:

  1. Select the element in your Sketch file.
  2. Click the DSM icon (craft-dsm-icon.png), or use the shortcut Command + L.
  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.
add-component-dsm.gif

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 library as a component.

To place a component from your library:

  1. Click the DSM icon (craft-dsm-icon.png), or use the shortcut Command + L.
  2. Click the Components category.
  3. Drag the component to your Sketch file.
place-component-dsm.gif

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.


Learn something new

Getting Started Guides