Version control your design

Version Control

The journey to becoming a designer is rarely a straight one. Maybe you're formally educated, maybe you started out with pen and paper, or oil paintings. We come from all walks of life. But everyone who's worked in digital design for a little while has gone through our grueling rite of passage: the 300mb project folder with 100 files in it, culminating in "indexpage-lastchanges-final_FINAL_FOR_REAL_FINAL_THIS_TIME_ARRGH.sketch".

Even though almost everything I do nowadays is digital I still view all of my work as tangible, not because of sentimental reasons but out of fear that if I replace an old design file with a new version I just assume the worst, which is that someone I work with will request that an older version. Managing my own files already took a lot of time and it became a challenge to manage files from other designers as well.

Abstract is a program we use to version control our designs, it is only compatible with Sketch at the moment. Abstract is also the main reason we use Sketch. The software itself is more like a file manager that you use to open Sketch files but lets you do much more like creating design reviews, collaborate with other people and comment on each other's designs.

What is version control?

Working with version control allows you to get an overview of any changes that have been made to a certain file. Any modifications, creation or deletion can be tracked and you can view the reason why this specific change was made. You can move in the file's timeline by going back to a previous version or continue with the file as it is.

Why should you version control?

When you version control your design with Abstract you can avoid bloating your computer with hundreds of files and views but there are a few more reasons.

Branching

Every project in Abstract has a master branch that is the real “final” version, the master branch has all design that has been approved and everyone involved can agree that this is the actual “final” version. Whenever I want to add, update or delete something in this master branch I have to create a separate branch that diverts from this master branch. This way any changes I’m making will only affect my own branch and nothing inside the master branch until I want to merge.

Branching

History

Any changes you have made are easily traceable and everyone can see a history of what changes you have made, when introducing new staff or inviting someone to review your design then they will see what changes you have made. It is also very handy to go back to a previous version of your design if something would go wrong.

Branching

Design review

Designers and developers can review the design by leaving comments and request the changes to be made before your changes get merged into the master branch. We can be more transparent with our work and get relevant feedback from the people involved.

Branching

Global updates

The biggest impact Abstract had on my life is how we work with our design system. Any design components that have been approved and converted to code are part of our Sketch library files. A library file allows you to import design components that you can customize further or create prototypes very fast. But the library files also work when creating an entirely new page with existing design components.

These library files are also version controlled, we can use Abstract to link these files to whatever project we are working in. So when we a change a design component we do the entire process of creating a branch, write commit messages that will show history and ask for a design review. When that is approved we merge the changes into the master branch. When we’ve successfully done so the component we have created or redesigned will be updated in every project that the Sketch library file is included.

By doing this we no longer have to maintain a huge list of files to make sure each and every one of them has everything up to date manually.