Published on | Prototyping: From UX to Front End — Medium Evgeny

As the Design Ops (and cat enthusiast), I’ve been looking forward to Abstract release for months (maybe years) and I’m genuinely happy it finally happened! Beta, but looks so promising.

Before acquiring the Team subscription plan, 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 Craft and Github.

Here’s what it looks like:
(before digging in it could be really helpful to peek at the concepts behind)

Pages in Sketch fileFundamentals — this is where it all starts… 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 Atomic design convention.

Test case specs:

1 sketch file
6 (+1) pages
10 artboards
10 symbols
uncompressed weight — 54Kb

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.

Case 1: Creating a Project and adding a sketch file

Simple as it sounds — init a Project with a ready to use sketch file.

So far so good, everything looks nicehmm, 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?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 github does).
Creating Project takes a while; generating previews takes about 1–2 minutes, not sure what the problem is.

Case 2: Minor changes via branch — commit — merge pattern

Next logical step is to test managing changes just as we used to using git:

create branch
make changes
* commit changes
* create pull-request
* review
merge branch

(*) — these steps are combined in one in Abstract

Let’s proceed — I create a new branch and open it in Sketch…

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.

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.

github images compare exampleanother 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.

Background added — final result

Finally — we need to merge our changes. It seems to be a quick process, but Abstract performs unexpectedly slowly.

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.

Case 3: Changing color styles, text styles and layer styles

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.

It may seem a whim, but for this particular case it would be a huge helper.
Try telling difference here:

beforeafter

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.

Case 4: Adding the Symbol

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:

Here’s our changes in documentationThat’s a bit strange, I don’t recall changing theseExpected 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

unexpected changes in symbols and screens that haven’t been manually changed — images are identical (see Case 4)
“Edited” and “Edited 🔁” badges do not represent actual changes adequately (Case 4)

Performance issues (see also Specs)

creating branch takes a while (see Cases 2)
merging branch takes a while (see Cases 2)
syncing process takes a lot of time, many times connection got lost and I had to poke it with “retry”
Sketch crashes when creating 2+ branches in a row

Feature requests

would be truly awesome to compare screens at the very least side-by-side (see Case 2)
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)
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)

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.

Abstract (beta). First impressions was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Abstract (beta). First impressions

Cool stuff, every week

More Articles