Keep InVision DSM in sync with code

Today we announce the release of Diez 10.4.

Learn how to keep codebases perfectly in sync with InVision DSM design tokens — plus find out what else is new in Diez 10.4.

Diez is the Design Token Framework — an open-source tool for expressing visual styles that can be shared across codebases, native platforms, and teams. Learn more at https://diez.org

Teams, workflows and design preferences are unique. Each team carefully chooses a specific combination of tools for every aspect of their internal process to execute its work. Design tools, management tools, collaboration tools, development tools. The list goes on.

It is in this world of endless possibilities and options that seek to foster productivity that we face one of the biggest challenges. To find a way to connect all these tools and collaborate across disciplines in a way that allows us to save time, reduce repetitive work and grow as fast as possible. It can be overwhelming.

Software teams have to juggle myriad products, services, and tools to get work done.

This is why companies around the world create and maintain Design Systems, putting together dedicated teams filled with multi disciplinary professionals and working around the clock to create better solutions for this problem.

The ultimate goal of Diez is to connect design and code — precisely to reduce the amount of effort and overlapping work needed to go from mockups to the final implementation in code, across multiple codebases. We want to help teams create together: faster and better. To achieve that, Diez taps into your design files to extract Design Tokens and build a comprehensive Design Language, then offers developer SDKs that make it easy to stay connected to subsequent changes.

From the beginning, Diez has allowed teams to extract Design Tokens from Sketch and Figma files. In 10.2 we introduced the ability to extract tokens from Adobe XD and now in 10.4 we’re adding InVision DSM to the arsenal. Our intention is to cater to as many design workflows as we can over time.

Diez now supports Design Token extraction from Sketch, Figma, Adobe XD and InVision DSM.

Diez has the power to extract Color Styles, Text Styles, and Fonts from DSM. Support for SVG Images will be coming soon. In the future we will be able to pull in additional pieces (e.g. Shadows) should the InVision DSM API add support for Layer Styles. Read the guide.

Once you’ve synced Diez with InVision DSM, you never need to hand off tokens again. Just re-run diez extract and all of your iOS, Android, and web codebases can be updated instantly. Doesn’t life feel better with fewer hand-offs?

What else is new in Diez 10.4

Diez 10.4 also features:

• Self-updater for seamless updates
• Improved token extraction from complex design files
• Various improvements for Web SDKs

Self-updater for seamless updates

In the past, updating Diez required updating the Diez CLI and some related packages.

For example, for this release, if you want to be able to extract tokens from InVision DSM, you need to update @diez/extractor in your package.json

Starting from version 10.4 and up, you can forget about these complications and let Diez handle them for you, using the built-in diez update command:

# if using yarn and Diez >= 10.4
yarn diez update

# if using npm and Diez >= 10.4
npx diez update

Note that if you aren’t yet using Diez 10.4+, you’ll have to update once with the old technique:

# if using npm and Diez < 10.4, 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 and Diez < 10.4, 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

After this, you can perform further updates with the super-smooth update command described above.

Improved token extraction from complex design files

From the consistent feedback we received from Diez users regarding complex design files that contain a lot of tokens, we have:

• Improved the speed and removed rate limit related errors when extracting tokens and images from Figma files.
• Addressed errors when extracting from complex Sketch files.
• Improved messaging and removed non-essential information to better communicate what the error is about.

Terminal error messages became simpler and clearer to help you understand how to take action.

Improvements for the Web compiler

When you run the Diez compiler in hot mode, any updates you make to your Design Language are serialized and sent over the wire. This assures a hassle-free experience for native applications. CSS and SCSS are a bit different in this regard. Instead of hot-patching these values, the Diez compiler overrides the files with new content.

Starting from Diez 10.4, we improved hot mode for CSS and SCSS to support new scenarios like adding or renaming tokens on your Design Language.

Diez 10.4 also includes new methods for Color prefabs to increase compatibility with the Storybook template engine. Therefore, you can use Diez to theme your Storybook. Here’s a theme.js file from one of our projects, as an example:

import {Palette} from '../design-language/build/diez-ichido-web/index';
const palette = new Palette();
export default create({
  appBg: palette.gray90.lowFidelityColor,
});

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.

• Check out Diez on Github
• Join the conversation on our Slack Community.
• Consider joining the Diez creators on the W3C Design Tokens Community Group

Until next time! With ✌️ & ❤️,
The Haiku Team, maintainers of Diez