×

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) or use the shortcut Command + L.
  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

Note: If you're part of an Enterprise account, the creation process may differ slightly. Please read this article: Enterprise: Setting up your DSM organization

After signing in to DSM for the first time, you will see an introductory video about getting started. After you're done viewing, or if you want it skip it, click Get Started at the bottom of the video window. you’ll be asked to create a personal organization. Name your organization, and click Get Started.

Image_2018-08-15_at_11.11.00_AM.png

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. Alternatively, you can 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. Click the DSM plugin icon (dsm-plugin-icon.png), or use the shortcut Command + L.
  2. Select the drop-down menu at the top left.
  3. Hover over Import and select Craft Library.
  4. 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 New Library.
  3. Name your library. If you choose, you can also upload a thumbnail image and enter a description.
  4. Set the library permissions to Anyone at [your team] can view or People Invited.
  5. Click Create.

You can now continue to build your library with the Craft Manager plugin.

create-new-dsm-library.gif

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. Click the DSM plugin icon (dsm-plugin-icon.png), or use the shortcut Command + L.
  3. Click an existing color palette, or create a new one by clicking Add Folder.
  4. At the bottom right of the DSM plugin 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.
    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. Click the DSM plugin icon (dsm-plugin-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

Note: If you are 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 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. Click the DSM plugin icon (dsm-plugin-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 plugin icon (dsm-plugin-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 AN ICON

To add an icon to your library:

  1. Select the element in your Sketch file.
  2. Click the DSM plugin icon (dsm-plugin-icon.png), or use the shortcut Command + L.
  3. Click the Icons category and choose an existing folder. 
    Note: 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 plugin icon (dsm-plugin-icon.png), or use the shortcut Command + L.
  2. Click the Icons category.
  3. Drag the icon to your Sketch file.

Note: 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 A COMPONENT

To add a component:

  1. Select the element in your Sketch file.
  2. Click the DSM plugin icon (dsm-plugin-icon.png), or use the shortcut Command + L.
  3. Click the Components category and choose an existing folder. 
    Note: 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 plugin icon (dsm-plugin-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.

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 icon (Image_2018-07-03_at_4.49.54_PM.png).

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. Click the DSM plugin icon (dsm-plugin-icon.png), or use the shortcut Command + L.
  2. Right-click the item, and then click Delete.
delete-item-dsm.png 

Getting Started: Design System Manager (
)

Creating and Using Your DSM Library

Prev