Using the Inspect DSM integration
Mastering InVision DSM
Tutorial Breakdown
With our new DSM integration in Inspect, we’ve built an even more powerful experience for developers by bringing DSM data directly inside Inspect. With the ability to link directly to live code and view details like usage guidelines and external resources, we’re giving developers the information they need to build better, more consistent products — faster.
Transcript
Many developers turn to InVision Inspect to work more seamlessly with their designers — grabbing colors, generating code snippets, and measuring design elements on the fly.
Until now, developers who relied on Inspect to identify specific properties, may not realize the component already exists in a design system. Which often means wasting time by rebuilding existing components — and ending up with a bunch of mismatched variations.
With our Inspect DSM integration, we’ve built an even more powerful Inspect experience for developers by bringing DSM data directly in Inspect — so developers can easily identify what's already in the system.
It starts with building your design files using symbols from your DSM Sketch Libraries.
Then, when you publish to InVision Cloud using Craft sync, InVision will automatically retain the relationship between the symbols on the design canvas — and the respective components in DSM.
From an InVision share link, developers can navigate to Inspect.
On the layers list on the left hand side, DSM components display in purple to visually set them apart.
Select a component and you’ll find the new DSM panel on the Inspector on the right.
Here you’ll see the name of the library the selected component lives in — followed by a link to the component page in DSM.
If code is populated in DSM, the respective links to React, Vue, Angular, and HTML will populate.
And any additional external links that exist within DSM will populate below — so developers can access relevant documentation that lives outside of DSM.
Clicking a code link brings you directly to the DSM component in the web view for that Library.
Here you’ll see a preview of your live component — along with all the add-ons configured in Storybook. As you toggle or edit knobs, the code snippet below will auto-update in real time — so a developer can grab it, and start building.
With the ability to link directly to live code and view details like usage guidelines and external resources, we’re giving developers the information they need to build better, more consistent products — faster.
Until now, developers who relied on Inspect to identify specific properties, may not realize the component already exists in a design system. Which often means wasting time by rebuilding existing components — and ending up with a bunch of mismatched variations.
With our Inspect DSM integration, we’ve built an even more powerful Inspect experience for developers by bringing DSM data directly in Inspect — so developers can easily identify what's already in the system.
It starts with building your design files using symbols from your DSM Sketch Libraries.
Then, when you publish to InVision Cloud using Craft sync, InVision will automatically retain the relationship between the symbols on the design canvas — and the respective components in DSM.
From an InVision share link, developers can navigate to Inspect.
On the layers list on the left hand side, DSM components display in purple to visually set them apart.
Select a component and you’ll find the new DSM panel on the Inspector on the right.
Here you’ll see the name of the library the selected component lives in — followed by a link to the component page in DSM.
If code is populated in DSM, the respective links to React, Vue, Angular, and HTML will populate.
And any additional external links that exist within DSM will populate below — so developers can access relevant documentation that lives outside of DSM.
Clicking a code link brings you directly to the DSM component in the web view for that Library.
Here you’ll see a preview of your live component — along with all the add-ons configured in Storybook. As you toggle or edit knobs, the code snippet below will auto-update in real time — so a developer can grab it, and start building.
With the ability to link directly to live code and view details like usage guidelines and external resources, we’re giving developers the information they need to build better, more consistent products — faster.