This is the first version of a plugin to help validate Sketch designs against a design system.
Currently the plugin has hard-coded font family, font size, and line height properties to test. Future release will have an option to import text styles from a file for validation.
This plugin can be great to enable teams to check sketch file consistency and enable agencies that may be working with you to double their sketch files.
How to use
- Download or clone the contents, and copy/install DS-Textvalidator.sketchplugin to your Sketch plugins folder
- From your plugins menu select “⛑Styleguide Validator”
- Choose if you want to validate Web or Mobile font styles. Below is a table of the font styles this plugin currently compares to.
- A popup should appear asking if you want to validate the full document or the page currently selected
Note: Validating the entire document may take a few minutes depending on the size. Your sketch application may lockup until it’s completed.
- A report will generate and open in your web browser showing you the results, red columns meaning there was an error found with this property.
- If your font size is invalid, the line height will automatically become highlighted as invalid.
- If the layer style passes 100%, the layer will not appear in the page. If nothing appears in the report, all your layers pass 💯
Font and Sizing requirements
Font sizes
Web Font Size | Web Line Height | Mobile Font Size | Mobile Line Height |
---|---|---|---|
56 | 72 | 24 | 33 |
48 | 56 | 16 | 22 |
32 | 48 | 14 | 20 |
24 | 40 | 12 | 18 |
16 | 24 | ||
14 | 24 | ||
12 | 16 |
Font Family
Web Font | Mobile Font |
---|---|
Open Sans, Noto Sans TC, Noto Sans SC | Roboto, SF Pro |
Creators Note
I am not the most proficient in JS, and the Sketch APIs are not the most understandable in the world. If you know of a better algorithm do let me know ✌️
Updates soon!