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.
Close up of Figam texture effect. Has a nice absorbent, combed-cotton look.
Creating Texture Natively in Figma
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?
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.
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.
Free Download
Download Native Figma Textures from the community.
Hey There. I discovered your blog the use of msn. This is a very well written article. I will be sure to bookmark it and come back to learn more of your useful info. Thanks for the post. I?ll definitely comeback.