You know those fancy gold effects you see in app UIs like Robinhood or Tinder?
Sometimes you'll see it used for mobile game UIs, for in game currencies, achievements, or awards:
The use of gold as a color association to create feelings of exclusiveness and richness is one as old as time. Just go to any casino. Think that gold lighting and curtains are a mistake? Nope.
Or how about this credit card from AMEX?
Getting something gold for your money is cashing in (ha) on the age-old color association that gold is valuable. Even stuff that just... looks gold.
That's one of many tactics that credit card companies employ to get people to pay them to use their card.
In the example below, Tinder uses the gold effect to create a premium feel for people paying for their premium offering, Tinder Gold.
The app will even modify their UI elements after you've purchased Tinder Gold, by placing a gold app icon on your home screen:
This is done to create the feeling that you've purchased a special experience, that you're a member of a special "VIP" type group. Your app is gold, therefore, you have gold. You're a gold member.
ahem
Regardless of the use of color psychology and the endless and important ethical debates that come with design, it's a cool effect and can be useful to know how to use it in your UI designs.
You can also use it as a foundation to create other metallic treatments. And it's also not super difficult to create in Figma.
With that said...
There are two primary styles of gold we'll cover:
- Metallic satin gold
- Polished gold
And this is what they look like:
How to Create Satin Gold for Premium Offerings
Satin gold has a more luxurious feel to it, which means it's well-suited to premium app or websites offerings that want to give their purchasers a sense of luxuriousness or specialness.
To create a satin gold effect, first let's create our base shape. To start out, let's use a rounded rectangle with some really nice corner smoothing, because we like to have fun.
I used a 240px x 240px rectangle, and applied 64px corner radius with 100% corner smoothing to make it extra sassy:
Then, with this shape selected, select the color picker under Fill and pick the Linear gradient option:
Now we can start building our gradient.
For the satin gold effect, we'll create 3 gradient points by clicking in the empty space above the gradient bar:
And set them all to 100% opacity.
Next, since we want a luxurious gold feel, we'll select some slightly desaturated gold colors for both ends, and a lighter version or tint of that for the center. I'm using #EECB84 for the ends and #FFE5AE for the center:
Finally, we'll set the gradient angle, keeping the handles aligned to the outer bounds of the shape:
Wa la! Satin gold.
Next, let's tackle the shinier cousin: polished gold.
How to Create Polished Gold for Game-Like Elements
Polished gold is shiny, fun, and rich, which means it works well applied to components or visual elements like achievements, badges, currency, and anything else you might get as a reward in an app or game.
To create a polished gold effect, we'll start with our base shape again, and select linear gradient.
This time, we'll create 4 gradient points:
For the polished gold effect, we want to use a more rich and saturated color palette. This gold should almost feel "juicy" by comparison to the satin gold. Less luxurious, more stimulating.
For the gradient colors, left to right, I'm using #FDD792, #FEF9EB, #F9C475, and #D68E43.
Then, just like the last one, we'll rotate our gradient angle.
We're still pretty satin-y. And we don't want any religious groups knocking on our doors, so we'll take a step back from satin-ism and polish our gold.
To do this, we'll change the distribution of the color points.
Take those two center color handles and move them so close to each other that they no longer fade, but occur immediately after each other:
And there we go! Like true alchemists, we've made polished gold:
The real magic of these treatments comes out when you start to combine them. For example, if we combine satin and polished gold to create an alternate version of the logo for Tinder Gold, we get some interesting results:
It's fun to experiment with different material treatments, but they should be used carefully and sparingly if at all.
Not all brands reserve space for gold or metallic treatments in the first place. And used in the wrong context or overused, it's very easy to create something gaudy and garish that actually doesn't benefit your brand or product.
So if you've made it to the end of this, thanks for joining me. While if I were you, I wouldn't go off and start making everything gold, learning how to create high quality metallic gradients in Figma is a useful tool to have in your back pocket as a UI designer.
I've used it more than once in my career, and so you may too.
As always please let me know if I missed something, or you have any feedback on this article. I want to make this the most practical and useful resource for anyone looking to improve their UI design skillset.
Additionally, if there's anything you'd like to know how to create in Figma, send it to me in an email and I'd be happy to make a tutorial.
Happy designing!
Use it today – download the template
Use it now! Get the Golden UI Elements Template ($5)
Includes everything you see in this post so you can deconstruct it or use it now.
