Add Figma nodes as children to widget

Plugin and Widget API
1

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>
);
2 Likes
2

Hello, I am trying to do a similar thing so I was curious if you figured this out?

3

No I wasn’t able to figure out how to make a node and add it. I ended up exporting the nodes that I wanted to add into PNGs and then creating nodes with the PNGs as a background. This was good enough for my needs, as I only wanted a visual representation in my widget and didn’t need the actual nodes themselves.

1 Like