Everyone has seen people sharing their BasePaint contributions recently with their drawings all sharp with the background nicely blurred but still pixelated somehow? Let’s take a look at how to that in Figma.

NounsCanvas is your hub for tutorials and resources for nounish-style pixel art beyond trait design. We use Figma, a free browser-based tool, for all the tutorials. For more tutorials and other resources visit nounscanvas.xyz or join our Farcaster channel. Let's create pixel art together!

First you’ll need a background to blur. I made a small scene with stuff from the Asset Library and added the affectionately named Rectangle 4161 to serve as a table.

Next, as we always do before anything drastic, I duplicate my frame and scaled the copy down to 10% with the Scale tool (K).

The following step is drawing a big rectangle (R) over the entire frame we just downscaled. Set its fill to 1% and under effects add a background blur, then play around with it until you’re happy with the results.

Next, select the entire frame, and just under where you set the blur click export, and select png and 1x. Once this is done, you can copy your frame as png, and paste it right next to itself.

At this point you could stop and just use the image as a background but if you want to, you can take it a step further and revectorize it to actual pixels again.

To do that go into the Resources menu with Shift-I and switch from components to plugins. Type in Pixels and run the plugin with your blurred image selected.

Now all you need to do is set pixel size to 1 and hit vectorize. Might take a few seconds but the end result will be a perfectly blurry yet pixelated vector piece which you can scale back up 10x to match the 10px grid we use.

I added this funky little dude I found on the street to the front but at this point you do you!

Hope you created something today! Come show it, give feedback or just say hi on our FC channel /nounscanvas.