I am using Figma Design Token plugin for generating android code in output with all design tokens. The current config.json file of Style Dictionary seems not to work as expected.
Config.json file:
{
"source": [
"tokens/**/*.json"
],
"platforms": {
"android": {
"transformGroup": "android",
"buildPath": "build/android/",
"files": [
{
"destination": "font_dimens.xml",
"format": "android/fontDimens"
},
{
"destination": "colors.xml",
"format": "android/colors"
}
]
},
"compose": {
"transformGroup": "compose",
"buildPath": "build/compose/",
"files": [
{
"destination": "StyleDictionaryColor.kt",
"format": "compose/object",
"className": "StyleDictionaryColor",
"packageName": "StyleDictionaryColor",
"filter": {
"original": {
"type": "color"
}
}
},
{
"destination": "StyleDictionarySize.kt",
"format": "compose/object",
"className": "StyleDictionarySize",
"packageName": "StyleDictionarySize",
"type": "float",
"filter": {
"original": {
"type": "spacing"
}
}
}
]
}
}
}
Design token JSON file (from Figma):
{
"universal": {
"$spacing-xxx-compact": {
"value": "2px",
"type": "spacing"
},
"$spacing-xx-compact": {
"value": "4px",
"type": "spacing"
},
"$spacing-x-compact": {
"value": "8px",
"type": "spacing"
},
"$spacing-compact": {
"value": "12px",
"type": "spacing"
},
"$spacing-default": {
"value": "160px",
"type": "spacing"
},
"$spacing-spacious": {
"value": "24px",
"type": "spacing"
},
"$spacing-x-spacious": {
"value": "32px",
"type": "spacing"
},
"$spacing-xx-spacious": {
"value": "40px",
"type": "spacing"
},
"$spacing-xxx-spacious": {
"value": "64px",
"type": "spacing"
},
"$sizing-x-small": {
"value": "16px",
"type": "sizing"
},
"$sizing-small": {
"value": "24px",
"type": "sizing"
},
"$sizing-medium": {
"value": "32px",
"type": "sizing"
},
"$sizing-large": {
"value": "40px",
"type": "sizing"
},
"$sizing-x-large": {
"value": "56px",
"type": "sizing"
},
"$sizing-xx-large": {
"value": "64px",
"type": "sizing"
},
"$sizing-xxx-large": {
"value": "80px",
"type": "sizing"
},
"$sizing-xxxx-large": {
"value": "120px",
"type": "sizing"
},
"$sizing-xxxxx-large": {
"value": "480px",
"type": "sizing"
},
"$font-family-default": {
"value": "Inter",
"type": "fontFamilies"
},
"$color-white": {
"value": "#FFFFFF",
"type": "color"
},
"$color-grey50": {
"value": "#F6F6F6",
"type": "color"
},
"$color-grey100": {
"value": "#ededee",
"type": "color"
},
"$color-grey200": {
"value": "#dcdcde",
"type": "color"
},
"$color-grey300": {
"value": "#b9babd",
"type": "color"
},
"$color-grey400": {
"value": "#73757a",
"type": "color"
},
"$color-grey500": {
"value": "#505259",
"type": "color"
},
"$color-grey600": {
"value": "#44464C",
"type": "color"
},
"$color-grey700": {
"value": "#34353A",
"type": "color"
},
"$color-grey800": {
"value": "#28292D",
"type": "color"
},
"$color-grey900": {
"value": "#101012",
"type": "color"
},
"$color-primary900": {
"value": "#032715",
"type": "color"
},
"$color-primary800": {
"value": "#054023",
"type": "color"
},
"$color-primary700": {
"value": "#075a31",
"type": "color"
},
"$color-primary600": {
"value": "#09733e",
"type": "color"
},
"$color-primary500": {
"value": "#0b8c4c",
"type": "color"
},
"$color-primary400": {
"value": "#37a16c",
"type": "color"
},
"$color-primary300": {
"value": "#63b58c",
"type": "color"
},
"$color-primary200": {
"value": "#8fcaad",
"type": "color"
},
"$color-primary100": {
"value": "#bbdfcd",
"type": "color"
},
"$color-primary50": {
"value": "#e7f4ed",
"type": "color"
},
"$color-secondary900": {
"value": "#0f284e",
"type": "color"
},
"$color-secondary800": {
"value": "#163a6f",
"type": "color"
},
"$color-secondary700": {
"value": "#1c4b90",
"type": "color"
},
"$color-secondary600": {
"value": "#2562bd",
"type": "color"
},
"$color-secondary500": {
"value": "#2b73de",
"type": "color"
},
"$color-secondary400": {
"value": "#558fe5",
"type": "color"
},
"$color-secondary300": {
"value": "#aac7f2",
"type": "color"
},
"$color-secondary200": {
"value": "#d5e3f8",
"type": "color"
},
"$color-secondary100": {
"value": "#e9f1fb",
"type": "color"
},
"$color-yellow900": {
"value": "#584618",
"type": "color"
},
"$color-yellow800": {
"value": "#7e6523",
"type": "color"
},
"$color-yellow700": {
"value": "#b08d30",
"type": "color"
},
"$color-yellow600": {
"value": "#e3b53e",
"type": "color"
},
"$color-yellow500": {
"value": "#fcc945",
"type": "color"
},
"$color-yellow400": {
"value": "#fdd46a",
"type": "color"
},
"$color-yellow300": {
"value": "#fee9b5",
"type": "color"
},
"$color-yellow200": {
"value": "#fef4da",
"type": "color"
},
"$color-yellow100": {
"value": "#fef9ec",
"type": "color"
},
"$color-orange900": {
"value": "#613500",
"type": "color"
},
"$color-orange800": {
"value": "#9d5600",
"type": "color"
},
"$color-orange700": {
"value": "#c26a00",
"type": "color"
},
"$color-orange600": {
"value": "#da7800",
"type": "color"
},
"$color-orange500": {
"value": "#f28500",
"type": "color"
},
"$color-orange400": {
"value": "#f59d33",
"type": "color"
},
"$color-orange300": {
"value": "#face99",
"type": "color"
},
"$color-orange200": {
"value": "#fce7cc",
"type": "color"
},
"$color-orange100": {
"value": "#fdf2e5",
"type": "color"
},
"$color-red900": {
"value": "#71160f",
"type": "color"
},
"$color-red800": {
"value": "#871a11",
"type": "color"
},
"$color-red700": {
"value": "#9e1e14",
"type": "color"
},
"$color-red600": {
"value": "#b42217",
"type": "color"
},
"$color-red500": {
"value": "#e12b1d",
"type": "color"
},
"$color-red400": {
"value": "#e7554a",
"type": "color"
},
"$color-red300": {
"value": "#f3aaa5",
"type": "color"
},
"$color-red200": {
"value": "#f9d5d2",
"type": "color"
},
"$color-red100": {
"value": "#fce9e8",
"type": "color"
},
"$font-size-50": {
"value": "10px",
"type": "fontSizes"
},
"$font-size-75": {
"value": "12px",
"type": "fontSizes"
},
"$font-size-100": {
"value": "14px",
"type": "fontSizes"
},
"$font-size-200": {
"value": "16px",
"type": "fontSizes"
},
"$font-size-300": {
"value": "18px",
"type": "fontSizes"
},
"$font-size-400": {
"value": "24px",
"type": "fontSizes"
},
"$font-size-500": {
"value": "32px",
"type": "fontSizes"
},
"$font-size-600": {
"value": "42px",
"type": "fontSizes"
},
"$line-height-50": {
"value": "16px",
"type": "lineHeights"
},
"$line-height-75": {
"value": "20px",
"type": "lineHeights"
},
"$line-height-100": {
"value": "22px",
"type": "lineHeights"
},
"$line-height-200": {
"value": "24px",
"type": "lineHeights"
},
"$line-height-300": {
"value": "26px",
"type": "lineHeights"
},
"$line-height-400": {
"value": "32px",
"type": "lineHeights"
},
"$line-height-500": {
"value": "46px",
"type": "lineHeights"
},
"$line-height-600": {
"value": "56px",
"type": "lineHeights"
},
"$font-weight-regular": {
"value": "400",
"type": "fontWeights"
},
"$font-weight-medium": {
"value": "500",
"type": "fontWeights"
},
"$font-weight-semibold": {
"value": "600",
"type": "fontWeights"
},
"$letter-spacing-compact": {
"value": "-0.1px",
"type": "letterSpacing"
},
"$letter-spacing-default": {
"value": "0px",
"type": "letterSpacing"
},
"$letter-spacing-spacious": {
"value": "0.3px",
"type": "letterSpacing"
},
"$letter-spacing-x-spacious": {
"value": "0.5px",
"type": "letterSpacing"
},
"$text-decoration-default": {
"value": "none",
"type": "textDecoration"
},
"$text-decoration-link": {
"value": "underline",
"type": "textDecoration"
},
"$text-decoration-crossed": {
"value": "line-through",
"type": "textDecoration"
},
"$border-radius-x-small": {
"value": "4px",
"type": "borderRadius"
},
"$border-radius-small": {
"value": "8px",
"type": "borderRadius"
},
"$border-radius-medium": {
"value": "12px",
"type": "borderRadius"
},
"$border-radius-large": {
"value": "16px",
"type": "borderRadius"
},
"$border-radius-x-large": {
"value": "20px",
"type": "borderRadius"
},
"$border-radius-xx-large": {
"value": "24px",
"type": "borderRadius"
},
"$border-radius-round": {
"value": "999px",
"type": "borderRadius"
},
"$border-width-medium": {
"value": "1px",
"type": "borderWidth"
},
"$border-width-large": {
"value": "2px",
"type": "borderWidth"
},
"$shadow-primary-active": {
"value": {
"x": "0",
"y": "8px",
"blur": "16px",
"spread": "0",
"color": "rgba(16,16,18,0.08)",
"type": "dropShadow"
},
"type": "boxShadow"
},
"$shadow-primary-hover": {
"value": {
"x": "0",
"y": "16px",
"blur": "24px",
"spread": "0",
"color": "rgba(16,16,18,0.08)",
"type": "dropShadow"
},
"type": "boxShadow"
},
"$shadow-primary-pressed": {
"value": {
"x": "0",
"y": "2px",
"blur": "8px",
"spread": "0",
"color": "rgba(16,16,18,0.08)",
"type": "dropShadow"
},
"type": "boxShadow"
},
"$opacity-50": {
"value": "0.5",
"type": "opacity"
}
},
"semantic": {
"$typography-headline1": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-medium}",
"fontSize": "{$font-size-600}",
"lineHeight": "{$line-height-600}",
"letterSpacing": "{$letter-spacing-default}"
},
"type": "typography"
},
"$typography-headline2": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-medium}",
"lineHeight": "{$line-height-500}",
"fontSize": "{$font-size-500}",
"letterSpacing": "{$letter-spacing-default}"
},
"type": "typography"
},
"$typography-title1": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-semibold}",
"lineHeight": "{$line-height-400}",
"fontSize": "{$font-size-400}",
"letterSpacing": "{$letter-spacing-default}"
},
"type": "typography"
},
"$typography-title2": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-semibold}",
"lineHeight": "{$line-height-300}",
"fontSize": "{$font-size-300}",
"letterSpacing": "{$letter-spacing-default}"
},
"type": "typography"
},
"$typography-body-large-low-emphasis": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-regular}",
"lineHeight": "{$line-height-200}",
"fontSize": "{$font-size-200}",
"letterSpacing": "{$letter-spacing-default}"
},
"type": "typography"
},
"$typography-body-large-medium-emphasis": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-medium}",
"lineHeight": "{$line-height-200}",
"fontSize": "{$font-size-200}",
"letterSpacing": "{$letter-spacing-default}"
},
"type": "typography"
},
"$typography-body-large-high-emphasis": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-semibold}",
"lineHeight": "{$line-height-200}",
"fontSize": "{$font-size-200}",
"letterSpacing": "{$letter-spacing-default}"
},
"type": "typography"
},
"$typography-body-large-link": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-semibold}",
"lineHeight": "{$line-height-200}",
"fontSize": "{$font-size-200}",
"letterSpacing": "{$letter-spacing-default}",
"textDecoration": "{$text-decoration-link}"
},
"type": "typography"
},
"$typography-body-medium-low-emphasis": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-regular}",
"lineHeight": "{$line-height-100}",
"fontSize": "{$font-size-100}",
"letterSpacing": "{$letter-spacing-default}"
},
"type": "typography"
},
"$typography-body-medium-medium-emphasis": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-medium}",
"lineHeight": "{$line-height-100}",
"fontSize": "{$font-size-100}",
"letterSpacing": "{$letter-spacing-default}"
},
"type": "typography"
},
"$typography-body-medium-high-emphasis": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-semibold}",
"lineHeight": "{$line-height-100}",
"fontSize": "{$font-size-100}",
"letterSpacing": "{$letter-spacing-default}"
},
"type": "typography"
},
"$typography-body-medium-link": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-semibold}",
"lineHeight": "{$line-height-100}",
"fontSize": "{$font-size-100}",
"letterSpacing": "{$letter-spacing-default}",
"textDecoration": "{$text-decoration-link}"
},
"type": "typography"
},
"$typography-body-small-low-emphasis": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-regular}",
"lineHeight": "{$line-height-75}",
"fontSize": "{$font-size-75}",
"letterSpacing": "{$letter-spacing-spacious}"
},
"type": "typography"
},
"$typography-body-small-high-emphasis": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-semibold}",
"lineHeight": "{$line-height-75}",
"fontSize": "{$font-size-75}",
"letterSpacing": "{$letter-spacing-spacious}"
},
"type": "typography"
},
"$typography-body-small-link": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-semibold}",
"lineHeight": "{$line-height-75}",
"fontSize": "{$font-size-75}",
"letterSpacing": "{$letter-spacing-spacious}",
"textDecoration": "{$text-decoration-link}"
},
"type": "typography"
},
"$typography-body-tiny-low-emphasis": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-regular}",
"lineHeight": "{$line-height-50}",
"fontSize": "{$font-size-50}",
"letterSpacing": "{$letter-spacing-x-spacious}"
},
"type": "typography"
},
"$typography-body-tiny-link": {
"value": {
"fontFamily": "{$font-family-default}",
"fontWeight": "{$font-weight-semibold}",
"lineHeight": "{$line-height-50}",
"fontSize": "{$font-size-50}",
"letterSpacing": "{$letter-spacing-x-spacious}",
"textDecoration": "{$text-decoration-link}"
},
"type": "typography"
},
"$color-background-neutral-primary": {
"value": "#FFFFFF",
"type": "color"
},
"$color-background-neutral-secondary": {
"value": "#F6F6F6",
"type": "color"
},
"$color-background-neutral-tertiary": {
"value": "#EDEDEE",
"type": "color"
},
"$color-background-neutral-quaternary": {
"value": "#DCDCDE",
"type": "color"
},
"$color-background-neutral-primary-inverse": {
"value": "#101012",
"type": "color"
},
"$color-background-neutral-secondary-inverse": {
"value": "#28292D",
"type": "color"
},
"$color-text-neutral-high-emphasis": {
"value": "#28292D",
"type": "color"
},
"$color-text-neutral-medium-emphasis": {
"value": "#34353A",
"type": "color"
},
"$color-text-neutral-low-emphasis": {
"value": "#73757A",
"type": "color"
},
"$color-text-neutral-high-emphasis-inverse": {
"value": "#FFFFFF",
"type": "color"
},
"$color-text-neutral-medium-emphasis-inverse": {
"value": "#F6F6F6",
"type": "color"
},
"$color-text-neutral-low-emphasis-inverse": {
"value": "#B9BABD",
"type": "color"
},
"$color-border-neutral-primary": {
"value": "#FFFFFF",
"type": "color"
},
"$color-border-neutral-secondary": {
"value": "#EDEDEE",
"type": "color"
},
"$color-border-neutral-tertiary": {
"value": "#DCDCDE",
"type": "color"
},
"$color-border-neutral-quaternary": {
"value": "#B9BABD",
"type": "color"
},
"$color-border-neutral-quinary": {
"value": "#505259",
"type": "color"
},
"$color-background-cta": {
"value": "#09733E",
"type": "color"
},
"$color-background-brand-primary": {
"value": "#09733E",
"type": "color"
},
"$color-background-brand-secondary": {
"value": "#0B8C4C",
"type": "color"
},
"$color-background-brand-tertiary": {
"value": "#37A16C",
"type": "color"
},
"$color-background-brand-quaternary": {
"value": "#BBDFCD",
"type": "color"
},
"$color-background-brand-quinary": {
"value": "#E7F4ED",
"type": "color"
},
"$color-text-brand-primary": {
"value": "#09733E",
"type": "color"
},
"$color-text-brand-secondary": {
"value": "#0B8C4C",
"type": "color"
},
"$color-border-brand-primary": {
"value": "#63B58C",
"type": "color"
},
"$color-border-brand-secondary": {
"value": "#0B8C4C",
"type": "color"
},
"$color-border-brand-tertiary": {
"value": "#09733E",
"type": "color"
},
"$color-background-info-primary": {
"value": "#E9F1FB",
"type": "color"
},
"$color-background-info-secondary": {
"value": "#2562BD",
"type": "color"
},
"$color-text-info": {
"value": "#2B73DE",
"type": "color"
},
"$color-background-accent-primary": {
"value": "#F5F2F8",
"type": "color"
},
"$color-background-accent-secondary": {
"value": "#755891",
"type": "color"
},
"$color-text-accent": {
"value": "#8A68AB",
"type": "color"
},
"$color-background-caution-primary": {
"value": "#FEF4DA",
"type": "color"
},
"$color-background-danger-primary": {
"value": "#FCE9E8",
"type": "color"
},
"$color-background-danger-secondary": {
"value": "#E7554A",
"type": "color"
},
"$color-text-danger": {
"value": "#E12B1D",
"type": "color"
},
"$color-border-danger": {
"value": "#E12B1D",
"type": "color"
}
},
"component": {
"$shadow-page-header": {
"value": {
"x": "0",
"y": "2px",
"blur": "8px",
"spread": "0",
"color": "rgba(16,16,18,0.08)",
"type": "dropShadow"
},
"type": "boxShadow"
},
"$page-footer-shadow": {
"value": {
"x": "0",
"y": "-2px",
"blur": "8px",
"spread": "0",
"color": "rgba(16,16,18,0.08)",
"type": "dropShadow"
},
"type": "boxShadow"
},
"$button-hover-shadow": {
"value": {
"x": "0",
"y": "4px",
"blur": "12px",
"spread": "4px",
"color": "rgba(16,16,18,0.08)",
"type": "dropShadow"
},
"type": "boxShadow"
},
"$button-pressed-shadow": {
"value": [
{
"x": "0",
"y": "2px",
"blur": "6px",
"spread": "0",
"color": "rgba(16,16,18,0.24)",
"type": "innerShadow"
},
{
"x": "0",
"y": "-2px",
"blur": "6px",
"spread": "0",
"color": "rgba(16,16,18,0.24)",
"type": "innerShadow"
}
],
"type": "boxShadow"
}
},
"$themes": [],
"$metadata": {
"tokenSetOrder": [
"universal",
"semantic",
"component"
]
}
}
Generated output file (for android):
// Do not edit directly
// Generated on Thu, 09 Mar 2023 04:40:19 GMT
package StyleDictionaryColor;
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.*
object StyleDictionaryColor {
val universalColorGrey100 = #ededee
val universalColorGrey200 = #dcdcde
val universalColorGrey300 = #b9babd
val universalColorGrey400 = #73757a
val universalColorGrey50 = #F6F6F6
val universalColorGrey500 = #505259
val universalColorGrey600 = #44464C
val universalColorGrey700 = #34353A
val universalColorGrey800 = #28292D
val universalColorGrey900 = #101012
val universalColorOrange100 = #fdf2e5
val universalColorOrange200 = #fce7cc
val universalColorOrange300 = #face99
val universalColorOrange400 = #f59d33
val universalColorOrange500 = #f28500
val universalColorOrange600 = #da7800
val universalColorOrange700 = #c26a00
val universalColorOrange800 = #9d5600
val universalColorOrange900 = #613500
val universalColorPrimary100 = #bbdfcd
val universalColorPrimary200 = #8fcaad
val universalColorPrimary300 = #63b58c
val universalColorPrimary400 = #37a16c
val universalColorPrimary50 = #e7f4ed
val universalColorPrimary500 = #0b8c4c
val universalColorPrimary600 = #09733e
val universalColorPrimary700 = #075a31
val universalColorPrimary800 = #054023
val universalColorPrimary900 = #032715
val universalColorRed100 = #fce9e8
val universalColorRed200 = #f9d5d2
val universalColorRed300 = #f3aaa5
val universalColorRed400 = #e7554a
val universalColorRed500 = #e12b1d
val universalColorRed600 = #b42217
val universalColorRed700 = #9e1e14
val universalColorRed800 = #871a11
val universalColorRed900 = #71160f
}