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

Add exportAsync output to params #46

Open t4y3 opened 4 months ago

t4y3 commented 4 months ago

With the support of figma.children, snippets are now easier to use. Thank you! We believe that SVG strings and fimga.children will make it even more convenient. Are there any plans to add SVG strings to params?

For example.

This button consists of an icon component and a text node.

image

This is what you want to display as a snippet in the button component

<Button>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
    <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
  </svg>
  <span>favorite</span>
</Button>

I think we can achieve this by registering a snippet like this in each template

Button Text Icon
TemplateForButton TemplateForText TemplateForVector
jake-figma commented 4 months ago

this is great feedback and i have had this floating around in the back of my head for awhile now. i want to avoid generating svg for every single node if it isnt being used. this is a similar problem to children, i only want to parse children if children are referenced in the template and the child has templates on it.

I have plans to add some logic to optimize this (parsing the templates up front) and i think this would be a great enhancement as a part of it.