×

Creating and Using Your DSM Library

Signing in to DSM

To create and access libraries from your personal InVision account:

  1. Click the DSM icon in your Sketch file.
  2. Click Sign in to InVision. The Craft Manager dialog will open and prompt you to sign in with your InVision credentials.
    • If you have basic authentication enabled, you can enter your username and password just like you would on the web. Enter your email address and password, and then click Sign In.
    • If your team has SSO enabled, select Or sign in with Enterprise to be prompted to enter your team domain. Upon entering your team domain, you will taken to your SSO provider of choice.
      Alternatively, sign in to an Enterprise account by clicking Enterprise to the left of the Sign In button, enter your domain name, and then sign in with your credentials.
    • If you’re only a part of one team, you can continue working in Sketch.
      If you have more than one team, then after entering your credentials, you’ll be asked to pick one of your teams to sign in to. This is so we can give you access to your teams documents, and to make sure we are publishing to the right team.

 

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.

 

Editing and Organizing Categories

For complete control of your DSM library, you can edit your various category folder names and reorganize your library as needed. You can also add new default categories. To add a new category, in the navigation panel on the left side of the DSM modal, click the + Add Folder button and enter a name for the category. To rename, delete, or change the sorting options of a category or nested category, select the category or folder in the navigation panel, click ••• in the upper-right corner, and then click the appropriate option: Rename, Delete, Sort by Name (the default, alphanumeric setting), Sort Manually (by dragging each item where you want it). You can delete any folder you have created; however, you cannot delete the Colors, Text Styles, Layer Styles, and Icons folders (even if you have renamed them).

dsm-editing-organizing-categories.png

 

Updating colors, icons, and components

Colors can be updated in DSM if the color is added as a layer style. You can use layer styles for updating colors across a project.

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.

 

Refreshing Elements Changed By Another Library Member

Once updated, you can quickly refresh 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. You can also use the Sync button to sync all shared text styles and layer styles.

 

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

 

Getting Started: Design System Manager (
)