Platforms that bring workflows together build better products. From customer feedback, we redesigned InVision Design System Manager (DSM) to connect design and code so teams can work faster, smarter, and more in sync—and completely redefine the design systems category.
Since originally launching 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 expectations, we defined our product goals:
- Empower cross-disciplinary teams. Unite members across different roles and 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.
The new DSM now fully supports Sketch Libraries:
- Offline support so you can design with libraries when internet connectivity is unavailable
- Clear delineation of library symbols versus 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 new features:
- Easy distribution of Sketch Libraries as part of a holistic, versioned design system that includes documentation of 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 Sketch Libraries
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 Sketch Libraries. Now 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, so you can:
- Add pages
- Reorder pages, folders, and items
- Group pages into categories
- Organize content in site-level sections (top navigation)
Plus, 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 that a design system that connects across platforms is the ultimate source of truth. Over the next year, we’ll continue to build on this foundation, helping teams cement their design system as the single source of truth in their organization. Look out for these features:
- 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.
Importing to the new DSM
There are two ways you can start using the new DSM:
- Automatically import your existing libraries in the legacy DSM. This approach is recommended if you want to keep the existing structure of your design system. Learn more: Importing legacy design systems to the new DSM
- Start from a blank slate. This is helpful if you want to completely restructure your design system going forward. Learn more: How do I update to the new DSM?