Tip #1: Work backwards
"Working backwards" means considering the final printing process while you are designing in Figma, even if you'll just be handing off the files to a client:
- Are you using a print-on-demand service, or working with a professional print shop?
- What product/material/substrate is the design being printed on? Paper, plastic, textiles, etc.
- Does the printer require any specific layout, dimensions, file format, or color profile?
- Do you need to match any brand colors, spot colors, or Pantone colors?
The answers to the these questions inform how you should set up your Figma file.
If the printer has specific requirements regarding color, bleed, or trim/crop marks, then using a Figma plugin like Print for Figma may be neccesary. Figma is a great choice for most print design projects, but always confirm your requirements first.
If you work backwards and keep the printing process in mind while designing and delivering your files, I guarantee you'll be happy with the final product.
Tip #2: Create a proper layout
Figma uses a canvas PPI of 72 pixels per inch, so to calculate the size our Figma frame should be, we simply multiply our dimensions by 72. You can do this yourself, or use this calculator:
Now that you've converted your dimensions into pixels, you can make a Figma frame at that size. When you export as a PDF, the page will be exactly your desired size (e.g. 8.5x11 inches).
The Print for Figma plugin makes this even easier. You can type in your dimensions in inches or millimeters, and the plugin will do the math for you. You can even add margins, bleed, and crop marks.
If you want to learn more about creating print layouts in Figma, check out my guides for large format layouts, multi-page layouts, packaging layouts, or apparel layouts. Or, jump right in with Print for Figma and learn as you go!
Tip #3: Keep an eye on DPI
There is a common misconception that a file has one single "DPI" value. This is not how DPI actually works. In reality, when you export a PDF file from Figma it contains multiple objects like text, shapes, and images. Each of these objects are very different, and only images have a real DPI that we are concerned about.
Therefore, when someone asks you to "design at 300 DPI", what they really mean is that each image in your final PDF should be 300 DPI (or more). There isn't one "DPI" for the whole PDF - DPI is per-image.
Check the DPI of your images in Figma
The easiest way to check the DPI of your images in Figma is to use Print for Figma's DPI Checking feature, but you can also get a rough idea of an image's DPI by doing some math. Here's an example:
- Load a 600x400 pixel image into Figma.
- Scale the image down by half (1/2) so that it is now 300x200 pixels.
- Under the hood, Figma still has the original 600x400 pixels, but now those pixels only have to cover a 300x200 area.
- Because we shrunk the image down by (1/2), we increased the DPI of the image by the inverse of that: (2/1)
- So, we've doubled the image's base resolution (2/1 * 72), to achieve a final DPI of 144.
So in general, to calculate the DPI of an image in Figma, use this formula:
- DPI = (1 / (Current Image Size / Original Image Size)) * 72
Aim for 300 DPI if quality is important
Let's say you wanted to design a 5x7 inch postcard, and you want an image to cover the entirety of the postcard. Then the minimum size of the image you import should be:
- (5 inches * 300 dpi) = 1500 pixels
- (7 inches * 300 dpi) = 2100 pixels
More generally, to maintain 300 DPI:
- minimum image width in pixels = (Display Width in Inches * 300 DPI)
- minimum image height in pixels = (Display Height in Inches * 300 DPI)
Watch out for auto-scaling
If you import an image that is more than 4000 pixels in width or height, Figma will automatically resize it. This is a problem for large-format design, where you need images displayed at a really large size (e.g. tradeshow banners).
In these cases, you can split the image into multiple parts with a plugin like Insert Big Image.