DesignOps is the key to scaling digital product design teams with more efficiency. As companies mature and invest in design, they need to operationalize workflow, hiring, alignment between teams, and more so designers can focus on design work while someone else takes care of the rest.
Their overall goal is to keep the design team healthy, running smoothly and efficiently. To achieve that, they take care of a few different aspects of a team: Workflow: how the design work flows within the company.
For those designers that work mainly with web technologies, then design components are a familiar existing practice that emulate similar workflows that development teams follow. Such practice makes it easier for designers to share their efforts with development teams and makes it more likely that they use those components.
Brad Frost coined the term “atomic design” that describes how to break page designs down into components. He and was one of the first to look at how designers can design in ways that better complement modern application design.
Libraries such as Bootstrap and Material Design helped solidify this practice, and I assume that Sketch brought the concept to a design tool. Practically speaking, companies then typically create their visual languages and style guides based on these components. Good reference examples are the “Building a Visual Language” article from Airbnb, the Atlassian design kit, and further inspirations here.
Sharing Assets and Components
Designers are (in a sweeping generalization) visual people, so as you might expect, they would rather see, use, and share design components more visually. Unsurprisingly, the tools to support this are burgeoning.
This post by Audrey Hacq summarizes the current big four options for Sketch. These are Craft, Lingo, zeroheight, and Sketch’s shared libraries. They all work in similar ways, with some offering permissions, but none offer versioning.
As these are for Sketch, again, they are primarily for web and app components, but you could use them for other purposes with some creative thinking.
Some of the tools listed above export components for iOS and Android, which also represent their visual assets as code/text. For example, Android uses XML files, and while I know everyone hates XML, it’s easier to see and track changes to the files. Likewise, iOS development maintains layout files separately and allows for similar tracking.
Not using Sketch
As a tool designed and built for modern application development, Sketch has some of the best features when it comes to asset sharing, but there are options for other applications and standalone.
Figma has a great feature set including versioning, export to different platforms and formats, plus workflows and tools that suit multiple team roles.
When it comes to design work, I mostly use Adobe products. Creative Cloud has a shared library, but I have found it fiddly, and it lacks features, such as exporting and versioning.
For open source aficionados, there’s Identihub. It’s a new project and so lacks advanced features such as versioning and export for web and mobile platforms. But it’s free and works well for collaboration between smaller teams.
InVision (which also creates the Craft shared library above) focus more on a complete solution for design collaboration, and their forthcoming “studio” tool looks promising. I am personally reticent to do everything in the browser, which puts me off using it too much. Functionality includes versioning, discussion, exporting, and device previews.
Zeplin is a handy little tool that generates style guides and code snippets from the assets you upload from Sketch, Adobe XD CC, Figma, and Photoshop CC designs. Sympli is similar, but adds more features and direct integration with the tools designers and developers are already using, for example, a direct connection between Photoshop and XCode.
Great, but what about actual binary files, images, audio, etc.? Is it possible to collaborate on those? Of course, there’s nothing stopping you using file sync platforms such as Dropbox or OneDrive. All these give you rudimentary version control, ie, you can revert to previous versions, but they don’t recognize subtle changes or show you what’s different.