Git for designers (Git & Dev Tools)

Why This Matters

Learning Git as a designer is crucial for managing projects effectively, collaborating with developers, and ensuring version control. By using Git, you can maintain multiple versions of your designs, work on different features simultaneously without interfering with each other, and revert changes if necessary. Additionally, understanding Git can prepare you for interviews or collaborative projects with development teams.

A well-structured Git workflow helps designers keep their projects organized and manageable, making it easier to collaborate with developers and ensure that everyone is working on the latest version of the project. Familiarity with Git can also make it simpler to incorporate feedback from team members and clients, as well as to maintain a clear history of changes for future reference.

Prerequisites

Before diving into Git, it's important to have a basic understanding of the following:

• Operating systems (Windows, macOS, Linux)
• Command line interface (CLI)
• Text editor (e.g., Sublime Text, Visual Studio Code)

Familiarity with these foundational tools will help you navigate and interact with Git more efficiently. It is also beneficial to have some understanding of HTML, CSS, and JavaScript, as these are common languages used in web design projects that often involve collaboration with developers.

Core Concept

Git Basics

Git is a powerful distributed version control system that allows you to track changes in files and collaborate with others on projects. The main components of Git are:

1. Repository (Repo): A collection of files and their history, managed by Git.
2. Commit: A snapshot of the project's current state at a specific point in time. Each commit contains metadata such as author information, date, and a unique identifier.
3. Branch: A separate line of development within a repository. Multiple branches can be created to work on different features or versions of a project simultaneously. Branches allow you to experiment with changes without affecting the main branch (usually master).
4. Merge: Combining changes from one branch into another, usually the main branch (master). Merging resolves any conflicts between the branches and creates a new commit that includes both sets of changes.
5. Pull Request: A request to merge your changes from a feature branch into the main branch, typically used for collaboration with other developers. Pull requests allow team members to review your changes before they are merged into the main branch, ensuring code quality and preventing potential issues.
6. Remote Repository: A Git repository that is hosted on a server or cloud service like GitHub, Bitbucket, or GitLab. Remote repositories enable collaboration between team members by allowing them to clone, fork, and merge their changes with the main project.
7. GitHub Flow: A popular workflow for managing projects using Git and GitHub that emphasizes frequent commits, feature branches, pull requests, and a clear separation between development and production environments.

Git Workflow for Designers

1. Initialize a new Git repository in your project folder: git init
2. Add files to the staging area (preparing them for their first commit): git add or git add . (to stage all changes)
3. Commit the staged files with a descriptive message: git commit -m "Your commit message"
4. Create a new branch to work on a specific feature or version of your project: git branch and switch to it: git checkout
5. Make changes, stage, and commit as needed.
6. When ready, create a pull request to merge your changes into the main branch.
7. Collaborate with developers by forking the project repository on GitHub or another hosting service, cloning it to your local machine, making changes, and submitting pull requests for review.

Common Practices

1. Small Commits: Make small, focused commits that address a single issue or feature. This makes it easier to understand the history of changes and to revert mistakes if needed.
2. Descriptive Commit Messages: Use clear and concise commit messages that describe the changes made in each commit. Good commit messages help others understand your work and make it easier for them to contribute to the project.
3. Feature Branches: Create a separate branch for each feature or version of the project you are working on. This helps keep the main branch clean and easy to manage, as well as making it simpler to collaborate with other team members.
4. Pull Frequently: Regularly pull updates from the main branch to ensure your work is up-to-date and avoid potential conflicts with recent changes made by others.
5. Merge Conflicts: When merging branches, Git may encounter conflicts that require manual resolution. Resolve these conflicts carefully to maintain the integrity of the project and prevent inconsistencies.
6. Squash Commits: After a feature branch has been merged into the main branch, consider squashing commits to create a cleaner history. This can help make it easier for others to understand the changes made in the project.
7. Ignore Unnecessary Files: Use .gitignore files to exclude unnecessary files from being tracked by Git. This helps keep your repository size small and makes it simpler to manage your project.

Worked Example

Step 1: Initialize Git Repository

$ cd my-design-project
$ git init
Initialized empty Git repository in /Users/username/my-design-project/.git/

Step 2: Add and Commit Files

Create a new design file called design.psd. Stage it for the first commit and provide a descriptive message.

$ touch design.psd
$ git add design.psd
$ git commit -m "Initial design file created"
[master (root-commit)]: new file: design.psd
1 file changed, 0 insertions(+), 0 deletions(-)
create mode 100644 design.psd

Step 3: Create a New Branch

Create a new branch called feature-design and switch to it.

$ git checkout -b feature-design
Switched to a new branch 'feature-design'

Step 4: Make Changes, Stage, and Commit

Make changes to the design file in your text editor, then stage and commit them.

$ code design.psd

Edit design file here...

$ git add design.psd

$ git commit -m "Updated design for feature X"

[feature-design]: 1 file changed, 0 insertions(+), 0 deletions(-)

### Step 5: Push Changes to GitHub

Assuming you have already set up your GitHub account and authorized Git, push the changes to your forked repository on GitHub.

