×

Creating and Using Your DSM Library

Note: For a quick visual walkthrough of getting your library into DSM, check out the DSM Learn Hub

SIGNING IN TO DSM

To create and access libraries from your personal InVision account:

  1. Open your file in Sketch, and click the DSM icon dsm.png.
  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, enter your email address and password, and click Sign In.
    • If your team has SSO enabled, select Sign in with your domain. Upon entering your team domain, you will be taken to your SSO provider.
    • If you have an Enterprise account, follow the same procedure and click Sign in with your domain. Enter your domain name and sign in with your credentials.
  3. If you’re on multiple teams, select the team of your choice. This gives you access to the correct documents and publishing abilities. If you’re only on a single team, you can now begin working in Sketch.

 

CREATING AN ORGANIZATION

After signing in to DSM for the first time, you’ll be asked to create an personal organization. Name your organization, and click Get Started.

create_org.png

An introductory video about DSM will display. Once you’ve finished watching it, click Get Started.

A default library has been created for you named Primary Brand. You can use this library, create a new one, or import an existing Craft Library.

Note: We only create a Primary Brand library if you first set up DSM through the Craft Manager plugin. You can alternatively sign up for DSM via invisionapp.com. After signing in to your InVision account, click DSM in the top toolbar. Name your organization, and you'll be prompted to Try a Sample or Create a New Library

 

IMPORTING A CRAFT LIBRARY

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

  1. Open the DSM plugin, and select the drop-down menu at the top left.
  2. Hover over Import and select Craft Library.
  3. Select your library and click ImportIf you have trouble locating your library, we suggest searching your machine for “.library” files.

If you’d like to import your library from Brand.ai, please email support@invisionapp.com.

 

CREATING A NEW LIBRARY

To create a new library:

  1. Access the DSM web view.
  2. At the top right of your DSM web view, click Create New Library.
  3. Upload a thumbnail image, choose your library name, enter a description, and click Create.

You can now 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:

  1. In Sketch, select the layer containing the color. Otherwise you’ll be prompted to add a global color.
  2. Open the DSM plugin, and select an existing color palette or create a new one.
  3. Click the + button on the bottom right of your DSM plugin.
  4. Choose the colors from the selected layer, and click Add Colors.

add_color.gif

 

To apply a color to your design library:

  1. Select the desired layer.

    Note: 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. Open the DSM plugin and select your desired color.

The color should now be applied to that layer.

apply_color.gif

 

ADDING AND APPLYING A TEXT STYLE

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. Open the DSM plugin, and select Text Styles.
  2. Click the + button and select the text styles that have been defined in the page. Select your desired text styles, and click Add Text Styles.

add_text_style.gif

 

To apply a text style:

  1. Select your target text layer.
  2. In the DSM plugin, choose Text Styles and select the desired text style.

The style should now be applied to that layer.

apply_text_style.gif

 

ADDING AND PLACING AN ICON

To add an icon to your library:

  1. Select the element in your Sketch file.
  2. In the DSM plugin, select the Icons category and click the + button. Selecting the root Icons category and clicking + will prompt you to create a new section within the Icons group.
  3. Name the new section and click Upload.

The icon should now exist in your DSM library.

add_icon.gif

 

To place an icon from your library:

  1. Open the DSM plugin and navigate to your Icons category.
  2. Drag an icon element to the desired location on your Sketch file.

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

place_icon.gif

 

ADDING AND PLACING A COMPONENT

To add a component:

  1. Select the element in your Sketch file.
  2. Open the DSM plugin, navigate to your Components category, and click the + icon. Selecting the root Components category and clicking + will prompt you to create a new section within the Components group.
  3. Name the new section and click Upload.

add_component.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. Open the DSM plugin and navigate to your Components category.
  2. Drag a component to the desired location on your Sketch file.

place_component.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.

 

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:

  1. Open the DSM plugin and navigate to the left-hand Categories area.
  2. Click the + Add Folder button.
  3. Type a name for your category and hit Enter.

To rename, delete, or change the sorting options of a category or nested category:

  1. Open the DSM plugin and select the category or folder in the left-hand navigation panel.
  2. Click the ••• icon in the upper-right corner, and select Rename, Delete, Sort by Name (the default alphanumeric setting), or Sort Manually.

You can delete any folder you have created, but you cannot delete the Colors, Text Styles, Layer Styles, and Icons folders (even if you have renamed them).

sort.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 click 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.

 

SYNCING YOUR LIBRARY

With DSM you can quickly sync library changes straight to your Sketch file. To update symbols (components in DSM), text styles, and layer styles, open the DSM plugin and click the sync Image_2018-07-03_at_4.49.54_PM.png icon.

sync_library.png

Note: In order for components to update, they must first be defined as symbols in Sketch. To push changes for non-symbol components or other elements, drag and drop each item from your DSM library to your file.

 

REMOVING OR DELETING ITEMS

To delete an item from DSM:

  1. Open the DSM plugin.
  2. Right-click the item, then click Delete.

delete.png

 

Getting Started: Design System Manager (
)