Daniel Schwarz shows us how to use Abstract, the critically acclaimed version control app for Sketch users
Daniel Schwarz shows us how to organise and manage your design system
Version control was originally aimed at developers working with code, as a way for multiple developers to work on the same codebase at the same time with the ability to roll back to earlier versions if needed. It means that multiple versions of the codebase (earlier and current) aren’t scattered around the computer systems of various developers with no accountability and no clarity as to who is working on what. Version control is designed to alleviate the confusion that sometimes occurs when multiple developers are working on the same thing locally. Even non-developers can benefit from version control, because it’s fairly easy for developers to say what’s changed in the latest version and for a manager to stay up to date on these changes without having to open or even understand the code.
And now, Abstract has brought this functionality to designers using Sketch. But, if version control has been common practice for years, why are designers only getting access to it now? Designers have shied away from version control for a number of reasons. Firstly, version control usually requires you to learn how to use Git and operate it using command line (Windows) or Terminal (macOS), and since designers tend to favour the use of GUIs (graphical user interfaces), version control has remained favourable with mostly developers. GitHub offers a GUI, but doesn’t support design files like Sketch and Photoshop as there’s no way to compare two versions of the same design file visually. Abstract solves these issues for designers. Abstract offers: ● A stunning GUI ● Visual versioning ● Feedback tools Say goodbye to design.sketch, design2.sketch, .designfinal.sketch and designfinalfinal.sketch, and say hello to Abstract instead.
Get Started WITH ABSTRA CT
First of all, create an account at app.goabstract.com and download the macOS desktop app. You only need to give your name and email address to begin. Pretty straightforward. Stakeholders can use Abstract in the browser, so it’s only the designer that actually requires macOS, and the browser version looks and feels almost identical. Simple tasks like reading notifications, changing account settings and filtering projects are very easy to accomplish in either interface. Assuming you’ve created an account, start by logging in.
Create an Organis ation
Perhaps the first thing you’ll want to do is create an organisation, which establishes a clear divide between the work that you do in the different teams that you’re in. You wouldn’t necessarily want your workmates to see what kind of embarrassing stuff you’re designing at home, so this is as much about privacy as it is about not clogging up your work’s Abstract dashboard with various redesigns of your significant other’s blog. Click on your username in the top-middle region of the desktop app window, then choose the ‘+ Create new Organization’ option. You’ll be asked to give your organisation a name, although this request will open up in the web browser. I suspect the desktop experience will become more seamless over time, but it’s not too much of a hindrance. Click Create Team when you’re done and then switch back to the desktop app so we can invite our team.
Invite Members to an Organis ation
Revert back to the username dropdown, and switch to the organisation that we created (shortcut: Cmd+2). Then, from the sidebar on the left-hand side, click the Invite button.
First, decide what sort of permissions the invited users will have. Viewers will be able to review designs, leave comments and export files untracked, whereas Contributors can also create branches, commit changes and edit files. Only admins of the organisation (that’s you) can invite Contributors. Don’t worry if you’re not 100 per cent sure what ‘commits’ or ‘branches’ are, I’ll explain any version control terminology as we come to it.
You’ll be able to invite users via a sharable invite link or alternatively by typing a list of comma-separated email addresses. Let’s start a project now.
Create a Project
Projects are the different things that your organisation is working on, such as a client’s website or another client’s iOS app.
Click the New Project button in the top-right corner. Give it a name, a description, a colour to identify it by (which could be the primary hex code from the design itself) and then (optionally) check the Make Project Private checkbox to make it available only to a select few from within your organisation.
In the top-right corner of the project’s card click the three-dot icon, then go to Manage People to invite Viewers and/or Contributors to private projects. Remember, that those in your organisation can’t see any private projects unless they’ve been invited!
Use the Add tab to invite members of your organisation to the private project and the Invite tab to add someone who isn’t a member (a client, for example – those are called Guests). You
can also remove users using the Manage tab.
Import a Sketch File
Projects are started when you click on the card and select either Import a Sketch file or Create Sketch File. Sketch files created in Abstract can be exported out of Abstract later.
In order to track and version your .sketch files, you must first open the file via Abstract. To avoid any confusion when you are working with imported Sketch files, we recommend that you move the original to somewhere where you won’t accidentally open it and begin editing without thinking. Sketch files created in Abstract are automatically versioned.
Create a Branch
Before we can begin designing, we must create a branch first. A branch extends from the master (this is what’s been created already) and represents your version that you’ll be working on. Click the New Branch button in the top-right corner or, alternatively, click Edit in Sketch (which is underneath), where you’ll be asked to create a new branch anyway (you should never commit unreviewed changes to the master… ever!).
First thing’s first, write the name and description for the branch. Branches are opened for experimentation, so you’d create a new branch each time you work on something new and they’d be named something like ‘loginredesign’ or ‘social-links’. This lets others know what’s being worked on and reduces the risks of having two conflicted versions of the design later on.
Changes made to the branch won’t affect the master, so only when you’ve finished that branch should you merge it into the master. When a designer starts working on something new, they would create a new branch from the master, which would include the changes from any other previously merged branches.
Once you’ve added a branch name and description, the file will open in Sketch, where we can be working on it.
Commit TO YOUR Changes
When you’re ready to say “I’m done for now”, hit the Preview & Commit button that appears in the Abstract toolbar in Sketch, where you’ll be switched back to Abstract automatically.
Give the project a title and description explaining what you’ve done in this branch, then click the Commit Changes button.
COMMENT AND Review Phase
Next, click the No Status drop-down box in the upper-left corner and change the selection to Open for Feedback if you need some direction, or Ready for Review if you think this branch is ready to be merged into the master (ie you think what you intended to do in this branch has been honoured). Contributors and Viewers can then see (in Abstract’s main dashboard) that this branch needs reviewing and can quickly add their own comments.
Add comments by clicking through to the branch from the dashboard, selecting the relevant page (as defined in Sketch) and writing a comment in the Comment sidebar on the right-hand side. To make comments on a specific aspect of the design, click the annotate icon (shortcut: A) at the bottom of the Comment sidebar and drag-select a region on the design. After that, type your comment and hit Return to make your comment. If you’re speaking to somebody directly, make sure to @
mention them and they’ll receive a notification about it.
Also, make sure to check out the history sidebar on the left-hand side, to see (visually) what exactly has changed.
Now if you navigate back to the home dashboard by clicking the home icon in the menu bar, and clicking Organisation Settings on the left-hand side, not only can you manage the users, organisation security and billing, but you can also set up integrations.
For now the only integration is with Slack, which automatically keeps your Slack team updated whenever something changes in a design (and conveniently links you to it, where you can take action), but in the very near future we’ll see integrations with JIRA and GitHub, to better enhance our team communication efforts.
Merge into Master
At this stage we can take the feedback onboard, make more changes, commit those changes, and request more feedback. Just remember to change the status to Work in Progress when you’re editing, then back to Feedback or Review when you’re not. In the branch dashboard, in the left-hand sidebar, you can see an overview of all commits/comments that have been made to/on that branch. Abstract encourages a collaborative workflow of constant iteration and feedback until you’re finally ready to merge the finished changes into the master. Let’s do that now.
Click Merge Branch in the topright corner of the interface. We’ve now deployed these changes to the master. Other designers, should they create a new branch from the master called, say, ‘navigation-redesign’, they will now have access to the changes you made and be able to build upon it. The master should only ever contain changes that you’d be happy to let other designers use and build upon. Our old branch no longer exists.
Oh No, Something Went Wrong!
Should you need to roll back to an earlier version, navigate to the master (or even an earlier commit of a branch, if you haven’t merged it yet), click on the Commits tab, traverse through the history and then hit the Restore Commit icon.
You can revert back to older versions of the master and also older versions of branches as long as they haven’t been merged.
Who is Abstract aimed AT ?
Abstract is not for fast-paced or disorganised design teams. Whether you’re a remote worker or a team member in an office, Abstract keeps your designs safe in the cloud, accessible from wherever you are and your team accountable for the changes that they make. If you’re a solo freelancer, you still have the benefit of being able to access your work from any computer and roll back to earlier versions of a design, if needed.
If you find that your team is suffering from too many conflicting branches that are difficult to resolve (this can happen a lot in large, energetic teams with multiple designers), then Figma ( figma.com), which is becoming more and more popular, might be a more suitable tool as it enables designers to collaborate on the same version in real-time. Abstract is free for individual users (freelancers and such), and is $9 or $21 for teams (depending on their size).
… And be sure to mark your project Ready for Review
Step 6 Create a branch to represent the version you’re working on
Step 8 Everything is locked until you select Open for Feedback…
Step 7 When you’re happy, click Commit Changes
Step 4 You can easily create a project and then customise its privacy status
Step 3 Build your design team online by adding members to your group
Step 1 Create your own Abstract account and log in with those details
Step 2 Start by creating a new organisation to organise and manage
Step 10 When the time comes, merge worked-on branches with the master
Step 9 You and your design team can easily add specific comments
Step 11 Reverting back to older versions of the master is easy