Pixel Typography 1 - Pixelate Everything

GM Pixelartists!

The fact that you’re here hopefully means, that you’re ready to start with pixel art in Figma. This is the first installment of an ongoing series of pixelart tutorials, if you’re new to using Figma, I recommend visiting nounscanvas.xyz, grabbing the Lil Noun Asset Library, and doing the in-file tutorial to get a grasp of the app and the file, which will be the base of everything we build here.

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!

We start out with a kinda specific but super useful topic today: pixelating any kind of text!

First off, open Figma and plop down some text, we'll use good old Londrina Solid. Pick any text or font you'd like to use and don't worry about size just yet.

Once you settle on font and text you got to flatten the text component into a single vector shape. First, make a duplicate just in case, then use the right-click menu or Ctrl(or Cmd)+E.

After flattening your text open the plugins menu, search for Pixels and run it with your text selected. Time to mess around with the size of your text and the pixel slize slider in the plugin window until you get a result you like.

I had to slightly increase the size of my text and settled on 16px size. Since I always use a 10px grid, we'll resize the text by pressing K for the scale tool, and entering a 0.625 (10/16) multiplier.

At this point we still have to manually adjust the results a bit. You can strive for consistency or keep the irregularities as well, it's up to you!

The only thing left is placing your text in a design! Make sure snap to pixel grid is enabled in your preferences to avoid misalignments. Drop in a few more things from the Asset Library and congrats, you're done!

Pixels is a super handy plugin and we’ll definitely be coming back to it later! Here are a few more examples of type I made with this method.

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