search

figma / code-snippet-editor-plugin

Translate component variants, properties, and more into dynamic code snippets for your design system.
https://www.figma.com/community/plugin/1311777988952403297/code-snippet-editor
MIT License
126 stars 11 forks source link

Please add Token Studio naming convention eg. "Colours.Gray.gray-100" instead of "--Colours-Gray-gray-100" #57

Closed mikeysouthwell closed 2 weeks ago

mikeysouthwell commented 3 weeks ago

Hey Jake,

Is it possible to have an option like {{css.background|pascal}} for Token Studio or just generic "dot" notation eg. {{css.background|tokenstudio}} or {{css.background|dots}}

{{css.background|pascal}} BackgroundColor=Var(ThemeColoursNeutralsNeutral500, #888C84)

{{css.background|tokenstudiol}} BackgroundColor=Var(Theme.Colours.Neutrals.neutral-500, #888C84)

"css.background": "var(--Theme-Colours-Neutrals-neutral-500, #888C84)", "variables.fills": "theme-colours-neutrals-neutral-500"

So the last string of text after the dot "." would be unchanged, which in this case is neutral-500.

While the rest would go from "--Theme-Colours-Neutrals-" to "Theme.Colours.Neutrals".

jake-figma commented 2 weeks ago

the best way to handle this is through the web code syntax in variables. i dont have control over the output of the CSS, i can only filter it after the fact. you can change what that value is going to be by adding code syntaxes through the variables modal

mikeysouthwell commented 2 weeks ago

Ahh this is exactly what I'm looking for. Thanks Jake!

I'll use the custom web code syntax for the variables :)