Add Gradients to appearance panel
Allow users to add a gradient to a shape instead of just fills.
When importing a shape with a gradient from illustrator it currently makes the shape invisible…
we have just shipped our August release with Linear Gradients support!
Go check it out.
Tom Krcha (Adobe XD)
PS: Also you can vote/comment on Radial Gradients support here: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/15671976-radial-gradients
Armando Scuro commented
noticed the gradients on the asset panel do not respect the angle, so If I set a shape or path to a gradient from the asset panel, it will just revert to default gradient angle which is bottom to top.
Windows one needs an update aswell.
Need it for Windows!
Still missing gradient feature on windows :(
Pretty critical one to make a proper design.
When do you expect to have all features no Windows as well as Mac?
The contextual placement within fill makes sense now Tom, since you're planning on expanding gradients to be applied to borders as well. The G shortcut will help here, and I guess that means it'll default to the Fill of an object, and manually going in to change if if it's a border (since using a gradient on a border will be less common).
Glad you're taking on board the possibility the tab.
Catherine Azzarello commented
I've just updated XD (8/16) and don't see gradients yet. Too soon?
AdminTom Krcha (Admin, Adobe) commented
Hey @Isaac, thanks for all the feedback. One of the challenges is that eventually you will be able to use gradients on strokes as well and so on, so any swatch could become a gradient.
We are planning to bring G shortcut in the future. Do think it should just show the gradient editor on canvas or open both color picker in property inspector as well as gradient editor on canvas.
I like your suggestion about 3), I will talk to the design team about it.
@Marek Zabak - that's the plan, stay tuned.
Tom (Adobe XD)
Alright, here's some feedback.
Thanks for adding linear gradients -- an essential part of UI design. The functionality of actually using them is great, but there are a few things you could do to help speed up the process of activating the tool in the first place.
Right now, it takes a minimum of three clicks to start using the gradient tool. That might not sound like a lot, but over the course of an hour, day, month, it adds up to a significant portion of time. Here are some base-level suggestions to improve the UX of this tool:
1) Assign a keyboard shortcut. I suggest 'G' since it's logical, used for other Adobe software and isn't being used by anything else to my knowledge.
2) Add it to the property inspector, or add it as a tool to be selected (I much prefer the first option). Either way, burying it within the 'Fill' menu seems odd given how important of a tool it is. It's definitely going to be used more than Shadow, yet that gets a headline spot and gradient doesn't? No way, man!
3) If the plan is to keep gradients within the contextual Fill section, then I'd suggest that you have it as a tab option rather than the dropdown it is now. That saves a whole click and avoids miss-clicking once activating the dropdown (micro-frustration).
More feedback as I use the tool more will potentially follow.
Credentials: UI/UX Designer currently using XD in real-world commercial projects.
Marek Zabak commented
add ability to save gradient as preset, like colors
@simon: I'd make a case that we're not at MVP yet, which is why we're not yet 1.0. :)
Some feedback based on the preview video of gradients:
- Having gradients buried within the fill viewbox, and then a dropdown, is to much. On a large project this is a lot of clicks (even if you have a shortcut).
- It'd be better placed on the appearance panel below fill, just like border/shadow.
- I presume there are plans for radial gradients too?
Sorry if these are planned!
one more totally basic feature thats left out of the MVP :(
Danny Namnum commented
Thank's for the update.
I'm using this tool for the UI/UX strategy of a million dollar website, so the expectation is high. No pressure. LOL
Loving the tool so far, it would helpful if the gradient could fade to transparent.
Manuel Ryan Espinosa commented
Very Cool. I love that this feature is getting started. Keep it up.
Ian Armstrong commented
Irony: Being able to "Copy SVG Code" from Sketch 3 and have a working gradient fill but being unable to copy a gradient fill shape from Adobe Illustrator.
George P. commented
Ability to set the opacity of one of the gradient colors would be helpful. See keynote.
Also, allowing 3 + colors in the gradient
Shinji Pons commented
That'd be great - right now I have to add png gradients as image fills for it to work!
Harmen Struiksma commented
Plus mutiple fills!
I love the gradient capability that is in sketch. You can add new gradients, save them, and configure them with not just color arrangements but via controls to adjust the position of linear, and radial gradient colors.
1. The ability to create a gradient and or import it from other tools (kuler, etc) and save it to the document as an available "global style"
2. The ability to delete a gradient
3. The ability to get the CSS values from the gradient as RGBA, and HEX
4. The ability to clone an existing gradient and save a name for the gradient so it's easily recognizable in a ton of documents.