So You Want To Build a Design System?

Ken
Playground Inc.
Published in
4 min readOct 18, 2018

Whether big, small, or just starting out, all design teams stay on the lookout for tools and software that can be utilized to implement their ideas at an efficient pace in order to collaborate and manage projects. Software to deliver high quality content, but most importantly, a single source of truth.

The term 'single source of truth' varies for each designer, but overall it means a place somewhere up in the “cloud” where designers alike can find the latest design patterns.

When the document is updated or changed, anybody with access can also see. Sketch Libraries are convenient, and it ensures that the design team has access to the latest information across the board.

There was a time when the Sketch Libraries system didn't exist, and the term Sketch Libraries was only being used to indicate a Master Sketch file with reusable components organized as symbols that is their team’s “single source of truth”. Symbols help solve issues such as design consistency as having symbols make things easier to build out pages.

The “Master” sketch file is controlled by one person who is the “gatekeeper” as their job is to merge symbols, components, icons etc. from every designers’ files that have been approved. While copying these into the master document where everyone else can take and implement them into their designs. Having designs funnelled into a single “master” file helps us to ensure design consistency.

The gatekeepers job also means keeping everyone updated. When something has changed or has been added, everyone on the team, that uses the master sketch file, has to be notify. This would cause some difficulties such as: symbols were document dependent.

There was no way for them to be used in other sketch files besides the document they were sorted in. Copying and pasting also caused duplicates within sketch files due to naming conventions, artboard sizes, and if your teammates are working around the globe for people in different time zones, getting them up to date can be a task on its own.

Here Come Sketch Libraries

What are libraries you ask? Libraries are just like normal Sketch documents that contain symbols, but you can connect them to any document you are working on.. When someone on a team makes change(s) within the connected “Master” document, designers’ will be notified that there are change(s) and sync any document that uses symbols from that library. Keeping your team informed and up to date with ease. For any reason a mistake was made before updating, they can see the changes before they opt in.

The possibilities are endless! Creating a great document structure is key to making a fully functional Design System that your team will love while ensuring efficiencies of the work being created and shared.

What Makes a Design System? 🤔

Communication Is Key

Get your team together, have a jam section of what would make a great library, what components and elements would make their work flow better.

Decide What to Include

Compile list of what to include in the Sketch Library such: Primary Colours, Icons, Cta’s , Forms etc.

Naming Hygiene

Naming Convention Matters! Naming Convention Matters! Say it louder so the people in the back can hear Naming Convention Matters! When it comes to creating a Library, Design System for your team or Just for personal use.

Organizing layers and artboards in categories into a meaningful naming convention that can be easily spotted saves yourself and your colleagues time having to navigate through the hundreds of symbols, layers and artboards.

So What Does This Mean for Your Team?

If you’re working in a team, sharing designs day in and day out, working independently or even just looking for a way to streamline and manage on-going projects. Trying to incorporate a Master Sketch Document or Sketch Libraries into your workflow can help. It adds less stress and more productivity per project. This can push forwards your teams’ overall design process.

Try it out for yourself heres a free demo library to test out and play around courtesy of Playground Inc.

I hope these tips will be useful for your next project.

Do you have any tips on how your design team manages and maintains a design system?

Let me know in the comments below.👇 If you found this article helpful, please give it some claps⚡️ 👏

Happy Sketching Everyone!💎

--

--