Skip to main content
Question

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


step34

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))

This topic has been closed for replies.

6 replies

tank666
  • 4873 replies
  • July 12, 2023

Did you follow the documentation for using this method?

figma.com

step34
  • Author
  • 4 replies
  • July 12, 2023

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


step34
  • Author
  • 4 replies
  • July 12, 2023

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


tank666
  • 4873 replies
  • July 12, 2023

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.


step34
  • Author
  • 4 replies
  • July 13, 2023

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!


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.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings