Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Embark on a colorful exploration with UX Pilot AI. What if creating the perfect color palette was as easy as a few clicks? Discover how this tool can bring a spectrum of colors to your designs, making them speak in hues that captivate.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In this video, I'll be using an AI-powered
Figma plug-in titled UXPilot.ai.
0:00
UXPilot.ai is a plug-in that generates
color palettes from text prompts.
0:05
It can also provide multiple shades of
color as well as provide the meaning for
0:10
any color you ask.
0:14
Ready to see it in action?
0:15
Let's begin.
0:17
First, we'll click on the Resources
icon in the main menu.
0:17
The resource menu is already on
the plugins tab from our last use.
0:21
So we'll begin to type in UX Pilot and
there it is.
0:24
I'll click on the Search result
to open the plugin as usual.
0:28
Next, I'll enter my prompt.
0:31
Create a color palette for
a meditation app.
0:32
It should invoke feelings of calm,
soothing, and strong.
0:35
Well, I probably should have
used strength there, but
0:38
I'm pretty sure the AI will understand me.
0:40
Okay, those are some interesting choices,
but not exactly what I had in mind for
0:45
this project.
0:48
Let's try another generation.
0:50
Wow this is definitely what I had in mind.
0:53
Next I'll show off how to make shades.
0:55
I'll select this light bluish color.
0:57
Well, actually,
I'll make a duplicate of this color, so
0:59
we don't destroy the original.
1:02
Then I'll click on the Shades
tab in the UX Pilot plugin.
1:03
I'll keep the first setting on Linear, and
I'll turn down the number of shades to 5.
1:09
Then I'll click on Pick Current Selection,
so
1:13
it knows to use the light bluish
color we selected on our canvas.
1:15
And finally I'll hit Generate.
1:19
And just like that, U Pilot has provided
me with five shades of this light blue
1:21
going from light to dark.
1:24
That's super cool in my opinion.
1:26
I'll take a moment to stack them
vertically underneath the source color,
1:28
and then we'll move on.
1:30
Next, I'll select this last color,
which is a dark blue-ish color.
1:32
Then I'll select the fill value in
the properties panel on the right, so
1:36
I can copy the hex code for this color.
1:39
Next, I'll select my entire frame and
go to the Selection color section.
1:42
I'll select black, which is a variable.
1:46
Then I'll right-click on black in the All
Libraries section and select Edit Style.
1:49
Now I can paste the hex code for
the dark blue here under properties.
1:54
This will change our variables'
color from black to a dark blue.
1:57
Although it will still be named blank for
now until I change the variables name.
2:00
Once we've changed our variable to dark
blue everywhere where the black variable
2:04
was used in our design will be
updated to the new dark blue shade.
2:08
I'll zoom in to show
this change a bit easier.
2:11
See now all of my text buttons etc,
they are all this dark blue color.
2:13
Pretty neat, right?
2:17
We're moving fast now.
2:19
But let's keep going.
2:20
Next, I wanna change the benefit sections
background color to the dark blue color
2:22
we used for the text.
2:25
Of course, that will make
the text impossible to read, so
2:27
we should change this section's text
color to white, or something light.
2:29
I'll use white for now.
2:33
There we go.
2:42
Now let's select the section, and
I'll make it our dark blue color.
2:43
Awesome, that's looking good.
2:47
And provide some more
variety in my design.
2:49
And as a matter of fact, I'll turn down
the opacity on the background color
2:57
as a way to lighten it up a bit.
3:01
It's completely fine either way.
3:03
This was just a stylistic
choice I wanted to make.
3:05
Next I want to change the text to a light
color that mixes gray and another shade so
3:13
we can have something that has contrast
but is less harsh than the white.
3:17
Right now I'm just experimenting by
feeling my way around the color picker
3:26
trying to find something that works.
3:29
There we go.
3:38
Let's use this bluish-teal color, which
is almost reminds me of our lighter blue
3:39
color we started with,
the one we generated the five shades of.
3:43
Now let's go back to UXpilot
to show off its last feature.
3:48
If we click on the tools tab,
3:52
we can access a new feature
called Explain this Color.
3:53
And we have our dark blue color selected.
3:57
So I'm going to click on
the Explain this Color button.
3:59
And there we have it.
4:03
UX Pilot wrote,
293241 is a deep navy blue color.
4:04
It represents strength,
confidence, and sophistication.
4:09
As a dark hue, it exudes a sense
of stability and reliability.
4:12
In branding, it can convey professionalism
and a sense of trustworthiness.
4:16
In design, it can provide a strong
contrast and add depth to visuals.
4:20
Overall, this color matters as it
symbolizes importance, authority, and
4:24
a sense of calmness, which is pretty
close to what I was looking for
4:27
if you remember,
back to my original prompt to UX Pilot.
4:30
This is an incredibly powerful resource
to help you explain color choices to
4:33
stakeholders.
4:36
As the explanation comes with
everything from color theory
4:38
to the meaning of a color on a brand and
cultural level, again,
4:41
these types of resources
are invaluable to design newcomers and
4:43
senior designers looking
to save time alike.
4:46
Next, I'll make the CTA buttons the bright
orange color from my palette so
4:50
they pop and
have a good deal of visual emphasis.
4:53
Next, I'll get my orange
color from the color palette.
4:56
Then I'll paste it in and
there we go, that looks sweet.
5:04
Before moving on, I'll take a second to
change the CTA button in the menu as well.
5:10
One last thing, I'm gonna move
over my palette to make room for
5:17
UpPilot to write another explanation.
5:20
This time for our orange color,
5:21
since it's an important design element
considering it's our call-to-action color.
5:23
All right, I'm going to select the orange
color, then I'll open the UX Pilot plugin,
5:31
and then I'll click on Explain this Color.
5:34
Then I get this explanation.
5:41
It represents energy,
passion, and excitement.
5:43
As a warm shade of orange it can evoke
strong emotions and grab attention.
5:46
In branding, it can communicate
boldness and enthusiasm.
5:50
In design it can be used to create a focal
point and add vibrancy to a composition
5:53
which is exactly how I was
looking to use it in my design.
5:57
Perfect, but
that will do it for this video.
6:01
Join me in the next one where I will
review our next AI-powered Figma plugin,
6:03
Magician.
6:07
I'll see you there.
6:08
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up