Daniel Sch­warz shows us how to use Ab­stract, the crit­i­cally ac­claimed ver­sion con­trol app for Sketch users

net magazine - - CONTENTS -

Daniel Sch­warz shows us how to or­gan­ise and man­age your de­sign sys­tem

Ver­sion con­trol was orig­i­nally aimed at de­vel­op­ers work­ing with code, as a way for mul­ti­ple de­vel­op­ers to work on the same code­base at the same time with the abil­ity to roll back to ear­lier ver­sions if needed. It means that mul­ti­ple ver­sions of the code­base (ear­lier and cur­rent) aren’t scat­tered around the com­puter sys­tems of var­i­ous de­vel­op­ers with no ac­count­abil­ity and no clar­ity as to who is work­ing on what. Ver­sion con­trol is de­signed to al­le­vi­ate the con­fu­sion that some­times oc­curs when mul­ti­ple de­vel­op­ers are work­ing on the same thing lo­cally. Even non-de­vel­op­ers can ben­e­fit from ver­sion con­trol, be­cause it’s fairly easy for de­vel­op­ers to say what’s changed in the lat­est ver­sion and for a man­ager to stay up to date on these changes with­out hav­ing to open or even un­der­stand the code.

And now, Ab­stract has brought this func­tion­al­ity to designers us­ing Sketch. But, if ver­sion con­trol has been com­mon prac­tice for years, why are designers only get­ting ac­cess to it now? Designers have shied away from ver­sion con­trol for a num­ber of rea­sons. Firstly, ver­sion con­trol usu­ally re­quires you to learn how to use Git and op­er­ate it us­ing com­mand line (Win­dows) or Ter­mi­nal (macOS), and since designers tend to favour the use of GUIs (graph­i­cal user in­ter­faces), ver­sion con­trol has re­mained favourable with mostly de­vel­op­ers. GitHub of­fers a GUI, but doesn’t sup­port de­sign files like Sketch and Pho­to­shop as there’s no way to com­pare two ver­sions of the same de­sign file vis­ually. Ab­stract solves these is­sues for designers. Ab­stract of­fers: ● A stun­ning GUI ● Vis­ual ver­sion­ing ● Feed­back tools Say good­bye to de­sign.sketch, de­sign2.sketch, .de­sign­fi­nal.sketch and de­sign­fi­nal­fi­nal.sketch, and say hello to Ab­stract in­stead.


First of all, cre­ate an ac­count at app.goab­stract.com and down­load the macOS desk­top app. You only need to give your name and email ad­dress to be­gin. Pretty straight­for­ward. Stake­hold­ers can use Ab­stract in the browser, so it’s only the de­signer that ac­tu­ally re­quires macOS, and the browser ver­sion looks and feels al­most iden­ti­cal. Sim­ple tasks like read­ing no­ti­fi­ca­tions, chang­ing ac­count set­tings and fil­ter­ing projects are very easy to ac­com­plish in ei­ther in­ter­face. As­sum­ing you’ve cre­ated an ac­count, start by log­ging in.

Cre­ate an Or­ga­nis ation

Per­haps the first thing you’ll want to do is cre­ate an or­gan­i­sa­tion, which es­tab­lishes a clear di­vide be­tween the work that you do in the dif­fer­ent teams that you’re in. You wouldn’t nec­es­sar­ily want your work­mates to see what kind of em­bar­rass­ing stuff you’re de­sign­ing at home, so this is as much about pri­vacy as it is about not clog­ging up your work’s Ab­stract dash­board with var­i­ous re­designs of your sig­nif­i­cant other’s blog. Click on your user­name in the top-mid­dle re­gion of the desk­top app win­dow, then choose the ‘+ Cre­ate new Or­ga­ni­za­tion’ op­tion. You’ll be asked to give your or­gan­i­sa­tion a name, al­though this re­quest will open up in the web browser. I sus­pect the desk­top ex­pe­ri­ence will be­come more seam­less over time, but it’s not too much of a hin­drance. Click Cre­ate Team when you’re done and then switch back to the desk­top app so we can in­vite our team.

In­vite Mem­bers to an Or­ga­nis ation

Re­vert back to the user­name drop­down, and switch to the or­gan­i­sa­tion that we cre­ated (short­cut: Cmd+2). Then, from the side­bar on the left-hand side, click the In­vite but­ton.

