When should a design team build out a design system? What tools help make a design system effective? How do you scale a design system for a team of 10 to more than 100?

When I first joined Facebook I had no idea what a design system was. And because I never went to design school, I didn't know the difference between a visual style guide, component library, design language, or design system.

Like many people, I used to think a design system was really just a library of visual artifacts. (Spoiler: that's not what a design system is.)

As Facebook's design team grew from 80 to more than 350 designers, it became evident our shared library of components wasn't going to cut it.

Back then, the team was running into problems with our library of styles and components hosted on Dropbox. Because designers were each trying to move fast and make an impact, they would rarely check if the component in the Dropbox folder was the latest, or even the right one for their needs. Or designers would assume their use-case was unique enough to warrant a completely custom design. A new designer would often take over an existing project and lose much of the history or context behind it.

It was becoming difficult to know who to talk to about a project, and the library of shared folders was growing rapidly, becoming more complex and disorienting every week.

Additionally, because of how Dropbox worked at the time, it wasn't uncommon to come into the office one morning to find the entire shared design folder had been deleted. All of your work gone. And a lot of time invested in figuring out when the deletion occurred, reverting the change, then waiting for the entire library to re-sync across the team's computers.

As a design team scales past just a handful of individual contributors, what you need is a complete design system.

A healthy design system will make easier to scale design patterns and components alongside a growing design team. It will ensure consistency and quality across all experiences, and increase the speed as well as creativity of designers without losing best practices or consistency within the product.

There's plenty of resources available online to learn more about design systems and how to build them, but there are things these resources and articles tend to overlook which can be invaluable when building out your design system.

1. Pair components and styles with guidelines

The most common misconception of what a design system is today is that of the shared file or folder of components and styles. A shared component library and style guide are vitally important to a design system, but they are not the system.

A shared component library is part of a system, not the system itself.

To build your system you should start with an atomic design approach: looking at what components and patterns you currently have or which ones you'll need to build a complete product. But don't stop by merely building out a rich component library or your system will be highly ineffective.

Think of a complete component library like being handed all the necessary parts to build a piece of Ikea furniture: you might have all the parts, that doesn't mean you'll be able to build the thing — let alone enough to ensure what you build is similar in form and function as the one the person next to you is working on.

What's missing from the collection of parts are clear guidelines: rules and principles of how everything fits together.

Best practices, the dos and don'ts of each part, all should be included in the system alongside components and styles. This is what makes a design system whole and capable of scaling effectively. To build a design system it's not enough to have all the parts: you need guidelines and standards too.

"A design system is a collection of reusable components guided by clear standards.” — Will Fanguy, Invision

Going a step further you should include references and associations between styles, elements or components, guidelines, and code. The complete system will make it easy for designers, engineers, writers, researchers, even leaders in the company, to find a component, understand how to use it best, and references or direct links to the component code.

A complete design system is one that enables anyone in the company to move quickly from ideation to production. Simply empowering designers isn't enough, the system should influence and rely on engineering counterparts (as well as writing, research, and data partners) to enable teams to build features and functions rapidly, within a similar standard.

2. Make the system easily accessible

Wherever the component library or style guide goes, the guidelines should go too. The closer you can pair each together for use, the more influential and effective the system will be.

One way to pair guidelines with actual components is to build a central place for the system to exist: an internal wiki, website, or repository, anyone in the company can refer to and pull from.

At Atlassian the team has hosted each aspect of our design system online at atlassian.design. This central resource for the system helps anyone in the company not only see changes as they happen in real time, it also enforces the message across the company: we're serious about the system and all its moving parts.

A central repository for your design system ensures your team can easily access both the components as well as their guidelines or principles. A shared Dropbox folder is certainly a reasonable way to go, but an internal website or intranet — like Atlassian.Design, Intercom's Build, or BuzzFeed's Solid — can be a great resource as well.

Of course you don't have to host your components, style guides, component source code, and guidelines publicly (or even on a central website). But having each of these things easily accessible and — most importantly — in the same place makes using the system that much easier for teams of any size.

Anyone in the company should be able to answer the question: where do you go to see the latest standards for our designs?

3. Go where the team already is

At Facebook we were able to build tools that made accessing our complete style guide as easy as a key command.

Anywhere in the Mac OS system—within Sketch, Illustrator, Origami, even Keynote—the team could access everything from our component library (and guidelines), color palette, typography, and style guide.

By bringing the system into the tools the team was already using, we made it easier to use the system than not.

The system and tools not only helped standardize our designs and helped designers access the latest versions of a component or pattern, it dramatically increased the speed designers were producing work by too.

Building your own solution for your team can be immensely beneficial. If you don't have the resources or bandwidth to do that there are a lot of tools that can help get your design system directly in front of the team.

Tools like Craft by InVision, Zeroheight, and UXPin make it easy to access and manage your design system directly from Sketch. Material design just launched their own system theme editor. InVision is even investing in a more comprehensive design system manager.