Search

Add typography and color design elements

Brienne Wong
Brienne Wong
  • Updated

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:

Gif showing how to add color styles to styelguide

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:

HSL/HSLA code section in Design uploads section of Styleguide settings

The HSL/HSLA codes will be displayed in your color swatches:

HSL/HSLA color values displayed in zeroheight.
 

👉 Note: The HSL/HSLA codes will be rounded to the nearest 0.1%

Was this article helpful?