If you chose re-build your library later, you'll effectively export your components now and then keep them safe until you are ready import into new DSM at a later date.
Note that the documentation will not be exported so you will have to re-write the documentation yourself in new DSM.
New DSM leverages the use of sketch libraries, so legacy DSM gives you the option to export all of your components into a single sketch library file.
To export a sketch file of your components follow the below steps:
1. Prepare for export
- Use Sketch master files alongside your DSM design system, and keep them updated (i.e., use the Sync to document button if changes are made outside of the master files). If you don't have a master Sketch file, DSM can generate one for you automatically.
- Convert all layer groups into symbols. Sketch libraries and the new DSM will only work with symbols, text styles, and layer styles.
- To add icons to your design system, save them as symbols and mark them for SVG export in your Sketch file.
- Create layer styles that use the colors you want in your DSM design system, and upload them to the legacy design system. This is necessary because, in the new DSM, colors are pulled from layer styles only.
- In the legacy DSM plugin, organize Sketch symbols into component containers. To ensure compatibility with live components, place related symbols (like states and variants) in a single component container. If a symbol isn't in a component container, it won't be imported to DSM.
2. Export your file
To generate a Sketch file from your legacy design system:
- In Sketch, open the legacy DSM plugin
If you want the Sketch file to reflect the latest iteration of your design system, select the Draft version.
- Next to the system name, click the drop-down and select [Your design system] > Export to a Sketch file.
- Click Export.
DSM will generate a new Sketch file that contains the exported content. You can then upload the file to your new DSM design system.
3. Importing your components
When you're ready to re-build your library in new DSM, you can take the following steps to manually import:
- Create a new DSM design system.
- Upload your Sketch files via the new DSM plugin. As part of this process, consider following our best practices for using Sketch with DSM.
- Create your documentation structure on the web, taking into consideration of how you want your design system to be presented and consumed by cross-functional users.
- Embed design assets into your DSM documentation site. These assets can come from uploaded Sketch documents, Storybook projects, and other third-party component libraries.
- Copy and paste rich text, documentation, images, and external links from your legacy design system into the new DSM design system.
- Add the new DSM design system component IDs to duplicated Storybook entries and republish. (You can keep the IDs from the original entries.)
- Invite teammates to your new design system and configure each person’s permissions.
- Share your new design system more broadly by configuring privacy settings for that specific design system.