First, de­cide what sort of per­mis­sions the in­vited users will have. View­ers will be able to re­view de­signs, leave com­ments and ex­port files un­tracked, whereas Con­trib­u­tors can also cre­ate branches, com­mit changes and edit files. Only ad­mins of the or­gan­i­sa­tion (that’s you) can in­vite Con­trib­u­tors. Don’t worry if you’re not 100 per cent sure what ‘com­mits’ or ‘branches’ are, I’ll ex­plain any ver­sion con­trol ter­mi­nol­ogy as we come to it.

You’ll be able to in­vite users via a sharable in­vite link or al­ter­na­tively by typ­ing a list of comma-sep­a­rated email ad­dresses. Let’s start a project now.

Cre­ate a Project

Projects are the dif­fer­ent things that your or­gan­i­sa­tion is work­ing on, such as a client’s web­site or an­other client’s iOS app.

Click the New Project but­ton in the top-right cor­ner. Give it a name, a de­scrip­tion, a colour to iden­tify it by (which could be the pri­mary hex code from the de­sign it­self) and then (op­tion­ally) check the Make Project Pri­vate check­box to make it avail­able only to a se­lect few from within your or­gan­i­sa­tion.

In the top-right cor­ner of the project’s card click the three-dot icon, then go to Man­age Peo­ple to in­vite View­ers and/or Con­trib­u­tors to pri­vate projects. Remember, that those in your or­gan­i­sa­tion can’t see any pri­vate projects un­less they’ve been in­vited!

Use the Add tab to in­vite mem­bers of your or­gan­i­sa­tion to the pri­vate project and the In­vite tab to add some­one who isn’t a mem­ber (a client, for ex­am­ple – those are called Guests). You

can also re­move users us­ing the Man­age tab.

Im­port a Sketch File

Projects are started when you click on the card and se­lect ei­ther Im­port a Sketch file or Cre­ate Sketch File. Sketch files cre­ated in Ab­stract can be ex­ported out of Ab­stract later.

In or­der to track and ver­sion your .sketch files, you must first open the file via Ab­stract. To avoid any con­fu­sion when you are work­ing with im­ported Sketch files, we rec­om­mend that you move the orig­i­nal to some­where where you won’t ac­ci­den­tally open it and be­gin edit­ing with­out think­ing. Sketch files cre­ated in Ab­stract are au­to­mat­i­cally ver­sioned.

Cre­ate a Branch

Be­fore we can be­gin de­sign­ing, we must cre­ate a branch first. A branch ex­tends from the mas­ter (this is what’s been cre­ated al­ready) and rep­re­sents your ver­sion that you’ll be work­ing on. Click the New Branch but­ton in the top-right cor­ner or, al­ter­na­tively, click Edit in Sketch (which is un­der­neath), where you’ll be asked to cre­ate a new branch any­way (you should never com­mit un­re­viewed changes to the mas­ter… ever!).

First thing’s first, write the name and de­scrip­tion for the branch. Branches are opened for ex­per­i­men­ta­tion, so you’d cre­ate a new branch each time you work on some­thing new and they’d be named some­thing like ‘loginre­design’ or ‘so­cial-links’. This lets oth­ers know what’s be­ing worked on and re­duces the risks of hav­ing two con­flicted ver­sions of the de­sign later on.

Changes made to the branch won’t af­fect the mas­ter, so only when you’ve fin­ished that branch should you merge it into the mas­ter. When a de­signer starts work­ing on some­thing new, they would cre­ate a new branch from the mas­ter, which would in­clude the changes from any other pre­vi­ously merged branches.

Once you’ve added a branch name and de­scrip­tion, the file will open in Sketch, where we can be work­ing on it.

Com­mit TO YOUR Changes

When you’re ready to say “I’m done for now”, hit the Pre­view & Com­mit but­ton that ap­pears in the Ab­stract tool­bar in Sketch, where you’ll be switched back to Ab­stract au­to­mat­i­cally.

Give the project a ti­tle and de­scrip­tion ex­plain­ing what you’ve done in this branch, then click the Com­mit Changes but­ton.

COM­MENT AND Re­view Phase

Next, click the No Sta­tus drop-down box in the up­per-left cor­ner and change the se­lec­tion to Open for Feed­back if you need some di­rec­tion, or Ready for Re­view if you think this branch is ready to be merged into the mas­ter (ie you think what you in­tended to do in this branch has been hon­oured). Con­trib­u­tors and View­ers can then see (in Ab­stract’s main dash­board) that this branch needs re­view­ing and can quickly add their own com­ments.

Share Feed­back

