Adobe XD: Importing Grayscale

Community Beginner ,
Dec 16, 2020 Dec 16, 2020

Copy link to clipboard

Copied

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 !

TOPICS
Import and export

Views

336

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Dec 17, 2020 Dec 17, 2020
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...

Likes

translate

Translate

Translate
Adobe Community Professional ,
Dec 16, 2020 Dec 16, 2020

Copy link to clipboard

Copied

How you import it? Try to use Color RGB Mode in Ai or export your assets as png from Ai and them import into XD.

Can you share your Ai file to test?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 16, 2020 Dec 16, 2020

Copy link to clipboard

Copied

I exported the files from Illustrated then used the Import tab in XD, I also tried the other way of just dragging it into XD and nothing worked..

 

Here is the link:

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

 

Thanks for the help.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 16, 2020 Dec 16, 2020

Copy link to clipboard

Copied

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).

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 16, 2020 Dec 16, 2020

Copy link to clipboard

Copied

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

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 17, 2020 Dec 17, 2020

Copy link to clipboard

Copied

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.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 17, 2020 Dec 17, 2020

Copy link to clipboard

Copied

Thank you Spas, I did not know that, However I tried what you said and it has worked fine, still allowing me control over the path. Thanks for the help.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines