DSM developer tools

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. DSM integrates with the popular component development framework Storybook. Developers can quickly view live components in DSM, copy the component code, and bring any design to life.

DSM also integrates with InVision Inspect. When developers inspect prototypes with InVision Inspect, they can easily identify design system components.

DSM Design Tokens are platform-agnostic variables that represent the look and feel of your brand and product. They constitute the atomic building blocks of your design system and can be used to define colors, text styles, spacing, and other property types. They provide the foundation for theming and design process automation.

Spot existing components and styles with InVision Inspect. Get your Live Components with a built-in Storybook integration. Scale design across platforms with Design Tokens.

Here’s what DSM offers developers:

• Bring design and code together. The Live Component page enables you to map live components to their design component counterparts so you can establish a shared language and taxonomy across design and code.
• Bring development teams together. On a single page, you can showcase different component implementations in different technologies (Embed URL, React, Angular, Vue, and HTML). This enables you to drive company-wide consistency with a single source of truth.
• Built-in access control. Control who can edit and view DSM design systems with DSM’s roles and permissions.