The case against Abstract. Theres only two dominant UI design…
Tags: Design Process, Abstract, Sketch, Figma, Design Thinking

The other institutional aspect of any software design is that in a matter of fact there are two designs worked informally at any one time by teams; the design which is live in production and the design which is represented by pre-production blueprints. Most designers, even those with highly paid Senior Senior Mega Awesome Lord of the Universe titles, still don’t understand this! We work closely with programmers who manipulate live code, and who then have to constantly read it, understand it and create new pre-production code to ship to prod. In essence most designers operate outside of tangible reality where they only think in terms of pre-production code as if its production code . This makes it really difficult to efficiently articulate the delta between the two designs to the coders we’re supposed to be working with “closely”. Well, what if we actually worked on the same thing and had a unified thinking model to represent what we’re doing with software? Wouldn’t that be great? And whats needed for that is a tool that enables processes which can keeps track of the changes to ‘design’ on production as well as the ongoing designs on ‘pre-production’!

Tony Stark working with design and code as one singular sphere-thing in real-time

Most important of all is the concept of accelerating those around you to accelerate yourself. By setting up decentralized systems of trust where design decision making can be delegated outside the design team and across the company we can hit those fabled Elon’style 4,000x — 10,000x efficiency gains! In order to achieve such lightspeed order-of-magnitude improvements we need to be able to organize our design data as a single-source of truth thats indexed and easily searchable by anyone at the company. Imagine a future where you can take your office janitor for example, sit him down in front of the database for say Lyft App Design and have him be able to look up any feature in the app. For any of these areas he looks up he wouldn’t have to know which teams or team members worked on it. Yet he would be able to see every design detail down to the rivet and know that he can trust every pixel as the source of truth. Any area he looks up or navigates to he will be able to see whats running live as well as all the things being designed, by whom and why. Then once he is instantly ramped up he can make independent well-grounded decisions on how to change the system or even design his own change suggestions straight into the production pipeline!

That’s the future I’m talking about and it is already possible with both of these tools today!

Why Abstract is falling behind for design databases

Lets start with the hella obvious:

Its Abstract-Sketch and not Sketch-Abstract because Sketch’s only competitive edge over Figma is arguably version control provided by Abstract. Sketch itself has become sadly interchangeable with whatever else works with Abstract ( such as XD, Illustrator, etc).

These are two separate companies with different goals and ambitions on two opposite sides of the planet. Sometimes they play nice but often their updates break each others software: Sketch does not understand the value differentiation Abstract gives it and Abstract can’t ever fully reign in Sketch. Even now for some reason Sketch is investing a shit-ton of time into Sketch Cloud, a move as cringe-worthy as aspiring to become the next Blackberry of smartphones. In order to survive the two companies need to merge into one org because right now when compared against Figma’s unified polish the two seem like duct-taped mods of one-another.

Clickable in-file hyperlinks — Abstract-Sketch does not have any

In order to have a working database or interconnected data structures you need working hyperlinks! Figma has quickly built them and Abstract-Sketch seem to be simply unable to fundamentally do it. Links are important because they allow a design team to hack around the lack of 3D representation within current tools by linking together a bunch of 2D flows/artboards/pages across the company into one unified structure.

These links can be used to de-complicate flowmaps by pushing hierarchies and all alt. states and logic of a screen to deeper layers on other pages/files. A best practice here is to create a component that is both easily identifiable as a link and fast to drag in to relink to point at new areas of design data on Figma. With Abstract-Sketch this is just a pain in the neck because you have to make a custom component featuring an Abstract link that can only be triggered by selecting and manually copying the link into a web browser, to then open the link in Web Abstract, hop back over into native Abstract, and then open a native Sketch file. This is not intuitive enough to be built by designers and understood by every employee of a company in the way that a Figma hyperlink is.

Version control branches vs real-time collab