$ git remote add origin https://github.com/your-username/my-design-project.git

$ git push -u origin feature-design

Enumerating objects: 3, done.

Counting objects: 100% (3/3), done.

Writing objects: 100% (3/3), 286 bytes | 286.00 KiB/s, done.

Total 3 (delta 0), reused 0 (delta 0)

To https://github.com/your-username/my-design-project.git

• [new branch] feature-design -> feature-design

Branch 'feature-design' set up to track remote branch 'feature-design' from 'origin'.

Common Mistakes

1. Not committing often: Committing frequently helps you maintain a clear history of changes and makes it easier to revert mistakes if needed.
2. Ignoring merge conflicts: When merging branches, Git may encounter conflicts that require manual resolution. Ignoring these conflicts can lead to inconsistencies in your project.
3. Not using descriptive commit messages: Clear and concise commit messages help others understand the changes you made and why.
4. Not creating a new branch for each feature or version: Working on multiple features or versions in the same branch can lead to conflicts and make it difficult to manage changes.
5. Not pulling updates from the main branch regularly: Failing to pull updates from the main branch can result in your work being outdated or conflicting with recent changes made by others.
6. Misusing Git commands: Misunderstanding the purpose and proper usage of Git commands can lead to confusion, lost work, or inconsistencies in your project.
7. Not setting up a remote repository: Failing to set up a remote repository on a hosting service like GitHub can make collaboration with other developers more difficult.
8. Not using feature branches for small changes: Using feature branches even for small changes helps keep the main branch clean and easy to manage.
9. Not squashing commits before merging: Squashing commits can help keep your project's history clean and easier to understand.
10. Not using gitignore files: Failing to use gitignore files can result in unnecessary files being tracked by Git, leading to a larger repository size and potential conflicts.

Common Mistakes (continued)

1. Merging without resolving merge conflicts first: Merging branches with unresolved conflicts can lead to inconsistencies in your project. Always resolve any conflicts before merging.
2. Not using Git hooks: Git hooks are scripts that run automatically when certain events occur, such as committing or pushing changes. Using Git hooks can help enforce best practices and prevent common mistakes.
3. Not testing changes thoroughly: Failing to test changes thoroughly can lead to bugs and other issues in your project. Always test your changes before committing them.
4. Not using version control for design assets: Version control is not just for code—it's also important for managing design assets like images, fonts, and style guides. Using Git for these assets can help ensure consistency across your projects.
5. Ignoring warnings or errors during the build process: Ignoring warnings or errors during the build process can lead to issues in your project. Always address any warnings or errors before committing changes.

Practice Questions

1. How would you initialize a Git repository for a new project called "my-new-project"?
2. You have created a new design file and staged it for the first commit. What command should you use to commit the changes?
3. Suppose you are working on a feature branch called feature-A. How would you merge your changes into the main branch (master)?
4. Your teammate has made changes to the main branch, but you haven't pulled their updates yet. What command should you use to update your local repository with the latest changes from the remote repository?
5. You have created a new design file called design-B, but it conflicts with an existing file of the same name in the main branch. How can you resolve this conflict?
6. Explain the difference between a Git commit and a Git merge.
7. What is the purpose of using Git hooks, and how can they help prevent common mistakes?
8. Why is it important to use descriptive commit messages, and what should they include?
9. Describe the GitHub Flow workflow and its benefits for managing projects.
10. What are some best practices for using version control for design assets like images and fonts?

FAQ

1. Why should I use Git as a designer?

• Version control: Keep track of changes and revert mistakes if needed.
• Collaboration: Work efficiently with developers and other designers.
• Backup: Store multiple versions of your designs safely.
• Consistency: Maintain consistency across projects by using version control for design assets.

1. What is the difference between committing and staging files in Git?

• Staging prepares changes for their first commit, while committing saves the staged changes as a snapshot in the repository's history.

1. How do I create a new branch in Git?

• Use the git branch command followed by the name of the new branch, then switch to it using the git checkout command.

1. What is a pull request in Git?

• A pull request is a request to merge your changes from a feature branch into the main branch, typically used for collaboration with other developers.

1. How can I resolve merge conflicts in Git?

• Resolve merge conflicts manually by editing the conflicting files and committing the resolved version.

1. What is the purpose of using Git hooks, and how can they help prevent common mistakes?

• Git hooks are scripts that run automatically when certain events occur, such as committing or pushing changes. They can enforce best practices and prevent common mistakes by running checks on your code before it's committed to the repository.

1. Why is it important to use descriptive commit messages, and what should they include?

• Clear and concise commit messages help others understand the changes you made and why. They should include a brief description of the changes, any relevant context, and a reference to the issue or ticket number if applicable.

1. Describe the GitHub Flow workflow and its benefits for managing projects.

• GitHub Flow is a popular workflow that emphasizes frequent commits, feature branches, pull requests, and a clear separation between development and production environments. It promotes collaboration by encouraging developers to work on separate branches, and it makes it easy to review and merge changes using pull requests. The benefits of GitHub Flow include faster feedback loops, more efficient collaboration, and improved code quality.

1. What are some best practices for using version