Linting meets Design

How George’s Design System team improves the design process of the most modern banking with Sketch Assistants.

Konstantin Demblin
Aug 11 · 7 min read

Every generation has certain “things” that are progressive and unique for this generation, but rendered obsolete or even unknown to the next one — here are some personal examples:

  • When I was born in the late ‘70s of the last century, my parents received a telegraph message by a relative who wanted to congratulate them on my birth. Some years later, this technology vanished.
  • I remember that my father was investing in an electronic typewriter for his business in the ‘80s — a machine that allowed you to add up to one line to the memory before printing it to paper in order to avoid or correct errors. Some years later, he switched to a computer.
Text with some crossed out letters to showcase how text can be corrected with a manual typewriter.
Text with some crossed out letters to showcase how text can be corrected with a manual typewriter.
How to fix typos on a mechanical typewriter | Image credit
  • My children, born in a different millennium than myself, have never used a landline telephone.
A yellow landline telephone on yellow background.
A yellow landline telephone on yellow background.
Landline telephone | Image credit
  • A designer, who at some point in their career, has designed user interfaces primarily in Photoshop, belongs probably to a certain generation of designers. I could imagine that similar “distinctive indicators” exist for every industry’s generation.

Enter Sketch Assistants

I am convinced that the concept of “design linting” – a feature that was recently introduced to Sketch – is groundbreaking for digital design and will remain state-of-the-art for a long time. Nevertheless, I am wondering, if it renders itself obsolete in some years. And if only a certain generation of designers remembers the significant impact it had on their work by that time.

The user interface of empty Sketch Assistants window
The user interface of empty Sketch Assistants window
The user interface of Sketch Assistants

Linting is the process of running a program that analyzes your code for programmatic and stylistic errors.

The concept of (code) linting is not unheard of when it comes to software development — but it is rather new when it comes to design and particularly modern when it comes to a native Sketch feature.

Spell-checking for design files — kind of

You can think of design linting similar to a spell-checking feature of your favourite word processing software. When you type a text in Pages or Word, the software automatically compares your input with the relevant entry in a dictionary and highlights e.g. typos. This makes it easy and convenient for you to fix the errors.

An example of a text spell-checked by a word-processing software.
An example of a text spell-checked by a word-processing software.
Spell-checking in a word processing software

How does design linting work with Sketch Assistants?

Sketch Assistants work similarly: Each Assistant consists of one to many rules (pieces of code written in Javascript) and the Sketch file gets checked on the fly against those rules, resulting in a small badge indicating the sanity of the file. Assistants can help find issues around accessibility, branding, document organisation, and many more.

Checking Sketch files against coded rules on the fly is possible due to Sketch 43 changing its file format in 2017 from a binary to a zipped folder containing JSON files. Additionally, this allows you to check your files against Assistants even without running Sketch — for example, on a remote server or with a command-line tool, something we want to explore in the future.

The way Sketch Assistants are built is smart and consistent

The interface of Sketch allows you to easily dis-/enable rules for individual layers, pages or entire documents. — This way you can customise Assistants for your current need.

The user interface of Sketch Assistants showing violations.
The user interface of Sketch Assistants showing violations.
The user interface of Sketch Assistants (one ignored rule, two active violations, and one ignored violation)

All the information for Assistants gets stored within the Sketch file itself, meaning whoever picks up the file later, can take it from there. In case an Assistant associated with a specific file is not available on your machine or got updated in the meantime, you can install it once Sketch prompts you with a gentle nudge.

How we use Sketch Assistants for George

When designing at scale, consistency is key. The bigger the team and the bigger the product, the harder it is to stay aligned and in sync. At George Labs about 15 in-house designers are crafting the core user experience of George, the digital banking platform for almost 6 million users in Europe.

Sketch Assistants improve the file hygiene and accuracy for designing the digital banking platform George.

Interface design at George Labs happens mostly in Sketch, whereas collaboration and version control of the design files takes place in Abstract. Together with my dedicated team of five highly skilled design system engineers, we are trying to keep the designers and developers in alignment while maintaining a balance between innovation and stability. An elaborate React component library, Storybook, Playroom, and the Design System website for documentation defines the single source of truth for developing George for the web.

When it comes to design, the Design System team also co-develops, maintains, and ships a set of several nested Sketch Libraries and Sketch Kit files as part of the in-house Design System to the designers, who use them in countless Sketch files for their daily work.

Different Assistants for different use cases

The requirements for Sketch library files, Sketch Kit files (showcasing the symbols of the libraries with real-world examples as overrides) and the personal preferences of the individual designers in terms of cleanliness of their design files differ. Therefore, we have decided to provide different Assistants for the different use cases to ensure the highest accuracy and highest flexibility where needed.

Assistant’s setup for George.
Assistant’s setup for George.
Assistant’s setup for George — different file types receive a different set of rules

Similar to plugins and data sources, Sketch relies on and enables once more its community when it comes to Sketch Assistants: You can choose from ready-made Assistants from Sketch itself, install Assistants provided by third-party developers or write your own set of rules.

For now, we use 15 customised sketch-core-rules (e.g. out of sync styles; consistent naming conventions for symbols, layers and artboards; styles that are not library styles) and an in-house developed rule that throws a violation if a colour outside the range of the design system approved colours is used.

The backlog of ideas for custom rules is long — rules for typography (font weight, font size, font family, font style), accessibility, or spacing immediately come to mind.

Learnings we have had so far

As always when starting to work on something new, it was an exciting, sometimes challenging experience — especially as our team got access to Sketch Assistants since the early private beta of that feature where things can change constantly.

Here are some exemplary learnings we have had:

  • Clean files can be cleaned even more: When we started to check our Sketch library files — which I consider as the most accurate and precise Sketch files we have — against the library Assistants we had 99+ violations. 🤪
    To be fair, not every single violation was valid, as we have, for instance, a set of country flags in one of our libraries which naturally does not use the approved UI-colors for George. 🏳 (Luckily, as mentioned above, you can disable specific rules for specific symbols.)
  • The benefit of clean design files is no common ground: An internal survey about our Sketch Assistants made clear — amongst other more interesting findings — that the design team does not have a common view when it comes to “the value of file hygiene”. The opinions about which rule makes sense in a designer’s work and which rule does not were surprisingly diverse… 🙊
  • Code can detect (some) errors better than the human eye: Our custom colour sanity rule spotted an error (fliped digits in a hex colour code of a layer style) which stayed undetected so far as the visual difference was hard to see. 😅

Where to go next

Right now, we have been watching the first release of Sketch Assistants and I am excited about the potential this feature has for the design community in general as well as for our design team in particular.

Probably someday, we will think of Sketch Assistants as a thing from the past, but until then I am convinced we will see many great improvements and opportunities it will bring — be it Assistant feature updates by the awesome people of Sketch, custom Assistants by Sketch’s great developer community or in-house Assistants by our small team of the George Design System itself.

Image for post
Image for post
Photo by Clay LeConey on Unsplash

Acknowledgment: Without the help of my colleague Jan Hrubý, who has assembled and developed the Assistants for George so far, our design files would not look into such a tidy, bright future… 🧹

Design + Sketch

The best collection of articles, tips, tutorials, and…

Konstantin Demblin

Written by

UX/UI Designer in Vienna, Austria | Design System Manager at George Labs | https://github.com/konki-vienna

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Konstantin Demblin

Written by

UX/UI Designer in Vienna, Austria | Design System Manager at George Labs | https://github.com/konki-vienna

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store