Creative Break Leads to a Way to Create Textures without Plugins or Images.

Creative breaks are my way of avoiding burning out. When I get too close to a project, or day-to-day work becomes monotonous, I take creative breaks and dry something different. Recently, my creative breaks in Figma have lead me back to my Illustration roots.

My creative breaks this month were spent recreating a stationary set and a COVID-19 test kit from scratch, in Figma. I’d made the stationary set before in Sketch, and in Photoshop before that. While working on the COVID-19 test kit, I stumbled upon a Figma texture hack.

YouTube Tutorial

This YouTube video from the WePiphany channel covers everything in this post if you’d rather watch than read.

Lighting Effects Make Texture

While working on the test kit, I needed a way to create a the texture for the areas where the test sample is dropped and where the test results are indicated.

Initially, I tried one of the few noise pluigns from the Figma community, but they didn’t produce the results I was looking for.

Next, I tried using an image of some textures I had laying around, which looked like a viable solution, but I didn’t have the right textures, so I deleted the experiment and moved on to finish the illustration work.

figma texture stripe

Close up of Figam texture effect. Has a nice absorbent, combed-cotton look.

Creating Texture Natively in Figma

figma texure solid fill
Solid Fill

I started with a Solid fill to create the fabric-like areas where the sample drops go, and where the test results appear.

Linear Fill

Next, I added a Linear fill (gradient) to mimic the natural lighting effect. The fill is 100% at the top and 0% at the bottom.

Inner Shadow Over Linear Fill w/ Transparency

Adding an Inner shadow (#3E6282, 45%) and then adjusting the Inner shadow settings gets a step closer to what I was looking for. But, wait! What’s that?

Take a closer look at the bottom edge of the fill. See that fuzzy edge? What’s going on there?

figma texture appears at bottom of inner shadow
Linear Fill Percent is the Main Controlling Factor

Figma begins to renders a noticeable texture when Linear fill is set to less than 30% and an Inner Shadow is applied.

Reducing the Linear fill to less than 1% has dramatic affect on how the texture renders.

figma texure 15% inner shadow
figma texure 5% inner shadow
figma texure 1% inner shadow
Settings for the Best Base Texture

To get an even texture, we need to adjust the Inner shadow and Linear fill (gradient) as follows, to establish a good starting point to experiment with.

figma texture linear fille #000
figma texture blur and spread
figma texture inner shadow settings

Free Download

Download Native Figma Textures from the community.