code-snippet-editor-plugin icon indicating copy to clipboard operation
code-snippet-editor-plugin copied to clipboard

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

Open mikeysouthwell opened this issue 1 year ago • 3 comments

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>

mikeysouthwell avatar Jun 26 '24 06:06 mikeysouthwell

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.

jake-figma avatar Jul 02 '24 15:07 jake-figma

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"}} <toolkit:IconTintColorBehavior TintColor="figma.parent.cssFill" />

mikeysouthwell avatar Jul 04 '24 01:07 mikeysouthwell

so this is sounding more like parent params being passed to child templates. i can leave this open, but cannot get to handling this level of complexity in the language right now.

jake-figma avatar Aug 16 '24 14:08 jake-figma