Theme generator: Generate/use JSON with compatible token names

[vladoyoung]

Is your feature request related to a problem? Please describe. We're looking for the following workflow to work both Figma <=> App ways:

Figma => App (source code):

1. Update the values of the tokens within Figma
2. Trigger the export to GitHub or a local JSON file manually
3. Now that the files are updated within the repository, we can trigger a script to generate the themes within the app again
4. We can now use the newly generated theme or values within the theme

The issues with this method are:

• The current generateTheme function does not communicate with the newly generated JSON file from the Figma tokens plugin
• The JSON export format is different than the one for the values we can pass to generateTheme. Based on this documentation. The generateTheme function accepts camelCase values, but the export has JSON nesting and spaces within.

App (source code) => Figma:

1. Generate a new theme by passing in the generic colour values.
2. Manually export the newly generated theme and import it in Figma using token studio or similar
3. All Figma tokens should update

The issues with this method are:

• The only export of the theme we have is a CSS file, which is not compatible with the Figma tokens plugin. There is no way to use the newly generated theme and import to Figma

Generally, the issue here is coming from the incompatibility between the formats of the generated theme within the app, and what Figma accepts as an import.

Describe the solution you'd like Ideally, it would be nice for these methods to work both ways, but the Figma => App one is the more important one in my opinion. It will probably be what most Reshaped users will do too. @blvdmitry mentioned that writing a JSON formatter script might be the only solution here. This might turn into a monolithic job if you try to support all Figma token exporters and their formats, but I suppose the most widely used one is "Token studio" and its default format.

Describe alternatives you've considered App => Figma:

1. Generate the themes by passing in the generic colour values
2. Use the CSS file and process it through ChatGPT. We turn it into a JSON file with friendly token names
3. Input the generated values into Figma

Additional context At the moment we're looking at having two themes, both with dark and light modes. THEME1 (Dark, Light), THEME2 (Dark, Light). We're cautious that moving forward, if we want to change some tokens, having to manually change the values back and forth by hand will be very time consuming, as we are in the early phases of a rebranding and a lot of things will change. Updating values back and forth usually takes around 30min by hand, but that's time that can pile up, especially in early rebranding phases.

We spoke about this via email. We can continue any discussion here and maybe other Reshaped users might weigh in or if they already have a script they can help us out!

I wouldn't consider this feature request as high priority, as it's not something we really need at the moment. But I think it would be a great feature to implement and improve the workflow between designers and developers.

[blvdmitry]

Made some progress on the code to figma side, UI will probably look a bit different but it is already matching the current Figma theme format 1:1. Would that work for you now (especially considering the auto-generated themes)? We're planning to rewrite the plugin after Figma Config announcements so wondering if it's worth supporting Figma to code generation too before Figma APIs change

https://github.com/formaat-design/reshaped/assets/887379/d46a3ff7-865f-46b9-9606-e8c5d6902671

[blvdmitry]

Actually managed to finish the UI and resolving existing vs new styles, so published a new version to the Figma community. Check it out whenever you have time, I would love to hear any feedback to see what can be improved now and what we should plan for the "post Config" release

[vladoyoung]

Hi @blvdmitry and great job on the progress done so far! Unfortunately I don't have a sufficient Figma license so I can't test the plugin at the moment, and our designer is preoccupied with other things at the moment and he can't help with the testing. If you have a step by step guide how I can test this properly without the need of a Figma license just let me know and I'll do my best to test it soon! That aside, this feature is not urgently needed for us at the moment, so no need to prioritise it!

[blvdmitry]

Cool, the new plugin version is out so in case you need this feature – just let me know if you find any issues. I'll keep the other sync type for the major release in a separate ticket where we collect everything planned for v3 and will close this for now