Jump to content
You must now use your email address to sign in [click for more info] ×

Designer SVG Import & Copy/Paste Into Figma


Recommended Posts

Hello,

Anyone got any experience of importing SVGs from Designer into Figma or using copy and paste from Designer to Figma?

I can import a mockup created in designer into Figma with drag and drop, the only problem I have encountered is I seem lose pattern (bitmap) fills. Anyone know if is possible to retain pattern fills wehn importinn the SVG into Figma?

In Designer preferences I have 'copy as SVG' selected but when I copy and paste from Designer to Figma everything is pasted as a bitmap.

Thanks

Link to comment
Share on other sites

  • Staff

Hi MCFC_4Heatons :)

Could you please upload a copy of your .afdesign file to the following link so I can investigate this further? Many thanks!

https://www.dropbox.com/request/l8r30O1JPlcvEaxH2Gcs

Please Note: I am now out of the office until Tuesday 2nd April on annual leave.

If you require urgent assistance, please create a new thread and a member of our team will be sure to assist asap.

Many thanks :)

Link to comment
Share on other sites

Hello - I just sent file - just  a simple rectangle with bitmap fill exported to SVG format from Affinity Designer. Try importing into Figma and you'll see the issue - Yers you can rasterize everthing but that defeats the object of being able to do any minir tweaks once a design is imported into Figma or if you are sharing with a clinet they will likely ask for a small tweak on the spot so retaining maximum editability is a must.

Link to comment
Share on other sites

  • Staff

Thanks for that, please see the following from Figmas website -

file-5gnCMQZmmd.png

If you're using Figmas File importer with your SVG it will be rasterised on import, this is a limitation of Figmas importer, not Affinitys exporter.

Please Note: I am now out of the office until Tuesday 2nd April on annual leave.

If you require urgent assistance, please create a new thread and a member of our team will be sure to assist asap.

Many thanks :)

Link to comment
Share on other sites

  • 1 month later...
On 8/31/2019 at 11:55 PM, MCFC_4Heatons said:

Hello,

Anyone got any experience of importing SVGs from Designer into Figma or using copy and paste from Designer to Figma?

I can import a mockup created in designer into Figma with drag and drop, the only problem I have encountered is I seem lose pattern (bitmap) fills. Anyone know if is possible to retain pattern fills wehn importinn the SVG into Figma?

In Designer preferences I have 'copy as SVG' selected but when I copy and paste from Designer to Figma everything is pasted as a bitmap.

Thanks

Not sure if the issue you're referring to is similar to what I had but I was able to solve my issue by using the settings in this post linked below.

 

Link to comment
Share on other sites

  • 5 months later...
  • 3 weeks later...

Ah. I just came across a similar problem.

Copying any shape design from Designer seems to copy it as a bitmap with a filled white background.

Copying to Illustrator and then copying from that to Figma seems to work, but defeats the object!

I was hoping the 'Copy items as SVG' was going to fix it. This is a bit of a bummer for my workflow too (Currently, trialling both Photo and Designer).

Edited by tnaseem
Link to comment
Share on other sites

  • 1 year later...
  • Staff

Hi @sebasnieb,

From the below forum thread, it appears as though this is caused by Affinity using relative sizing when copying and pasting objects in SVG, rather than absolute values - 

I'm not certain if our devs have any plans to change this from relative to absolute sizing, but I will ensure that they are aware of this incompatibility when using Affinity & Figma.

I hope this clears things up :)

Please Note: I am now out of the office until Tuesday 2nd April on annual leave.

If you require urgent assistance, please create a new thread and a member of our team will be sure to assist asap.

Many thanks :)

Link to comment
Share on other sites

1 hour ago, Dan C said:

I'm not certain if our devs have any plans to change this from relative to absolute sizing ...

Should usually not be a big deal to add a "more export panel" checkbox toggle option here, then to check for it's state (on/off, true/false) during the SVG code generation phase and write out width/height values accordingly.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

  • Staff
6 minutes ago, v_kyr said:

Should usually not be a big deal to add a "more export panel" checkbox toggle option here, then to check for it's state (on/off, true/false) during the SVG code generation phase and write out width/height values accordingly.

I agree, when exporting SVGs we already have this option under 'More', toggling Use Relative Coordinates will use 100% rather than absolute values, so it's certainly already possible - the log I have created with our devs is to add the opposite of this toggle coupled with the 'Copy items as SVG' setting under Preferences > General :)

Please Note: I am now out of the office until Tuesday 2nd April on annual leave.

If you require urgent assistance, please create a new thread and a member of our team will be sure to assist asap.

Many thanks :)

Link to comment
Share on other sites

  • 2 months later...
  • Staff

Unfortunately I can't guarantee that - this is logged with our developers internally and may be added to a future update, however there has been no developer update on this log as of yet. I hope this clears things up!

Please Note: I am now out of the office until Tuesday 2nd April on annual leave.

If you require urgent assistance, please create a new thread and a member of our team will be sure to assist asap.

Many thanks :)

Link to comment
Share on other sites

  • 4 months later...
  • 5 weeks later...
  • Staff

Hi @Jadon,

Welcome to the Affinity Forums :)

Unfortunately there's been no further update of the log currently - however I've once again 'bumped' this directly with our devs now.

I hope this helps!

Please Note: I am now out of the office until Tuesday 2nd April on annual leave.

If you require urgent assistance, please create a new thread and a member of our team will be sure to assist asap.

Many thanks :)

Link to comment
Share on other sites

On 5/7/2021 at 4:24 AM, Dan C said:

I agree, when exporting SVGs we already have this option under 'More', toggling Use Relative Coordinates will use 100% rather than absolute values, so it's certainly already possible - the log I have created with our devs is to add the opposite of this toggle coupled with the 'Copy items as SVG' setting under Preferences > General :)

Toggling Relative Coordinates does not affect width="100%" & height="100%" attribute.
Is this a bug?

"100%" often causes a sizing problem on other apps.

update: sorry, it seems that I needed to uncheck Set Viewbox...

Link to comment
Share on other sites

  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.