If you are using Design System Manager (DSM) to build your prototypes in Sketch, you can view DSM data directly in Inspect.
Before you start
Before getting started, there are a few things to be aware of:
- DSM in Inspect is only available for Sketch prototypes synced via Craft Sync. DSM data cannot currently be accessed via Studio prototypes, though we plan to add this functionality in the future.
- To view DSM data in Inspect, you must have access to the DSM organization and library that are referenced. To learn more about DSM permissions, check out this article: Roles and Permissions in DSM
- DSM data in Inspect is only accessible for InVision V7 users on a Pro or Enterprise plan.
Supported data types
The following types of Sketch data are supported with DSM in Inspect:
- Text Styles
- Symbols grouped into DSM component containers
For layers to have DSM data in Inspect, you must first save that layer as a symbol in Sketch and upload it to your DSM library. If it’s not saved as a symbol, you won’t see the data in Inspect.
If using DSM Enterprise, you can also amplify the value of the DSM and Inspect integration by setting up interactive coded components in DSM. Learn more about DSM Live Components.
Viewing DSM data
In the left-hand layers panel of Inspect, DSM items are denoted by purple icons.
Select a layer from the layers panel, or select a layer on the artboard directly. The right-hand informational panel will then display a DSM section with the relevant data. Click any of the data points to view the DSM documentation site.
Switching design systems
If an item is found in multiple DSM design systems, Inspect allows you to view data from each.
In the DSM section of the right-hand information panel, next to the design system name, click the drop-down and select the appropriate system. The displayed information will change to reflect the chosen design system.
To learn more about Inspect, check out our Knowledge Base.