What is DPI?
DPI stands for Dots Per Inch - it measures how many tiny dots of ink are printed in each inch of your design.Simple Analogy: Think of a mosaic made of tiny tiles. More tiles per inch = more detail and smoother image. Fewer tiles = chunky, pixelated look.
DPI vs PPI: What’s the Difference?
| Term | Full Name | Used For | Meaning |
|---|---|---|---|
| DPI | Dots Per Inch | Printing | Ink dots on paper |
| PPI | Pixels Per Inch | Screens | Pixels on display |
- Technical: Your Figma file has pixels (PPI)
- Printing: Your printer creates dots (DPI)
For print design, when someone says “300 DPI,” they mean the printed output will have 300 dots of ink per inch.
Why 300 DPI?
300 DPI is the universal standard for quality printing because:- Human eye limit: Most people can’t see individual dots at 300 DPI
- Sharp text: Letters look crisp and clear
- Smooth images: Photos appear photographic, not pixelated
- Industry standard: All professional printers expect 300 DPI
Resolution Comparison
| DPI | Quality | Use Case |
|---|---|---|
| 72-96 | Low | Screen only (websites, apps) |
| 150 | Medium | Newspapers, viewed from distance |
| 300 | High | Standard printing (books, brochures, cards) |
| 600 | Very High | Line art, very fine details |
| 1200+ | Ultra High | Specialty printing (rare) |
72 DPI looks great on screens but terrible when printed! Never use screen-resolution images for print.
How to Calculate Required Resolution
The Formula
Real Examples
- Business Card
- A4 Flyer
- Poster
- Logo (Small)
Size: 3.5” × 2” (US standard)
Target DPI: 300Calculation:
- Width: 3.5” × 300 = 1050 pixels
- Height: 2” × 300 = 600 pixels
Effective DPI in Figma
When you place an image in Figma and resize it, the effective DPI changes:How It Works
Example Scenario
You have a photo that’s 1500 × 1000 pixels:| Size in Design | Width (inches) | Effective DPI | Quality |
|---|---|---|---|
| 5” wide | 5” | 1500 ÷ 5 = 300 DPI | ✅ Perfect! |
| 10” wide | 10” | 1500 ÷ 10 = 150 DPI | ⚠️ Acceptable for posters |
| 15” wide | 15” | 1500 ÷ 15 = 100 DPI | ❌ Too low |
| 2.5” wide | 2.5” | 1500 ÷ 2.5 = 600 DPI | ✅ Excellent (overkill) |
Key Insight: Smaller images in your design = Higher effective DPI. Larger images = Lower effective DPI.
Using the DPI Checker in Print for Figma
1
Open Print for Figma
Select your frame and launch the plugin
2
Go to DPI Check Tab
Click the “DPI Check” tab in the plugin
3
Review All Images
The plugin shows a list of all images in your design with:
- Image name
- Original size (pixels)
- Size in design (mm/inches)
- Effective DPI
- Warning if below 300 DPI
4
Fix Low-Resolution Images
For images marked ⚠️:
- Replace with higher resolution version
- Make image smaller in design
- Remove if not critical
5
Verify
All images should show:
- 300+ DPI for standard print
- 150-200+ DPI for large format
Pro Tip: Check DPI before finalizing your design, not right before export. Finding high-res replacements takes time!
Common DPI Scenarios
Scenario 1: Image from Web
Problem: Downloaded image from Google/website Reality: Most web images are 72-96 DPI (screen resolution) Solution:- Find original high-res source
- Use stock photo sites (Unsplash, Shutterstock)
- Take your own high-res photos
- Use vector graphics instead
Scenario 2: Scaling Up Images
Problem: Small image stretched to fill space Reality: Effective DPI drops proportionally Example:- Original: 500px wide at 100 DPI
- Scaled 3×: Now 33 DPI! ❌
Scenario 3: Logos and Icons
Problem: Raster logo file (PNG/JPG) Reality: Looks pixelated when printed Solution: Use vector formats:- ✅ SVG (best for Figma)
- ✅ PDF (vector)
- ✅ AI/EPS (if available)
Vector graphics don’t have DPI limitations - they scale infinitely without quality loss!
Different DPI for Different Projects
Not everything needs 300 DPI:High DPI (300-600)
When to use:- Business cards
- Brochures
- Magazines
- Books
- Product packaging
- Any close-viewing print
Medium DPI (150-200)
When to use:- Posters (A2 or larger)
- Banners
- Trade show displays
- Window graphics
Low DPI (72-150)
When to use:- Billboards
- Building wraps
- Large venue signage
Viewing Distance Rule: The farther away people view it, the lower DPI you can use.
Optimizing File Size vs Quality
Higher DPI = Larger file size. Find the balance:| DPI | File Size | Print Quality | Best For |
|---|---|---|---|
| 150 | Small | Acceptable | Large format, distance viewing |
| 300 | Medium | Excellent | Standard print (recommended) |
| 600 | Large | Overkill | Line art, very fine details |
| 1200+ | Huge | Unnecessary | Waste of space for photos |
Recommendation: Use 300 DPI for photos and 600+ DPI for black & white line art or text-only images.
Fixing Low-Resolution Images
If your image is below 300 DPI, you have options:Option 1: Get Higher Resolution Source
Best solution:- Find original file
- Re-download from source (not Google Images!)
- Use stock photo sites
- Take new photo
Option 2: Make Image Smaller in Design
If 1200px image is 8” wide (150 DPI):- Reduce to 4” wide = 300 DPI ✓
Option 3: AI Upscaling (Use Carefully)
Tools like:- Topaz Gigapixel AI
- Photoshop Super Resolution
- Online upscalers
Option 4: Accept Lower Quality (Last Resort)
For some projects:- Background textures
- Non-critical decorative elements
- Large format prints
- Not critical to design
- Printer approves
- Budget/time constraints
Text and DPI
Vector Text (Recommended)
Text in Figma is vector - it doesn’t have DPI limitations:- ✅ Scales perfectly
- ✅ Always sharp
- ✅ No pixelation
Rasterized Text (Avoid)
If text becomes pixels (rasterized):- Must follow same 300 DPI rule
- Can become blurry
- Loses sharpness
DPI in Different File Formats
| Format | DPI Handling | Best For |
|---|---|---|
| Preserves vectors | Print (best choice) | |
| PNG | Fixed resolution | Web, raster needs |
| JPG | Fixed resolution | Photos, continuous tone |
| SVG | Vector (no DPI) | Logos, icons |
| EPS/AI | Vector (no DPI) | Professional printing |
PDF exports from Print for Figma maintain vector text and graphics while embedding images at your specified DPI.
Checking DPI in Your Exported PDF
In Adobe Acrobat (Pro)
1
Open PDF
Open your exported PDF in Adobe Acrobat Pro
2
Open Output Preview
Tools → Print Production → Output Preview
3
Check Image Resolution
Look at “Object Inspector” - click on images to see their resolution
Visual Test
1
Zoom to 100%
View PDF at 100% zoom
2
Zoom to 200-300%
Zoom in further - text should still be crisp
3
Check Images
Images should look smooth, not pixelated
DPI Checklist
Before sending to print:- All images checked: Used DPI Checker tool
- 300+ DPI: Every photo meets minimum
- Logos are vector: SVG or vector-based
- Text is vector: Not rasterized
- Large format adjusted: 150-200 DPI if appropriate
- Replacements sourced: High-res versions obtained
- PDF verified: Spot-checked in PDF viewer
If all checked, your resolution is print-ready!
Common DPI Mistakes
Top 5 DPI Mistakes:
- Using web images (72 DPI) in print
- Scaling up small images (lowers effective DPI)
- Not checking DPI before finalizing design
- Using PNG logos instead of SVG
- Exporting at wrong DPI setting
Quick Reference
| Measurement | Value | Purpose |
|---|---|---|
| Standard Print | 300 DPI | Books, brochures, cards |
| Large Format | 150-200 DPI | Posters, banners |
| Billboards | 50-100 DPI | Very large, distant viewing |
| Line Art | 600-1200 DPI | B&W graphics, fine detail |
| Minimum Acceptable | 250 DPI | Absolute minimum for quality |
Learn More
Image Optimization
Control DPI and compression in exports
Working with Images
Best practices for print images
Troubleshooting
Fix blurry or pixelated outputs
FAQ
Common resolution questions
Remember: When in doubt, go higher resolution. You can always reduce, but you can’t add detail that isn’t there!