It will be great, if the json created for the Style dictionary can be imported as is

[senthil-kk20]

Hey @six7,
Thank you so much for the great plugin. It is quite amazing and saves lot of time.

We are already using design tokens in our project and we had setup the Amazon style dictionary. It will be great, if the same json can be imported in to our Plugin. Also, are you planning to introduce the box-shadow option in the tokens list?

Regards,
Senthil

[six7]

Hey @Senthil87 — thanks for the feedback!

Out of curiosity, whats stopping you from using the json from style dictionary in the plugin JSON window? Just so that I know what things I need to consider. Recently added support for value fields on tokens.

Currently I have their different styled aliases on mind, written like {this}

And yes! Shadow tokens will be supported soon.

[senthil-kk20]

Thank you so much for the prompt reply @six7. Value fields are now supported which is great to see. I had issue with font size but got to know, when I changed "size" to "fontSizes" it worked. Attached the sample JSON.

{
"size": {
"font": {
"tiny" : { "value": "0.75" },
"small" : { "value": "0.875" },
"medium": { "value": "1" },
"large" : { "value": "1.25" },
"xl" : { "value": "1.5" },
"xxl" : { "value": "2" },
"xxxl" : { "value": "3" },
"base" : { "value": "{size.font.medium.value}" }
}
}
}

Great to know that "Shadow" tokens are on its way. Looking forward to it.

I have one more concern in using colors, is there a way I can change the color of the stroke? May be the colors can be populated under the colors dropdown under "Document colors" or "Local colors"? Or even simpler to add them like borderColor property in the JSON itself along with borderRadius and borderWidth. Just a thought.

Thank you again for such wonderful plugin.

Regards,
Senthil

[six7]

Regarding stroke colors: Yes, you can currently right-click any color token and it will ask you if you want to apply it as a fill or as a border color.

Hint: This will only work if you applied a stroke to the current object in Figma or if you also applied a borderWidth token.