Add typography and color design elements
Brienne Wong
To add typography and color items to your styleguides you need to upload them from your design tools (Sketch, Figma or Adobe XD). The reason we don’t allow manually adding typography and color to styleguides is because we think there should be a single source of truth for those values, and that the most logical source is the primitives that designers are using.
Sketch
You can upload the following Sketch styles to zeroheight:
- Document Colors
- Layer Styles
- Text Styles
For more info on how to upload from Sketch, check out this article
Figma
- Color Styles
- Effect Styles
- Text Styles
For more info on how to upload from Figma, check out this article
👉 Note: Because of how the Figma API works, only styles applied to layers in the uploaded file are uploaded, so if you’re missing a style, just apply it to a layer and update the file in zeroheight
Adobe XD
- Colors
- Character styles
In all 3 cases, you can then insert styles into your styleguides like so:
Display HSL/HSLA codes
By default the HEX and RGB values of your color styles will be displayed in the color swatches. You can also display HSL/HSLA codes by choosing the option in styleguide settings:
The HSL/HSLA codes will be displayed in your color swatches:
👉 Note: The HSL/HSLA codes will be rounded to the nearest 0.1%