Fetching properties from child nodes while parent node is selected

[mikeysouthwell]

Is there a way to retrieve the properties from a parent node's children if it has one or more child nodes?

Say a parent frame has a child frame inside it, how would I get the child frame's properties while the parent is selected?

[elyseholladay]

+1, would love to know how to do this. In my case, looking at a RadioGroup and RadioButtons:

(And I should note @jake-figma that me and my team are so stoked about this plugin!!)

[jake-figma]

Thanks for reaching out @mikeysouthwell! Check out #6 for more on how I'm thinking about handling children support. @elyseholladay you might be interested in the approach outlined in #6 as well. It's a nontrivial amount of work, but I think it would be cool to figure out a good way to support it.

@mikeysouthwell based on some of your other issues, I think you may actually want to clone this repo and start adding code to address your unique needs yourself. I'm going to follow up in the other issues, but the best way to generate global, node type-based templates with a plugin that you can distribute to your team, is going to be to hard code them in a private version of this plugin. I am considering adding code to this plugin that shows how you would go about doing that to make it easier, but theres not a good way to do that with the published version of this plugin. There's nowhere to store a global template in Figma for an entire team.

[mikeysouthwell]

Hey @jake-figma, I wasn't sure how to contact you directly, so I thought I'd just respond to this post. I was able to use the Global Templates Editor to generate MAUI code to suit our purposes and I thought other members of the community might find it useful :)

{
  "types": {
    "FRAME": [
      {
        "title": "MAUI",
        "language": "JAVASCRIPT",
        "code": "<FlexLayout \n {{?autolayout.layoutMode=horizontal}}Direction=\"Row\"\n {{?autolayout.layoutMode=vertical}}Direction=\"Column\"\n BackgroundColor={{css.background|pascal}}\n WidthRequest=\"{{css.width|pascal}}\"\n HeightRequest=\"{{css.height|pascal}}\"\n Padding=\"\\\n {{?variables.paddingTop}}theme.{{variables.paddingTop|pascal}}, \n {{!variables.paddingTop}}{{autolayout.paddingTop}},\\\n {{?variables.paddingRight}}theme.{{variables.paddingRight|pascal}},\\\n {{!variables.paddingRight}}{{autolayout.paddingRight}},\\\n {{?variables.paddingBottom}}theme.{{variables.paddingBottom|pascal}},\\\n {{!variables.paddingBottom}}{{autolayout.paddingBottom}},\\\n {{?variables.paddingLeft}}theme.{{variables.paddingLeft|pascal}}\n {{!variables.paddingLeft}}{{autolayout.paddingLeft}} \"\n {{?variables.itemSpacing}}Spacing=\"theme.{{variables.itemSpacing|pascal}}\"\n {{!variables.itemSpacing}}Spacing=\"{{autolayout.itemSpacing}}\"\n {{?css.justifyContent=center}}JustifyContent=\"Center\"\n {{?css.justifyContent=space-between}}JustifyContent=\"SpaceBetween\"\n {{?css.justifyContent=flex-start}}JustifyContent=\"Start\"\n {{?css.justifyContent=flex-end}}JustifyContent=\"End\"\n {{?css.alignItems=center}}AlignItems=\"Center\"\n {{?css.alignItems=flex-start}}AlignItems=\"Start\"\n {{?css.alignItems=flex-end}}AlignItems=\"End\"\n {{?autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=center}}VerticalOptions=\"Center\"\n {{?autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=min}}VerticalOptions=\"Start\"\n {{?autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=max}}VerticalOptions=\"End\"\n {{!autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=center}}VerticalOptions=\"Center\"\n {{!autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=min}}VerticalOptions=\"Start\"\n {{!autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=max}}VerticalOptions=\"End\"\n {{?autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=center}}HorizontalOptions=\"Center\"\n {{?autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=min}}HorizontalOptions=\"Start\"\n {{?autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=max}}HorizontalOptions=\"End\"\n {{!autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=center}}HorizontalOptions=\"Center\"\n {{!autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=min}}HorizontalOptions=\"Start\"\n {{!autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=max}}HorizontalOptions=\"End\"\n {{?node.children=0}} />\n{{!node.children=0}}>\n {{figma.children}}\n{{!node.children=0}}</FlexLayout>"
      }
    ],
    "TEXT": [
      {
        "title": "MAUI",
        "language": "JAVASCRIPT",
        "code": "<Typography\\\nvariant=\"{{node.textStyle}}\"\\\n{{!node.textStyle}}variant=\"unknown\"\\\n\\>{{node.characters|raw}}</Typography>"
      }
    ]
  },
  "components": {}
}

[mikeysouthwell]

This is what it looks like on a basic Kebab Menu icon:

<FlexLayout 
 Direction="Column"
 BackgroundColor=Var(GraysWhite, #FFF)
 WidthRequest="48px"
 HeightRequest="48px"
 Padding="  0,  0,  0,  0 "
 Spacing="0"
 JustifyContent="Center"
 AlignItems="Center"
 VerticalOptions="Center"
 HorizontalOptions="Center"
>
 <FlexLayout 
    Direction="Row"
    Padding="  0,  0,  0,  0 "
    Spacing="3"
    JustifyContent="Center"
    AlignItems="Center"
    VerticalOptions="Center"
    HorizontalOptions="Center"
 >
 </FlexLayout>
</FlexLayout>

[mikeysouthwell]

Did you ever hear back from the Plugin API team about removing the px values and also being able to grab the various properties from the css.boxShadow or css.filter properties?
"css.boxShadow": "0px 0.5px 1px 0px rgba(0, 0, 0, 0.25)"
"css.filter": "drop-shadow(0px 0.5px 1px rgba(0, 0, 0, 0.25))"