Copy as code/svg/png

[lkjimy]

Hello there!

I want to start by saying, I really appreciate the work you guys are doing with Penpot. The idea of having a professional, sleek and by-the-people-for-the-people software alternative for UI/UX designers is really extremely appreciated , it’s getting frustrating out there…

So, a feature that I would really like to see in Penpot, is the “copy as…” on the context menu. It’s extremely convenient, and seves us a lot of time when working.

Here is what it looks like on Figma:

I ran a simple test, copying an elipse between both softwares, and found different behaviors.

1. I created an elipse on Penpot and an elipse on Figma.

2. I copied the elipse form Penpot (with ctrl+c), to Figma, and got a big string of data:

{"~:type":"~:copied-shapes","~:features":{"~#set":["layout/grid","styles/v2","fdata/shape-data-type","components/v2"]},"~:version":46,"~:file-id":"~u528689d0-36b6-11ed-a5c2-cf2300df1f4f","~:selected":{"~#ordered-set":["~ua364e08d-0565-80e1-8004-64fd3035faab"]},"~:objects":{"~ua364e08d-0565-80e1-8004-64fd3035faab":{"~#shape":{"~:y":213.9999999999999,"~:transform":{"~#matrix":{"~:a":1,"~:b":0,"~:c":0,"~:d":1,"~:e":0,"~:f":0}},"~:rotation":0,"~:grow-type":"~:fixed","~:hide-in-viewer":false,"~:name":"Ellipse","~:width":105,"~:type":"~:circle","~:points":[{"~#point":{"~:x":1232.0000000000002,"~:y":213.9999999999999}},{"~#point":{"~:x":1337.0000000000002,"~:y":213.9999999999999}},{"~#point":{"~:x":1337.0000000000002,"~:y":319}},{"~#point":{"~:x":1232.0000000000002,"~:y":319}}],"~:proportion-lock":false,"~:transform-inverse":{"~#matrix":{"~:a":1,"~:b":0,"~:c":0,"~:d":1,"~:e":0,"~:f":0}},"~:id":"~ua364e08d-0565-80e1-8004-64fd3035faab","~:parent-id":"~u7b0227c0-36b6-11ed-8338-8390ccf4a05c","~:frame-id":"~u7b0227c0-36b6-11ed-8338-8390ccf4a05c","~:strokes":[],"~:x":1232.0000000000002,"~:proportion":1,"~:selrect":{"~#rect":{"~:x":1232.0000000000002,"~:y":213.9999999999999,"~:width":105,"~:height":105.00000000000011,"~:x1":1232.0000000000002,"~:y1":213.9999999999999,"~:x2":1337.0000000000002,"~:y2":319}},"~:fills":[{"~:fill-color":"#003eff","~:fill-opacity":1}],"~:flip-x":null,"~:height":105.00000000000011,"~:flip-y":null}}},"~:images":{"~#set":[]}}

3. Then, I copied the elipse from Figma (with ctrl-c), to Penpot, and got an empty text element that disappeared after deselection.
   (Can’t share another screenshot here )

4. I copied the elipse from Figma (with “copy as SVG”), to Penpot, and got a group.
   (Can’t share another screenshot here )

5. I copied the elipse from Figma (with “copy as SVG”), to Figma, and got a frame.
   (Can’t share another screenshot here )

6. I copied the elipse from Figma (with “copy as PNG”), to Penpot, and got an image, as expected.

So, notice that Figma’s context menu, also has the ability to copy/paste properties, which is what I think Penpot’s copy, kinda do by default…? That’s maybe why we cant simply copy and paste content from Penpot to Figma, and from Figma (with ctrl+c) to Penpot. So, the ability to have advanced ways to copy from Penpot, would be very much appreciated by the community, and another reason to use Penpot. Also, copying/pasting properties would be very useful to quickly apply styles on elements.

Hope you guys consider it, . Thanks!

Related topics:

Copy to SVG - more copy options - Help us improve Penpot / Feature requests - Penpot Community

Improve SVG / vector copying / pasting from penpot into css - Help us improve Penpot - Penpot Community

If you find other related topics, post it in the comments!