Sketch Validation

Introduction

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.

download the kraken plugin
The Kraken plugin works with MacOS Mojave+.

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.

Pull Request overview bitbucket – one failing

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.

failing build message

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.

Pull Request overview bitbucket – all succeeding

Requirements

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:

  • product (the product repository)
  • global (the ux-global-ressources repository)

Required page sizes

A Sketch file for the product scope needs the following artboard sizes present to pass the validation rule.

  • 360px for mobile screens
  • 1280px for tablet screens
  • 1920px for 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
1920px Headline 1 1920-H1
1920px Headline 2 1920-H2
1920px Headline 3 1920-H3
1280px Headline 1 1280-H1
1280px Headline 2 1280-H2
1280px Headline 3 1280-H3
360px Headline 1 360-H1
360px Headline 2 360-H2
360px Headline 3 360-H3

Valid text colors

White

Gray 300

Gray 400

Gray 500

Gray 600

Gray 700

Gray 900

Turquoise 600

Turquoise 700

Red 500

Red 600

Green 600

Green 700

Blue 500

Blue 600

Purple 200

Purple 500

Purple 600

Royal blue 500

Royal blue 600