design-token-transformer
design-token-transformer copied to clipboard
lukasoppermann
Flutter support
Hi,
First, thanks a lot for these great tools!
I just wanted to share a set of custom transformers I did for my own needs with Flutter, which could be interesting to improve your official transformer package.
Everything is available here : style-dictionary-figma-flutter.
It basically outputs tokens as a Flutter theme widget with a few helpers.
I also added a custom-icon type to export vector paths from Figma too (I made a custom plugin that clones my icon frames, flattens them as a single path, and then exports it as json).
Hey @aloisdeniel,
this is great. Sadly the link seems to be broken.
Would you be willing to add it to this package? If you could send a PR with a build.js here: https://github.com/lukasoppermann/design-token-transformer/tree/main/examples
Maybe /flutter/build.js
And the custom transformers in src/flutter? (https://github.com/lukasoppermann/design-token-transformer/tree/main/src)
If you have anything for the readme, that would also be interesting.
Oh sorry, I forgot to change the repository visibility. It should be accessible now!
I've followed the same logic/structure as the style-dictionary code base which is a bit different from this repository (lodash template, ...). I'll see if I can adapt it to create a PR.
And what is your thought about adding icon vector tokens into Design Tokens as well?
@aloisdeniel this is definitely interesting. However I am currently not sure how this would best work. What is your approach here?
It is very specific to Flutter, but I'm outputting a path like that from json entries like this one. It is lot more performant than SVG assets for example.
Theoretically, I could also do a similar generation from SVG assets, but SVG is so permissive that it is not possible. I find it great to have a design standard for glyphs like that.
While an interesting idea, I currently don't have time to look into this.