Create a T-Shirt Mockup (without Photoshop)

Starting a T-Shirt business is all the rage. Sites like Teespring make it easier than ever to get started.

As long as you have a killer design!

In this tutorial, we’re going to show you how to mockup a T-Shirt design idea.

You don’t need any prior design experience to succeed. Just follow along as we go through the steps, then start mocking up your own ideas!

And there’s no need to pay for expensive tools like Photoshop or InDesign. All you need is a free account with Figma. Go ahead and make that account, and come back here when you’re ready to follow along.

Here’s a video of the mockup process from beginning to end.

What are we aiming for?

If you watched the video above, you already know that we’re aiming to create a t-shirt like this one.

final tshirt mockup

Some questions you might have:

  • How do I get a base shirt to add my design to?
  • Can I change the colors?
  • I don’t understand Figma well enough to do any of this.

Don’t worry. By the end of this tutorial you’ll be able to do all of that.

Step 1: Google Images

The first thing you need to do is find a blank t-shirt so you can add your design on top of it.

Google Image Search is the best way to get a base shirt.

Go there and search “blank tshirt transparent.”

google image search

Why transparent?

The reason is because you don’t want the background of the image. You just want the shirt. If you choose an image that has a background, you’ll get a square background in the same color as the t-shirt. That isn’t going to work.

tshirt non-trans vs trans

Step 2: Import shirt to Figma

Now you need to get that transparent t-shirt into Figma.

The best way to do this is to right click on the image, and select copy. Then head over to Figma and paste the image onto the design canvas. On a mac you do that with Command-V. Normally you’d be able to right-click and select paste, but Figma does not offer this option. There are some minor drawbacks to being a web-based program, I guess.

Step 3: Masking

Once your t-shirt is in Figma, make a second copy of it. You are going to need both shirts. One shirt will act as a mask and color layer, the other will be used for texture so we can create that authentic t-shirt look.

two white shirts

Draw a rectangle large enough to cover one of the shirts. I left a bit of the t-shirt layer exposed on one side so that it would be easier to select in the next step. Group the t-shirt and the layer you just created (Command + G).

Now right click on the t-shirt layer and select “Use as mask” from the dropdown menu. You should see that the rectangle now conforms to the shape of the t-shirt mask. Simply adjust the placement of the rectangle until it covers the entire t-shirt. This gray layer will dictate the color of our t shirt.

In this example I have changed the gray layer to have a blue fill. You can make this change by selecting the gray-layer and changing the fill color in the right panel.

sidebar blue fill

The result will be a blue t-shirt.

tshirt blue fill

Step 4: Texture layer

Now it’s time to make our texture layer. Cover the blue shirt (or whatever color you’ve chosen) with the other t-shirt.

With the white shirt selected, navigate to the right panel. You will see a section called Layer with a dropdown menu. By default the setting is “Pass Through” but use the dropdown menu to select Multiply from the list of options.

The second shirt will be the texture later.

Step 5: Add image to shirt

Almost done. place your image between the background color layer and the texture layer.

Done. Now you know how to make a free t-shirt mockup using the Figma design program. You can use these same few skills to mock up many different articles of clothing. Hats, socks, shorts, you name it.

Here are a few more examples:

more tshirt examples

The yellow Netflix shirt is made using the exact technique as the blue John T-shirt from this example. To make an all-over print mockup like the burger t-shirt, simply place your image directly on top of the colored rectangle layer in the same group as the background shirt mask. You can discard the colored rectangle layer at this point if you’d like. It’s up to you.

burger layer

Download the Figma File!

You can download the file here

comments powered by Disqus