By Dani Beaumont
Angular gradients, which are different from linear and radial gradients, can be really useful for designs like progress spinners and color wheels. Let's take this design, for an example. In this center 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 on the Fill Color swatch, which brings up the Fill controls. Notice in the upper left-hand corner, it's going to default to solid color. 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 gray. I want to come in and control those colors. So I'll come to the second stop, and I want to use the Eyedropper tool and go ahead and change that to this color 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 on 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 Color 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 on that Fill color 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 color wheel. So, one thing I want to do is make sure that the first stop and the last stop are the same color. For that, I'll come in and select the last stop. And with the Eyedropper tool, I'm going to pick the color from that first stop, so that it's a nice smooth transition. I can always come in and refine the colors 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 color 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 Color 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 color wheels. In this tutorial, you’ll see an example of a temperature control that changes colors. You’ll learn how to set up angular gradients and edit the stops to customize how the colors display. Define where the colors 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.
