How to Create Textures in Figma

this month i've had two projects that required creating illustrations i didn't have to use figma to create illustrations but i figured it was a fun way to challenge myself to see what i could come up with in figma the first project was illustrating a stationary set with and without some paper in it and getting the the textures and the shadows to render in a somewhat realistic way in vector art only turned out pretty good i've got some room for improvement here it's work in progress but this really is what started me down the path of figuring out how to create textures and figma the next thing i worked on was this covid19 test kit and in the test kits there is a textured area where your results show up and where you put the drops in and if we zoom in here you can see there's a nice texture to give it a sort of photo realistic look and feel and this was created by mistake it was completely created by accident so i'm going to show you how to create a texture like this in figma without using plugins and without using raster art to get started we're going to make a rectangle and i'm going to set this to be 500 pixels by 500 pixels it can be any size but we're going to use the width and height of the rectangle for a few of the settings that we need coming up okay i'm going to give this a fill of black 100 percent you can use any color but this will make it easy to demonstrate the first thing we need to do is switch from a solid fill to a linear fill and i'm going to give this a linear fill that goes from 100 black to zero percent black and we'll leave it at that for just a moment the next thing i'm going to do is add an inner shadow effect and i'm going to set the inner shadow to have everything set to zero i'm gonna give the fill 100 percent and i'm going to set the spread to be the same dimensions of the container which is 500 pixels in this particular case and as soon as i set the inner shadow to a 500 spread you'll notice something happening here at the bottom if we zoom in we can see there's this texture that's created just at the bottom edge where that zero percent linear gradient is filling in i hadn't noticed this initially but as i came in and started to adjust some of the color settings in my covet 19 test kit illustration i really started to notice these textures come through so what we need to do is go into our linear fill and if we set this to something less than 100 let's say 15 the texture starts to show up even more we set it to 5 it shows up even more and if we set it to 1 we start to see that texture really coming through so the the trick that i found that works best is to set this fill percentage to point zero one percent and now the entire box has the texture filled up and you can adjust this as much as you want to it will have a different effect on it from here you can experiment with your fill settings and your inner shadow settings for example if i come back into the inner shadow and i increase the blur to 500 and i reduce the spread to zero you begin to see the blur comes through and if i reduce the x or if i reduce the y coordinates to say negative negative 250 you can see that the the sheen or a sheen starts to appear to get some more realistic effects so you could experiment with this a whole lot you can reduce the fill percentage to increase or decrease the amount of texture that's showing up you can also go up to your layer settings and change the percentage here and it has a very similar effect and changing this to something like multiply or screen or lighten is going to be a good idea as long as you have this texture fill over top of another color so let's let's draw another rectangle here and we'll overlay these two shapes and let's say let's give this a sort of an earthy beige kind of fill maybe something like that and as we layer these two on top of each other and push the color to the back you can see that now the texture is starting to come through over top of the fill layer what's interesting about this texture hack is that the texture is not part of the shape if i move the shape around you can see the texture is stationary so it's really some sort of rendering bug in figma that allows this texture to appear i don't know if they're going to fix it or if it will go away but i i think that it'll probably remain for a while so come on in and experiment a bit and see what you can come up with and if you find something even better than this hack be sure to share it in the figma community speaking of the figma community there's a link to a figma community file along with a fig blog that discusses how i ended up coming up with this particular hack in more detail and it also includes a download so you can download some of the textures that i've already created

Channel: Jono Young

Views: 25,550

Keywords: Figma, texture, native texture in Figma, Figma community, tutorial

Id: bfXRaVu3rcs

Length: 6min 13sec (373 seconds)

Published: Sat Feb 12 2022