Linear gradient not imported to XD

[Frida2017]

Hi,

I am running into a problem importing an AI graphic to XD. The radial gradient is imported, but the linear gradient is displayed as solid color, although in the inspector on the right siede side the fill says gradient. It is supposed to be in the sword.

Does anybody know ho to fix this?

Thank you!

Frida

[Peter Villevoye]

I've tried pasting and importing two elements with linear and radial gradient, and they both work fine. So there must be someting intricate in the content you've created. Any weirdly grouped or compound element, a funky clipping mask, or a transparancy mask in it, not doing anything else but unnecissarily increasing the complexity ?

[Frida2017]

Hi Peter,

thank you so much for replying. No, nothing fancy like clipping masks or so. Just that the linear gradient is angled and not vertical. I tried the unite tool in the pathfinder before exporting the asset, as somebody in this forum suggested and that worked miraculously. Obviously angled gradients are not expeorted/ imported properly otherwise. Weird?! 

Thank you!

Frida

[Peter Villevoye]

I just tested an angular linear gradient and it still worked fine, both as a Paste and an Import. So there must be something else at play here...

[Frida2017]

Oh that is so weird. I have no idea what it could be. I copy pasted and imported only the sword, without the other graphics and it is still doing it. Huh.

[Monika Gause]

Did you move the gradient around inside the shape? Can you show the complete object with visible gradient annotator in Illustrator?

[Frida2017]

Hello Monika,

yes, I did. I will attach the screenshot. Thank you!

Frida

[Monika Gause]

I'm not sure if Xd supports moving around a gradient like you can do in Illustrator.

So can you try if it's possible to achieve the sane with just using the gradient panel, the rotate angle and the gradient stops?

[Peter Villevoye]

Ha ! Monika in da House 🙂

Adobe XD accepts various kinds of gradients from Illustrator very well, both as pasted and imported graphic, with multiple colors, shifts in balance, and even opacity levels. So it must be something with the overall construction of that particular shape, causing XD to mis-interprete the Fill.

[Frida2017]

Haha, yes Monika helped me out multiple times when I started to learn Illustrator in 2017 🙂  Its getting even weirder. The solution you suggested Monika fixed the gradient ont the sword, thank you!  But the little end of the hilt, nope, still not showing the gradient. Here the solution helped, that Khaledi suggested, switch to radial and back to linear and tataa, there is the gradient. (3rd Sword) Weird!

 

[Peter Villevoye]

So the issue originates in Illustrator, though it doesn't seem to cause a problem in Illustrator or similar (probably Postscript/PDF capable) environments. Would be nice and wise if the Adobe XD developers could get the problematic part of your drawing, for a closer examination. This is and will be happening more often...

[Frida2017]

I am happy to upload or share the .ai file to the developers if I know where to upload it.. 

Thank you all for your help!! At least I found two solutions to fix the problem in XD with the help here.

[Peter Villevoye]

Perhaps some one like Preran reads this and will leave a reply or contact you.

[Frida2017]

Thank you Peter, nobody has contaced me yet, but I will message Preran.

Best

Frida

[SkillNation]

I also have this issue time to time, normally helps to switch to radial gradient in XD and then back to linear and after that normally you can see all gradients colors

[Frida2017]

Oh! Thank you! I will definitely try that 🙂

Frida

[DF Nik]

Experiencing the same problem and here's how I solve it for now..

Here's how it look on Adobe Illustrator. Here's how it looked on XD when pasted / imported.

Make sure to compound path gradient elements in your illustration. I asure you it works.. Here a link on what are compound paths. (It's easy as right clicking and making it a compound path)

Here's how it look on illustrator when I make the gradient shape to a compound path.
Right click then press Make Compound Path

After that try pasting on XD it should work 100% .. I got this solution while exploring on XD on how to truly save this because I have an urgent project in UI UX xD.

[Frida2017]

Thank you so much! I will definitely try that! 

[Cultural_Infusion]

Same issue here.

I tried the compound solution but it didn´t work, maybe because i have a gradient go through different shapes (letters).
The quick solution I found was to save the vector as SVG, on a different file.
Dragged the SVG into my XD composition and it worked.

[DanielBlazquez]

I have the same problem. I tested it with a simple figure and the result is the same. I hope they solve it soon, because it is quite annoying.

[Peter Villevoye]

Your problem is not the same, because importing or pasting elements with linear or radial gradients into XD work fine !! So there must be something strange with your sample... 

When copying/pasting doesn't seem to work, then check this setting in the Preferences (it's in Dutch, but I hope tou can find and verify it). It defines what is brought over by the clipboard:

[DanielBlazquez]

Hi Peter. I have the same settings. It is a clean file from Illustrator and XD. It stopped working when updating to v25. 

PD: There is a new version. Let's cross our fingers and see if it has been fixed.

[obaquero]

I have the same exact issue. On the left a copy paste of the shape and on the right the same shape using the cc library from Illustrator to XD. It doesn't work. XD doesn't support swatches and linear gradient from illustrator if I use the library. XD has a lot of compatibility problems even when you works in the same file in Windows and Mac.

[TicklishRobot]

I had the same problem. A client provided their logo, with some complex gradients, as an Illustrator file so I created an SVG but when I brought it into XD the gradient was solid (I also tried coping and pasting but had same outcome). I tried the other tricks mentioned, but nothing worked withour creating lost of extra work. Then I noticed the file had guides. I removed the guides and it worked great. I coped and pasted from AI to XD and gradient was perfect. 

If you have guides in AI file remove them and try again it worked for me not sure why.

[AtuyL]

hello.
I can't explanation for below effect.

But i find this process is resolve the this issue.

step1: Object -> Live Paint -> Make
step2: Object -> Live Paint -> Expand

If you can write ExScript, the following may also be useful.

app.executeMenuCommand("Make Planet X")

app.executeMenuCommand("Expand Planet X")

thank you. (  | _ | )v