Design Systems & Version Control – Saving Your Project From Chaos

Have you ever found yourself in a situation where your project's design files turned into a complete mess? Maybe the project grew massive. Maybe there were too many cooks. Design systems and version control are something that can help avoid such situations, both in their own way.

Everyone's talking about systems

Design systems have become the new top buzzword in UI design. We, too, have previously written a blog post about them. The hype is well deserved, because approaching design "systemically", is a very good way to go on about it. The best, if you ask my personal preference.

At it's best, it makes you design more from the perspective of the developer. When you envision how the different bits and pieces should look like and behave - rather than drawing individual layouts - you're building yourself a library that is easier to implement and keep in order. But it is not only a method for better designer-developer relations - it can also relieve some of the designer troubles too. I've recently worked on some large projects that involved both big teams and big files, so I've gotten to experience this firsthand.

Entropy is hard to control

If you do design in teams, you know how easily things can get out of hand. When you've reached a point where you have 5 designers and 30 different design files, suddenly all files seem to have mystically diverged from each other. The newest file has a tweaked colour palette and no one had the time to update the older ones. Some new guy joined the team and did not get the specs of the primary buttons and used some random font from the internet. One of the files had some questionable jokes as "lorem ipsum" and it ended up on slides on some important presentation in Switzerland.

This sort of chaos can be kept at bay by using practical design system tools like Sketch libraries. It allows you to actually build a very sophisticated system of components as a separate file, and have every design file be built using mostly – if not entirely – those components only. It ensures that the buttons, colours and even those lorem ipsums follow the exact same logic, everywhere.

In other words, systems can be used to modularize your design, enabling you to design certain aspects in one place, instead of relying on the designers' varying abilities to communicate their ever-changing opinions of your app's look to each other.

Also, designers are hard to control

There's more to it than that, though. Design systems can help to keep the design in line, but it does not help with designers who fumble around. You can still conjure chaos by wrongly editing Mark's files, saving over Jennifer's presentation, or just accidentally deleting your own work.

And besides that, having a carefully constructed component library that is linked to each and every of your precious design files definitely needs some extra care. And rules! You can't just go tampering with the core components library, seeding potentially unwanted changes to everyone's design files.

Designers deserve version control, too

Developers use version control daily. You might hear them talking about "pushing" or "committing". That's version control, right there. What it means is that whatever changes or "commits" you make to your files, are saved, and you can revert to those saved changes at any point if something goes wrong. Also when someone "pushes" some changes to the same file you are editing, possible conflicts can be resolved without completely blowing up the whole file. There's more to it, but that's basically how it goes.

This has not been available for designers for some time, because design software & its content has been mostly bitmap graphics which can be quite a bit more complex to version control, compared to the "readable" code that developers deal with. Nowadays we do most of our designs with vectors graphics, so there is finally software that can handle this for design files too.

Abstract

One of these tools is called Abstract, which offers version control for Sketch files.It has many PROS, like:

• Handling of Sketch files completely inside its own environment in the cloud, eliminating the regular file & folder hustle.
• Allows several projects under one client, and supports Sketch libraries that can be cross-linked across the projects.
• Design edits are handled per artboard, so it is harder to "corrupt" an entire file.
• Can also be used for sharing and inspecting the designs for people without Sketch. This is super useful for teams that need to have developers accessing the designs.

‍

For example, Abstract could enable your Android and iOS team to work separately, using the same library symbols, while making sure no one can just accidentally mess up the master files for good and piss off every other designer across the company.But unfortunately, it also has several CONS, such as:

• Designed to handle only Sketch files (even though it does that pretty well).
• Handling large amount of files or edits with Abstract, can be sometimes slooow.
• Sense of unreliability, from some basic functions getting completely stuck sometimes to broken symbol instances in the Sketch files.
• ‍

So, it's a great tool for keeping your design in line but it has its downsides. However, the downsides – performance issues and bugs – seem to be the fixable kind. Living on the edge has its ups and downs.

Alternative tools for version control

I can only speak here about the software I have experience with within a real project. I know there are some alternatives for Abstract worth exploring, like Plant and Folio.

Sketch is getting some really promising challengers too, Figma being the main one knocking down its door. Figma also has built-in version control, symbol libraries and basically similar features you get with Abstract + Sketch combo. I will write a follow-up post, once I have some real world battle experience with Figma at some point.

Should or shouldn't you version control your designs?

I would advise anyone in this line of work to keep an eye on what's happening in the field of version control. It is definitely the future for larger projects, and it seems that systemic design tools and version control have some aspects that benefit from integration.

If you're working with a large team, remotely, on multiple files, with a wide design system then yes - I think version control is worth the trouble, even with its own headaches.

‍Interested in reading about our real-life design system projects? Start from our Hesburger case page.