A design system is more than just a library of all your UI assets and components. It’s the structured and evolving story for how all those parts come together to form your design language. And the easier it is to create and share that design language, the less time you spend on design production, and the more time you can spend on solving bigger problems and designing the next digital experience.
That’s why we’re thrilled to announce an all-new Web View in InVision Design System Manager (DSM) that makes it easier to evangelize your design system with cross-functional partners across your company.
For the uninitiated, DSM is actually FOUR distinct components:
- A cloud management system to host your design system—assets, components, and documentation with advanced version control.
- A plugin for Sketch so designers can access and update the design system without breaking their flow (with full integration coming soon for Studio).
- A design token API to support the design-to-developer workflow with programmatic access to your design data.
- A Web View for easily sharing your design system, complete with design assets, usage guidelines, and code.
Today, we’re announcing an all-new Web View for DSM. It’s what you’ve been asking for: better organization so you can find what you need faster; editing tools that make documentation easier to add and update; and a big visual design update so your design system looks amazing.
“A design system is the fingerprint of your design language.”
Your design system never looked so good
We’ve given the DSM Web View site a top-down visual refresh. Not only will you find that the UI feels more like other InVision products, but there are visual design improvements throughout, so your design system is a joy to browse through and use.
Everything where you expect to see it
Next, we added customization of component categories so you have more control over the taxonomy of your system. A design system is the fingerprint of your design language, and DSM is now more flexible than ever in honoring that identity.
Better yet, changes you make are automatically reflected in your DSM Sketch plugin and in the DSM Web View. These two experiences mirror one another.
Square peg, meet square hole.
Find what you need—now with less scrolling
Before, your entire design system was represented in the DSM Web View as a single page. Now DSM automatically generates a web experience with separate pages for each category and sub-category of design asset, making it easier to navigate. That also means you can provide deep links to folder categories for easier sharing.
It starts with a clean, organized menu page that displays each category visually as tiles, so you can get where you need to go with a glance and a click.
A quick note for existing DSM users: If you’ve been sharing deep links to items, those links will now direct to the top-level library view. You can still deep link to items, but you’ll need to copy and share new links.
Related: Setting your design system up for success
You are here
The DSM Web View now displays a persistent navigation and breadcrumb of the design system structure and where you are, so you have full context. No matter what design asset you’re looking at, you’ll always know where that item is located within the design system.
Don’t just show—tell the details that matter
A design asset is more than just a pretty picture—it’s a collection of details and decisions that need to to be understood by others in your organization. Now when you look at a specific item, DSM provides the ability to add individual context for each asset so your team understands how to work inside your design language. There’s even a download button for icons so users can quickly grab what they need.
Simpler text editing, to encourage better documentation
Just as important as “what” is in your design system is “how” each asset is used. The standards and usage parameters help tell the full story. DSM improves the document editing experience with a text editor in the Web View to quickly add to or update the documentation.
With the new floating styling bar, you can highlight text to quickly adjust the formatting, hyperlink to a different resource, add a code snippet, and more.
Related: Managing your design system just got easier
This is just the beginning
We think you’ll love the DSM Web View and what it means for your design workflow. This is just one of many enhancements that are on the way. We believe DSM should be a foundational tool for your design transformation—and we’re just getting started.
Head over to the DSM Web View to see the updates for yourself!
