There have been so many debates on whether a designer should learn how to code — this is not one of them. However, there are many times within a team, that a designer may be required to provide developers assets they need or maybe even write a snippet of CSS. As digital teams get more diverse and roles overlap, working collaboratively becomes essential.

Ť这里已经对一个设计师是否应该学习如何代码这么多的争论-这是不是其中之一。 但是，在团队中很多时候，可能会要求设计师为开发人员提供他们所需的资产，甚至可能编写一段CSS。 随着数字团队的多样化和角色重叠，协作变得至关重要。

One tool that makes this collaborative experience run smoothly is git. Learning how to use git can be a distinctive skill that will improve your effectiveness and relationship with the developers on your team. And you don’t even need to know everything about git to get to this level of efficiency.

git是使这种协作体验平稳运行的一种工具。 学习如何使用git是一项独特的技能，可以提高您的效率以及与团队中开发人员的关系。 而且，您甚至不需要了解有关git的所有知识即可达到此效率水平。

等等，git？ (Wait, git?)

Git is a version control system that keeps track of all the changes you or your teammates make to the code repository. It helps you write code safely knowing you can keep track of changes and even undo them in the event of a code mishap. Imagine if you didn’t have Ctrl-Z, how horrible would writing a text file be?

Git是一个版本控制系统，可跟踪您或您的队友对代码存储库所做的所有更改。 它可以帮助您安全地编写代码，因为您知道自己可以跟踪更改，甚至在发生代码故障时可以撤消更改。 想象一下，如果没有Ctrl-Z，编写文本文件将有多可怕？

But unlike most text document management tools, Git keeps track of all your code writing timeline as long as you commit. If there’s any takeaway you get from this article let it be this — Remember to always commit your changes.

但是与大多数文本文档管理工具不同，只要您提交，Git就会跟踪您所有的代码编写时间轴。 如果您从本文中获得任何收获，那就这样吧- 请记住始终提交更改。

But let’s see what a likely scenario where a designer may get to use git is.

但是，让我们看看设计师可能会使用git的情况。

可能的情况 (A likely scenario)

Imagine there’s a part of your company’s web app you’ve recently redesigned to improve usability. It’s an important change, something that will save the customer support folks a few calls, but the developers are busy with the sprint and can’t spare the time.

想象一下，您公司的网络应用程序中有一部分是您最近重新设计的，以提高可用性。 这是一项重要的更改，可以为客户支持人员节省一些电话，但是开发人员忙于冲刺，无法节省时间。

You, on the other hand, can manage the change since you are a CSS guru and a designer who knows the implication if the change doesn’t go out with the next release. You get a go-ahead from the product and engineering managers, who say ‘go make the change!’ How do you make these changes and work collaboratively with your teammates without messing things up for anyone involved?

另一方面，您可以管理更改，因为您是CSS专家，并且是设计师，如果更改不能在下一个版本中发布，他就会知道其中的含义。 您会得到产品和工程经理的认可，他们说“去做改变！” 您如何进行这些更改并与您的队友协同工作，而又不弄乱所涉及的任何人？

Here’s how:

这是如何做：

Note: For the purpose of this article, I have created a GitHub repository that you can use in following along with this article. So, imagine this is your team’s repository: https://github.com/busayyyo/designers-guide-to-git

注意：出于本文的目的，我创建了一个GitHub存储库，您可以在本文后面使用它。 因此，想象一下这是您团队的存储库： https : //github.com/busayyyo/designers-guide-to-git

1. Clone repository: The first thing you wanna do is clone your team’s remote repository. It will be on a code repository management software such as GitHub, Bitbucket or Gitlab. Cloning allows you to create a copy of the repository into your local machine. You clone using this command: git clone <remote repository address>

1.克隆存储库：您想要做的第一件事就是克隆团队的远程存储库。 它将在代码存储库管理软件上，例如GitHub，Bitbucket或Gitlab。 克隆使您可以将存储库的副本创建到本地计算机中。 您可以使用以下命令进行git clone <remote repository address> ： git clone <remote repository address>

