Designex - Mix tasks for installing and invoking designex via the stand-alone designex cli

netoum · February 19, 2025, 9:14am

Designex is a cli tool that helps you get started with Design tokens.

Get easily started with design tokens using Designex CLI. Features a wide range of templates, pre-built configurations, and live reloading for seamless design system integration.

The Elixir library allows you to run Design CLI without the need for Nodejs similar to Tailwind Elixir

Quick Start - Run Designex Setup to setup ready-to-use token templates and get your project running in seconds.
Easy Build - Use Designex Build to convert your tokens into platform-ready formats.
Live Updates - Use Designex Build Watch to see changes instantly while you work.

The Cli is build with Oclif. A great and efficient Cli framework, check it out.

Templates:

Depending on the template selected it will use the following dependencies:

Tailwind v4

This templates follows the latest setup of [Tailwind v4] (https://tailwindcss.com).
It will generate Tailwind v4 CSS files to import into your main css assets.

You can choose from style dictionary or tokens studio format.
If you are using the free version of Tokens Studio you must select single file.

tailwind/v4/tokens-studio/single
tailwind/v4/tokens-studio/multi
tailwind/v4/style-dictionary

Tailwind v3

This templates follows the legacy setup of [Tailwind v3] (https://tailwindcss.com).
It will generate Tailwind v3 JS files to import into your Tailwind Config file.
You can choose from tokens studio single and multi format.
If you are using the free version of Tokens Studio you must select single file.

tailwind/v3/tokens-studio/single
tailwind/v3/tokens-studio/multi

Shadcn

This templates follows the latest setup of [Shadcn] (Introduction - shadcn/ui).
It will generate Tailwind v3 JS files to import into your Tailwind Config file.
You must also add the generate CSS files for the default and dark mode.
The colors are converted to hsl as advised by Shadcn
You can choose from style dictionary or tokens studio format.
If you are using the free version of Tokens Studio you must select single file.

shadcn/tokens-studio/single
shadcn/tokens-studio/multi
shadcn/style-dictionary

// Tailwind Config
  theme: {
    extend: {
      textColor: require("./build/shadcn/textColor.js"),
      colors: require("./build/shadcn/colors.js"),
      backgroundColor: require("./build/shadcn/backgroundColor.js")
    }

Shadcn Css

// CSS Import


@import "../build/css/shadcn.css";
@import "../build/css/shadcn/modes/light.css";

Material

This templates is an export of the Material 3 Design Kit Figma file and the Material Theme Builder Figma Plugin
You can choose from style dictionary or tokens studio format.
If you are using the free version of Tokens Studio you must select single file.

material/tokens-studio/single
material/tokens-studio/multi
material/style-dictionary

Mozilla

This templates is an export of the legacy Mozilla Design Tokens
You can choose from tokens studio single and multi format.
If you are using the free version of Tokens Studio you must select single file.

mozilla/tokens-studio/single
mozilla/tokens-studio/multi

Exadra37 · February 19, 2025, 10:20am

What is DesignX?

netoum · February 19, 2025, 12:26pm

Designex is a cli tool that helps you get started with Design tokens.
It uses mainly Style Dictionary to build the tokens into CSS or Tailwind config
-Setup by coping one of the template for design tokens and scripts.
Some template supports Figma Tokens Studio format
-Build your tokens using the script into css or tailwind files
-Watch for any changes of your tokens and run the build script

The Elixir library allows you to run Design CLI without the need for Nodejs similar to Tailwind Elixir

Exadra37 · February 19, 2025, 6:40pm

I should have made my question a little more specific and clear.

To be clear my question was made to make you realise that your topic doesn’t address users that have no clue what are design tokens, thus no idea what this is useful for. I know we can google it, but as someone that worked before as a Developer Advocate I would recommend you to be more specific in your promotion of your package to help increase it’s adoption among people unaware of what are design tokens.

dimitarvp · February 19, 2025, 11:07pm

…what even are “design tokens”?

netoum · February 20, 2025, 2:30am

@Exadra37 @dimitarvp Thank you for your questions and advises.
We assumed that Design Tokens were well know from the developer and designer community however even the most experimented of us lack knowledge about it.

What Are Design Tokens?

Design tokens are the smallest building blocks of a design system, storing design decisions such as colors, typography, spacing, shadows, and more in a structured, reusable format. They ensure consistency across different platforms and can be dynamically updated.

Core Idea of Design Tokens

Platform-Agnostic: Instead of hardcoding values in CSS, Swift, or Android XML, design tokens store values in a structured format like JSON.
Scalability: Tokens allow design changes to be applied globally across a system.
Automation & Theming: Design tokens enable dynamic themes and dark/light mode transitions.
Bridging Design & Code: They create a single source of truth between designers and developers.

History & Evolution of Design Tokens

Early Days (Pre-2014)

Before tokens, design values were manually managed in stylesheets or hardcoded in codebases.
Design systems existed but were often static and difficult to maintain.

Salesforce & Lightning Design System (2014-2016)

Salesforce popularized the term “design tokens” in their Lightning Design System (2014).
The goal was to create a consistent experience across platforms (Web, iOS, Android).
Tokens were first stored in SCSS variables, later transitioning to JSON for platform-agnostic usage.

Adoption by the Industry (2017-2019)

Companies like Adobe, IBM, Google, Microsoft adopted tokens in their design systems.
Style Dictionary (by Amazon) was released, offering a way to export tokens into different formats (CSS, Android, iOS, JSON).
The rise of Figma & design automation tools further accelerated adoption.

Figma Tokens & Automation (2020-Present)

Figma Tokens Plugin introduced a way to manage tokens directly inside Figma, enabling live sync between design tools and codebases.
Tokens Studio (formerly Figma Tokens) extended this to support multi-theme, aliases, and mode-based design tokens.
Open Source Standardization: W3C, Token CSS, and Design Token Community Groups are working on defining a standard.

How Are Design Tokens Used?

In Design Tools: Defined in tools like Figma, Sketch, or Adobe XD.
In Code: Exported via JSON, transformed using tools like Style Dictionary into platform-specific formats.
For Theming: Different themes (light/dark, brand variations) can be handled dynamically.

Example of Design Tokens (JSON Format)

{
  "color": {
    "primary": { "value": "#ff5733", "type": "color" },
    "background": { "value": "#ffffff", "type": "color" }
  },
  "typography": {
    "fontSize": { "value": "16px", "type": "size" }
  },
  "spacing": {
    "small": { "value": "8px", "type": "size" }
  }
}

This JSON can be transformed into:

CSS Variables: --color-primary: #ff5733;
iOS Variables: "primary": UIColor(red: 1.0, green: 0.34, blue: 0.2, alpha: 1.0)
Android XML: <color name="primary">#ff5733</color>

Conclusion

Design tokens help streamline the connection between design and development, ensuring consistency and scalability. Their adoption continues to grow, with tools and frameworks evolving to support them natively.

Readings

Here are some import links
Style Dictionary
W3C Design Tokens Specification
Tokens Studio (Figma Plugin)

We hope this brings more clarity and understanding of Design Tokens.

mindok · February 20, 2025, 3:26am

Thanks! I had the same question.

I think there are quite a few grey-hairs in the Elixir community (myself included) who prefer doing almost anything else over tinkering with CSS, so it’s worth taking the time to explain the problem context and the problem your library solves.

Welcome to the community BTW, and thanks for your work on this library.

Exadra37 · February 20, 2025, 9:05am

Thank you very much for the detailed answer and explanation on design tokens.