By Dani Beaumont
Angular gradients, which are different from linear and radial gradients, can be really useful for designs like progress spinners and colour wheels. Let's take this design, for an example. In this centre artboard, I want to indicate a temperature control here that goes from a light shade of blue to this darker shade of yellow and an angular gradient will work well for that. I'll come in and select the background circle. And here in the Properties Inspector in the Appearance area, I want to click the Fill Colour swatch, which brings up the Fill controls. Notice in the upper left-hand corner, it's going to default to solid colour. I can come to the drop-down and change that to a linear gradient, a radial gradient or in this example, an angular gradient. From there, XD is going to define two stops in the gradient using a shade of grey. I want to come in and control those colours. So I'll come to the second stop and I want to use the Eyedropper tool and go ahead and change that to this colour yellow.
I want to add another stop for the blue shade. So for that, I'm going to come here on the Gradient panel and just click to add an additional stop. You'll notice that, as I have this panel open, I can control specific details directly on the design canvas that relate to the gradient. So there's that second stop that I defined. With it selected, I'll come on into that Eyedropper tool and I'm just going to click that lighter shade of blue. I have the ability, directly on the design canvas, to determine how that gradient actually starts and ends. I'm going to bring it back to this indicator that I've dropped in my design right there. It's going right now from the beginning of the gradient, which is yellow, to the end, which is white. That's how I'd like it to appear because this is the lack of temperature, in essence. I can come to that stop that I added and just dial it back and forth until I get the shade of blue where I want it in the overall gradient.
Now that's an example of a two-step, angular gradient. I can always add multiple stops for something like a Colour Picker, for this wheel here on the right. I'm going to select the circle. And again, in the Properties Inspector in the Appearance area, I'll click that Fill colour swatch. In the drop-down, I'm going to go back to the angular gradient. And I'm going to start adding multiple stops.
In this example, I want a real contiguous colour wheel. So, one thing I want to do is make sure that the first stop and the last stop are the same colour. For that, I'll come in and select the last stop. And with the Eyedropper tool, I'm going to pick the colour from that first stop, so that it's a nice smooth transition. I can always come in and refine the colours as I did before, directly here on the design canvas. I can even come in, let's say and make sure I bring in a nice shade of yellow.
Once again, using the control directly on the design canvas, I can move that colour wheel around so that it begins or ends where I'd like it to. And I'll come in a little bit more precisely and change the shade of this Colour Picker, now to match the wheel that I've just defined.
Once I have the design the way I want it, I can save this object out as a component and then reuse it again in the project. I can also copy the effects to the clipboard and then using the paste appearance feature, apply those effects to other shapes, like rectangles or triangles. When my design is approved and I'm ready to develop the interface, publishing it to a design spec on the web will allow my developer to inspect the gradient that I have and extract the appropriate CSS values.
Now this is just a quick look at the angular gradient feature. We can't wait to see what you'll create using this capability.
Explore working with angular gradients to design progress spinners and colour wheels. In this tutorial, you’ll see an example of a temperature control that changes colours. You’ll learn how to set up angular gradients and edit the stops to customise how the colours display. Define where the colours start and stop while working on the design canvas, within the context of your layout. Publish project assets as a design spec on the web so that developers can inspect your gradients and extract the corresponding CSS values.