In our hypothetical case: git clone https://github.com/busayyyo/designers-guide-to-git

在我们的假设情况下： git clone https://github.com/busayyyo/designers-guide-to-git

2. Check and maybe switch branch: Now that you have the cloned files locally, the next step is to check where you are. Think of branches as rooms in your communal living repository house. You want to be in the right room before you decide to paint a wall red.

2.检查并可能切换分支：现在您已经在本地拥有了克隆的文件，下一步就是检查您的位置。 将分支视为您的公共生活仓库中的房间。 在决定将墙壁漆成红色之前，您要先在正确的房间里。

To do this, first go into the house, i.e the directory where your cloned repository now is. You do this using the cd <directory-name> command, in our case: cd designers-guide-to-git

为此，首先进入内部，即克隆的存储库现在所在的目录。 您可以使用cd <directory-name>命令执行此操作，在本例中为： cd designers-guide-to-git

Then use the command git branch

然后使用命令git branch

git branch — this shows you the current repository, i.e the room where you are right now

git branch —向您显示当前存储库，即您现在所在的房间

Let’s say you find yourself on the master branch… that’s a room you don’t wanna be in while you paint the town red. Get out of there and go to the branch your teammates develop on. We’ll call that ‘develop’.

假设您发现自己在主分支上……那是您在将城镇涂成红色时不想进入的房间。 离开那里，前往与队友一起发展的分支。 我们称其为“ 开发 ”。

git checkout develop — switches you to the right branch, aka your team’s development room.

git checkout develop —将您切换到正确的分支，即您团队的开发室。

3. Pull: Between cloning, branch switches and the bathroom break you just had, your teammates may have pushed new changes to the develop branch you are on. You want those changes in your local version as well and it’s good practice to always pull them in every chance you get. To do that, all you have to do is:

3.拉：在克隆，分支切换和您刚洗完澡间休息之间，您的队友可能已将新更改推送到您所在的开发分支上。 您还希望在本地版本中进行这些更改，因此，最好始终抓住所有可能的机会进行更改。 为此，您要做的就是：

git pull origin develop

git pull origin develop

4. Branch: Now that you have the latest changes in the develop branch, you wanna get cracking, yeah? Well, not so fast. Remember, the develop branch is the communal room what everyone on your team pushes to before going live. It may not be the master branch but it is still sacrosanct and you don’t wanna mess it up. You want to create your own branch. Think of it like creating your own playground, where if you mess up, it’s only your own mess and you have all the time in the world to clean it up. Branching is essential to working collaboratively with git. To create your own branch, use the command: git branch <branch-name>, in our case:

4.分支：既然您在develop分支中拥有最新的更改，那么您想破解吗？ 好吧，不是那么快。 请记住，develop分支是公用空间，您团队中的每个人在上线之前都会推送到该公用空间。 它可能不是主分支，但它仍然是神圣不可侵犯的，您不想将其弄乱。 您要创建自己的分支。 可以将其想像成创建自己的游乐场，如果您搞砸了，那只会是您自己的一团糟，世界上所有的时间都需要清理它。 分支对于与git协作至关重要。 要创建自己的分支，请在以下情况下使用命令： git branch <branch-name> ：

git branch playground

git branch playground

Next thing to do is go into your playground that you just created using the command git checkout <branch-name> as in: git checkout playground

接下来要做的是进入您使用命令git checkout <branch-name>创建的操场，如下所示： git checkout playground

This new branch is a copy of the ‘develop’ branch, the difference is, you can paint this playground red if you wish.

这个新分支是'develop'分支的副本，不同之处在于，可以根据需要将此操场涂成红色。

Tip: You could create a new branch and checkout into it with a single command: git checkout -b <branch-name>

提示： 您可以创建一个新分支，并使用单个命令将其 git checkout -b <branch-name> ： git checkout -b <branch-name>

5. Status: You can check the status of your branch by typing git status. Status shows you the files that have been changed but not yet committed.

5.状态：您可以通过输入git status来检查分支的状态。 状态显示已更改但尚未提交的文件。

git status

git status

