In the last couple of years, design systems have taken big companies ranging from Airbnb to IBM by storm, and for obvious reasons. The dream is to create a set of shared design elements—ranging from the design of a hamburger menu to the grid options of a webpage—and standardize them in such a way that designing becomes less a matter of pushing pixels and more like picking out the right Legos. That way, designers can spend less time futzing with visual design and more time focused on solving actual problems.
But it’s one thing to create those systems and another to manage them. That’s why Airbnb and Facebook have spent countless hours creating their own tooling systems. Today, InVision is announcing the InVision Design System Manager, aimed squarely at the myriad companies with beefy design and development teams which nonetheless have hit a wall in trying to build out their own design systems. It will be open for trials starting in December.
The new product builds upon one created by a company called Brand.ai, which InVision quietly acquired two months ago. It works as a plug-in to Sketch or the recently announced InVision Studio. With it, designers can access a list of shared elements stored in the cloud, and then drag and drop those into a design they’re working on. If they do alter those elements, those changes can be managed and synced with the original files. These were already features of Craft, InVision’s Sketch plug-in, but DSM has a number of features such as version control and permissions which make it a tool better suited to large teams. On top of that, the library of shared elements is used to automatically generate a website that contains all the elements, which developers can readily access.
Thus, according to InVision, using and updating the pieces of a design system becomes a simple part of the design and development workflow. The company spoke to Co.Design exclusively about the new launch.
Brand.ai has that funny name because the company didn’t start out working on design systems. It originally set out to make a tool that could automatically generate a logo if you gave it high-level brand values, such as “fun” or “sporty.” The team quickly realized that semantic information wouldn’t be enough and that it would need to pull in the company’s style guide to serve as data for a new logo. That’s when they hit a snag.
“We saw companies building those style guides using different tools. Even big companies were using Dropbox to share sketch files,” says Ehud Halberstam, Brand.ai’s founder. But even if a company intended to create one single element that everyone might use, such as a canonical “Buy” button, it was almost impossible to notify the entire team of developers and designers when that Buy button had been updated. “Even for teams like eBay who had already bought into the value of design systems, actually adopting them and using them day-to-day was viewed as a distraction,” Halberstam explains. “That’s the problem we set out to solve.”
One major facet of the problem was integrating both development and design—because design and development don’t quite work the same way. “Companies have touted before that they’re making a GitHub for designers,” points out Clark Valberg, InVision’s CEO. “The metaphor works loosely. But almost all the details do not. Ehud took the approach of looking at what the actual challenges are.” For example, designers, unlike developers, don’t want strangers copying their designs. “Open source” in the design world is known as “stealing.” Version control is another issue. Designers don’t want some random person from marketing to be able to change the color scheme of their UI elements, and then push those changes to the whole organization. Permissions have to be managed in a way that’s slightly different than mere pull requests.
Thus, one key feature of InVision DSM is that permissions are team-based rather than generic—instead of assigning someone Admin or Edit privileges over everything, they can be assigned based on individual collections of assets, so that, for example, an iOS designer can own the iOS designs without anyone futzing with them.
Learning From The Giants
Many of the nuances of InVision’s new Design System Manager spring from the hundred-or-so companies that Brand.ai talked with when developing their system. For example, Facebook’s design team shot down Halberstam’s assumption that a design team would want to separate their nice, perfect documentation of their design system from the actual production files used to create them. Better to keep all the comments about how the files were meant to be used and why they looked the way they did in the actual product files. Thus, with InVision DSM, the comment threads can be accessed when you’re clicking on an asset that you’re using in Sketch. The idea of being able to set permissions on a team-by-team basis came from insights lent by NewsCorp and ZenDesk.
DSM also comes with features meant to plug into the development workflow. Ordinarily, designers hand developers a Sketch file, which the developer tries to translate into code using their own judgment and inspection tools such as X-Scope. InVision DSM hopes to handle that by translating every element inside a design library into automatically-generated CSS class names with corresponding property values. These can be accessed via a SASS file and an API call. What the developer does with it is up to them, Halberstam points out. The idea is to finally alleviate the pain of a designer having to tell a developer every time a color’s been updated.
That’s a capability that will surely give developers and designers hives over the potential for hiccups in translating Sketch files to CSS. But it’s one that Halberstam says presents the most opportunity, given how divorced the design and coding processes still are. “The reason for joining InVision was the realization that there’s so much opportunity given how many steps there are between design and development,” he says.