Go Back
How to Create a Brush Stroke in Figma

How to Create a Brush Stroke in Figma

In this article we'll learn how to add brush strokes in Figma.

Pierluigi Giglio
September 26, 2023

As of the moment, Figma does not yet have a particular brush that creates brush strokes. However, it is still possible to create some simple brush stroke effects, like this one, by using overlays.

Here is a step-by-step tutorial on how to achieve this.

1. Find a brush stroke effect image

You can search for the image on Google or any search engine. You can also use Pinterest, as that is a good site to find overlays and textures.

But you don’t necessarily need to find the brush stroke image. If you use Adobe Photoshop or Adobe Illustrator, you can create your own brush stroke. Figma currently does not offer that service.

2. Convert the image to SVG

You can find .svg converters on the internet, for free. We would suggest you pick your brush stroke image with a white background, as converting to .svg works best that way.

By converting the image to an SVG file, you have now transformed the brush stroke into a vector element. This means you can edit and transform it as you like in Figma.

3. Add the new .svg file to Figma

When you double-click on the element, you will see that the image was fully traced and there are plenty of vectors that can be edited. If there are things you want to change to the brush stroke, you can modify it easily. 

This is the full process of creating the brushstroke effect. You can now choose what to do with it. 

In the other steps, we will be showing you how to insert an image into the brushstroke. You can also insert text or any element of your liking.

4. Add the image to your project

Resize it to fit your SVG image.

5. Blend the image to the screen

Double-click on the picture, and navigate through the panel that appears on the right. Click on the layer section.

You’ll change it from  Normal > Screen.

And that’s pretty much it! We do have to mention though that this method only works on a white canvas.

If the background is in any color but white, the image will not blend into the screen.

We hope this article helped you create the perfect brush stroke effect!

If you want to learn more about Figma, please review our recent articles. 

Pierluigi Giglio

Sr. UI/UX Designer and Consultant with over 10+ years of experience working with Fortune 500, large enterprises and funded startups. Having worked on hundreds upon hundreds of design projects, collaborated with 40+ clients from all around the world and taught design to thousands of students I am very grateful that I have the opportunity to give back to the design community and help other become better designers.

Enjoyed this read?

Stay up to date with the latest design news and cutting-edge softwares, sent straight to your inbox!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.