Figma currently has no version control and only linear backup available ( although it is rumored they are working on true version control ) which makes it hard to manage file permissions between lots of designers. It’s like they gave us the best of Google Drive/Docs and blended it with the worst of Tortoise SVN. Without actual version control every designer basically has 100's of files with 100's of lock/unlock switches that they have to remember to lock-unlock themselves to insure company data integrity. This is a recipe for disaster, especially when you consider that Lyft, for example, has over 200 designers, and all files created in Figma are unlocked by default.

However with Abstract-Sketch instead of maintaining version control over actual artboards ( which is a literal pain in the ass if you have 100's of branches with dozens of pages like I do ) the recommended way to split files up is on different pages. So if you have a file with a page that has a dozen artboards you would actually create a branch with an instance of that file that has another page such as “WIP UPDATE: Change this feature”. Then before or after a merge you would actually manually resolve the artboards in that page with what was in the pages for the rest of that file, and delete that page. Essentially all the version control is doing is keeping all these alt. pages on all these branches for you which you might as well just do in Figma.

Abstract sucks at Abstract’ing work for non-designers

The whole promise of Abstract is that it’s able to be an effective level of Abstraction for Sketch files. However the reality is that for a programmer receiving your Abstract design its more layers of complex GUI and UX getting in the way than if you just sent them the Sketch file. In today’s version assets must be manually set up for every possible thing that can be exported — and they must be exlicitly configured with the right friggin’ asset type. Any flows in order to be viewed must be explicitly set with configured slices and those, even with the right background color explicitly set, are still rather difficult for programmers to fly around in in Abstract. These assets, specs, flows must be further explicitly bundled by the designer into Abstract links of what are called “collections” which must be directly shared with the developer. Even the collections are not currently preserved when a merge happens — So say you have again like dozens of branches across different projects you’re merging on any given week each with a collection, you now have to re-setup those collections on the Master branches for each of those areas.

Now the non-integration between the two companies is important to note here because it can become a huge time-suck. Non-design coworkers you want to delegate design decision making to want to read the data and are completely uninterested in files and formats. However, Abstract has to care because its external file formats are proprietary to design teams and run on local hardware. Coworker don’t see the actual files and have no way to collaborate with you in them. Meanwhile, any time you want to download, sync and open a Sketch file + update if it’s from an older version of the software it can add up to quite a bit of time. The update process does not seem like a particularly big painpoint until you consider how many branches there can be and how often they need to be updated. Just in my personal www.sprocket.bike/app Abstract I have 14 projects, 66 branches, 1–4 files each … and they all need to be updated every time since theres usually a Sketch version change since I’ve last accessed any older file. On top of this all of these stale branches need to be periodically updated to latest changes on Master themselves so as to not become accidentally broken.

The main difference here is that with Figma you and any programmer or any other employee can be in the same web file with you, able to see changes, comment and work on them in real time. Basically what I am trying to say is that Figma does a better job at Abstracting the process of collaboration for non-designer collaborators than Abstract.

The case against Abstract

It all comes down to how to best collaborate with others and accelerate them to accelerate yourself. Abstract does so very many things right from the position its in as add-on software and its really quite impressive of an achievement. Yet its hamstrung by all the hoops and workarounds it is naturally forced to jump through to get to parity with Figma. Vertical integration has been proven to be an efficient way of organizing systems from Apple to SpaceX and its the same thing here with Figma. Stapled together as they are, Abstract-Sketch just cant compete on the same level against an integrated tool that’s managing all the essential components under one roof.

Even if Abstract-Sketch figured itself out and merged into a single corporation it is doubtful that they could figure out how to literally reduce the level of Abstraction for design data to a level that matches or supersedes Figma. Figma itself being a not-ideal tool for creating a database of design information offers enough ways to hack around it that in 2020 you can actually realize database structures for 3D production design code and 3D design blueprints in a way that everyone at your company can navigate. Figma is unstable, its UX still needs improvement in key screens, it does not have version control — yet it has the foundation in place to either become the perfect tool or inspire others to take it to the next level.

And that’s the case against Abstract!

Notes for Figma dev team: