Copy paste vector to Figma

[Franz666 5]

I would like that when I copy-paste an object from Designer to Figma, it shoud remain a vector rather than being converted to an image. Note: with Illustrator it remains an (editable) vector, very useful.

[ashf 334]

+1

Figma is #1 UI design/prototyping tool now. Figma support is important.
https://uxtools.co/survey-2020/

P.S.
Figma consider this problem is on Affinity side.
https://help.figma.com/hc/en-us/articles/360040030374-Copy-assets-between-design-tools
https://forum.figma.com/t/copy-and-paste-svg-from-affinity-designer/608/2

[Niall123492 16]

+1

 

I use Figma for Web/UI Design and Affinity for everything else. Having this compatibility would be great. 

[lokoloko 0]

any feedback for this issue? extremely useful 

[Evren 9]

Hello everyone,

I wanna start by mentionning that i am a big fan of affinity suite. For 3 years now, i am trying to ditch Adobe and switch to Affinity. But whenever i try to do some real life work, this copy paste issue shows up. I can't paste to Keynote, i can't paste to Figma (with keeping the vector properties). I think affinity team should put a little more focus on real time workflows instead of adding new shiny tools. With every new major/minor update i check the list of new features with the hope of seeing this improvement with no luck so far. 

[Raph on the Moon 0]

Go to Preferences>General and tick "Copy object as SVG" (Not sure about the exact term, I am using Afinity in French ;) )
If you copy paste from Affinity to Figma you will get your object in vector.

 

Edited February 26 by Raph on the Moon

[Evren 9]

Sorry but it is not working on mac. Pasting results in no action at all. Nothing happens. Only if i deselect copy as SVG it pastes as bitmap.

[Bryan Rieger 124]

I actually get a VERY tiny SVG (1pt x 1pt) image pasted into Figma from Designer (on macOS using Copy As SVG or an SVG exported from Designer), which I then have to figure out how to scale up to normal size (incl. strokes). I didn't think it was working at all for the longest time, but just the other day I noticed that it was indeed pasting 'something' into Figma, just completely the wrong scale. Also, quite often the artwork you've copied is way off from the frame that's created for it - meaning you can't see it as it's outside the frame. If you move the group outside of the frame you should be able to see it (still very, very tiny) in order to scale it up.

It's not an ideal workflow by any means, but IF you absolutely need to get SVG from Affinity into Figma either via copy/paste or from an SVG exported from Designer it kinda sorta works.

[smlsvnssn 0]

+1 On this issue. I get the same result, 1x1 pixel in Figma. It could be fixed simply by adding a viewBox property to the copied SVG, in order to keep size/proportions.

[smlsvnssn 0]

Slight edit: The issue is not a missing viewBox prop, rather the width/height need to be set in absolute values.

Doesn't work:

<svg width="100%" height="100%" viewBox="0 0 9578 8158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;">

 

Works:

<svg width="500px" height="500px" viewBox="0 0 9578 8158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;">

 

[Evren 9]

On 2/26/2021 at 7:02 PM, Bryan Rieger said:

I actually get a VERY tiny SVG (1pt x 1pt) image pasted into Figma from Designer (on macOS using Copy As SVG or an SVG exported from Designer), which I then have to figure out how to scale up to normal size (incl. strokes). I didn't think it was working at all for the longest time, but just the other day I noticed that it was indeed pasting 'something' into Figma, just completely the wrong scale. Also, quite often the artwork you've copied is way off from the frame that's created for it - meaning you can't see it as it's outside the frame. If you move the group outside of the frame you should be able to see it (still very, very tiny) in order to scale it up.

It's not an ideal workflow by any means, but IF you absolutely need to get SVG from Affinity into Figma either via copy/paste or from an SVG exported from Designer it kinda sorta works.

This is what happens when i import an Affinity SVG file without resizing while importing (by holding down the mouse and resizing) but if this was the case with copy paste i would at least see a new layer, even with 1x1 px, but nothing happens.

[Bryan Rieger 124]

 

Here's a video capture of my experience copy/pasting from Affinity Designer into Figma.

 

[ashf 334]

On 4/14/2021 at 5:56 AM, smlsvnssn said:

Slight edit: The issue is not a missing viewBox prop, rather the width/height need to be set in absolute values.

Doesn't work:

<svg width="100%" height="100%" viewBox="0 0 9578 8158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;">

 

Works:

<svg width="500px" height="500px" viewBox="0 0 9578 8158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;">

 

 

Copying a object in Illustrator gets svg like below. it has width/height attribute in px unit. so it seems to be the cause of problem in Affinity.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="428.6px"
	 height="428.6px" viewBox="0 0 428.6 428.6" style="overflow:visible;enable-background:new 0 0 428.6 428.6;"
	 xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<rect x="0.5" y="0.5" class="st0" width="427.6" height="427.6"/>
</svg>