Linting meets Design
How George’s Design System team improves the design process of the most modern banking with Sketch Assistants.
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.
- My children, born in a different millennium than myself, have never used a landline telephone.
- 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 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.
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.
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.
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.
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… 🧹
