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

Supporting Design Tokens from Token Studio plugin #44

Open damalekguide opened 4 months ago

damalekguide commented 4 months ago

Hey, I was wondering if there are any plans to support design tokens from token studio plugin. I have no data how many people are willing to use both Code Snippet editor and token studio but my understanding is that those two plugin enable small/medium to automate code generating and tokens usage in their project. That kind of teams does not have capabilities to create plugin on their own so they are stuck on whatever is available. Just food for thought.

jake-figma commented 4 months ago

this is interesting! token studio uses shared plugin data, so it is theoretically possible to access these values. im curious what you would be looking to surface with your templates? figma variables are currently supported.

damalekguide commented 4 months ago

The thing that is missing from my perspective is a way to surface design tokens for bigger chunks of designs. All components are translated well but challenge arises when we're going into layout stuff (for example creating a form with 20 components). The ideal scenario is that in CSS code snippet we would see tokens for padding, gap and others instead of raw values. Using naming that you guys use at Figma, I would like to use semantic and primitive tokens for creating layouts. This has potential to translate full pages in the future.