search

formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
119 stars 4 forks source link

How to import design tokens from Figma to Reshaped? #65

Open mmailaender opened 2 years ago

mmailaender commented 2 years ago

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.

blvdmitry commented 2 years ago

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.

blvdmitry commented 2 years ago

Going to be resolved in v1.3 https://blvworkspace.notion.site/Theming-plugin-v1-dad36a72cbba434bb08031ef757169f3

blvdmitry commented 2 years ago

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

mmailaender commented 1 year ago

Have you thought again about exporting the design tokens from Figma? Maybe directly as GitHub integration?

blvdmitry commented 1 year ago

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