How to use git to version control your designs

Boon to get rid of saving multiple copies of the file.

8 min readJan 14, 2016

Whenever a UI Designer prototype, he needs to focus upon every subtle detail of the product. Of course designing for a product is not a one day game, it takes dense efforts and endless revisions. UI Designer needs to create endless copies of multiple files to maintain backups of different revisions.

UI Designers use some popular tools like Sketch, Illustrator, Photoshop or the one which you use to prototype Web and Mobile Products. In the above example, it’s just one file and heck can be seen very clearly and its clumsy way of managing files. So, What’s the better way to manage this heck? It’s Version Control System (VCS).

Version Control System records all the changes made to each and every file overtimes with well managed records and also provides powerful revert back options.

There are set of tools which are available and can be used by designers for keeping version log of each design update. But, when it comes to unified teams Git is something which comes under the niche.

There are several Open Source VCS tools which can be used to manage revisions of files under your project. Git is one of the most popular VCS tools which is used and trusted widely for its speed and efficiency. GitLab is a web-based Git project/repository manager and allows you to create unlimited free private projects/repositories. GitHub is another popular and powerful project/repository manager, but it will restrict the number of private projects. Both GitHub and GitLab can be used as a remote server to save different revisions of multiple files under a project.

So, let’s get started and understand the basics of managing files and their revisions under a GitLab repository.

First of all, Git needs to be downloaded from its official website and installed on your local machine (Download is available for both Windows and Macintosh machines; and apt-get package manager can be used to install Git on Linux machines using sudo apt-get install git).

Git on Macintosh

Once, you have installed Git successfully, open Terminal from Launchpad and start typing git --version and hit the return key. It will result in an output git version 2.x.x assuring Git has been successfully installed on your Macintosh machine.

Git on Windows

Once, you have installed Git successfully, open an app named Git Bash.exe and start typing git --version and hit the enter key. It will result in an output git version 2.x.x assuring Git has been successfully installed on your Windows machine.

GitLab will be used as a remote server and all files from local machine along with their revisions will be added to a repository on a remote server. An account is needed on GitLab to proceed further, so create a one for yourself with a very strong password.

SSH Key

An SSH Key will allow you to establish a secure connection between your Local Machine and GitLab Remote Server. Open Terminal (on Mac) or Git Bash.exe (on Windows) and Create an SSH Key following these instructions from GitLab Doc.

Once you have copied your public key, Sign-in to GitLab Dashboard and perform the following steps -

Click on **Profile Settings** from Sidebar Menu

Click on **Add SSH Key** button which is located in Upper Right Section

*Paste the copied key* and press **Add Key** Button

Now a successful and secure connection has been established between your Machine and GitLab Remote Server which is owned by you.

Go to GitLab Dashboard and create a project -

Click on **New Project** Button to Create a new Project

**Create a Project** filling in all the necessary details

Once you have successfully created the project, you will be redirected to the “Command Line Instructions”.

Basics of Command Line

If you are Terminal Friendly Human that’s awesome. If you’re not, no worries let’s look into terminal with some very popular commands.

pwd - pwd command reports the full path of present working directory.

ls - ls lists files and directories of present working directory.

cd - cd [dir] changes working directory to [dir].

cd .. - cd .. is used to change the present working directory to the relative parent directory.

Starting with the UI Project

Let’s prototype a To Do Mobile app’s logo in Photoshop and manage its versions using Git and save them to remote repository located at GitLab. A repository can be cloned even if the files or project is lost from your local Machine.

Let’s prototype the App’s Logo —

Once App’s Logo is prototyped, it’s rendered and an output preview image along with the Raw File is saved to the To-Do-App directory.

Now these files need to be added to the Remote Gitlab Repository using Git. Let’s open terminal (GitBash.exe App on Windows Machine) and navigate to the project directory.

Go to GitLab Project Page which earlier said “Command Line Instructions”; copy and paste both lines of command into terminal one by one to set up the Git Globally (It’s only needed for the first time, when we initialise a project).

git config --global user.name “Your User Name”
git config --global user.email “youremail@domian.com”

Setting up Git Globally on Local Machine

Once Git has been set up globally, We need to navigate to the directory which have all the project files.

***pwd*** reports path for present working directory

ls lists files and directories of present working directory

***cd [Desktop]*** changes working directory to [Desktop]

***cd [To-Do-App]*** changes working directory to [To-Do-App]

Empty Git repository needs to be initialised inside Project Directory using command —

git init

All project files need to be added to stage using the command —

git add [file1.ext] [file2.ext]

**git add** adds files to staging area that will be pushed to the repository in next step

A Message is required to remember what changes have been made to current commit using the command —

git commit -m “Message to Describe Current Revision”

**git commit -m “Custom Message”** saves the custom message describing the current changes

To push files from local machine to the remote repository on GitLab, it’s needed to add remote repository name and url. It’s only needed for once and doesn’t require every time when files are added and pushed to the remote repository. The command can be copied from “Command Line Instructions” from Project Page and the command for same appears as —

git remote add origin git@gitlab.com:username/repositoryname.git

**git remote add** adds remote repository’s name and url to the local project file

Now, files need to be pushed to the remote repository using command —

git push -u origin master

In above command master is the default branch to which files are getting pushed and -u tells Git to remember that files will be pushed to the same branch even next time, so only git push will also work from the very next revision.

**git push** pushes files and commit message to remote repository

Once, files have been successfully pushed to the remote repository, open project repository from GitLab Dashboard and check the files are now visible in the remote GitLab repository.

Added Files appears in GitLab Repository

Now, Let’s make a small change in Logo’s Prototype and turn it into blue color using Photoshop.

Raw File is saved and output preview image is replaced by new variation that is the blue color in this case.

Now, let’s add files to the remote git repository repeating the same previous steps, but remember Git Global Setup and Git Initialisation are not required again. Just, navigate to the project directory using terminal (GitBash.exe on Windows Machine) —

**git add** adds files to staging area that will be pushed to the repository

This time only the command — git push will also work.

Once, files have been successfully pushed to the remote repository, open project repository from GitLab Dashboard and check files are now visible in the remote GitLab repository and now it will show two commits and each commit have files with respective changes.

The files for each commit can be browsed individually and downloaded when required.

Similarly, infinite number of commits can be pushed to remote repository and all heck for file revisions can be easily managed using the power packed tool the Git.

Apart from this if files are lost from local machine they can be cloned from remote server using the command —

git clone git@gitlab.com:username/repositoryname.git

Git has tons of the functionality and it’ll be quite hard to cover up everything in this story, so you can visit Git’s Official Website for more detailed information over git commands and functionality.

However, feel free to leave a response below if you gets stuck somewhere in between so that you can get some help from the community.