Add Export tab (JSON, SCSS, YML, etc)

[six7]

Either a seperate tab or just a "export" button somewhere

The user should then be able to choose how to export the Tokens:

• JSON
• YML
• JS
• CSS/SCSS

[chris-pearce]

This would be a pretty powerful feature to have.

Although, for CSS, what would the output be? CSS custom properties (variables), e.g., --colorBrandDefault: #333;, shouldn't really be used for static variables (more info here)?

I'm actually scheduled to create a build task in my codebase to process the exported Figma tokens so they can be consumed in CSS where I'll use the postcss-simple-vars plugin (as I'm using PostCSS). One of the tasks required is flattening the JSON structure.

Also, I noticed the JSON coming out of Figma isn't valid, e.g., missing double quotes around properties. Therefore, running Prettier over it to ensure correct formatting is doing the job for me, ATM.

Finally, having the ability to pull the tokens from a service would be amazing, as yeah, right now it has to be a manual copy and paste job.

[RVledder]

Have you guys considered a library such as theo?

That lib can transform yml (and if I remember correctly also JSON) for web, ios and android. Meaning it will either use hex or rgb, etc.

Also you can export it in different formats.

[RVledder]

"Also, I noticed the JSON coming out of Figma isn't valid, e.g., missing double quotes around properties. Therefore, running Prettier over it to ensure correct formatting is doing the job for me, ATM."

Is that still happening? I don't have this issue. Perhaps worth it to make that a seperate issue with steps to reproduce?

[six7]

Have you guys considered a library such as theo?

That lib can transform yml (and if I remember correctly also JSON) for web, ios and android. Meaning it will either use hex or rgb, etc.

Also you can export it in different formats.

Export will probably use style dictionary, theo, or some other converter that can help. As these require node they cant be placed directly in Figma but rely on an external server to do the transformation. Should go hand in hand with an external sync server I think.

I'll have some time around christmas, hopefully I can make some progress around that time 🤞

[jaredcwhite]

[CSS variables] shouldn't really be used for static variables

I think the conclusions of that linked article are way out of date (from 2017). CSS custom properties/variables are definitely ready for prime time now, and I think any system managing design tokens should be able to sync with that format. Shouldn't assume/require anyone to be using Sass or something Sass-like at this point unless they really know why and what for.

[iamnbutler]

A bit specific, but we would love to be able to export to TOML. Once exporting works I'd be happy to try to port over TOML export myself 🙂

[MatthiasDunker]

Is it possible to save the JSON in a local file instead of exporting it as a download?
Use case could be (steadily aka. watch mode) saving it to a local repo and deciding when to commit and pushing it manually.
Would have a quicker workflow when working on design and code in parallel.