How to Share a Design System in Sketch, Part 3: InVision Craft and Brand.ai / by Gavin Lau

In parts 1 and 2 we covered two approaches to sharing a design system — using Dropbox and using GitHub. In this third part we will talk about using two products that were specifically created to aid in creating and sharing design systems using Sketch.

Before we delve into the details though, let’s summarize what we’re looking for in a tool for sharing a design system.

At a high level, such a tool should help make our design system easy to use, and easy to maintain*. Below are the key requirements to facilitate each of these goals.

 

Make the design system easy to use

  • Designers should be able to view their assets and styles side by side with the design they are working on. They should not have to switch pages, or worse, browse to a reference site. Context switching is a productivity killer.
  • Designers should always see the most up-to-date version of their design system. As the design system evolves, designers should see the changes reflect in their working environment automatically. As Chris Hall, UX Manager at eBay, says, retrieving a new version of a design library manually is simply not part of a designer’s workflow.
  • Designers should be able to search their design library. As Payam Rajabi, ex-system designer at Shopify, mentioned to us: search enables designers to create a larger design system to meet the needs of product design, and not have to “dumb the system down” just so it’s easily scannable.
  • Designers should be able to automatically update existing designs with changes in the system.

 

Make the design system easy to maintain

  • Multiple designers (editors) can update the system.
  • Editors can update the design system directly from Sketch.
  • Editors don’t have to worry about overriding each other’s work when making updates.
  • Editors don’t have to worry about making a mistake when updating the system, since they can easily roll back a change.
  • Editors can easily roll out an update to all clients of the system, and guarantee everyone uses the latest version.
  • Editors can annotate changes they make to the design system with notes explaining why they made the change, or summarizing large sets of changes.
  • Editors should be able to share the library outside of Sketch. Viewing and editing directly from Sketch is a benefit to designers, but others such as marketers, developers, and QA people will find it easier to simply view a web page. Making the system available for non-designers helps drive organization-wide adoption of a consistent visual language.

Let’s evaluate the approaches introduced in Part 1, and Part 2 of this series with the above requirements in mind.

Cloud storage solutions such as Dropbox are useful for a small team, or a small project. They do little to make the system easy to maintain and use for larger teams or projects.

The GitHub route addresses many of the requirements to making the system easy to maintain, especially if you also use Sketch plugins to add additional features. However, GitHub is not built specifically for design systems, and therefore does little to make the system easy to use. It also introduces complexity and a non-trivial learning curve.

And that brings us to Part 3. Two products — InVision Craft and Brand.ai (yes, that’s us!) satisfy many of the requirements to making the design system easy to maintain and easy to use. Let’s see how.

*Thanks Nicholas Jitkoff for putting it in these terms.

 

Purpose-built tools for sharing and working with a design system

A central assumption of Part 1 and Part 2 was that a team uses a Sketch master file to represent a design system. In this post, we show how moving from sharing a design file with generic file management tools to sharing design data with purpose-built tools makes a design system easier to use and maintain.

InVision Craft and Brand.ai allow you to define a design system using Sketch with a dedicated plugin.

 

InVision Craft — Overview

To get started with Craft, you first install the Sketch plugin. Craft offers a set of powerful tools for visual designers; the one that helps you share a design system is called Library.

InVision Craft Library side bar is anchored to the right as you design, providing easy access to assets.

InVision Craft Library side bar is anchored to the right as you design, providing easy access to assets.

Library lets you store colors, text styles, and layers in a folder on your Mac. You can share this folder with your team by using Dropbox, Google Drive, or Box.

Craft takes advantage of Sketch’s symbol system. If you add a symbol layer to your library, you can use that symbol in your designs, including making overrides. If the symbol in the library is updated, you can update all instances of the symbol in your document and your overrides will be respected.

Text styles and colors saved in Craft work independently of Sketch’s text styles and document colors, so you’d need to use the Craft interface to access the global text styles in your design system, instead of the built-in Sketch interface. Once you use Craft to insert layers, you’d likely get comfortable using its interface and search functionality for applying text styles and colors too.

The Document tab in the Library panel is a style guide feature. It will generate a style guide for you — which is a new page in your Sketch document — reflecting the styles used in that document. The properties in the Document tab, as the name suggests, are tied to the current Sketch document. They are completely independent from the Shared library, with one exception: you can add styles in the Document tab to your Shared tab with a single click.

Learn more about InVision Craft Library on InVision’s web site. There is a short video that does a great job of summarizing the feature.

 

Brand.ai — Overview

Brand.ai works similarly to Craft: install a plugin, add your design library via that plugin, and share it with your team. Brand.ai is different from Craft in that it provides its own cloud storage and sharing mechanisms. So instead of using Dropbox, you can create a team in Brand.ai and share design libraries among teammates.

Brand.ai window is overlayed above the page as you design. Toggle with Cmd+Shift+D.

Brand.ai window is overlayed above the page as you design. Toggle with Cmd+Shift+D.

You can use Brand.ai to set colors, add layers, and set text styles directly from the panel. Brand.ai also gives you the option to add your shared colors, text, and symbols to the native Sketch interface (just like you would without using any plugins), so you can use Brand.ai as a sync solution and continue using the Sketch interface while designing.

See our website for more on the Brand.ai Sketch plugin. Or watch a short video.

 

Keeping existing designs up to date with design system changes

Brand.ai and Craft help you make sure your team is using the latest design elements.

Craft relies on using a cloud sync service, and whenever any changes are synced to your Mac, the contents of the Craft panel will change to reflect that. Brand.ai also always displays the latest design system, but uses its own sync service to instantly push updates to all connected Sketch clients.

Always having the latest design system available to draw from is a great starting point, but you can go further with these plugins. Specifically, you might want to update design elements that you have already added to your document.

Craft Library indicates an update is available for the user icon

Craft Library indicates an update is available for the user icon

In Craft, any layer that you have added to the document is highlighted in the panel when a new version becomes available. You can click the refresh icon in the panel to update all instances of the layer in the current document.

Brand.ai’s approach is to use Sketch’s built-in tools for keeping designs current. For layers, this means using symbols. When a symbol in the design system gets updated, you can apply that update by syncing the design library to your document. Syncing will update the relevant symbol master in your document, and Sketch will take care of updating all the locations where that symbol is used (all the instances).

Brand.ai doesn’t provide its own mechanism for updating non-symbol layers throughout your document, so non-symbol layers are disconnected from your design system once you add them to the document. The reason is that non-symbol layers (or layer groups) don’t support overrides, and blindly replacing them with a newer version is prone to errors. Note that you can include symbols within disconnected groups (e.g. a navbar container layer with nested icon symbols in navbar items), and those symbols will get updated when newer versions become available.

Brand.ai supports sharing Sketch layer styles. Layer styles contain reusable styles like fills, borders, shadows, etc. You can save these layer styles to your Brand.ai design library and you can sync them into your design documents. This can be a powerful tool for maintaining consistency. Just as with symbols, Sketch takes care of keeping everything up to date after Brand.ai updates the layer style in the document. Brand.ai uses the same technique with text styles as well.

 

Avoiding conflicts when multiple designers are editing

One of the problems with using a Sketch master file and sharing it with your team is how easy it is to end up with two designers editing the file during the same time and running into conflicts. The simplest solution, splitting up the various elements of your design system into separate files, makes is difficult to use the system as you design, and keep things up to date. But with plugins like Craft and Brand.ai, you get the benefits of a single shareable design system and the ability to edit individual elements of the system.

Neither Craft nor Brand.ai offer a solution for dealing with simultaneous edits, but since you are working with a single color or a single component, the chances that conflicts will arise are greatly reduced.

 

Organization, layout, and search

Sketch’s artboards and pages work well for organizing a design system. You get the freedom to organize design elements in pages, artboards, and spatially on the canvas. The place of an element in the document is memorable, so after using the system for a while you may be able to find elements fairly quickly.

But this approach starts to break down with a large design system. You start having to switch pages, or zoom out to be able to see everything.

Left: a small design system is easy to navigate in Sketch. Right: a larger design systems requires zooming in and out.

Left: a small design system is easy to navigate in Sketch. Right: a larger design systems requires zooming in and out.

This is where having a tool that is designed to handle large numbers of design elements can make the difference between a usable, easily adopted system, and one that gets ignored.

Both Craft and Brand.ai support searching your design library by name and by the type of element so you don’t have to visually scan the system.

Both plugins allow you to not only find elements, but also directly use them in your design work. Dragging and dropping into your document from a floating panel is faster than copying and pasting between pages. Craft even adds a convenient button to the Sketch UI to make it easy to bring up the Library panel. Brand.ai has a keyboard shortcut to hide and show its window. This is a different way of working, but once you get used to it, you might find it hard to go back to using Sketch documents alone to organize your design elements.

Brand.ai window with filtered search results.

Brand.ai window with filtered search results.

Of course, you can keep a version of the system that’s organized in a Sketch document while also using a plugin to manage the source of truth in the cloud. If anyone changes the design system via the plugin, you can update the document just as you would any other document.

 

Sharing the design system outside of Sketch

Storing a design system outside of Sketch opens the possibility of using your design system in other tools. Imagine sharing components between Illustrator and Sketch, or using your brand colors in PowerPoint. InVision has built a version of Craft for Photoshop, but it doesn’t yet support the Library features from the Craft Sketch plugin. This is a promising start, and when Library is enabled for Photoshop, designers may be able to share design assets between Photoshop and Sketch.

While connecting design tools will help designers works better together, the true potential of design systems lies in bridging the gap between designers and developers.

We have written about the benefits of connecting a code base to a design system that is built and maintained by designers. This is why Brand.ai provides an API to access your colors, type styles, and vector versions of your layers so they can be used by developers.

There is a class of tools that aid in the handoff between designers and developers — ZeplinInVision Inspect, and Sketch Measure all help developers and designers to get the most out of designs created in Sketch by providing an interface for developers that exposes design data in formats that are useful to developers, such as CSS.

Zeplin even has a feature that puts colors and text styles in context by recognizing the name of the color from a list that you supply to Zeplin beforehand. But what if instead this information was taken from your design system? Imagine developers having access to all the relevant information about icons, UI components, etc. — their names, attributes, and sample code needed to use them. All this is possible with tools that are built on top of purpose-built design system storage.

Neither Craft nor Brand.ai support these kinds of advanced features yet, but the foundation is there to add them and much more.

 

Conclusion

InVision Craft and Brand.ai offer a new solution to building design systems using Sketch. Instead of sharing a Sketch master file, you use a plugin to help define, store, and access the design system. This approach makes design systems easier to use. You have all your assets right there side by side with your Sketch document as you work, and you can be confident you are always looking at the latest version as your design system evolves. You can search for design assets by name, which is especially helpful for large design systems. Finally, you can use the plugins to automatically update your designs with new changes to the design system.

As far as making your design system easy to maintain there are two main benefits of InVision Craft and Brand.ai. First, you can edit your design system directly from within Sketch. Second, because individual assets are stored separately, running into conflicts is a non-issue, assuming different designers work on different elements of the system at any given time.

As it stands, the downside of these products is their lack of support for change management features. Unlike GitHub there is no way to roll back to previous versions, or to annotate changes. There is no visual diff, where you can visually compare what has changed before and after an edit. And there is no change request and approval mechanism.

 

 

Source: https://blog.brand.ai/how-to-share-a-desig...