Today, we’re excited to announce enhancements to InVision Design System Manager (DSM), helping teams scale their design practice and bridge the divide between design and development. This includes a host of new features, from giving more detail and structure to your usage documentation, to helping designers work faster and use the design system even more efficiently.
Here’s a quick rundown of what’s new:
Better documentation. Less guessing.
In an effort to promote clarity and context to everyone who uses your design system, we’ve added features that let you show even more detail about the components within. This way, you leave less to the imagination when a developer or designer comes to use your design system.
Add images to the web view and “show” what you mean
A visual example is always more powerful than a lengthy text description for communicating the do’s and don’ts of using specific components. Now you can embed images right into the DSM web view so that pictures (and animated gifs) work inline with text and sample code to tell the full story.
Here’s what we’ve added:
- Drag and drop or copy and paste images right into the text/WYSIWYG editor
- A new picture icon in the WYSIWYG editor menu. Just click and find an image to embed.
A new look and improved organization for fonts on the web
More fonts almost always equal more fun, right? Well, only if it’s easy to find and preview all the fonts that exist in your design language.
We saw room for DSM to improve in this area, so we created an entirely new look and information architecture for the web view of fonts. DSM now displays fonts in the same way it does every other element of your design system: fonts are organized by tile, and each tile is clickable, so you can dive in and gather more information about each font, like variance.
Easier to use, so you’ll spend less time on mundane tasks
A great design system gets out of the designer’s way and helps them focus on the most important customer problems. With that in mind, we’ve added a feature to DSM that improves usability and helps designers work faster and smarter.
Improved drag and drop from DSM to Sketch documents
Any time we can shave from a designer’s workflow is a worthwhile pursuit.
We heard feedback that when designers are looking for a component by name in the treeview or search results of the DSM Craft plugin, the next intuitive step is to just grab that component by name and drop it in the Sketch document. Instead, DSM required you to get the item from the preview window and drag it over. It doesn’t seem like much of an extra step, but do that over and over again during a day, and you’ll see the time and cognitive overhead add up.
Now you can grab the item right from the tree view, search results, or preview window.
Here’s what’s different:
- Drag and drop items that are in the tree view and grid view into your Sketch document. This includes Components, Icons, and Text styles.
- Drag and drop will work on both the selected item and unselected items.
- Drag and drop items directly from search results to a Sketch document.
DSM just keeps getting better
We think you’ll love these enhancements to DSM and what they mean for your scaling your design practice. These are just a few of the many new capabilities that are on the way. We believe DSM should be a foundational tool for your design transformation—and we’re just getting started.
