How to use git to version control your designs

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

Git for Designers — Nitish Khagwal

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.

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.

Click on Profile Settings from Sidebar Menu
Go to SSH Keys 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
Click on New Project Button to Create a new Project
Create a Project filling in all the necessary details

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.

Setting up Git Globally on Local Machine
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]
ls lists files and directories of present working directory
git init initializes empty git repository
git add adds files to staging area that will be pushed to the repository in next step
git commit -m “Custom Message” saves the custom message describing the current changes
git remote add adds remote repository’s name and url to the local project file
git push pushes files and commit message to remote repository
Added Files appears in GitLab Repository
ls lists files and directories of present working directory
git add adds files to staging area that will be pushed to the repository
git commit -m “Custom Message” saves the custom message describing the current changes
git push pushes files and commit message to remote repository
List of Commits in GitLab Dashboard
Files with GitLab Preview
Files with GitLab Preview

--

--

I bring utility & beauty closer. I build design that scale. I write about user experience & design systems. Say hello! at khagwal.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nitish Khagwal

I bring utility & beauty closer. I build design that scale. I write about user experience & design systems. Say hello! at khagwal.com