10 Ways to Power-up Your Design System with Diez
Diez is a cross-platform design system framework. It helps you adopt a unified design language across codebases, platforms, and teams. But not just that. Diez is a powerful and extensive tool, which can be used for a wide range of purposes.
Diez is a dev-tool, meaning the sky’s the limit with what you can do with it. To help get you inspired, our team put together 10 ways you can power up your team’s design system using Diez.
1. Build a design system for your entire organization
Diez ships with integrations with several design tools (Sketch, Figma, Adobe XD, InVision DSM) and several programming languages (Swift, Kotlin, Objective-C, Java, Javascript, Typescript, SASS, CSS.) By bridging these worlds and offering a “lingua franca” that sits in the middle, Diez gives you all the tools you need to build a collaborative design system that spans teams, platforms, and codebases.
Importantly, in the Diez paradigm, your design system’s source of truth is code. Design source files are treated as assets that compile to code. As a simple example, consider the following TypeScript code as part of a file defining a design system:
import {Color} from '@diez/prefabs';class Palette {
white = Color.hex('#FFFFFF');
black = Color.hex('#000010');
}
You can version, share, and integrate this file into many systems across your organization. Later on, you can compile this file with Diez into a library that you can consume in both native and web platforms.
2. Build a CI system to customize your design-to-code hand-off
All the features in Diez are command-line friendly. You can use the command line to:
- Compile Diez source files into an SDK ready to be consumed by iOS, Android or Web.
- Extract assets and styles from your design files.
- Generate documentation for your design system. Coming soon!
This means that it’s a snap to add any of this functionality to your own CI server. For example, you can store your team’s Sketch files on GitHub or Abstract, then set up a CI hook to extract the assets & styles to your design system every time your team pushes.
3. Progressively integrate Diez into your existing codebase
To teams that are adopting Diez for the first time, we recommend “start with your colors.” Not only is this an easy way to dip a toe and see the full power of Diez, but it’s exactly how it’s intended to be used!
Diez was designed carefully to be progressively adoptable, since most design systems need to be integrated with existing codebases. Migrate as fast or as slow as you’d like. Here’s a simple example of what an incremental migration might look like in React:
- <Masthead backgroundColor={'#000'} />
+ <Masthead backgroundColor={diezTokens.colors.darkBackground} />4. Build versioned design documentation into your website or wiki
Diez will generate complete documentation about your design system, including components, design tokens, and information on how to use them along with examples.
Since this generated content is plain HTML and CSS, you can incorporate this onto your continuous integration system (see item 2 for reference) or as part of your deployment system to maintain versioned design documentation on your website or internal wiki.
5. Build your own compiler target, use it on any platform
Do you want your design system to support Flutter, Qt, or .NET? Though these platforms aren’t supported as of Diez’s initial launch, the architecture behind Diez makes it easy to build the support for any platform.
Diez ships with out-of-the-box support for iOS (Swift and Objective-C), Android (Kotlin and Java), Web (JavaScript, Typescript, CSS and SCSS), but you can also easily build support for the platform of your choice.
We have guides coming soon on how to do this, but you can refer to our open source repo to get the gist of it. (Note that as of the authoring of this article, Diez is in a private Early Access period. Please sign up for access at diez.org )
6. Simplify and automate your raster and vector images processing
Vector and raster images are a fundamental part of design. Whether it’s an icon, an infographic, or a background pattern, getting images from design files to real applications often takes a fair amount of work, especially if you want them to be properly optimized and displayed across different devices, platforms, and screen sizes.
Diez helps you forget about all that by taking care of:
- Optimizing vector and raster images for you.
- Generating different image sizes ready to be consumed.
- Exporting images in the most compatible format for your platform.
In fact, Diez does this all from raw design file assets — from Sketch, Figma, Adobe XD, or InVision DSM! Input design file, get out usable design system assets.
7. Cross-platform Internationalization (i18n)
Any value declared in Diez can later be used in any platform by referencing it, but you are not limited to colors or images, you can also include strings and maps of string values, which you can use to build i18n support for all platforms!
Depending on how we see folks using this functionality, we may bring first-class i18n features into Diez. In the meantime, since it’s all code, it’s quite easy to craft your own solution.
8. Create design system themes like dark mode and light mode
Another advantage of having the design system defined in code is the ability to take advantage of variables and composition. For example, imagine having two completely different color palettes that can be switched with just a statement in your code.
import {Color} from '@diez/prefabs';
import {Component, property} from '@diez/engine';class DefaultPalette extends Component {
@property pink = Color.rgba(255, 63, 112, 1);
@property orange = Color.rgba(255, 154, 58, 1);
}class DarkModePalette extends Component {
@property pink = Color.rgba(255, 63, 112, 1);
@property orange = Color.rgba(255, 154, 58, 1);
}
These groups of colors can then be consumed conditionally in the platform of your choice. Our team is also working on higher-level theming functionality, including the ability to compose themes & override values.
9. Collect and organize a library of sound effects and background music
Did we mention Diez is extensible?
Diez can also help you organize and use across platforms elements that don’t come straight from a design file but are still required to build a real app or game, like sound effects and background music.
Think about Diez Components as ‘bags’ in which you can put ‘things’ (including other ‘bags’) and what you put in there is up to you: it can be anything supported in the platform you want to use.
Out of the box, Diez knows ships with a set of prefabs (Color, File, Font, Image, Lottie and Typographs), but you are not limited to that. Prefabs are intentionally easy to extend and share, and we have a guide about this coming soon, but you can check our open source repo to see how it can be done.
10. Learn TypeScript/Swift/Kotlin!
The very spirit of Diez is to bring your teams closer together. Once you have a design system defined in Diez, you can consume it from any platform that has an adapter, and take the opportunity to learn and get up to speed with platform specific syntax. Diez has excellent autocomplete tooling, which can aid you in this process, allowing you to contribute to multiple codebases.
Wrap up
In this article we covered 10 ways to power up your team’s design system using Diez. However, like we mentioned at the beginning of the post, Diez is and it can do so much more. In fact, for writing this post we had a running list with a lot more ideas, and from that list we selected our top 10. But it doesn’t stop here! Give Diez a try and learn all you can achieve with it.
As of the writing of this article, Diez is in a private Early Access period. Sign up at diez.org !
