figma-tokens-to-mui

A transformer which sits between FigmaToken JSON output and MUI's theme

Local testing

$ ts-node tests/index.ts

External Consumption

Debug

.env

# (Optional) This is a boolean value which will output the transformed tokens to the console. This is useful for debugging.
FIGMA_THEME_DEBUG=true #

Colours

Merge the output of the transformer with your MUI theme.

// src/styles/themeConfig/colourPalette.ts
...
export const colourPalette = getPaletteProps(
  tokens,
  "global",
  baseColours
);

Typography

Merge the output of the transformer with your MUI theme.

// src/styles/themeConfig/typography.ts
...
export const typography: TypographyOptions = getTypographyProps(
  tokens,
  "global",
  baseTypography
);