But life is hard enough as it is, and most of the time you're just trying to get from point A to point B. You might gradually build some sort of intuition over time. This is basically the ouija-board-plasma-ball-color-picker version of driving this car. Without knowing the system behind it, you'd just be sort of feeling in the dark for the perfect diagonal combination of controls to match the speed and direction of cars around you: Using the color selector without knowing the controls is kinda like driving this stupid car. And for whatever reason, the makers of this horrible car decided that it only has one input: one giant stick in the middle that controls the car's direction and speed. Imagine for example that you're trying to drive a newly-designed car. When you understand the system, you can more effectively reproduce the results you're looking for. If you want to learn more about hue, saturation, and value, check out the article I wrote here. A change in value is to make the color more light (tint) or more dark (shade.) Left = less saturation, right = more saturation.Ĭhange how light or dark a color is by moving the selector up and down It's just more rich, deep, and intense: Decrease the saturation by sliding the selector to the right. Notice how when we increase the saturation, the resulting color has a lot of the same characteristics as our previous color. You can think of saturation as the richness, or intensity, of the hue you selected. I like imagining that this is what you and I look like now, playing with our hue sliders together: Maybe I could have rephrased that Choose the saturation of a color by moving the selector left and right Everything changes color all at once, and I hope I'm not alone when it starts to feel like you're back in Mario Kart 64 cruising down Rainbow Road. Playing around with the hue slider is fun. It's controlled by the rainbow road lookin' slider at the bottom of the picker: This is the hue slider. Your hue is the most basic version of the color you want to create. So buckle up, because here's all you really need to know: Hue is controlled by the multi-colored slider You’ll know how the color picker works, some pro tips on how to speed up your workflow, and the single most powerful thing you can practice to noticeably improve your color intuition. And it’s not actually that complicated – you only have to learn how it works once.īy the end of this short workshop, you’ll be feeling confident in your Figma color picking abilities. ![]() Using the color picker like a pro is a great boost to your productivity in Figma, as well as your confidence in your UI design ability. As you might imagine, that sped up my workflow by… well, a bunch. And by learning the basic mechanics of how it worked, I realized that I could start to reproducibly choose colors and accomplish what I was trying to accomplish both faster and more accurately. Turns out, like most things that seem like magic, there is more to the color picker than meets the eye. Was everyone using it like an ouija board like I was, sitting semi-aimlessly, hopelessly trying to summon the color spirits? I understood the basics, like moving the color slider around, and the fact that that the more you move it toward one color (from red to orange, for example), the more of that color would start to blend into the color you already had selected.īut at some point, I got frustrated by feeling like I wasn't really getting it. Like, hey, let's just sort of feel around a bit until we get something we like. ![]() ![]() It always kind of reminded me of one of these:Īlthough fun, it's not particularly useful. But for much of my time as a designer, I didn’t really understand how it worked. In fact, I honestly don't see a way that you can avoid using it. ![]() I’ve been using it in my design workflow since I started doing design back in 2012. The color picker is an underrated and powerful tool for doing UI design in Figma.
0 Comments
Leave a Reply. |