m3-variable-exporter

About this plugin

With this plugin you can export figma variables or paint styles created by the Material Theme Builder as css variables in accordance with the M3 design token specification. It exports the variable groups "Schemes", "Palettes" and "Extended Colors" and ignores the others. Optional export of text styles is possible. You can also suffix the color variables with either "-dark" or "-light", or use the mode/theme as suffix.

The created output looks like this (example is shortened):

/* material-theme.light.tokens.scss */

.light {
    --md-sys-color-primary: #65558f;
    --md-sys-color-surface-tint: #65558f;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #e9ddff;
    --md-sys-color-on-primary-container: #201047;
    --md-sys-color-secondary: #625b71;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #e8def8;
    --md-sys-color-on-secondary-container: #1e192b;
    [...]
    --md-ref-palette-primary100: #ffffff;
    --md-ref-palette-primary99: #fffbff;
    --md-ref-palette-primary98: #fdf7ff;
    --md-ref-palette-primary95: #f6eeff;
    --md-ref-palette-primary90: #e9ddff;
    --md-ref-palette-primary80: #cfbcff;
    --md-ref-palette-primary70: #b69df7;
    --md-ref-palette-primary60: #9a83db;
    --md-ref-palette-primary50: #8069bf;
    --md-ref-palette-primary40: #6750a4;
    --md-ref-palette-primary35: #5b4397;
    --md-ref-palette-primary30: #4f378a;
    --md-ref-palette-primary25: #432b7e;
    --md-ref-palette-primary20: #381e72;
    --md-ref-palette-primary15: #2d1067;
    --md-ref-palette-primary10: #22005d;
    --md-ref-palette-primary5: #160041;
    --md-ref-palette-primary0: #000000;
    [...]
}

/* fonts.tokens.scss */

:root {
    --md-sys-typescale-display-large-font: Roboto;
    --md-sys-typescale-display-large-size: 57px;
    --md-sys-typescale-display-large-tracking: -0.25px;
    --md-sys-typescale-display-large-weight: Regular;
    --md-sys-typescale-display-medium-font: Roboto;
    --md-sys-typescale-display-medium-size: 45px;
    --md-sys-typescale-display-medium-tracking: 0px;
    --md-sys-typescale-display-medium-weight: Regular;
    [...]
}