Design System in Sketch: Simplify Designer Developer Collaboration

Nowadays designers commonly do not create webpages or app screens but focus on designing a design system instead. Thanks to Brad Frost, who introduced us to the Atomic Design methodology, we have started to change our workflow in that direction and it is pretty awesome!

A design system does much more than serve as a UI kit or a style guide. It contains all the necessary assets, rules, patterns, structures, flows and even the team values. These make it possible for many designers and developers to collaborate efficiently on the same product and keep the design consistent.

With a proper set of user flows, wireframes and prototypes, we don't have to create those 1000 screens one-by-one and draw every visual element with all the small variations on the interactions. The developers can build the UI from common assets and rules according to the prototypes, right? Yup, that's right… in most cases.

Not all projects are the same, so depending on the team, clients or timeframe, our agency has to adapt to create a workflow that will not overwhelm or complicate.

Several blog posts and articles already describe how to create a design system on Sketch and how awesome this tool is for this purpose. But here I want to focus on a specific project we had at UX studio and how we created a design system for it.

We got hired to improve and design a product that was still in a conceptual phase with a very tight deadline and different development teams working simultaneously. We had to keep everyone updated.

When something changed, we had to notify many different people in different time zones around the globe. The different dev teams also had different requirements at the beginning, like naming conventions, file formats, and different deliveries. The communication overhead and the different requests made our life hell, so we had to come up with something.

A design system seemed to answer all these challenges.

I will briefly describe some of the steps we took to deal with this situation and how we created a design system with Sketch where all of our team members could work and update the design easily.

Why create a design system?

It simply started with a need to simplify and speed up our working process, keeping visuals consistent throughout the product.

When we first joined the project, the MVP already had a set of wireframes, and the developers were starting to work on it.

At this phase, we had to start to create the detailed screen designs for both iOS and Android platforms simultaneously. We also had to improve the wireframes and work on the prototypes for the usability tests.

In a team with a few designers, we had to be able to create, share, and synchronize quite an extensive set of components. We had more than 100 different screens, for example.

Because several development teams were working on this product, we set up a meeting with each one to gather all their requirements and figure out the best solutions to ready the MVP for launch.

Long story short, they require having all components exportable (gotta love Zeplin right?) and a proper naming convention so all the different devs from each team from different countries wouldn't have any conflicts or duplicated assets when importing them.

Although we initially thought the hardest task would be to keep everything updated and consistent, it was actually what helped us to properly organize our assets.

How did we plan and organize our design system?

After gathering all the requirements, the time came to organize our files into different components.

We decided to go for a direct approach to the Atomic Design system organizing our assets in Atoms > Molecules > Organisms > Templates > Pages.

For those not familiar with this modular design approach, here is a quick introduction. An atom comprises the basic building blocks of matter (a button or a form field). A molecule is the group of atoms bonding together, a simple UI element functioning together (a search field built of an input, a label, and a button). An organism is a group of molecules, like a header.

So we wanted to recreate all these atoms, molecules, and other components in Sketch. We created a master Sketch file organized with the Atoms as single Sketch symbols. The Molecules were nested symbols containing different Atom symbols. The Organisms were nested symbols containing several Molecule symbols, and so on.

Our biggest question during the planning asked: How do we keep all these files and assets updated without creating any merging conflicts?

How did we manage our collaboration?

Having multiple designers working on a single project where we needed to keep all the assets and screens updated and everyone aware of every change counted a lot against using Sketch.

We found three great tools: Craft, Brand.ai and Abstract.

Brand.ai and Craft create and share design libraries with other team members. Although both apps are complete and stable, we ended up using Craft because we were already syncing our screens on InVision, and it already came with our subscription. Later on, we figured out that Craft had some issues uploading and syncing all the nested symbols we created. It not only took more time to upload them, but figuring out how to update them took more effort. We learned that a lot of people had the same issues with Craft.

Although we already had the Craft library up and running, we always kept a master file updated with all the latest screens and assets.

A new tool named Abstract (in beta version) is already solving some of these problems. Designed for an integration with Sketch files, it works as a git repository for designers. Abstract simplifies organizing and managing a design system with a branch of the master files. It allows multiple designers to work on the same file without overwriting the teammates' work.

So our design system (or at least the assets part) contained a master Sketch file with nested symbols as the representation of the atomic design components and a collaboration tool that made it possible for everyone to use and update these components.

5 things you should consider when creating a design system

In this project, we had a lot of freedom to try and experiment with new ways to collaborate in a team. Since I had not tried to create a design system on Sketch before, I could learn a lot from this experience.

Based on this experience, we suggest those developing a design system:

• Plan ahead - Create a straightforward structure in the Sketch file.
• Properly name all assets/layers - Regardless of the design system structure, the naming convention plays an very important role not only in organizing an internal folder structure for symbols but also in avoiding duplicated and unorganized files (no more button_primary copy 32 layers, please)
• Consult the developers who will work on the project - Different dev teams have different requirements.
• Always keep assets updated and everyone informed about any changes - Use those awesome apps and plugins like Craft, Brand.ai and Abstract.
• Avoid too many levels of nested symbols - They will prove very useful if well organized, but they have some limitations, such as changing font colors. Too many unnecessary symbols make the organization and the design system management way harder.

Here at UX studio, we are constantly growing. More and more, we're working on bigger projects in bigger teams that require a proper collaboration.

If you want to read more on smooth designer-developer collaboration, my fellow designer Katica wrote a great piece on how to carry out a perfect design handoff to developers.

We're constantly improving our ways of working and collaborating, so please let us know: what is your team collaboration process?

Take the next step to improve your website’s UX

UX studio has successfully handled 250+ collaborations with the clients worldwide.

Is there anything we can do for you at this moment? Get in touch with us and let’s discuss your current challenges.

Our experts would be happy to assist with the UX strategy, product and user research, UX/UI design.