See what else is new in Diez 10.3

Diez 10.3 also features:

All of these benefits are non-breaking and fully backwards compatible. Here’s how to upgrade or install from scratch:

# if using npm, upgrade with:

npm install diez @diez/engine @diez/prefabs @diez/compiler-core @diez/extractors @diez/start @diez/stdlib

# or install from scratch:

npx diez create # if using yarn, upgrade with:

yarn upgrade diez @diez/engine @diez/prefabs @diez/compiler-core @diez/extractors @diez/start @diez/stdlib --latest

# or install from scratch:

yarn create diez

Enhanced token extraction from design tools

Improved Typography extraction from Figma



Running diez extract on a Figma URL now also extracts settings like line height, text alignment and character spacing. No special configuration is required and the output is backwards compatible with prior versions of the extractor.

Improved sanitization of design token names



Although it’s important to have the flexibility to name your tokens when defining them in your design tool of choice, not all names are valid in JavaScript. For example, having a token name start with a number like 10Blue , or using a JavaScript reserved word like default



In this release, we improved the detection of invalid token names, and now we wrap invalid tokens in quotes to make them accessible in your Diez code.



You can use bracket notation to access tokens with invalid JavaScript property names:

import {myProjectTokens} from './MyProject.sketch' myProjectTokens.colors['10Blue']

Support for CommonJS modules

When you compile a Diez project for the Web via yarn/npx diez compile -t web you get your tokens ready to consume in different flavors: SCSS, CSS or JavaScript with type definitions.



With this release, we enhanced the JavaScript output so you can now directly import your design system in codebases using CommonJS modules.

import {Diez, DesignLanguage} from 'my-design-system'; const diez = new Diez(DesignLanguage); diez.attach((designLanguage) => {

designLanguage.myColor

});

Fixes and improvements

This version also includes many fixes and improvements like:

Warning for users trying to extract from Figma with an invalid authentication token.

Stability improvements for Windows and Linux users

Use web as the default target to when running diez compile .

as the default target to when running . Read the full changelog here.

Stay in the loop

Want to be part of the future of design tokens? Diez is free & open-source, powered by community contributions.

Until next time! With ✌️ & ❤️,

The Haiku Team, maintainers of Diez