Since originally launching InVision’s Design System Manager (DSM) a few years ago, we’ve been listening to customer feedback and staying tuned to your evolving needs. While teams vary in size, technology stacks, and processes, we’ve identified common expectations for a modern DSM.
To deliver on these expectations, we defined our product goals:
- Empower cross-disciplinary teams. Unite members across different roles. Embrace the contributions that designers, developers, and collaborators make to design systems equally.
- Enable framework interoperability. Support the propagation of design data across ever-changing development stacks and processes.
- Grow with teams as they advance. Support teams that are just starting out and help them gradually tackle the increasing complexity of their product landscape and organizational structure.
Keeping these goals and our customers in mind, we built the new DSM according to the following objectives.
Compatibility with Sketch Libraries
When DSM was first introduced, a key problem we wanted to solve was the difficulty of effectively sharing and reusing Sketch styles and symbols across a team. Since then, Sketch has consistently improved its Sketch Library experience as a native solution to solving this problem.
We’ve therefore evolved DSM to fully support Sketch Libraries. DSM now offers:
- Offline support—design with libraries when internet connectivity is unavailable
- Clear delineation of library symbols vs document symbols
- Native in-app library interface and symbol/style use
- Control and visibility into how design system updates impact Sketch documents
- Creating a hierarchy of linked libraries
- No limitation on library structure and levels of nesting
DSM complements the Sketch Library experience with these additional features:
- Easy distribution of Sketch Libraries as part of a holistic, versioned design system that includes a documentation website and code
- Ability to design with assets from any released version of the design system
- One-click process for locally updating all libraries that are part of a design system release
- Ability to quickly add library assets to the documentation site and keep them updated automatically with changes to your Sketch libraries
- Visual preview of changes made to assets before releasing a new version (coming soon!)
Custom documentation site
Within minutes, teams can stand up a secure design system documentation site, customizing it to their unique needs.
Legacy DSM enforced a 1:1 mapping between assets in the documentation website and assets in your Sketch library. To help abstract away the complexity of the Sketch file structure, the new DSM no longer enforces this. You can choose which assets to include in the documentation site and which ones to leave out.
Improvements to the documentation site include web editing capabilities and a more flexible information hierarchy. You can now:
- Add pages
- Reorder pages, folders, and items
- Group pages into categories
- Organize content in site-level sections (top navigation)
Additionally, you can make the site your own with brand customization features like:
- Adding a logo
- Customizing the color theme of the site
- Adding a cover page for your design system
Foundation for framework interoperability
We believe an ultimate source of truth is one that connects across platforms. Over the next year, we will continue to build on this foundation, helping teams cement their design system as a single source of truth in their organization. Upcoming features include:
- An improved experience for managing design tokens
- A more robust API to enable propagating styles in different styling frameworks and platforms
- Continued investment in the Storybook integration to support documenting components in various JS frameworks.
Performance and stability
Instead of relying on proprietary DSM logic to add symbols and sync changes to documents, the new DSM relies on Sketch Libraries and the native mechanism they offer. This approach means greater performance improvements and long-term stability.