Gradients in Figma

Hi, everyone!

In this post we’re all about gradients and how we can use them in Figma to create top level prototypes.

Gradients had their Golden Age in the 80’s and 90’s (along with shiny Lens Flares), when almost everyone in graphic design felt the urge to throw them everywhere. Visual communication was loud – exploding with bold shapes, colors and high contrasts. Eventually, gradients were left forgotten inside dusty toolbox compartments.

However, gradients have made their way back into graphic and User Interface (UI) design, this time in a more subtle and balanced manner, whispering style rather than screaming. 

As a designer, I’ve made my peace with gradients. I use them all the time now and I’m going to show you how you can use gradients to upgrade your Figma prototyping skills .

This step-by-step guide is based on my Figma UI and UX Essentials course. When you become a BYOL member, you gain access to this course as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

What are Gradients?

Gradients are simply a transition between two or more colors and they’re actually all around us. Try looking at the sky during a sunset or at a rainbow to see how different hues, shades, and tints blend together. 

When it comes to UI, gradients look great on backgrounds, buttons, and other components that need to have an extra punch.

Why is this?

Because our brains love harmony and depth and we can draw emotions from these combinations that is different from the intense reaction to a solid color. Things feel more natural with gradients - if you don’t blow them off the charts, that is. That’s when gradients are dangerous. To use your gradients wisely, It is important to choose good color harmonies, ensure smooth transitions, and choose a gradient style that fits the object you’re working on.   

Timeout #1

This article on gradients sums up pretty accurately what you need to know about them, from why they’re important in today’s design to useful warnings on bad practices that can hurt your projects.

Gradient Styles 

Before we jump into Figma, let’s have a look at gradient styles and how they differ. Basic gradients usually flow from color A to color B, blending from different angles and directions according to the style we’re applying to our object.

Linear

This is probably the style you’ll find most often. Think of a flat canvas. Colors blend from a color to another in a straight line. You can shift the direction angle but it will always follow a straight path from starting color to finishing color.

Reflected

Gradients can also work as light and shadow, so think about straight lines and lighting effects for this style. As a basic example, we begin with a certain color with low brightness level, add a color-stop in the middle of the flow with a higher brightness level and finish as you started. We’ll end up with a highlighted area in the center of our gradient. We can make it symmetrical or asymmetrical depending on the object and goal.

Radial

Think of a 3D sphere for this one. In this gradient style, the first color is placed in a starting point and then it spreads outwards as it blends into the finishing color.

Diamond

Similar to Radial, this style also emanates the first color outward from a starting point while creating a diamond shaped suggestion as it blends with the finishing.  

Angle

Think of a 3D cone seen from above for the Angle style, with colors flowing around a central point and angle values determining both starting and finishing points. 

Now that we’ve covered the basics, let’s cut straight to the action sequence!

Applying Gradients to Shapes in Figma

Let’s begin with shapes. Shapes are everywhere in Figma, from backgrounds to buttons, from UI cards to switches. Always mind accessibility when you decide to use gradients in your design: they can be a beauty, they can be a beast. Subtlety is the key, here.

So let’s begin with a basic UI Card. Follow along! 

Looks ok, cool logo, handsome fella, all the right moves. However, that solid gray background feels dull and doesn’t appeal to users’ emotions. We want to add some gradient life into that shape! Let’s select the background frame with our Move Tool (shortcut V), go to Fill on the Properties Panel, click on the square thumbnail, and then, inside the Fill settings panel, click the Gradient icon.

Not bad! Figma displays at once a default Linear gradient with a solid gray as a starting color and fading into a zero opacity finishing point. Let’s add some color to it and then play with some of the settings.

Ah! Doesn’t it look better, now? We get a sense of depth, this card now connects with brand identity and it is definitely more enjoyable to observe. However there are still some issues in this card. The brand logo and name lost their contrast and, therefore, legibility. How can we fix it? Let’s try to adjust our gradient by clicking and dragging the color stops.

Looks better, right? We’re still working with a linear gradient, a straight line path, but we’ve changed the line’s direction and the distance between color stops. We can also swap starting and finishing colors by dragging the color stops over the frame or inside the Gradient settings panel.

Still not happy with it? We can change the Gradient style to Radial, as an example, and see what feels different in our background. All we need to do is to click on the Style dropdown box and choose the option Radial. Do we like this one? Cool, we’ll keep it!

Applying Gradients to Stroke in Figma

Let’s move on to strokes. Gradient-filled strokes can be a clever way to point out certain actions or steps in a user interface flow when solid colors may feel too strong or to display brand color presence in a not-so-obvious way.

Holding on to our UI card, let’s make something a bit risky so we can learn how gradients can influence strokes. So we start by selecting the second shape, the card with “Certified Instructor” written on it. Next, we move to our Properties Panel and click on the Add Stroke button (the one with a “+”), we set a stroke thickness of 3 and keep the black fill for now. 

Now we apply a gradient to our stroke. As before, we click on the Fill color thumbnail and then on the Gradient icon in the settings panel.Boom! We have a gradient-filled stroke line with default settings.

Let’s adjust colors and color stops direction to add some visual logic to the whole layout. As a reference we can focus on that brightness effect behind the handsome man’s photo, trying to make sure the stroke seems affected by that light! 

We can be proud of ourselves but let’s not stop here! Let’s see what more we can do with gradients in Figma!

Applying Gradients to Text in Figma

Gradient-filled text can be a designer’s deathtrap, when it comes to accessibility. But it can look awesome when properly planned and executed. Let’s finish our UI Card by adding a gradient fill to the “Certified Instructor” text. Can you already guess how to do it?

With our text layer selected, we move on to the Properties Panel, hit that Fill color thumbnail and click on the Gradient icon. Gradient-filled text in seconds! How awesome is that? I’m sure you can also guess what comes next!

By adjusting the color stops angle and distance, simply by clicking and dragging them, we add a hint of green to our text and make it look more natural, as if the whole UI card is one single piece. What do you think? I like it! 

Timeout #2

Gradients are once again a valuable asset in graphic design. Don’t miss this article on how gradients work (and don’t work) in logo design. Improve your own projects with this knowledge!

Bonus: Background Mesh Gradients in Figma

This technique is absolutely brilliant to create some really moody backgrounds, with lots of depth, beautiful hints of color, everything blending together into an abstract piece of imagery that will sweep your users off their feet.

It’s both easy to design and endless in combinations and outcomes.

Let’s move our UI card away for a while and work on our frame’s background. Let’s cover our frame with circles using the Ellipse tool (shortcut O) and fill them with gradients. We can try this with any other shapes, of course.

Next, we add a black rectangle with our frame’s size, move to the Properties Panel and in Fill set opacity to 60%. On Effects, we choose Background Blur and set a value of 90.

Finally, we put it all back together and, with the help of some gradients and a little imagination, we end up with an awesome UI card and a background rich in mood and texture. Something we could display in our portfolios.

And that’s it!

You’ve just taken a step towards Figma greatness! We’ve explored gradients, what they look like, the effect they have on our designs, and you know are empowered to use this tool wisely! Go forth and jump into your prototypes from a whole new perspective! 

What’s next?

Dive deeper into Figma at Bring Your Own Laptop. When you become a BYOL member, you will gain access to my Figma courses as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

See you in class! – Dan