Cannot change component colors in Dashboard

[codeslubber]

This is super crazy:

as you can see I changed the fill color (which was correct) to green, but the fill did not change.

[Preran]

Did you post a graphic or video in your post? It looks like it did not get published correctly. From what I am hearing, you are trying to change the fill color of an object and the fill doesn't change to reflect the selected color. Is that right?

Can you try creating a simple shape such as a square or rectangle and trying to fill it with the color of your choice? Let us know your observations.

Thanks,

Preran

[codeslubber]

Yeah I attached an image and it showed it to me, then it didn't.

The UI Kits are, sorry, awful. The amount of time they save you is taken back immediately in nonsense like this. I am trying to use the dashboard one. All the images have Purple as their main fill color all over. I thought: 'well this is a design tool, of course there's a simple way to change that.' 3 days later, I have just decided to give up. There are stacks of nonsense piled on top of each other, and you have to find the right layer and change the fill color. That got the semi-circle progress to show properly, but the full circle one, changing it made the whole circle fill in. Enough of this madness.

[Preran]

Thank you for the additional info, makes more sense now. Is there a specific UI kit that you are referring to, or is this more of a general comment on all UI kits that you try to modify in Adobe XD?

Thanks,

Preran

[Dan Rodney]

Anyone can create a UI Kit, and that means they might know how to build a good file or not. Quality depends on the creator... not XD as an app.

I can't see your screenshot to know exactly what your issue is... but If you want to globally change a color, make a color swatch for it, change it, and watch the color change everywhere! No need to apply the color swatch to anything... swatches are like find/change for color. I hope that helps.

[codeslubber]

The image is showing for me again?

The UI Kit in question is the Dashboard one, which I think I got from the Adobe site?? I realize someone else made it but I thought that meant someone at Adobe at least blessed it, no??

[Dan Rodney]

On the UI Kits page that I think you got it from, under each one Adobe lists the author. Only one was created by Adobe, the others are from other people. While I can see how you may think these are Adobe vetted, do you really think someone at Adobe went through and checked each file for quality? Think of that page as Adobe collecting together a list of freebies that people offer.... and nothing more. Be happy that people create free things and share them, and if they don't work for you... then don't use them, maybe they work fine for someone else but not you. XD is a blank slate design tool for us to use and create whatever we want.

But back to solving your issue, did you try editing colors using Swatches as I had recommended?

[codeslubber]

This is the one: dashboard.

Did figure out how to change it through a swatch. Thanks, that worked.

Solved that problem but trying to use components is ridiculous, poking around in layers, looking for stuff. If you spend more time on a design prototype component than it would take to make a real component, kind of defeats the purpose right?

The prototyping tool that kills in this space is going to be the one that can really make components out of these things, e.g. you have a dial that shows progress, you should be able to set a percentage, highlight and background colors. Not fish around in layers, most that have nonsense names, trying to jigger things.

[codeslubber]

Sorry to be a buzzkill but this only solved PART of the problem, look at this:

Try to change that purple color. The swatch trick does not work on this one.

[Kenneth Kawamoto]

You can change the colour by adding a shape. This is not Adobe's responsibility whatsoever by the way. Whoever made this XD file didn't make it easy to edit for you, so complain to him/her instead

[codeslubber]

Hilarious, 'here's a really bad way to do this, that you would never think of in most tools, but it's not our fault, stop complaining to us.' Ok, thanks!

The use of the UI Kits have been pretty uniformly unpleasant. So Apple and Google are apparently to blame too (have used the iOS and Material Kits). And I have used the similar kits in Sketch. Somehow they managed to make it work. But yeah, I'm just a complainer and everything is as perfect as freshly drawn well water.

[Dan Rodney]

Keep in mind that Adobe XD is a much newer app than Sketch. Therefore people have had a longer time to learn how to use Sketch properly and maybe the kits you got for Sketch were made by someone who knew Sketch better than the people that made the XD kits. I don't think this is the fault of the app, as much as it is the user.

It's OK to be frustrated, just don't blame the app (or app maker) when it's a user issue. I'm not saying that XD is perfect. Sketch has some features that XD doesn't yet (and vice versa).

Please don't take offense to this... but complaining about free UI kits that other people made for you to use can come off as entitled. If you don't like the kits, then feel free to make better ones and share it with others! For example, I did that with Bootstrap grid templates for XD, Sketch, and Photoshop. Making a UI kit is a lot of work (much more than the grid templates I made).

[codeslubber]

I don't think it makes me sound entitled Dan.

As to making better ones, keep in mind, when people are learning a tool they tend to use things like this. If there is a better way to do a simple circular status, you of course could have shown that a long time ago. I could show you how to do it in sketch in a few minutes.

Have a good one, looking out for the unentitled.

[Dan Rodney]

codeslubber  wrote

you of course could have shown that a long time ago. I could show you how to do it in sketch in a few minutes.

Why would you be showing me? I didn't make the UI Kit. Someone made a free thing and it's not perfect, it's as simple as that. It's not Adobe's fault. It's not XD's fault. I've seen plenty of bad files made with Sketch, and that's not Sketch's fault either. I'm sorry you found the UI kit hard to use. Please don't blame the tool when it was the maker (of the UI Kit).

I didn't mean to upset you and I'm happy to help anyone here, you included. Is there still something you want help doing?

[codeslubber]

Read this thread: I wanted help figuring out how to change the color. This whole thread spread out now over 2 months is you and another guy saying 'you are blaming the wrong people.' And then admitting that what you have to do to change the color is not good. Ok, so yeah why hasn't anyone said 'look at this, you could make it like this with XD the proper way, then you would have a simple attribute and a picker.' Instead it's just 'you sound entitled' and 'why don't you fix it instead of complaining.'

Relax though, it's not that big a deal. I got all excited when I saw the progress with auto-animation and started using the tool, then the UI kits, and this community experience took that all away.

My point in the last post was let's assume I was blaming the wrong person, how hard can it be to make a symbol like this with some attributes? was just saying it's super simple in Sketch, I know how to do it there. If someone addressed that here in all this time, I would know how to do it in XD now too.

[Dan Rodney · Accepted solution]

I'm sorry this experience wasn't positive for you and I hope it doesn't taint your attitude about XD. I'd like to turn this experience around.

XD does not have charting features, so some of that UI Kit was created in another app and converted into an XD file. That's why you're having a hard time with it. That was certainly not the right approach for them to take. Sadly they went for making something pretty, not usable. The colors in the circle are actually a pixel-based image, ugh! Clearly this was not built in XD because you couldn't build it that way!

You'll have to delete the image-filled rectangle that creates the color, and draw a new colored shape instead. To drill down into a grouped/mark shape, each time you double-click you'll go in one step more. Group 208 is the bad offender (the rectangle filled with a pixel-based image which creates the color) that you don't want. Replace it with some vector shapes and you'll be able to change the color.

I hope that helps!

[codeslubber]

This did not fix it. Not sure who marked this the correct answer.