Learn how to work with color and custom color in UXPin.
- [Narrator] In the previous exercise, what we've done was add a little bit of color to the text. But the color handling properties inside of UXPin are rather robust. And that's what we're going to look at in this video. So to get yourself started, open up your wireframe prototype in your dashboard and when it opens up, come to the Homepage, right here, where we've been working. And I just want you to add a box component. We'll just drag that over and I'm just going to put it right there. Now if we come to the Style properties, right here, we can see that there is a Fill Color.
And if we click it you get the usual color picker and you see as you roll through, you get all kinds of little bits and pieces here. But there's little bit more to this than meets the eye. So let's push this back to white. The eye dropper allows you to reset the colors or you can just choose the color. That's what the eye dropper does, it works inside the color picker. But right here, you get a series of color swatches that you can use.
You can actually add favorites. Another feature is a series of color schemes, so you can actually choose colors from the schemes. So if I want to add that green I just click on it. You can actually add your own color scheme to this application by just creating a bunch of swatches and choosing them. And by choosing the eye dropper you can add your colors in here.
It's the standard Apple color picker, which I've never been a huge fan of. And then you can just choose a color, so I'll pull this over, all the way. We'll pick this color right here. We'll just add that to the swatches and we get to use it on a regular basis. So you got all kinds of choice here. There's a lot under the hood when it comes to working with color.
They've got all kinds of color schemes and I especially like these because they give you the colors that sort of work together. But you can create your own custom color schemes.
- Importing artboards from Photoshop and Sketch
- Adding interactivity
- Adding animations
- Designing responsive sites
- Sharing prototypes with stakeholders
- Creating image carousels
- Create slide-in menus