Tip #1: Work backwards
Since creating the 'Print for Figma' plugin in 2019 (somehow already 7 years ago!), most of the problems I've seen designers encounter were a result of them not working backwards. And no, I don't mean spinning your chair around...
What I mean by "work backwards" is that you need to consider the final printing process while you are designing in Figma, even if you'll just be handing off 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 will 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 (with plugins) 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 proud of the final product.
Tip #2: Create a proper layout
In the spirit of working backwards, you should always set up a proper layout before you start designing. That way, you won't have to redesign anything when you actually go to print it.
Let's try a simple example: a 24x36 inch poster. In this example, our printer has asked us to submit a PDF with 0.125 inches of bleed on all sides. This means we actually need a PDF with final dimensions of 24.25 x 36.25 inches. We calculate this by simply adding the total bleed space (left+right, top+bottom) to the width and height, respectively:
- Width = (24 + 0.125 + 0.125) = 24.25 inches
- Height = (36 + 0.125 + 0.125) = 36.25 inches
Since Figma uses a native resolution of 72 pixels per inch, to calculate the size our Figma frame should be, we simply multiply our dimensions by 72. You can do this yourself, or use this inches to pixels calculator:
Now that we know our dimensions (1746 x 2610 pixels), we can make a Figma frame at that size. And when we export this frame as a PDF, it will be exactly our desired final size (24.25x36.25 inches). Here's how our Figma file looks now:
During the printing process, the bleed area will be trimmed off, so the final printed size will be exactly 24x36 inches. But there's a problem. We have no way of seeing in our Figma file where the bleed area is. We need to mark it somehow, so that we know what will be trimmed, without adding anything that will actually show up in the final PDF.
A simple way to acheive this is to use layout guides and slices. Both layout guides and slices are visible in Figma, but they won't be visible in the actual PDF. In the screenshot below, you can see both the dotted line from the slice (representing the final size after printing), as well as the red-tinted layout guides (representing the area that will be trimmed):
Obviously, the main parts of your design should not cross over into the bleed, but many designers will purposely extend the background of their design into the bleed area so that no blank paper is visible, even if the page is trimmed slightly off center. This is actually one of the key reasons printers use bleed in the first place - no trimming process will ever be perfect, so we need some bleed area that we are willing to sacrifice.
If you want an easy way to set up these guides and/or a slice, you can use the Print for Figma plugin. You just type in your desired final size e.g. "24x36", input "0.125" inches of bleed, and the plugin will do everything we just did - but instantly!
This is just a simple example, so if you want to learn more, check out the full guides for large format layouts, multi-page layouts, packaging layouts, or apparel layouts. Alternatively, you can jump right in with Print for Figma and figure it out as you go!
Let's move on to the next tip!
Tip #3: Keep an eye on DPI
An image speaks a thousand words - which is why so many print projects involve images. You might even be working on a project where images are the star of the show - like a photo booklet, product catalog, or brochure. To ensure your images live up to their fullest potential, it's important to treat them with respect, which means thinking carefully about how you prepare, import, and position images inside of Figma.
Learn how resolution/DPI/PPI actually works
While many people think of resolution as the 'number of pixels' (e.g. 1920x1080), in print design when we say 'resolution' we are actually talking about 'density', i.e. how many pixels there are in a given area. This is reflected in the names of the units we use for resolution: 'DPI' and 'PPI' (dots/pixels per inch). These values are a measurement of how many pixels there are per inch of physical space.
Another common misconception is that a PDF file has one single "DPI" value. This way of thinking has been popularized by Adobe, which often lets you input a DPI value for your entire file. This is not how DPI actually works.
In reality, a given PDF file contains multiple objects, like text, shapes, and images. Each of these object types are very different. In fact, some objects (like text and shapes), essentially have an infinitely high DPI. Image objects on the other hand are made of pixels, so they have a true DPI that we can manipulate.
So, if you hear someone say "you need to design at 300 DPI", what this really means 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/PPI of your images in Figma
The easiest way to check your image DPI is to use Print for Figma's DPI Checking feature, but you can also get by with some manual calculations. Figma uses a canvas PPI of 72, which means every 72 pixels in Figma represents 1 inch of PDF space.
So, to calculate the DPI of an image in Figma, use this formula:
- Scale Factor = (Current Image Size / Original Image Size)
- DPI = (1 / (Scale Factor)) * 72
.. here's an example:
- We import a 600x400 pixel image into Figma.
- If we were to export this image as a PDF, it would be 72 DPI (Figma's canvas resolution).
- Now we 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.
- In fact, 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 of 72, to acheive a final DPI of 144.
Aim for ~300 DPI if quality is important
At 300 DPI, you basically guarantee that your images will look good at pretty much any distance. This is why many printers suggest 300 DPI. To consistently maintain 300 DPI images in Figma, always import a higer resolution than what you need.
For example, a 5x7 inch postcard is only 360x504 pixels in Figma, and to get from 72 DPI to 300 DPI, we need (300/72) more pixels.
So, our photo should be:
- at least
((300/72) x 360)= 1500 pixels in width, and - at least
((300/72) x 504)= 2100 pixels in height.
If our image is 1500x2100 or larger, when we import it into Figma and fit it inside our postcard frame, it will at least 300 DPI, if not higher - ensuring it looks fantastic once printed!
Be careful of Figma's auto-resizing
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.