Can I use a string as the argument for figma.createNodeFromJSXAsync()?

Plugin and Widget API Questions
1

Hi,

I would like to load the JSX from an api as string and use the figma.createNodeFromJSXAsync method to generate the nodes.

Any attempt so far throws the error below. Is there a way to achieve this?

caught (in promise) Error: in createNodeFromJSXAsync: o is not a function
at Object.createNodeFromJSXAsync (eval at (eval at createScopedEvaluatorFactory (644c3b6d-a167-4518-b10e-b00cc56cdb17:1:6906))

2

Did you follow the documentation for using this method?

3

I did, but it doesn’t seem to be working with strings.

5

The documentation says the arg is of type “any” so it doesn’t actually specify in what format the JSX needs to be.

6

Okay, what type would you specify if you were writing documentation? What type should the jsx code be?

I can say that you can use the following:

figma.createNodeFromJSXAsync(<Frame />);

// The compiler will convert this to js:
figma.createNodeFromJSXAsync(figma.widget.h(Frame));

// Also, all of the above is equal to an object:
figma.createNodeFromJSXAsync({type: 'Frame'});

As you can see, if you are writing in Javascript, then the argument should end up being an object.

7

I think in the case of Figma the type is really a union of all node types (e.g. Frame, Text, Rectangle etc.).

Then, in essence the type is just an Object with some specific properties.

So, if I want I can make a little converter that creates specific objects for each Figma node type (e.g. Frame) from strings as long as they match any of the Figma node types and pass them to the Figma.createNodeFromJSXAsync method.

The reason for that was that I need the JSX structure to come from a service via an API call.

Thanks for the help, in the end I chose to not use the Figma.createNodeFromJSXAsync method and write my own API to convert the JSX string input to Figma nodes.
This allows me to be more subjective with the JSX syntax so that I can pass html arguments on the JSX nodes that are specific to the logic of my plugin.

Cheers!

8

Hi,
I also want to do the same as you for a school project, to execute a string response from an API to Figma components. But the Figma.createNodeFromJSXAsync doesn’t support it. I’ve tried many packages to parse this code to executable JSX code but nothing works. Ive been stuck for days now. How did you solve this? Could you maybe share how you wrote your own API to convert the JSX string input to Figma nodes?
This would help me a lot!
Cheers.