formaat-design
Theme sync from Figma to code
I see in Figma the design tokens. I see in the reshaped code the generated tokens in themes/reshaped/theme.css And I also found the folder with cli/theming/tokens
But I'm missing from the docs the step how you export the design tokens from Figma to generate than the CSS tokens?
We're using currently Figma Tokens to automatically export them from Figma and transforming them with Style dictionary to CSS & JS tokens.
Hey, currently export is not automated but the theme build is automated.
If you're creating a custom theme, you can define your theme values in the reshaped.config.js file in your project which will generate CSS files for every themes and you will be able to use them in the same way as you use the default theme. Here is a bit more about creating the themes: https://reshaped.so/content/docs/theming/creating-themes
Building our own theming plugin for Figma is our next step which will support exporting tokens in the config format.
Going to be resolved in v1.3 https://blvworkspace.notion.site/Theming-plugin-v1-dad36a72cbba434bb08031ef757169f3
1.3 is out with an MVP for the plugin. Doing the export at this stage was problematic since we've decided to build the plugin without attaching it to our specific theme format and make it work for anyone. Because of that, we weren't able to refer to colors by token names in shadows and that will be shipped once we go deeper into the theme editor part of the plugin moving it from the canvas to the plugin UI.
https://reshaped.so/figma-plugin
Have you thought again about exporting the design tokens from Figma? Maybe directly as GitHub integration?
Yes, it's been hard to prioritise this one since there are a lot of expectations for Figma to support more tokens natively and that means that a lot of tokens integrations might need to change because of that, so I think currently we're mostly waiting to learn when that's going to happen and what they're releasing