Today we’re going back to the basics, and explore the fundamentals of layout in Nouns’ superflat pixel style.

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!

The example I'm gonna take you through is a cover image for X. To get started first plop down a frame with F. Set the width to 1500, height to 500 and press the + next to layout grid to add a 10px grid overlay. I also gone and added a neutral BG color.

Let's add some Lil (or big) Nouns by searching in the components menu with Shift+I! Since they are legless torsos, we'll have to deal with that first. You can either put them at the bottom edge of the frame, use objects like a sideboard or a brick wall to cover the bottom, or use some of the assets like the school desk or the swing set that deal with that for you.

We'll play a bit with depth to make the composition more interesting. I added a double size lil noun in the front (K, 2x multiplier) and some regular size lils at desks in the middle. I decided to go forward with the top version cause that feels the most nounish to me.

If you’re feeling a bit lost I recommendeng going back to the tutorial page of Lil Noun Asset Library to familiarize yourself with the basics of pixelarting in Figma.

I go on dragging and dropping stuff from the library (Shift+I). Add some clutter to the desks and the sideboards in the front to fill the scene with life. Using the variants dropdown gives access to uh, variants! Many of the assets in the library have different colors, states, whatevers available to them so feel free to explore.

Next I wanted to add a book for Lil Cloudy to read but it seemed way too big so i decided to do some cropping. Make sure clip content is checked in the top right, grab the bottom edge of the book's frame and pull up until only the top is visible so it looks like it's lying flat on the table. You can check the width and height values in the top right to make sure the new size will fit on the 10 px grid.

I started filling out the BG as well. A newly added asset is most likely on the top of the layer order, right click and send to back to, well, send it to the back.

To recolor assets use the Selection Colors panel.

If your scene is getting busy and you have a hard time clicking on the element you want use Ctrl or Cmd+right click and select what you need from the list. Layers with names like Rectangle 39 are most likely individual pixels while the assets are always named as accurately as I could manage.

And that's it!

At one point i realized 1500x500 is too small for my scene so I went for 2100x700. I did this by selecting the frame and changing the width and height values in the top right panel. As long as the aspect ratio stays the same you can shrink it later if you need to (Scale tool - K). If you do this make sure to duplicate your original piece first, because it’s infinitely easier to make edits on the 10px grid than a 8.33333px one. These 3 artworks are in the file, go make your own!

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