Component children not showing up for code editor

[mikeysouthwell]

Hi Jake,

I can't see the raw data, so I'm winging it a bit here, but I have converted my JSON back to the format required to run as code on a single node to test it works for components and their child components. What am I missing here?

<FlexLayout 
{{?autolayout.layoutMode=horizontal}}Direction="Row"
{{?autolayout.layoutMode=vertical}}Direction="Column"
BackgroundColor={{css.background|pascal}} 
WidthRequest="{{css.width|pascal}}"
HeightRequest="{{css.height|pascal}}"
Padding="\\
{{?variables.paddingTop}}theme.{{variables.paddingTop|pascal}}, \\
{{!variables.paddingTop}}{{autolayout.paddingTop}}, \\
{{?variables.paddingRight}}theme.{{variables.paddingRight|pascal}}, \\
{{!variables.paddingRight}}{{autolayout.paddingRight}}, \\
{{?variables.paddingBottom}}theme.{{variables.paddingBottom|pascal}}, \\
{{!variables.paddingBottom}}{{autolayout.paddingBottom}}, \\
{{?variables.paddingLeft}}theme.{{variables.paddingLeft|pascal}}\\
{{!variables.paddingLeft}}{{autolayout.paddingLeft}}\\
"
{{?variables.itemSpacing}}Spacing="theme.{{variables.itemSpacing|pascal}}" {{!variables.itemSpacing}}Spacing="{{autolayout.itemSpacing}}" 
{{?css.justifyContent=center}}JustifyContent="Center"
{{?css.justifyContent=space-between}}JustifyContent="SpaceBetween"
{{?css.justifyContent=flex-start}}JustifyContent="Start"
{{?css.justifyContent=flex-end}}JustifyContent="End"
{{?css.alignItems=center}}AlignItems="Center"
{{?css.alignItems=flex-start}}AlignItems="Start"
{{?css.alignItems=flex-end}}AlignItems="End" 
{{?autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=center}}VerticalOptions="Center"
{{?autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=min}}VerticalOptions="Start" 
{{?autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=max}}VerticalOptions="End" 
{{!autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=center}}VerticalOptions="Center"
{{!autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=min}}VerticalOptions="Start" 
{{!autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=max}}VerticalOptions="End" 
{{?autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=center}}HorizontalOptions="Center"
{{?autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=min}}HorizontalOptions="Start"
{{?autolayout.layoutMode=horizontal}}{{?autolayout.primaryAxisAlignItems=max}}HorizontalOptions="End"
{{!autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=center}}HorizontalOptions="Center"
{{!autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=min}}HorizontalOptions="Start"
{{!autolayout.layoutMode=horizontal}}{{?autolayout.counterAxisAlignItems=max}}HorizontalOptions="End" 
{{?node.children=0}} />
{{!node.children=0}}> 
{{figma.children}}
{{!node.children=0}}
</FlexLayout>

[jake-figma]

figma.children should render for any child that has templates with the same name and language on them. do all of the children have templates named "COMPONENT" with the same language setting?

[mikeysouthwell]

Hey Jake,

I tried adding the same code with the same name of "COMPONENT" to the "Profile-Settings-24" child component of "Main-Item", but it's still not seeing the child. What am I missing?

[jake-figma]

you need to add templates to all the frame descendants. profile settings 24 is a great grandchild, you need templates on child and grandchild that render children. you could do this by putting a global template on frames that says {{figma.children}} or you could add it to each of the specific frame nodes in the component.

[mikeysouthwell]

Can you please provide an example of a basic component with a frame inside it and a component inside that frame Jake?

COMPONENT (Parent) FRAME (Child) COMPONENT (Grand Child)

I also have the global template on nodes of type FRAME.

So in this example I have manually added the COMPONENT code to the Parent and Grand Child.

[mikeysouthwell]

Hey Jake, this got closed, but my question is still unanswered. Can you please re-open the issue.

[jake-figma]

i cannot make you a figma file right now. do all the templates have the same name and language?

I think this and your other bug are tied to invalid global templates. can you share your global templates?

if you set this to be your global template, that component > frame > component scenario should work (assuming the components and frames dont have templates on them already):

{
  "types": {
    "COMPONENT":  [{ "title": "test", "language": "PLAINTEXT", "code": "i am component my name is {{node.name}}. children below: \n  {{figma.children}} " }],
    "FRAME":  [{ "title": "test", "language": "PLAINTEXT", "code": "i am frame my name is {{node.name}}. children below: \n  {{figma.children}} " }]
  }
}

[mikeysouthwell]

How do I remove my global template so I can test this? If I try removing it, it says invalid JSON.

I have included the global template I am using below:

{
  "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": {
    "COMPONENT_SET": [
      {
        "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>"
      }
    ]
  }
}

[mikeysouthwell]

This is what I get when I replace my global template with yours. I still can't see anything else regardless of whether I set Details Mode to On/Off or Default Snipped to Message/Empty:

[jake-figma]

move the COMPONENT_SET type into "types". per the documentation, "components" is for specific component code, delineated by component key. global component, component_set, and instance all go in types because those are node types.

{
  "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>"
      }
    ],
    "COMPONENT_SET": [
      {
        "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>"
      }
    ]
  }
}

this specific global templates works for me:

component set templates are not extending to the buttons in the screenshot because those buttons have specific templates on them already. im working on changing this behavior.

[jake-figma]

How do I remove my global template so I can test this? If I try removing it, it says invalid JSON.

yeah I havent allowed this to be empty yet. set it to valid JSON like an empty object {} and you should be good to go.

[mikeysouthwell]

I managed to get my global templates to work with this updated code (thanks for your help and the examples!). I still can't see the raw code though...

{
  "types": {
    "FRAME": [
      {
        "title": "MAUI",
        "language": "JAVASCRIPT",
        "code": "<FlexLayout \n x:Name=\"{{node.name}}\"\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>"
      }
    ],
    "COMPONENT_SET": [
      {
        "title": "MAUI",
        "language": "JAVASCRIPT",
        "code": "<FlexLayout \n x:Name=\"{{node.name}}\"\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>"
      }
    ],
    "COMPONENT": [
      {
        "title": "MAUI",
        "language": "JAVASCRIPT",
        "code": "<FlexLayout \n x:Name=\"{{node.name}}\"\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>"
      }
    ]
  }
}

[jake-figma]

yeah that part is really confusing to me. we can continue discussing that in #47

[mikeysouthwell]

What about shapes? I want to be able to see rectangles,ellipses, lines etc that are inside the frames/components.