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

Pulling subproperties from a property #15

Closed mikeysouthwell closed 5 months ago

mikeysouthwell commented 5 months ago

Is it possible to get all the separate properties from an effect, such as a drop shadow for example?

Currently, it only seems possible to get this from the CSS properties eg:

"css.boxShadow": "0px -1px 2px 0px rgba(0, 0, 0, 0.25)",

Ideally it would be great to be able to grab the X and Y Offset, Blur, Colour and Opacity values seprately so they can be converted into the format required for the programming language being used.

mikeysouthwell commented 5 months ago

Same issue with {{css.background}} which is "var(--style-white, #fff)" or {{css.border}} which is "1px solid var(--style-Gray, #E5E5E5)".

Ideally we would want to be able to grab just the style name or just the hex value for the colour or the stroke weight/thicknesss of the border or the type of stroke eg. solid, dashed etc.

jake-figma commented 5 months ago

Answered this in #12.

Both of these things are raw Figma Plugin API output, and for now, this plugin is not going to mess with that. Cloning this plugin would allow you to write those transformations yourself, however!