Validate your designs against your defined design guidelines, within seconds
A step towards automating design testing.
Design Systems? Another buzz word? Honestly, I love design systems. They are remarkably essential to building faster, better, robust and consistent products. Having such rules presents designers with space and opportunity to concentrate on more vital components which define their products.
However, design systems oftentimes tend to have several rules. As many that are nearly humanly impossible for a designer to remember them. Sketch, the design tool which is celebrated as the preferred design tools across the industry, provides a solution in the form of Symbols. Nevertheless, Symbols come with their own set of problems.
Firstly, creating Symbols for complicated components is extremely cumbersome. Overrides, responsiveness, and dynamism are critical for them to work as expected. At the same time most designers, even though when provided with Symbols, tend to detach them and make corresponding modifications. I noticed this behavior in the various design teams I have worked within the past few years. Designers are problem-solvers and tinkerers. This requires them to bend the rules, which might be done without knowing the rules itself.
Hence, there is a need for a tool which could assist with all of this. In computer programming, Linting is the process of running a piece of code that will analyze code for potential errors. This program checks the source code for Programmatic and Stylistic errors. The plan here was to create a similar tool for reviewing designs. Reminding the designer of potential errors and automatically fixing it will help in better, consistent and faster design handovers.
The plugin currently is in a prototype phase. I have been testing the algorithm, its performance, and usability with design teams in different countries. Below you can read about the basic framework on how it works. The plugin works for typography, color, spelling, contrast, and padding issues.
1. Extract the rules
To use this plugin, you just need a Sketch file with your design guideline. This is the file which contains the defined text and color styles. The plugin can extract all the typography cases and color rules from the guideline with a single click and store it as a JSON. This JSON is what is going to power the plugin in the next stages.
2. Check for errors
This plugin works conceptually similar to a linter for code. Now that you have generated the JSON for your design guideline, the plugin starts investigating your design for any potential errors.
The following are the rules that it looks for:
Typography
The plugin checks for font size, font-color, font-face, and line height.
Color
Validates the color of any layer with your guideline color palette.
Spelling
Checks the spelling of your text layers. The plugin uses OSX’s dictionary to check for these spelling mistakes.
Contrast
This helps you get the accessibility score of the text layers based on readability and contrast formula according to W3C standards.
- Select a text layer and background layer. The plugin calculates the score for the text layer in comparison to the background layer.
- Or, select just the text layer. This fetches the score in comparison with the background color of the artboard.
Padding
Checks for vertical padding between layers and shapes.
3. Fix the errors
Now that the designer knows the errors in their designs, the plugin can also suggest possible fixes for them. The logic behind it is a complex set of fuzzy logic which helps estimate the nearest possible rules to the problematic layer.
This is still a work in progress, and the following video demonstrates the bare minimum of what the plugin can achieve.
Check out the Sketch Lint Plugin
Feel free to download the plugin from my GitHub account. If you got any feedback, suggestions or other comments, feel free to comment or reach me by email.
Future prospects
Having spoken to many designers in companies ranging from small-scale to large-scale companies, this problem of validation of design guidelines seems to be omnipresent. This plugin even though in its very nascent stage, can hopefully save time and effort for designers.
Eventually, this system should be able to validate complex components and attempt at fixing any identifiable issues.
Thanks to Andrius Rutkauskas for helping through the early days.
If you enjoyed this article, please hit those little 👏 below and share the story with your friends. (And you can always say hi at @SaranshSolanki)
