material-foundation / material-theme-builder

Visualize dynamic color and create a custom Material Theme.
https://material-foundation.github.io/material-theme-builder/
Apache License 2.0
419 stars 30 forks source link

Can we export to DSP from Figma? If not, how to convert figma export to DSP? #162

Closed kintz09 closed 11 months ago

kintz09 commented 1 year ago

I used the web version to export the generated theme to DSP for use with the Adobe XD VSCode extension. The Figma plugin seems to be more up to date and has newer token that aren't defined in the export from the web version. Is there not a way to export the theme to DSP from Figma or am I just missing it?

If that's not possible yet, can anyone recommend a path to get from Figma to a DSP package that the Adobe XD plugin can load in?

margeeta commented 1 year ago

Sorry for the inconvenience, we swapped DSP support for JSON

kintz09 commented 1 year ago

@margeeta Is there a process to convert the JSON to DSP? If not, can you point me to any information on how to utilize the JSON file as design token in a web development project?

rodydavis commented 1 year ago

We migrated away from DSP because it is not being worked on as much anymore.

For json you could use style dictionary to generate values from the json

kintz09 commented 1 year ago

I'm attempting to generate css and scss variables from the JSON file using style dictionary. It seems to be finding my theme.json file but the files output are empty. I'm guessing my config file isn't set up properly or maybe I've chosen the wrong transforms?

I'm reading that Style Dictionary recommends the CTI structure (category/type/item) for token and that custom transforms are required if you use something else. Is the Material Theme Builder plugin using CTI or a custom structure?

Are there any examples of a config that works with the JSON file exported from the plugin?

benjamincox commented 1 year ago

@rodydavis What does your last comment mean? The JSON that the Theme Builder outputs doesn't seem to do anything with style dictionary. It's not in their format, as all of their example files have a { value: "#aa11bb" } property at the leaf node of the tree. I realize you don't want to support DSP anymore but is there something out there that can make your JSON format work with an existing off-the-shelf toolset, the way the VSCode DSP plug-in worked until you removed support?

rodydavis commented 1 year ago

Sorry meant to clarify, DSP uses style dictionary under the hood.

benjamincox commented 1 year ago

That's helpful, thanks. Unfortunately, the JSON format the Figma plug-in generates lacks many of the values we would need (typography doesn't follow styles in the Figma file, no extended colors palettes are created, etc.) so I'm finding it not very useful.

andrewperry commented 6 months ago

Why is it that this has been closed without any response when this is a significant issue for people seeking to use the JSON export that is now being provided instead of the DSP export?

The response that was provided as an alternative for DSP doesn't work by all accounts, due to the format of the JSON file. As you no longer support importing to Material Theme Builder to update a file, how do you expect people to be able to maintain consistency between all their different platforms when they can't use Style Dictionary?

I am hitting my head up against this issue...