Note: This was written in 2017/2018, before tools like Abstract were broadly used. I will likely re-write this case study in the future, but I am keeping it up as, regardless of what version control tool you use, the value proposition is very similar.
Have you ever deleted a symbol from your Sketch file thinking “I’ll never need this again”, only to realize you actually DO need it several days later? Have you mysteriously lost an art board while combing the work of several designers into one file? Have you tried to remember whether the client signed off on “designfile_final_final.sketch” or “designfile_Version29.sketch”? Managing complex design files across designers, teams, or sprints can leave the door wide open for accidental data loss, miscommunication, and tons of headaches.
I have plenty of my own horror stories of design files gone awry, but thanks to the help of my developer friends, I have been able to successfully integrate Git into my design processes using SourceTree. Although SourceTree is traditionally a development tool, with the help of a Sketch plugin, SourceTree and Git can play nicely with sketch files, too. The process can seem intimidating at first, but it is actually very easy to use once you get into the flow and can be very powerful when used correctly.
Three reasons why designers should care about version control
1. Maintain your design history
Right now, maintaining history of your designs is a very manual process. Designers may save many copies of their files to preserve certain iterations or to better collaborate with others on their team. By storing your design files in SourceTree, versions of your documents are automatically stored when you commit changes and can be recalled at any time. Even if something is deleted from a file, you can easily recover that ‘lost’ item without losing your past or current work. There are several tools in SourceTree that will allow you to mark and recall different versions of any file without needing to make copies. Your project folder stays organized and always up to date.
2. Manage changes to your designs
Especially in teams with multiple designers, it can be hard to know what has changed when you are merging work together. It can also be time consuming to ensure your development team has all of the latest design updates and know exactly what has changed. SourceTree allows you to easily track changes to files, who made them and when the change happened. Your team will also get updates when files have been updated and can see what the latest changes at the art board level. With the help of the Git for Sketch plugin, you can automatically create “pretty diffs” to see a visual comparison of designs, side by side, each time you commit and push changes to your repo.
3. Work is accessible anywhere, by you and your team
Although many teams use cloud storage services like Google Drive to share work, SourceTree can make it easier to manage file changes and reduce accidental overwrites. SourceTree files are stored on an external server, but are copied onto your machine when you pull down the latest updates. This not only allows you to work offline (after you pull down the latest updates), but also be alerted when there are new changes to your project. You will no longer be surprised when a file changes out of the blue; you will get alerts when new changes are available for you to pull onto your machine.
What about other version control tools?
A few different designer focused version control tools have come out in recent months. Some are built on top of the Git framework, and some are not. One of the biggest drawbacks of SourceTree is that it does not allow designers to work in the same file at the same time. Some tools like Abstract allow designers to resolve potential merge conflicts, but has some limitations with workflow – like having every designer work on separate branches.
A big advantage of using a tool like SourceTree over a design specific tool is that many developers also use SourceTree. By using the same visual version control system (or at least having everyone on Git) will make it easier for everyone to stay in sync. Tool consolidation can help teams work better together.
I am hopeful that a tool will come out in the near future that will accommodate both design and development workflows that allow teams to work more collaboratively throughout the product development process. Abstract is very close to fitting that bill, but more tools and integrations are becoming available all the time.
Work smarter, not harder
Although the process may seem complex at first, the day to day workflow becomes incredibly simple after a couple repetitions and the benefits of using a version control system are almost immediately apparent. Data loss becomes a distant memory as your team is able to collaborate and iterate on designs without ever throwing anything away or creating a mountain of copied files. Your design, development, project management, and quality assurance teams can all have the most up to date information at all times, right on their machines. Although there are a few pitfalls of the process right now, it likely wont be long before SourceTree works just as well with Sketch as it does for code.
If you are interested in learning more about using Git, I wrote a Designers Guide to Git with SourceTree that goes over some of the basic controls of SourceTree and the Git for Sketch Plugin. If you ever want help using Git/SourceTree as a designer, you are always welcome to reach out to me via email or twitter!