Color picker in plugin UI

Is there a way to add color picker to plugin UI? I want user to be able to select a color. Or at the very least offer a few preset colors to pick from.

Thanks for your feedback in advance.

There is no API generating color picker UI. However, nothing stops you from building a simple color picker with a few preset colors yourself. Also since the XD 15 update, you are able to read/write user’s assets panel.

I’ve implemented a simple color picker that gets assets colors in my Frame Maker plugin.

If you need to look at the code:
https://github.com/paolobiagini/xd-frame-maker
Hope it helps.
Keep in mind that I’m just a designer so the javascript logic could be not very professional.

4 Likes

This is very helpful. Thanks!

2 Likes

Cool :slight_smile: Love the integration w/ Assets!

3 Likes

Why don’t support the HTML <input type=“color”> ? That should be the easiest way to add this feature.

For now <input type=“color”> creates a simple text-field. Since Chrome does support this feature (according to https://caniuse.com/#feat=input-color), XD could support it quite easily (assuming that XD is an electron-Application)

1 Like

UXP (which provides XD’s extensibility) is a from-scratch implementation of HTML/CSS, with JS being provided by the standard V8 engine.

But we could certainly vote for a color input type. I think it’s been requested and is planned.

1 Like

XD isn’t an Electron app – rather it’s a native app that uses some JS and has a completely custom rendering engine for plugins (based on HTML and CSS, but it’s not a browser, so support isn’t perfect.)

As for input type="color" it’s on our backlog… hopefully we’ll be able to get to it soon. We had to get some other support in before working on this feature itself. Plus there is a little bit of difficulty here – the web spec that supports a color picker doesn’t actually allow transparency or HSL. Which XD definitely does… so actual support here gets a little thorny.

We may end up having to go out-of-spec for this one and do something like input type="xd-color" or similar. (problem then is that this becomes app-specific – and other apps have very different color pickers.)

2 Likes

That’s OK if it’s app-specific. Anything this close to the core of a graphic app’s detailed API could be expected to be specific.

1 Like

Agreed on this one, developers will respect it and understand the behind the scenes decisions and limitations. I would go xd-color or implemente just color for the full coverage and legacy-color for the old one :slight_smile:

1 Like