This tutorial will show you how to set up and use version control for your prototypes.
Git is a version control system that is part of pretty much every modern development process. We can use Git commands to show the different stages of review that your design must go through before it goes live. Each stage lowers the risk that you will make a decision that conflicts with features built by another team member.
Don't worry--Visual Studio Code lets you point and click to issue these commands.
Branches allow us to maintain and work on multiple iterations of a design. The first thing you'll want to do after you create your initial design is create a branch for any changes you'll make next. This will allow you to quickly revert to and view any design iteration.
Creating a Branch
-
Select the
master
branch name in the lower left of the screen. This will open the Command Palette at the top of the screen. -
Select
Create new branch...
-
Give your branch a name. Good branch names might be descriptive of your design iteration (e.g.
updated-nav-design
). -
Notice that the lower left of the screen now indicates that you are working on your new design branch. To switch to other branches, including your current design, select the branch name.
Adding Your Changes
-
When you are ready to add (commit) all of your changes for others to review, select the
Source Control
tab on the left side of the screen. This switches your Explorer view to theSource Code
view. -
Select the
+
to the left of theCHANGES
section. This willStage All Changes
. -
After all changes have been staged, type a descriptive
Message
for what you changed in this design branch, then select the checkmark above the message area.
Publishing Your Changes
- To allow others to see your branch with your design changes, select
...
, and thenPush
.
Switching Between Branches (Design Iterations)
- To switch to other branches, including your current design, select the branch name in the lower left of the screen.
Merging Design Iterations into the Final Design
-
Select your design branch.
-
In the
Source Control
view, select...
at the top of the Explorer, then selectPush to...
, and selectmaster
.