Populating your Components section
  • 01 Feb 2023
  • 2 Minutes to read
  • Dark
    Light

Populating your Components section

  • Dark
    Light

Article Summary

TipThe folder structure you see in the modal window comes from the slash naming structure used in Sketch. On your documentation site, you can choose to follow a similar structure or something different, but that slash naming structure will remain the same when building with the managed library in Sketch 

Building your Components

➕ Adding design components>

WarningBefore you can add a component to DSM, make sure it is saved as a symbol in your original Sketch file.

To add components to DSM:

  1. Open your design system and, at the top of the page, click Components.
  2. If you prefer, create a new category or folder. Within your chosen folder, click Add Page.
  3. Type the name of your component and press Enter.
  4. On the Design tab of the component page, click the Add components button.
  5. Select your symbols to be added as components, and click Add assets.

DSM components allow for incredibly robust documentation. In addition to using the standard text editor available for every element in your design library, you can:

  • Add links
  • Embed web pages
  • Create Live Components with the DSM Storybook integration

➕ Adding links to components

For any component page in DSM, you can add links to supporting documentation or sites.

To add a link to a component page:

  1. Sign in to the DSM web view and open your design system.
  2. Navigate to any component page and click the Links tab.
  3. Click Add a link.
  4. Enter the name of the link, the URL, and a description (optional). Click Add Link.

After you’ve added a link, you can edit or delete it at any time by hovering over the link and clicking the ••• (more) menu.

➕ Embedding web pages

Embedding web pages is currently limited to the DSM Enterprise plan.

DSM supports embedding the following web pages:

  • Styleguidist
  • CodePen
  • CodeSandbox
  • Pattern Lab
  • InVision prototype links

You can also embed Storybook via URL by selecting Storybook rather than Embed when adding a tab.

To embed a web page in DSM:

  1. Sign in to the DSM web view and open your design system.
  2. Open a component page and click Add tab.
  3. From the drop-down, select Embed and choose the appropriate site.
  4. In the Tab Name field, enter a name for the embedded page.
  5. In the URL field, paste in the URL for the web page.
  6. Click Preview.
  7. If the preview looks accurate, click Add.
WarningFor the embedded page to work successfully, the URL must be publicly available, and the hosting server must support embedding.

➕ Enabling Live Components with the Storybook integration

DSM Live Components are interactive coded components that you can embed in your design system to create a single source of truth for your product teams across design and development.

The embedded code is built directly from your code component library and is showcased via an integration with the popular component development framework Storybook.

TipChat with your developers and engineers about setting up live components for your design system.
You can also embed Storybook via URL by selecting Storybook rather than Embed when adding a tab.

Was this article helpful?