Diez 10.2 is out!

Diez is the Design Language Framework — a free & open-source developer toolkit for sharing visual styles across codebases, native platforms, and teams.

We are excited to announce the release of Diez 10.2, a progressive release featuring new functionality and several bug-fixes. Design tokens just got hotter.🔥

This release at a glance:

• Adobe XD design token extraction: you can now bring Adobe XD files into your workflow, automatically extracting design tokens into codebases with the new Diez Extractor for Adobe XD.
• Full compatibility with NPM: in addition to yarn, Diez is now fully compatible with npm too.
• Better stack traces: in addition to the great stack traces provided by the underlying TypeScript compiler, the Diez compiler now also outputs helpful stack traces for runtime errors during compilation.
• Enhanced typography extraction from Sketch: the Diez extractor now has improved support for line height, letter spacing and text alignment.
• Bug fixes!

All of these benefits are non-breaking and fully backward-compatible. All you need to do to update is run:

# 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

Adobe XD design token extraction

Diez is now capable of extracting design tokens from Adobe XD. Any Color or Character Style defined in the Assets panel will be extracted and ready to be used in your design language.

The process is simple:

1. Place your .xd file in your Diez project’s designs folder.
2. Run yarn diez extract
3. Your design tokens are now in code. Import, compose, compile, and use across native & web codebases.

Full compatibility with NPM

This release also includes full compatibility with npm, this is exciting news and has many implications for npm users:

1. You can create a new design language via:

$ npx diez create my-design-system

1. You can run any Diez command using npm
2. You can pack and distribute your design language using npm

Better stack traces

In general terms, the Diez compiler executes the following steps in order:

1. Runs the TypeScript compiler in the design language source files, this outputs raw JavaScript files.
2. imports the JavaScript files compiled in step 1.
3. Makes sense of the first two steps and outputs code that can be consumed in different platforms (iOS, Android, Web)

Error traces during step 1 are handled by the TypeScript compiler, but during step 2 errors used to be obscure and hard to debug.

A simple way to reproduce this scenario is to add something like this in your Diez design language:

const fail: any = {};
// TypeError: Cannot read property 'fail' of undefined.
fail.fail.fail

From version 10.2 , you will get a stack trace + an useful error message:

Enhanced typography extraction from Sketch

Running diez extract on a Sketch file now also extracts tokens 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.

Bug fixes!

This version also includes many bug fixes like:

• Alpha channel support for colors extracted from Figma.
• Server side rendering support for JavaScript in the Web SDK.
• Fixes for versioning issues in generated SDKs.
• Stability fixes

Check out the full changelog on github. Learn more at diez.org.