This repository has been archived by the owner on Nov 5, 2021. It is now read-only.
Artboard formatting
Take a peek at the mock document to see correct usage of artboard formatting.
All your design tokens should be placed on a page inside the document called primitives. Symbolizing your artboards does not matter for Hubble.
Tokens can be extracted by following the artboard format. Name your Artboards according to the format to have them extracted if they support Artboard formatting:
primitives/<token>/<id>/variant
e.g: primitives/color/secondary/100, primitives/shadow/inner-default
Some tokens have the option to be exported via Document tokens (e.g Sketch Document Colors, Text Styles). Refer to the table below to see how tokens are supported.
| Token type | Token ID | Supports variants | Artboard | Document |
|---|---|---|---|---|
| Plain colors | color |
✓ | ✓ | ✓ |
| Gradients | gradient |
✓ | ✓ | |
| Text Styles | text-style |
✓ | ||
| Inner & Drop Shadows |
inner-shadow, drop-shadow
|
✓ | ||
| Border Style (+color) | border |
✓ |
⚠️ Because Sketch does not tell us if a shadow is an inner or an outer shadow, you have to define it manually using the token format above.