Search

Add typography and color design elements

Chi
Chi
  • 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 code and RGBA values of your color styles will be displayed in the color swatches. You can also display HSL/HSLA values by enabling them in the Block defaults section of your 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%

Was this article helpful?