Hello, I am trying to create a widget that can clone other nodes in the document and add them as children within the widget itself. I can’t seem to add children to the widget, so I went with an approach where I keep a list of node data, and then the widget UI attempts to iterate through the list to create its children. However, I have been unable to figure out how exactly to create each child. I tried storing the node ID, but I can’t call figma.getNodeById() in the UI code. I tried serializing the node and storing that in the list, but have not been able to deserialize it to a JSX format that the widget UI can use. Is there a way to do this? Here is a code snippet describing what I am trying to do:
// Store Figma nodes that should be added as children to this widget.
// This gets populated in a click handler
const [items, setItems] = useSyncedState("items", [])
...
return (
<Frame
name="ItemListTest"
fill="#FFF"
stroke="#000"
width={200}
height={200}
>
{
items.map((node, index) => {
let node = figma.getNodeById(node.nodeId) // Can't call this here
return nodeToJSX(node); // How to convert to JSX?
})
}
</Frame>
);