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.

4

Well, the documentation says that the argument should be jsx and not a string.

createNodeFromJSXAsync(jsx: any): Promise<SceneNode>

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!