- 01 Feb 2023
- 2 Minutes to read
- DarkLight
Populating your Components section
- Updated on 01 Feb 2023
- 2 Minutes to read
- DarkLight
Building your Components
➕ Adding design components>
To add components to DSM:
- Open your design system and, at the top of the page, click Components.
- If you prefer, create a new category or folder. Within your chosen folder, click Add Page.
- Type the name of your component and press Enter.
- On the Design tab of the component page, click the Add components button.
- 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:
- Sign in to the DSM web view and open your design system.
- Navigate to any component page and click the Links tab.
- Click Add a link.
- 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
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:
- Sign in to the DSM web view and open your design system.
- Open a component page and click Add tab.
- From the drop-down, select Embed and choose the appropriate site.
- In the Tab Name field, enter a name for the embedded page.
- In the URL field, paste in the URL for the web page.
- Click Preview.
- If the preview looks accurate, click Add.
➕ 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.