Adobe XD: Importing Grayscale

Forum|Forum|5 years ago
December 16, 2020
2 replies
2045 views

Hey, I am trying to import assets from Illustrator to Adobe XD and when I attempt to drag the asset or import using the import option in XD, the assets are importing in grayscale instead of color. I tried changing color modes in Illustrator, etc but nothing seems to work. Please Help !

Import and export

This topic has been closed for replies.

Correct answer Spas K.

Okay, so here's the problem - unfortunately, Xd can't handle gradient colors applied to a stroke / border yet. Gradients only work as a fill color. Your circles in Illustrator are paths with a stroke, and the gradient is applied to the stroke, so when you import into Xd, it converts that gradient to a solid color (default is gray).

So if you outline the strokes in Illustrator (Object > Path > Outline Stroke), it will work fine, with the caveat that you won't be able to change the thickness of these circles after that in Xd.

Spas K.

Community Expert

Can you try to simply select the group(s) in Illustrator and do Cmd+C, and then Cmd+V in Xd? Not sure if that's different from dragging or importing, but give it a try if you haven't.

Also, in Illustrator, are these objects a group, or individual paths? Did you try ungrouping them completely and try moving them over like that? Sometimes illustrator applies the fill to the group or contents only, and Xd might not be reading that properly.

I'm pretty sure I had this problem some time in the past, but don't remember how I fixed it. An .ai file as Ares requested will help us figure it out (hopefully).

D

dnarciss18Author

Participant

Hey, thanks for those suggestions, however I did try the PNG thing and the problem is that I need the SVG format of the asset because I want to have control over the asset in after effects, the PNG will limit be being able to use the line paths. However, I'm fairly new to this site but here is the link to the AI file.

https://www.dropbox.com/s/55855fq75n7k9hr/Pulse%20UI%20assets.ai?dl=0

Spas K.

Correct answer

Community Expert

Okay, so here's the problem - unfortunately, Xd can't handle gradient colors applied to a stroke / border yet. Gradients only work as a fill color. Your circles in Illustrator are paths with a stroke, and the gradient is applied to the stroke, so when you import into Xd, it converts that gradient to a solid color (default is gray).

So if you outline the strokes in Illustrator (Object > Path > Outline Stroke), it will work fine, with the caveat that you won't be able to change the thickness of these circles after that in Xd.