Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mmailaender opened this issue May 18, 2022 · 5 comments
Open

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

mmailaender opened this issue May 18, 2022 · 5 comments

Comments

@mmailaender
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

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

@blvdmitry
Copy link
Contributor

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
Copy link
Author

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

@blvdmitry
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants