node.type="component"overrides node.type="frame" so you can't show/hide code with a conditional statement based on node.type

[mikeysouthwell]

I'm trying to build up a list of conditional statements so I only see certain code if a node is of type Frame and different code if a node is of type ellipse, rectangle, text etc.

However if it's a component or an instance of a component then this doesn't work.

Is there another way to get the base node type of a node?

[jake-figma]

component node types are treated separately from frames in the figma api. if you want to render the same template for a FRAME and a COMPONENT you can do {{?node.type=FRAME|node.type=COMPONENT|node.type=INSTANCE|node.type=COMPONENT_SET}}.

Although, based on your other issues ive responded to, im fairly certain youre going to want to try another approach that uses global templates. Did what i explain in #14 make sense?

[mikeysouthwell]

Hi Jake,

Correct me if I'm wrong, but wouldn't the condition:

{{?node.type=FRAME|node.type=COMPONENT|node.type=INSTANCE|node.type=COMPONENT_SET}}

Be true if any of those conditions are met (The pipe "|" is an OR in this case yeah?).

So if a node is an ellipse and is turned into a component it would match this statement, even though it isn't a frame.

Is there a way to get the "child" of a component so that we can find out the original node.type?

Also, I'll take a look at your code and see if this is something I can customise to our needs.

Thanks again for your prompt response and for being so helpful :)

[jake-figma]

oh, i see what youre saying, i thought you were wanting the opposite.

a circle "becoming" a component is still a circle node inside of a component node, so #6 might actually be closer to the solution you're looking for here. this feature does not exist yet, still thinking over it, but you would put {{figma.children}} in the COMPONENT template, and it would then render snippets for any children inside of it that have templates.

[mikeysouthwell]

Yes that's correct, so we would need some way to say for example:

{{?figma.children.node.type=frame}}

Or something along those lines. Which would mean that if it's a frame then reveal the proceeding line.

[mikeysouthwell]

Hi Jake,

Also, with regards to your suggestion #14 of customising your code (Looks like it was writting in TypeScript?), I am more of a designer so my knowledge is more in the use of Figma and a basic understanding of how MAUI XAML layouts work. We are a tiny 2 man team and my co-founder is a C# developer, so while he may be able to make sense of your code, he is flat out trying to get the core components of our product working.

We are looking for a plugin to make the progression from concept to production faster and easier. I think you have done a fantastic job of getting the abstraction of your code to the point where it is easily understandable by people with basic knowledge of programming concepts.

It would be fantastic if your plugin could get to the point where it could be used to convert any node to code in the format required by app developers, but for now we will just use it as best we can and then manually fill in the blanks.

We will continue to follow your progress with great enthusiasm and are happy to do any testing of new features you roll out :)

[jake-figma]

will keep you updated! there may eventually be a workaround that would avoid all these type-based conditions in your template. one thing im playing with in #21 is an approach where you have an external json file with all the templates for each type, and sync that with the plugin.