The Sketch validation is part of our design systems tools to ensure consistency throughout all produced designs. It will help you find deviations from the Dynatrace look-and-feel. In a review process, it is hard to differentiate between two similar gray values. This can lead to confusions when implementing these designs.
To avoid mistakes like this, we provide the Dynatrace Sketch validation, which is checking these rules for you.
- Symbols in the global-resources repository have to match the Dynatrace Sketch naming conventions.
- All used colors have to be part of the Dynatrace color palette.
- Artboard names have to match the Dynatrace naming pattern for artboards.
- Page names have to match the Dynatrace naming pattern for pages.
- Text styles from the Sketch library have to be used correctly.
- Only the Dynatrace font families are allowed to be used.
- Text colors and sizes have to match a predefined set.
See the requirements list below for further details.
The Kraken validation 🐙
To run the validations in your Sketch file, we provide a Sketch plugin called the »Kraken«. The Kraken enables you to validate the rules mentioned above against your Sketch file.
Pull request validation
When you are ready to merge your new designs into the base-branch, you should create a pull request.
Changed Sketch files (in a pull request) are automatically run through the validation process. If rules are violated within the Sketch file, the continuous integration will mark this on your pull request status.
To gain insight why the build is failing click on the red icon on the right side. Afterwards an overlay should appear with the branch name.
When you click on the branch name you will get a detailed output why the build is failing. This page might look a little bit technical. That is the reason why you can use the Kraken plugin to find the mistakes way faster.
After you fixed the problem the icon should turn green.
To validate our designs we need a set of rules and every rule comes with a set of requirements. Those rules are tailored for two different environments:
Required page sizes
A Sketch file for the product scope needs the following artboard sizes present to pass the validation rule.
360pxfor mobile screens
1280pxfor tablet screens
1920pxfor desktop screens
Headline text styles
If you want to pass the Text style validation it is important that you use the following text styles.
|Artboard Size||Headline type||Style Name|
Valid text colors
Royal blue 500
Royal blue 600