- 01 Feb 2023
- 2 Minutes to read
- DarkLight
Populating your Foundations section
- Updated on 01 Feb 2023
- 2 Minutes to read
- DarkLight
- 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:
- Open your design system and, at the top of the page, click Foundations.
- 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
To add colors from your DSM managed library to DSM:
- Open your design system and, at the top of the page, click Foundations.
- In the left-hand navigation, under the Colors category, create a new page or select an existing one.
- In the page body, click the Add colors button.
- In the left-hand Libraries menu, select a library.
- Click the color swatches you want to add. Alternatively, at the bottom of the modal, click Select all.
- 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:
- Open your design system and, at the top of the page, click Foundations.
- In the left-hand navigation, under the Typography category, create a new page or select an existing one.
- In the page body, click the Add typography button.
- In the left-hand Libraries menu, select a library.
- Click the text styles you want to add. Alternatively, at the bottom of the modal, click Select all.
- 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.
Preparing your icons in Sketch
Before adding icons to your documentation site, you'll need to take the following steps in Sketch:
- 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.
- Mark the symbol as exportable and set the export type to SVG.
- Re-upload the Sketch file to your design system.
Adding icons
To add icons to your DSM documentation site:
- Open your design system and, at the top of the page, click Foundations.
- In the left-hand navigation, under the Icons category, create a new page or select an existing one.
- In the page body, click the Add icons button.
- In the left-hand Libraries menu, select a library.
- Select the icons or folders you want to add. Alternatively, at the bottom of the modal, click Select all.
- Click Add assets.