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

Retrieving values from a node's children to display for that node #56

Closed mikeysouthwell closed 2 weeks ago

mikeysouthwell commented 3 weeks ago

How do I get the name value of a child node and display that as the name for the parent node?

For example, I want to use the name "undo-icon-32p" of a child "VECTOR" node (the image) inside a unioned "BOOLEAN_OPERATION" node (the frame) with the name "union".

Can this be done with something like {{node.child.name}} or something similar?

*Note that I added cssFill in there for simplicity, this wouldn't actually be visible in the final code output, because the idea would be that the css.fill value for the parent node would be shown for the child node's "TintColor":


<Frame
Name="union"
WidthRequest="32px"
HeightRequest="32px"
cssFill="Var(IconsStrokeWhite, #FFF)"
>

<Image
Source="undo-icon-32p"
WidthRequest="32px"
HeightRequest="32px"
>
<Image.Behaviors>
cssFill=""Var(IconsStrokeBlack, #000)"
<toolkit:IconTintColorBehavior TintColor="Var(IconsStrokeWhite, #FFF)" />
</Image.Behaviors>
</Image>
</Frame>
jake-figma commented 2 weeks ago

i think the best way to do this is to put a template on the child that renders the child code and use figma.children on the parent. is there any reason you cant do that today? due to the fact that nodes have many children, i cant surface child strings efficiently, or display them without some sort of query syntax in the templating language.

mikeysouthwell commented 2 weeks ago

Hey Jake, can you please explain a bit more on what you mean by putting a "template on the child that renders the child code and use figma.children on the parent"?

Do you have an example?

I take it that query language isn't possible? In our case, if a node has the name "union" then we would always want the cssFill value of the unioned node to be used for the child svg node. So in our case we could just use an if statement that matches against the parent's name value. eg.

{{?figma.parent.node.name = "union"}}