×

Creating and Using Your DSM Library

Logging in to DSM

To create and access libraries from your personal InVision account, enter your InVision credentials in the DSM plugin modal in Sketch.

To access your Enterprise DSM libraries, click the Enterprise sign in link, enter your domain and then enter your credentials.

Screenshot_2018-01-05_16.40.19.png

Importing a Craft library

Rather than rebuilding an existing library, you can import a Craft Library.

To import a library:

  1. From the Sketch plugin, select the drop down menu at the top left.
  2. Hover over Import.
  3. Select your library.

If you’d like to import your library from Brand.ai, you’ll need to contact support.

 

Creating new libraries

You can create new libraries from the DSM web view.
  1. At the top right of your DSM web view, click Create New Library.
  2. Upload a thumbnail image, choose your library name, enter a description, then click Create.
 
Once created, you can continue to build your library with the Craft Manager plugin. 

 

Using your design library

Adding and applying a color

To add a color to your design library, you’ll first need to make sure to select the layer containing the color within Sketch, otherwise you’ll be prompted to add a global color. The target group must also be selected before clicking the + button on the bottom right of your DSM plugin. Color names, as all other element types, can have the same name.

Screenshot_2017-12-13_16.01.55.png

Screenshot_2017-12-13_16.03.04.png

To apply a color, select the layer that you’d like to change the color of. (Select the layer, rather than the group, otherwise 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, so the text will disappear into the background.) Then select the color from your DSM modal.

Screenshot_2017-12-13_16.08.35.png

Screenshot_2017-12-13_16.08.52.png

 

Adding and applying a text style

 To add a text style to your design library, you’ll first need to make sure the text style is defined within Sketch. Select your text style, then you will be offered all of the text styles defined in the page to add to DSM.

Screenshot_2017-12-13_16.15.08.png 

Screenshot_2017-12-13_16.15.22.png

To apply a text style, select your target text fields, then select the text style from your library to apply it to your fields.

Screenshot_2017-12-13_16.17.47.png

Screenshot_2017-12-13_16.20.27.png

 

Adding and placing an icon

To add an icon to your library, select the element and then click the + button within the Icons element collection. Selecting the root Icons group and clicking + will prompt for a new section within the Icons group.

Screenshot_2017-12-13_16.23.09.png

Screenshot_2017-12-13_16.23.39.png

To place an icon from your library, simply drag an icon element to the location that you wish to place it in the design. Note that text and simple symbols appear to be placed quickly, but images and complex symbols may take longer to place.

 

Adding and placing a component

As per the other elements, in order to add a component, select the root element name, then you will be prompted to create a group and then the element will be added to the new group. You can add a component to any selected group, and any layer, layer group, symbol, or group of symbols/layers/groups can be defined as component. 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.

Screenshot_2017-12-13_16.27.01.png

Screenshot_2017-12-13_16.27.37.png

To place a component from your library, simply drag a component to the location that you wish to place it in the design. When adding a component, you’ll also notice a green + icon when you drag it across to your design page. If the component is a symbol, then you can set overrides once you have placed the component, and those will apply to only that instance of the component. Overrides are maintained even if the component color, text, or styles in the DSM entry are changed.

 

Updating icons and components

In order to update an element, make the changes, then find the element in the DSM library and press the + button in the bottom right corner. You will then be presented with the option of updating the element or creating a new one. Updating the element replaces the existing element definition.

Once updated, you can quickly update all instances of your symbols across your artboards by selecting the download icon from the DSM plugin window. For non-symbol elements, you'll be able to drag and drop them from your DSM library to your file to make changes.

 

Removing/deleting items

To delete an item from DSM, go to your DSM plugin modal, right click the item, then click Delete.

Screenshot_2017-12-13_16.54.40.png