As you might expect, XD has a wide range of options for styling elements
with color, gradients and borders.
And if you'd like to follow along with me, open the Track Your Nutrition.xd file
from the sample files.
And now to begin, let's come in here and style some of these form elements
near the bottom of the layout.
So, I come down here and click on the SUBSCRIBE option here.
This will automatically select the entire layer group called subscribe.
So, over in the Layers panel, let's open this up.
Let's come down and select the btn shape.
So, with this selected,
over in the Inspector panel I can see that the Fill option is checked.
And if I come over here and click on this little grey box here,
I can actually change the color by coming in here to the properties,
and just picking a different color.
Now, I'd like to use a color that matches the branding a little bit better.
So, let's come down and click on the Eyedropper tool.
And then let's come up to the logo, and let's select this bright green color.
So, I click on that once that will apply the green.
So, that's looking a little bit bright.
So, let's come in here and adjust this color.
Let's make it a little bit darker.
Maybe a little less saturated.
Maybe about right there.
And then once I like that color, and I can see it down here,
I'm going to click on the + sign before I click away.
That way, the next time I bring up any color swatch
I'll have this green showing up here as well.
So, now I can click away.
I have the color that I want.
So, let's come in here and zoom up,
so we can see this form elements a little bit better.
Next, let's come in here and let's select the EMAIL field.
So, I'll select the group, go over to the Layers panel.
Let's come down and select the E-mail box.
Over the Inspector panel, I can see that there's a Fill applied
with this grey check,
but there's no border.
So, I'll come in here and hide the Fill,
let's show the border.
The border is set to a green that I don't want to use.
So, let's click on that swatch
and we can see the green that I do want to use showing up here.
So, let's select that.
Let's click away.
You can also change the Size of the border and of the other properties,
including making this a dotted line, with the Dash and Gap tools.
Then let's come over here, let's select the EMAIL text.
Over here in the Inspector panel,
let's find the Fill for the text, click on that
and apply the green to that as well.
So, now, with those colors created,
let's come back and select one of these items that's using that color.
In the Layers panel, let's switch this over to the Assets panel.
And let's come over here and add this color to our Assets panel.
So, now with that created, let's zoom out a little bit.
Let's move, so that we can see the entire hero area in the center.
I'm going to click on this hero area.
Let's switch back to our Layers panel.
Inside of the nutrition group,
let's open this up and let's look for this box here, called gradient.
So, this is a semitransparent image
that's in front of a gradient box that I've created.
And the images inside of a Clipping group.
So, what we're going to do is add a gradient behind this image,
so that we can actually get the effects of a gradient, combined with this image.
So, with the gradient box selected, let's come over here to the Inspector panel.
Let's click on the Fill.
If you were to come in here and change the color,
you can see what's happening in the main hero area.
So, let's change this from a Solid Color to a Linear Gradient.
Once I do that, I'll have some points that I can manipulate on the canvas.
So, I come in here, and set the first point to the upper left,
the bottom one to the lower, a little bit past center, right about here.
Then in the Properties panel, let's come in here,
select the first color stop,
let's click on the Eyedropper,
let's choose this sort of lime green color here from the image.
Make this a little bit brighter.
Now, let's click in the center here to create another color stop.
And we see that showing up on the canvas as well.
So, if I move this back and forth, we can see that showing up in both places.
For the second color, let's come in here,
use the Eyedropper.
Let's grab a light blue from the face of the watch.
Then I'll just make this a little bit brighter and change the hue a little bit.
Then I want to use the same color for the last stop.
So, with this selected, I'll click on the + sign,
then I'll grab the last stop,
apply the same color
and then, let's come in here and add a semitransparent effect
to the actual color.
So, I come in here and just drag this down to about 5% or 6%.
Somewhere right here.
So, what's happening here is the object is not getting transparency applied,
but the color is supplying some of the transparency.
And so, with that in place, we can click away.
Now, let's go back to the Layers panel, let's select the gradient object,
go back to our Assets,
click on the + sign, and we can now save this gradient as a color swatch as well
even with that semitransparent color.
And now we can use these colors for any element inside of our layout.