Copy and Paste frame from one draft to another

Plugin and Widget API Questions
1

Hi,

I am trying the implement the functionality to my plugin to copy the frame of draft A (where the plugin is launched) and paste it into to draft B. Is it possible to do that ?

Thanks

2

Not really possible, plugins can’t work between files. You can store the full node JSON and then recreate the node in the new file (there is a node decoder library that can help), but that would be a pretty slow process for large nodes.

3

Okay thanks. But it’s possible to do it from one page to another ?

4

Super easy: .clone() and then page2.appendChildren(cloned)

5

How can I get page2 (in my case I want the node of the first page) ? I tried with:

const pageNode1 = figma.root.findOne(n => n.type === "PAGE");

But then I cannot use appendChildren on it.

6

appendChild docs: PageNode · Figma Developers

const pageNode = figma.root.children.find(n => n.name === "page 2 name") as PageNode

pageNode.appendChild(cloned)
1 Like
7

Thanks!

8

Hey , I have the Node as JSON , How can I regenerate that , do we have canvas which can render that or do you link/resource for node decoder .
Thanks

9

image
image1842×1060 170 KB

10

I saw this but seems , it generates the figma plugin code or developes the component tree ,

I am looking for something which can help generate the Figma component using the Node JSON.

11

Ok it looks like it was a different library, sorry. I can’t find it now. :frowning:

12

@Gavin didn’t you make a library for JSON → Figma?

13

Building something like that , basically I have the JSON of Figma Components like ReactangleNode etc…
Just wanted to understand is there renderer for that .

Thanks

14

I created a plugin which outputs Figma code from a selection. With a bit of modification I think I can turn it into a library which renders JSON to Figma.

For now depending on what your use case is, you could manually copy the generated source code from Node Decoder and paste it into your plugin.

Another option is you could turn the object into a component, import it into the other file, create an instance and then detach it. This requires the component to be in published.

I’ll let you know when I get chance to add the functionality to use Node Coder as a library.

15

Wait so it wasn’t you? Am I hallucinating? I was like 99% sure there was a thing for JSON → Figma.

16

For anyone who’s interested, I’ve created a branch of my plugin for use as a library within Figma plugins.

It’s still in beta but fairly effective in my initial tests. You encode the nodes you want to recreate as a string. Then when you need to recreate them you decode the string (which basically evals the string).

It has pretty much the same limitations as the plugin which are, it doesn’t support, images or custom fonts, mixed fonts. Depending on how complicated your node structure is you may find some other issues (if you do, I’d really like to know what they are).

There are lots of opportunities to shape the JavaScript API, so I really welcome your feedback before I start locking things in.

1 Like