View all blog posts >

How to use GitHub for Design Version Control

December 12, 2018

I originally published this article on Prototypr.io

Disclaimer. I was hungover when writing this article so it is what it is. Rubbish!

Search “GitHub for Designers” in google, you’ll notice there are shit loads of results, I mean shit loads. So what I’m gonna share with you is nothing new but its a simple and works for me. End of.

I’m not going to go into what are the benefits of version control or what Git, GitHub, repo, version control, push, and so on are. That stuff you can read about on GitHub’s website. I’m just gonna quickly show you my workflow for design version control.

At this point, I’m assuming you’ve got Git and GitHub set up so let us begin.

Create a repo and name it “Designs” or “Designland” or “The Magical Fairy Kingdom” or whatever you feel like. This is where you’re going to store your masterpieces.

Once created clone to your mac. Before you freak out and start shouting “SHANE, how the fuck do I clone it?” read this little how-to guide. Better? 😒

Now when you update your designs, wait I mean masterpieces you can push the changes to GitHub. This makes it simple to share with colleagues or just keep them backed up.

I’d love to explain more but I’m a little too hungover.

A person very hungover.
How I feel right now.

Keep it tidy

A tidy home is a tidy mind or a wasted life, depending on which way you look at it. But a tidy file structure for designs/development is one that will make your life handier. Below is the file structure that I use:

A finder window of mMy folder structure for design version control
My folder structure for design version control

I keep all my projects in a projects folder. 😱

Each project contains a sketch file, a folder for assets, and a folder for preview images. I use a naming convention that makes sense to me:

  • Folders are in lowercase with no spaces, underscores or hyphens. “superawesomefolder”
  • Sketch files are in camel case. “SuperAwesomeApp.sketch”
  • Images are in lowercase with an underscore between the name and usage of it. “icon_github.png”

If you don’t give a shit about that nonsense, or you think this was a waste of your “precious” time. Keep on doing what you are doing.

Leonardo Di Caprio laughing in the Wolf of Wall Street movie
Really Shane?!! Another gif!!


Want to get in touch?
Even just to say hi 👋

Fill in the form below, and I'll get back to you within 24 hours.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.