FluxDS

Multi-theme design system/component library featuring a Figma design token to CSS pipeline

Report a bug · Submit a feature request

Overview

What is FluxDS?

This system bridges the gap between Figma and CSS, making multi-theme design tokens easy to manage. It converts tokens directly into CSS variables while keeping the original Figma naming conventions for a better developer experience. These variables are then applied to components via Tailwind’s arbitrary values. To ensure a solid user experience, all components include built-in accessibility features like focus trapping and keyboard navigation.

What happens when the design token JSON gets updated?

The system is built to stay in sync with design changes with minimal manual effort. When updates are made in Figma, you simply run the extraction command (npm run build:design-tokens) to refresh the token set. The script traverses the JSON structure, resolves all cross-references and aliases, and outputs a clean set of CSS variables. This ensures that any changes to theme colours, spacing, or typography are automatically reflected across all components simultaneously.

What about themes in the design system I don't want in the generated CSS?

The token to css script is designed to be selective about which data it processes. The script only looks at top-level objects that follow the Mapped/ pattern and validates them against the metadata order in your configuration. To exclude a specific theme or an experimental one from the final bundle, you only need to remove its key from the tokenSetOrder array within the JSON file. This allows you to maintain a large design file while only exporting the specific themes that are ready for production.

"$metadata": {
    "tokenSetOrder": [
      "global",
      "Primitives/Default",
      "Alias colours/BrandA",
      "Alias colours/BrandB",
      "Mapped/BrandB",
      "Responsive/Desktop",
      "Responsive/Mobile"
    ]
  }

With the example above, Mapped/BrandA will not be considered when processing the JSON even if it is in the actual structure.

Getting started

Clone the repo:

git clone https://github.com/AFOJ/FluxDS.git

Change to the project directory:

cd FluxDS

Install dependencies:

npm install

Run Storybook:

npm run storybook

Then visit http://localhost:6006/

Build Storybook:

npm run storybook:build

Themes

Switching Themes

In App

To apply a theme to an area, add the data-theme={your-target-theme} attribute to a wrapper element.

<div data-theme="BrandA">
  <Button>Scoped to Brand A</Button>

  <div data-theme="BrandB">
    <Button>Scoped to Brand B</Button>
  </div>
</div>

In Storybook

Use the "Themes" (paintbrush icon) in the toolbar to switch themes globally.

Generating Theme variables

To generate new theme variables:

npm run build:design-tokens

Then copy the content of the generated css in script/token.css into src/global.css.