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

‍

‍

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. 

‍