Create pixel art in Figma design

In this project, we’re going to create some pixel art using Figma design.

Pixel art is a fun form of digital art created using pixels as building blocks. Pixel art is a beginner-friendly medium that is accessible to almost everyone, even if you don’t have any drawing experience.

Pixel art can be used to create things like fun illustrations, cross-stitch patterns, or retro-looking animations. This project is a great way to become familiar with using layout and pixel grids— important tools for creating precise designs.

This project will walk you through illustrating a pixel heart. To create this design, we’ll do the following:

1. Add a frame
2. Configure the layout and pixel grids
3. Create a color palette
4. Outline the heart
5. Fill in the heart

If you follow along step-by-step, your final illustration will look like this:

Add a frame

Let’s start by creating a frame.

1. Click the Frame tool in the toolbar or press F.
2. Click on the canvas. Figma adds a 100 W x 100 H frame by default. Notice that when you add a frame, it gets added to the Layers panel in the left sidebar.
3. From the Design panel in the right sidebar, change the width to 120 and the height to 110.

This will be where we build the pixel heart. To make sure our heart is pixel perfect, let’s enable a layout grid for the frame.

Configure the layout and pixel grids

Layout grids help align objects within a frame. They also provide visual structure to help keep designs logical and consistent across different platforms and devices.

To enable a layout grid, select the frame you just created and click the Plus next to Layout grid in the right sidebar to enable the grid. You’ll see a red grid appear on the frame. Click Layout grid settings to open the layout grid settings and make sure your grid size is 10 points. You can also change the grid color and opacity from here if desired.

If you zoom in, you’ll see that each space in the grid is 10 pixels x 10 pixels which is perfect because we’re going to be using 10x10 squares as our building blocks.

The layout grid will help us visually check to see that everything is in line but we can go one level deeper and use the pixel grid to really keep things organized.

Use the following shortcut to toggle the pixel grid on or off:

• Mac: ⌘ Command ‘
• Windows: Control ‘

See the difference?

While we’re here, let’s make sure the Snap to pixel grid setting is enabled to make it even easier to place things where we need them. Click the Main menu, hover over Preferences, and make sure there’s a check next to Snap to pixel grid.

Create a color palette

We’re going to use 10 x 10 squares to build our heart. To add a square to the canvas, select the Rectangle tool in the toolbar or press R and click on the canvas.

By default, Figma adds a 100 W x 100 H square. You can resize the square by either selecting a handle and dragging your cursor while holding Shift or by typing the desired dimensions in the Width and Height fields in the Design panel. Using either method, resize the square to 10 W x 10 H.

We have our first building block! Because our heart is going to be four colors, let’s duplicate this block so we have our color palette at the ready. Select the square and use the Duplicate shortcut:

• Mac: ⌘ Command D
• Windows: Control D

By default, Figma places the duplicated square directly on top of the original square. Drag it to the side and duplicate it twice more. Line up the four squares above the frame.

We want our heart to be more colorful than the default gray. Select each square one at a time and use the Fill setting in the right sidebar to change the fill to the following:

• Square 1 (outline color): #C771D3
• Square 2 (fill color): #F5C0EF
• Square 3 (shadow color): #E99BF4
• Square 4 (highlight color): #FAE4F8

To keep things orderly, let’s name the squares of our color palette to match what they will be used for. Double-click on the layer name in the left sidebar or use the following shortcut and enter a new name for each of the squares:

• Mac: ⌘Command R
• Windows: Ctrl R

Our color palette is done and now we’re ready to outline the heart.

Outline the heart

Select the Outline color square in your color palette and use the duplicate shortcut to copy it. Drag the new square into the frame. Because we enabled Snap to pixel grid, you’ll notice the square snapping to the underlying pixel grid which also happens to line up with the layout grid. We’re going to place this block in the sixth column on the bottom row. We are then going to place five more blocks in a diagonal line going up and to the left. Instead of creating a new square every time, select the existing square and duplicate it using the same shortcut as before.

Click and drag the square up one row and left one column. Make sure to align it with the layout grid. With the second square still selected, use the Duplicate shortcut again. After placing one duplicated shape, Figma assumes you want to continue placing shapes in the same pattern and automatically places the new square up one row and left one column. Duplicate the square four more times until you get to the edge of the frame. If you get stuck, watch following GIF:

Once you hit the edge of the frame, continue duplicating and placing squares in the following pattern:

1. Three squares up
2. One square up and to the right
3. One square up and to the right
4. Two squares right
5. One square down and to the right

When you’re done, your file should look similar to the following:

We could continue duplicating squares to finish the outline but let’s save some time and duplicate this half instead.

Before duplicating, let’s group what we have in the frame so far. Groups allow you to combine layers together so they can be treated like a single object.

Click and drag your cursor to select all of the squares in the frame and use the shortcut:

• Mac: ⌘ Command G
• Windows: Control G

You’ll notice that the Layers panel in the left sidebar now only displays one layer named “Group 1”. Click on the group and use the duplicate shortcut again to add a second group. With “Group 2” selected, right-click on the group and select Flip horizontal. Drag the second half of the outline in place, using the red guides to align it with the first half. Then select both groups and use the Group shortcut again to group the two halves together.

If you get stuck, watch the following GIF:

Double-click on the new “Group 3” layer and rename it to “Outline”. We’re done with this layer so let’s lock it. Locking layers helps prevent objects from incorrectly getting moved or modified. To lock this layer, select the outline layer and click the Lock icon in the left sidebar. To unlock a layer, click lock again.

Our outline looks great! Now it’s time to fill it in.

Fill in the heart

Use the Duplicate shortcut to duplicate the Fill color square from your color palette. Drag the new square into the frame.

All we need to do now is duplicate the square enough times to fill the inside of the heart.

We could stop right here but let’s give our heart a little flair by adding shadows and highlights.

To add the shadow, we’re going to select blocks along the left side of the heart’s inner fill. You can select multiple blocks at the same time by holding Shift while you click. Select the blocks show in the image below and change their fill to color code #E99BF4. You can do this by entering the color code in the Fill field or press I to enable the eye dropper and sample the Shadow color in your color palette.

Finally, we’ll highlight a couple blocks on the right side by changing the color code to #FAE4F8 using the same method you used to add the shadow.

What’s next

Congratulations! You just created pixel art in Figma design. If you’re looking for another challenge, try recreating the pixel cat below using the tools we learned today. If you design something you're extra proud of, we'd love to see it! Mention us on Twitter @Figma or publish it to the Figma Community.