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

Populating your Foundations 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.
For all design elements added to the DSM design tab, they will appear on the page in a table format. Using the toolbar at the top of the table, you can sort rows, hide columns, or add more text styles. 
  • To manually reorder, first ensure you select manual sort (as opposed to alphabetically) and then select a specific row and use the reorder control to drag the row to a different position. 
  • To add a description, click into the description field.  
  • To delete a selected row, click the remove icon on the row’s right-hand side.

Building your Foundations

➕ Adding documentation

To add documentation to your DSM web experience:

  1. Open your design system and, at the top of the page, click Foundations.
  2. In the left-hand navigation, under the Get Started category, create a new page or select an existing one.

In the page body, click the Description field to add and customize text and add images.

➕ Adding colors and layer styles

Colors are derived from Sketch color variables and layer styles, so it’s important that any colors you want to add to your design system are saved beforehand.


To add colors from your DSM managed library to DSM:

  1. Open your design system and, at the top of the page, click Foundations.
  2. In the left-hand navigation, under the Colors category, create a new page or select an existing one.
  3. In the page body, click the Add colors button.
  4. In the left-hand Libraries menu, select a library.
  5. Click the color swatches you want to add. Alternatively, at the bottom of the modal, click Select all.
  6. At the bottom right, click the Add assets button.

At any time, you can remove a color or style. Once you do, you are able to add it back again.

➕ Adding typography

To add typography from your DSM managed library to DSM:

  1. Open your design system and, at the top of the page, click Foundations.
  2. In the left-hand navigation, under the Typography category, create a new page or select an existing one.
  3. In the page body, click the Add typography button.
  4. In the left-hand Libraries menu, select a library.
  5. Click the text styles you want to add. Alternatively, at the bottom of the modal, click Select all.
  6. At the bottom right, click the Add assets button.

At any time, you can remove a typography style. Once you do, you are able to add it back again.

➕ Adding icons

The Icons category of your DSM documentation site can contain any symbols that you reference on a regular basis, such as system icons, logos, and illustrations. Viewers of your DSM site will be able to download these items as SVGs.

Warning: Before adding icons to your documentation site, you must prepare your icons by saving them as symbols and marking the symbol masters for SVG export in Sketch.

Preparing your icons in Sketch

Before adding icons to your documentation site, you'll need to take the following steps in Sketch:

  1. In your Sketch file, select the symbol source you want to add as icons. It's important you select the symbol sources, not symbol instances.
  2. Mark the symbol as exportable and set the export type to SVG.
  3. Re-upload the Sketch file to your design system.

Adding icons

To add icons to your DSM documentation site:

  1. Open your design system and, at the top of the page, click Foundations.
  2. In the left-hand navigation, under the Icons category, create a new page or select an existing one.
  3. In the page body, click the Add icons button.
  4. In the left-hand Libraries menu, select a library.
  5. Select the icons or folders you want to add. Alternatively, at the bottom of the modal, click Select all.
  6. Click Add assets.

Was this article helpful?