Add com­ments by click­ing through to the branch from the dash­board, se­lect­ing the rel­e­vant page (as de­fined in Sketch) and writ­ing a com­ment in the Com­ment side­bar on the right-hand side. To make com­ments on a spe­cific as­pect of the de­sign, click the an­no­tate icon (short­cut: A) at the bot­tom of the Com­ment side­bar and drag-se­lect a re­gion on the de­sign. After that, type your com­ment and hit Re­turn to make your com­ment. If you’re speak­ing to some­body di­rectly, make sure to @

men­tion them and they’ll re­ceive a no­ti­fi­ca­tion about it.

Also, make sure to check out the his­tory side­bar on the left-hand side, to see (vis­ually) what ex­actly has changed.

Now if you nav­i­gate back to the home dash­board by click­ing the home icon in the menu bar, and click­ing Or­gan­i­sa­tion Set­tings on the left-hand side, not only can you man­age the users, or­gan­i­sa­tion se­cu­rity and billing, but you can also set up in­te­gra­tions.

For now the only in­te­gra­tion is with Slack, which au­to­mat­i­cally keeps your Slack team up­dated when­ever some­thing changes in a de­sign (and con­ve­niently links you to it, where you can take ac­tion), but in the very near fu­ture we’ll see in­te­gra­tions with JIRA and GitHub, to bet­ter en­hance our team com­mu­ni­ca­tion ef­forts.

Merge into Mas­ter

At this stage we can take the feed­back on­board, make more changes, com­mit those changes, and re­quest more feed­back. Just remember to change the sta­tus to Work in Progress when you’re edit­ing, then back to Feed­back or Re­view when you’re not. In the branch dash­board, in the left-hand side­bar, you can see an over­view of all com­mits/com­ments that have been made to/on that branch. Ab­stract en­cour­ages a col­lab­o­ra­tive work­flow of con­stant it­er­a­tion and feed­back un­til you’re fi­nally ready to merge the fin­ished changes into the mas­ter. Let’s do that now.

Click Merge Branch in the topright cor­ner of the in­ter­face. We’ve now de­ployed these changes to the mas­ter. Other designers, should they cre­ate a new branch from the mas­ter called, say, ‘nav­i­ga­tion-redesign’, they will now have ac­cess to the changes you made and be able to build upon it. The mas­ter should only ever con­tain changes that you’d be happy to let other designers use and build upon. Our old branch no longer ex­ists.

Oh No, Some­thing Went Wrong!

Should you need to roll back to an ear­lier ver­sion, nav­i­gate to the mas­ter (or even an ear­lier com­mit of a branch, if you haven’t merged it yet), click on the Com­mits tab, tra­verse through the his­tory and then hit the Re­store Com­mit icon.

You can re­vert back to older ver­sions of the mas­ter and also older ver­sions of branches as long as they haven’t been merged.

Who is Ab­stract aimed AT ?

Ab­stract is not for fast-paced or dis­or­gan­ised de­sign teams. Whether you’re a re­mote worker or a team mem­ber in an of­fice, Ab­stract keeps your de­signs safe in the cloud, ac­ces­si­ble from wher­ever you are and your team ac­count­able for the changes that they make. If you’re a solo free­lancer, you still have the ben­e­fit of be­ing able to ac­cess your work from any com­puter and roll back to ear­lier ver­sions of a de­sign, if needed.

If you find that your team is suf­fer­ing from too many con­flict­ing branches that are dif­fi­cult to re­solve (this can hap­pen a lot in large, en­er­getic teams with mul­ti­ple designers), then Figma ( figma.com), which is be­com­ing more and more pop­u­lar, might be a more suit­able tool as it en­ables designers to col­lab­o­rate on the same ver­sion in real-time. Ab­stract is free for in­di­vid­ual users (free­lancers and such), and is $9 or $21 for teams (de­pend­ing on their size).

… And be sure to mark your project Ready for Re­view

Step 6 Cre­ate a branch to rep­re­sent the ver­sion you’re work­ing on

Step 8 Ev­ery­thing is locked un­til you se­lect Open for Feed­back…

Step 7 When you’re happy, click Com­mit Changes

Step 4 You can eas­ily cre­ate a project and then cus­tomise its pri­vacy sta­tus

Step 3 Build your de­sign team on­line by adding mem­bers to your group

Step 1 Cre­ate your own Ab­stract ac­count and log in with those de­tails

Step 2 Start by cre­at­ing a new or­gan­i­sa­tion to or­gan­ise and man­age

Step 10 When the time comes, merge worked-on branches with the mas­ter

Step 9 You and your de­sign team can eas­ily add spe­cific com­ments

Step 11 Rev­ert­ing back to older ver­sions of the mas­ter is easy

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.