Published on <a href="http://ift.tt/2tVY1Be">| Prototyping: From UX to Front End &mdash; Medium</a> Evgeny <img alt="" src="http://ift.tt/2tVWXh4">
As the Design Ops (and <a href="https://www.youtube.com/watch?v=jP_ze_vmlj8">cat enthusiast</a>), I’ve been looking forward to <a href="http://ift.tt/2uMwfY3">Abstract</a> release for months (maybe years) and I’m genuinely happy it finally happened! Beta, but looks so promising.
Before acquiring the <a href="http://ift.tt/2v9imT5">Team subscription plan</a>, which seems like a natural move in my situation, I’ve decided to give it a spin and test thoroughly using free version on a custom project. Nothing fancy, just a scaffolding for a design system we’ve been using so far with the help of <a href="http://ift.tt/1pZWfMs">Craft</a> and <a href="http://github.com">Github</a>.
Here’s what it looks like: (before digging in it could be really helpful to peek at the <a href="http://ift.tt/2oXAL2t">concepts</a> <a href="http://ift.tt/2mEPcv6">behind</a>)
<img alt="" src="http://ift.tt/2tde8O4">Pages in Sketch file<img alt="" src="http://ift.tt/2tVN6rm">Fundamentals — this is where it all starts<img alt="" src="http://ift.tt/2td65kg">… and this is where it all brews — Symbols page
The rest of the pages simply represent each component and it’s variations if any take precedence; and Grid is a collection of templates for the further usage. As you may notice, our approach based on <a href="http://ift.tt/10fvlmw">Atomic design</a> convention.
Test case specs:
<ul>
<li>1 sketch file</li>
<li>6 (+1) pages</li>
<li>10 artboards</li>
<li>10 symbols</li>
<li>uncompressed weight — 54Kb</li>
</ul>
Other specs: MacBook Pro with 2,5 GHz Intel Core i7 / 16Gb RAM. OS X El Capitan v 10.11.6 Sketch v 45.1 Abstract v 0.55.6 (0.55.6.4975)
Without further ado, let’s get started.
<h4>Case 1: Creating a Project and adding a sketch file</h4>
Simple as it sounds — init a Project with a ready to use sketch file.
<img alt="" src="http://ift.tt/2tcPNHX">So far so good, everything looks nice<img alt="" src="http://ift.tt/2tVWY4C">hmm, that’s weird but I know what this is — “Titles” is generated by Sketch “Organize Symbols” plugin — but do we really need it here? Also, why it looks empty?<img alt="" src="http://ift.tt/2tcVlSX">10 symbols counted — 10 added, awesome!
General notes: So far, so good! The only weird occurrence here is seeing something unexpected — I would suggest using some filtering / ignore list for the entities that do not need further tracking (like <a href="http://ift.tt/1vP8E2t">github</a> does). Creating Project takes a while; generating previews takes about 1–2 minutes, not sure what the problem is.
<h4>Case 2: Minor changes via branch — commit — merge pattern</h4>
Next logical step is to test managing changes just as we used to using git:
<ul>
<li>create branch</li>
<li>make changes</li>
<li>* commit changes</li>
<li>* create pull-request</li>
<li>* review</li>
<li>merge branch</li>
</ul>
(*) — these steps are combined in one in Abstract
Let’s proceed — I create a new branch and open it in Sketch…
<img alt="" src="http://ift.tt/2tcS0mX">In the next 2 minutes I observe this preloader
Then I do some changes, in this no-brainer case — adding background to an artboard. Commit is created smoothly and swiftly, however again I observe delayed previews generating.
<img alt="" src="http://ift.tt/2tVD6hI">I really enjoy this pattern — you can quickly prevent an action in case you’ve changed your mind
Here comes something — in github (and similar git clients) we can compare “before” and “after” images using different useful tools.
<img alt="" src="http://ift.tt/2tdktc1">github images compare example<img alt="" src="http://ift.tt/2tVN7eU">another github images comparison, but using different pattern
I really miss something like this in Abstract — so far it’s not quiet practical. You can observe proposed (previous) and current states of boards or symbols but on the separate screens. I hope it will be improved shortly.
<img alt="" src="http://ift.tt/2tcQf8Z">Background added — final result
Finally — we need to merge our changes. It seems to be a quick process, but Abstract performs unexpectedly slowly.
<img alt="" src="http://ift.tt/2tVY3ck">Another loader, another minute
General notes: Interface is responsive, elaborate and easy-to-handle, I really enjoy it! The overall creating branch process (sync?) is considerably slow — this includes opening file in Sketch and merging the branch. Also it would be cool to compare images like in github or such.
<h4>Case 3: Changing color styles, text styles and layer styles</h4>
This case is about changing the core of any Design System — the “Fundamentals” layer. The trick is, applicably to Sketch — it uses different patterns for different styles (which can be a separate topic, ultimately).
This is why we need this layer — one to rule them all. That means any changes in fundamental styles should occur here and from here they would be transmitted over the symbols and compositions.
So it is crucially important for design system maintainability to be able to keep track of those changes. Let’s find out how Abstract can help.
The changes displayed are adequate and anticipated. Again, it could be much of a use to compare screens, but there’s more! It would be really great to track changes in Sketch data entities, like font-size,line-height, color value, shadow size etc.
<img alt="" src="http://ift.tt/2td7k2S">
It may seem a whim, but for this particular case it would be a huge helper. Try telling difference here:
<img alt="" src="http://ift.tt/2tVuvLX">before<img alt="" src="http://ift.tt/2td6yTe">after
The answer is box-shadow has changed color from #222222 to #262020… or #2c2424? You see, I can’t tell already!
General notes: Everything works as intended, but I would love to use some extra information in Abstract when changes occur to Sketch data-wired entities like text or layer styles.
<h4>Case 4: Adding the Symbol</h4>
Finally, let’s take a look at most trivial challenge — adding a Symbol and displaying it on our document’s page. Let’s create another Primary Button variation by setting 50% opacity on the button Background. (!) Avoid this pattern in real project, opacity is the tricky variable applicably to Sketch; it is better and more straightforward to create another Fill mixin.
We follow all same steps — branch, changes, commit. Result:
<img alt="" src="http://ift.tt/2tVH7Tr">Here’s our changes in documentation<img alt="" src="http://ift.tt/2tdePqs">That’s a bit strange, I don’t recall changing these<img alt="" src="http://ift.tt/2tW0dZF">Expected Titles screen and the culprit himself; but not sure about others…
To the last image — I have a thought that such behaviour might be related to Organize Symbols plugin, so it mutates some data under hood, but… visually all stays the same, does it make sense to display it?
General notes: Adding symbol triggers some unexpected changes, that do not reflect visual changes. Maybe it is better to omit displaying those.
Let’s recap and systematize the insights gained.
Great things: Abstract (even in beta) is finally here and it does what it’s been promising to do so many many months ago — provides github for designers: organize your projects, create branches, review, commit, track changes and so on and so forth.
Things to work on and keep an eye to: I divided them into 3 groups: functional issues, performance issues and feature requests:
Functional issues
<ul>
<li>unexpected changes in symbols and screens that haven’t been manually changed — images are identical (see Case 4)</li>
<li>“Edited” and “Edited 🔁” badges do not represent actual changes adequately (Case 4)</li>
</ul>
Performance issues (see also Specs)
<ul>
<li>creating branch takes a while (see Cases 2)</li>
<li>merging branch takes a while (see Cases 2)</li>
<li>syncing process takes a lot of time, many times connection got lost and I had to poke it with “retry”</li>
<li>Sketch crashes when creating 2+ branches in a row</li>
</ul>
Feature requests
<ul>
<li>would be truly awesome to compare screens at the very least side-by-side (see Case 2)</li>
<li>would be useful in some cases to make use of Sketch data and display text representation of values changed, like colors, line-heights, font-size etc (see Case 3)</li>
<li>once again, github feature request — some adaptation of .gitignore would be really useful, there are many things that are not required to track (see Case 1)</li>
</ul>
P.S. Despite some minor issues, I place Abstract among most promising tools for UI Designers / Frontend Devs and someone like me [sic]. It has tremendous potential and I wish developers all the best. I sincerely hope this overview will find you guys well and help in your struggle for the most elaborate instrument.
I didn’t overview a bunch of cool features like commenting system, adding custom notes and some others. First, that would take more time (and letters) and second — in my view it’s more of the Team plan specialty which I haven’t tested yet. Everything has it’s time.
I will try to update information and correct mistakes ASAP.
Thanks for reading! Please share and comment. And share.
<img src="http://ift.tt/2td7MOm" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2tVINMQ">Abstract (beta). First impressions</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.

Abstract (beta). First impressions

Top Stories