Since we haven't made any concrete changes to the file just yet, you won’t get much feedback regarding your files. This is time to give git a break, go into the CSS file you wanna make changes to and do your CSS magic. To test now, you can create an empty file — say test.html

由于我们尚未对文件进行任何具体更改，因此您不会收到有关文件的大量反馈。 现在是时候让git休息一下，进入您想要更改CSS文件，然后做一下CSS魔术。 要立即进行测试，您可以创建一个空文件-例如test.html

6. Add: After creating a file or making changes to a file, you should add it. Adding makes the git begin to track the changes you make to that file. You can add all changes git add <filename> or git add .

6.添加：创建文件或对文件进行更改后，应添加它。 添加使git开始跟踪您对该文件所做的更改。 您可以添加所有更改git add <filename> or git add .

A little side note, the . after the add command stands for the directory. So in essence, you are saying add all the changes in this directory.

一点说明，。 在添加命令代表目录之后。 因此，实质上，您是说在此目录中添加所有更改。

7. Commit: Committing is very important. Committing is creating a record of the changes you have just added. You get a short SHA code after commit. This code can be used to roll back changes just in case you decide that was the wrong change or you roll back to a previous version. It is essential to add a commit message — which is a short description of the change you just made.

7.提交：提交非常重要。 提交正在创建您刚刚添加的更改的记录。 提交后，您会得到简短的SHA代码。 此代码可用于回滚更改，以防万一您确定错误的更改或回滚到先前版本。 添加提交消息非常重要-这是您刚刚进行的更改的简短描述。

git commit -m "changes button color to red"

git commit -m "changes button color to red"

8. Log: Git log shows you the history of all commits in the repository. Every now and then, you may want to see your commits log or the commits your teammates have made. To do that it’s as simple as typing: git log

8.日志： Git日志向您显示存储库中所有提交的历史记录。 时不时地，您可能希望查看自己的提交日志或队友所做的提交。 为此，就像输入一样简单： git log

9. Push: Say you’ve made all the usability changes you want to and you’ve added and committed them intermittently and the log says so. Now is the time to push. Pushing registers your changes on the remote repository where other members of your team can access.

9.推送：假设您已经进行了所有想要的可用性更改，并且已间歇性地添加并提交了这些更改，并且日志显示了这一点。 现在是时候了。 推送将您的更改注册到团队其他成员可以访问的远程存储库中。

git push origin playground

git push origin playground

Now your branch is saved in the remote repository.

现在，您的分支已保存在远程存储库中。

10. Merge: Merging is an attempt to include your branch changes to the rest of the team’s. It’s like asking your room to be part of the team’s house. Typically, in a team setting, you would make a merge request on Github or the equivalent that your company uses. A merge request is you asking that your playground branch be included as part of the ‘develop’ branch which is the team’s house.

10.合并：合并是为了将您的分支更改包括到团队的其余部分中。 这就像要求您的房间成为团队成员的一部分。 通常，在团队环境中，您将在Github或贵公司使用的同等产品上提出合并请求。 合并请求是您要求将操场分支包括在团队房屋的“开发”分支中。

However, in the extremely unlikely case where you have to handle this yourself, all it involves is going into the team’s working branch i.e develop and then merge yours, using these two commands:

但是，在极不可能的情况下，您必须亲自处理此问题，它涉及的只是进入团队的工作分支，即使用以下两个命令来开发然后合并您的分支：

git checkout develop

git checkout develop

git merge playground

git merge playground

This is by no means the end to git. But this is likely to be your most typical workflow when working with git as a designer. Understanding these 10 commands will help you work effectively with git. But just in case it all seems so tedious with the command line interface, you can also use apps such as the GitHub desktop app if your team’s repository is hosted on Github. All the best with git!

这绝不是git的结局。 但这可能是与git作为设计师一起使用时最典型的工作流程。 了解这10个命令将帮助您有效地使用git。 但是，以防万一，使用命令行界面显得如此乏味，如果团队的存储库托管在Github上，您还可以使用GitHub桌面应用程序之类的应用程序 。 git一切顺利！