A 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 language. And the easier it is to create and share that language, the less time you spend on 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 in Design System (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:

  1. A cloud management system to host your design system — assets, components, and documentation with advanced version control.
  2. A plugin for Sketch so designers can access and update the design system without breaking their flow (with full integration coming soon for Studio).
  3. A design token API to support the design-to-developer workflow with programmatic access to your design data.
  4. 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.

dsm web view

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 that 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.

dsm web view

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.

dsm web view

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.

dsm web view

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.

dsm web view

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!

Robert Fenstermacher
Robert is an experienced product marketer, leading the practice at companies like Twilio, Aruba Networks, and now at InVision for Design Operations. Based out of San Francisco Bay Area, Robert is usually tucked away at a coffee shop or making an escape to hike a local trail.

Source link https://www.invisionapp.com/blog/new-web-view-design-system-manager/


Please enter your comment!
Please enter your name here