<p>Published on <a href="http://ift.tt/2uluJOL">| Prototyping: From UX to Front End &mdash; Medium</a> Vitor Guerra </p>
<h4>Is the “Git for designers” really that good? YES.</h4>
<p><img alt="" src="http://ift.tt/2vjI1Zu"></p>
<p><strong>If you like it, don’t forget to 💚<br /></strong><em>What motivates me to write is knowing that someone liked what they read. So, give me a like if you see anything that made you think a little bit about something new 🙂</em></p>
<blockquote><p><em>I haven’t been this excited ever since I opened Sketch for the first time. Seriously.</em></p></blockquote>
<p>Yesterday, <a href="http://ift.tt/2uMwfY3">Abstract</a> has finally launched their public beta, and that is going to change the lives of many design teams.</p>
<p><strong>But before that… What type of designer are you?<br /></strong><em>Highlight:</em></p>
<ol>
<li>style-guide_v.3.2.1</li>
<li>styleguide-final-v2-really_final</li>
<li>header_03; foot_01; home_18</li>
<li>style-guide</li>
<li>other<em> (comment below!)</em></li>
</ol>
<h3>Admit it: all of us were once “myfile_final_03”</h3>
<p>I think it’s safe to say that every designer has had a file called “something_final”, or worse, “something_final_03”, right?</p>
<p>Honestly, that’s not a problem. The bad thing is if you’re still working with your files like that until today.</p>
<p>It’s about time we evolve our project organization and the launch of Abstract is the perfect queue to get started!</p>
<h3>How I managed files until “yesterday”</h3>
<p>As the lead product designer for <a href="http://ift.tt/QetoLx">Reclame AQUI</a>, one of the biggest Brazilian website with more than 16 million sessions per month, one of my roles is to provide guidance to the team of designers on how to organize and document our work. I’ve been working as a designer for 15 years, and I can say that I’ve tried doing that in many different ways.</p>
<p>Until “yesterday” I used to do it more or less like this:</p>
<ul>
<li>Dropbox to sync files among the team through the cloud</li>
<li>Directories that were organized by Product &gt; Project &gt; Types of file</li>
<li>We use Sketch only</li>
<li>(Reasonably) Centralized style guides in one file, updated by many team members</li>
<li>For God’s sake, no one works on the same file at the same time!</li>
<li>When the file is updated, one person shouts to the other that it’s updated so that everyone knows it, and saves it as an increment to the version (e.g.: from v3 to v4)</li>
</ul>
<p>I know, right… 😢</p>
<p>Still about collaborative work with design team members, among my recent failures are the attempt to manage file libraries with <a href="http://ift.tt/1pZWfMs">Invision’s Craft</a> — because of bugs during syncing that wouldn’t allow many designers to work on the same library — and <a href="http://ift.tt/2rjk2YR">UXPin Systems</a>, which also has a shared library tool, although it’s incomplete.</p>
<p>I also tried all the plugins and improvisations that I could find to connect Sketch with Git: <a href="http://ift.tt/228DunO">git-sketch-plugin</a> and <a href="http://ift.tt/18s052s">SketchGit</a>. I never found a good solution… That is because Git doesn’t read Sketch files in a way in which it can correctly understand the modifications.</p>
<p>Although I really like the ideas presented by <a href="http://ift.tt/2vjAqdn">Figma</a> and <a href="http://ift.tt/2fl076n">Adobe XD</a> in terms of team work, syncing the files, and controlling the versions, I still can’t migrate my workflow to another tool other than Sketch.</p>
<h3>“Developer Thinking”</h3>
<p>How did our developer friends manage to work as a team, on huge projects, on the same code, in perfect harmony?</p>
<p>I believe that in the last years, designers have evolved very little on their work processes, but I only say that based on the conversations I have with my friends from the field (especially UI and advertising). It’s always “copy/paste” here, “save as…” there, v1, v2, v3, final, final_2… And this has always driven me crazy.</p>
<p>Concepts that have been established between developers years ago only now are reaching our designer lives. For example, abstractions such as the <a href="http://ift.tt/2vjHIO6">atomic componentization logic</a> (portuguese only), the construction of reusable dummy objects, the file version control, and the team work logics (see Git).</p>
<h3>Design Processes</h3>
<p><em>There are 2 popular ways to work in a design project:</em></p>
<h4>Master file</h4>
<p>A single file to rule the entire project. In case of an app design, for example, it can be a Sketch file with an artboard for each screen, besides a page with unified symbols.</p>
<h4>Decentralized files</h4>
<p>Many files that, together, make up the entire project. For example, a Sketch file for the home page, another one for the onboard flux, another one for the style guide, etc.</p>
<p>Both have their pros and cons. Personally, I’ve used both models in different projects, but today I usually only have a master file for each project.</p>
<p>It’s important to say that I refer to managing a specific project, for example, an iOS app, an Android app, a website, a landing page, etc. That means that each project has its master file.</p>
<p>Of course, there can be many other ways to manage a project, but this isn’t the main point of this article. If you use another model, comment below and share your knowledge with other people! 🙂</p>
<h3>What does Abstract do?</h3>
<h4>File control</h4>
<p>Forget about saving files on a hard drive, on the internal grid, or on that Dropbox folder. Everything is kept on the cloud in Abstract. Actually, the mindset changes and you don’t even know where your files are while you’re working on them.</p>
<p><img alt="" src="http://ift.tt/2ulgkSK"></p>
<p>When they’re open through Abstract, they are downloaded and stored in a temporary folder. When you submit an update (commit), Sketch automatically closes the file.</p>
<h4>Version control</h4>
<p>You work and Abstract takes care of versioning.</p>
<p><img alt="" src="http://ift.tt/2vjmY9B"></p>
<p>When you open a file from it, all the changes are automatically tracked. If you need to access an old version, everything is saved on the cloud.</p>
<h4>Change control</h4>
<p>All the changes appear to those who need to approve it. It’s beautiful.</p>
<p><img alt="" src="http://ift.tt/2ul9GMe"></p>
<p>After, you only analyze what was updated, approve, or deny the changes. If there are conflicting items, just choose which one you want.</p>
<p>Besides, there is an internal comments system (I imagine this might be more worth it to people who work remotely) and integration with Slack 🎉</p>
<h3>How Abstract changed the game on my routine</h3>
<blockquote><p><em>I had never felt so confident about version and change control in a design project.</em></p></blockquote>
<p>My team and I (🦁 🐰 🐷) have been working on a daily basis with Abstract for a week now, with some ups and downs — which you already expect from an alfa version — and I can say it already won our hearts.</p>
<h4>What problem does it solve?</h4>
<p>Imagine this scenario:</p>
<ol>
<li>You’re a designer and you work with other designers on an app</li>
<li>There is a Master file with all the screens of your app</li>
<li>A page of this file has your style guide</li>
<li>Someone needs to design the new payment screen for the app</li>
<li>Someone needs to redesign all the app icons</li>
<li>Someone needs to make a B version of the product screen for a performance test</li>
</ol>
<h4>Solving it without Abstract</h4>
<p><em>One of the thousands of ways of making this happen:</em></p>
<ul>
<li><strong>🦁 Monique</strong> starts designing the new icons in a new file</li>
<li><strong>🐰 Thais</strong> opens the Master file, creates a new artboard, and starts designing the new payment screen</li>
<li><strong>🐰 </strong>saves it as file-v2</li>
<li><strong>🐰 </strong>creates a new artboard and designs the B version of the product screen</li>
<li><strong>🐰 </strong>saves it as file-v3</li>
<li><strong>🦁 </strong>opens file-v3, copies and pastes the new icons for the corresponding symbols</li>
<li><strong>🦁 </strong>saves it as file-v4</li>
<li>🐷 <strong>Vitor</strong>, on the next day, opens file-v4 and changes the colors of the icons</li>
<li>🐷 Saves it as file-v5</li>
</ul>
<p>Does that sound familiar? Somewhat close to this, maybe?</p>
<h4>Solving it with Abstract</h4>
<ul>
<li>🦁 <strong>Monique</strong> creates a branch (“versioned copy”) of the master file and starts designing the icons already where they’re meant to be</li>
<li>🐰 <strong>Thais</strong> creates another branch from the master, creates a new artboard and starts designing the payment screen</li>
<li>🦁 Is done with the new icons and sends the changes (commit) to the master file</li>
<li>🐷 Vitor gets the master update notification through Slack. He analyzes and approves 🦁’s iteration (merge) on the master</li>
<li>🐰 gets a notification that her file is obsolete (with old icons) and updates them (update branch from master) with the new things from the master version and the icons are instantly updated</li>
<li>🐰 finishes a new payment screen and sends it to the master file</li>
<li>🦁 creates another branch from the master file and starts working on the B version of the product screen, but changes the color of the icons</li>
<li>🦁 finishes and sends the new product screen to the master file</li>
<li>🐷 sees 🐰 🦁’s updates, and is notified about the conflict from the altered icons, refuses the new colors, and approves the other updates.</li>
<li>The End ❤️</li>
</ul>
<h3>Attention points</h3>
<p>During these trial weeks, we noticed some delay on the response of some actions such as merges for the master version, and it was almost impossible to work with files over 100Mb.</p>
<p>Having said that, I believe these problems were reasonable, since it’s an alfa version. Every week, the application received at least one new update, and I believe the final version will be much more stable than the one I’ve tested so far.</p>
<p>Another important thing is that today, it is only compatible to Sketch. They promise that soon they will accept other files. I imagine PSD is a safe bet for the future.</p>
<h3>Conclusion</h3>
<p>Start testing the beta version today and never let go of Abstract! 😍</p>
<p><a href="http://ift.tt/2uMwfY3">Abstract</a></p>
<p><img src="http://ift.tt/2vjkIz0" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2ulAw6Z">The definitive design workflow: Abstract app</a> was originally published in <a href="http://ift.tt/2cAqCpx">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


The definitive design workflow: Abstract app

Is the “Git for designers” really that good? YES.

Top Stories