How to make a realistic receipt for your design project

Whether you're building a fintech app, an e-commerce dashboard, or a prop for a film, the difference between a "placeholder" receipt and a "realistic" one is all in the details. A realistic receipt builds trust and makes your mockups feel like living, breathing products.

1. Start with the Right Template

Not all receipts are created equal. A luxury boutique receipt looks fundamentally different from a fast-food drive-thru slip. Before you start typing, decide which category your brand falls into:

• Thermal (Point of Sale): Typical for grocery stores, gas stations, and restaurants. Often uses monospace fonts and has thin, long dimensions.
• Full Page (Invoice): Common for service providers or high-end luxury retailers. Usually formatted as an A4 or Letter-sized document.
• Dot Matrix: Giving a retro or industrial feel, often seen in warehouses or older establishments.

In our template library, we offer 150+ brand-accurate options. Choosing the right base is 50% of the work.

2. Master the Typography

Real receipts rarely use premium sans-serif fonts like Inter or Roboto. They use built-in printer fonts that are optimized for speed and clarity. To achieve realism:

• Use Monospace: Fonts like Courier New, Roboto Mono, or IBM Plex Mono mimic the grid-based printing of thermal heads.
• Variable Weights: Don't be afraid to use bold for titles and light weights for fine print legal text at the bottom.
• All-Caps for Titles: Many traditional receipt printers default to all-caps for the store name and address.

3. Use "Dirty" Data

The fastest way to ruin a mockup is to use "Item 1" and "Price $10.00". Real receipts are messy.

4. Final Polish for Figma

Once you've generated your receipt using our Generator, download it as a high-resolution PNG. To make it pop in your design:

1. Add a subtle Inner Shadow: This gives the paper some depth.
2. Apply a Grain Filter: Real paper has texture. A 2-3% monochromatic grain in Figma works wonders.
3. The "Crumple" Effect: Use a displacement map or a simple "paper crumple" overlay set to 'Multiply' at 10% opacity.

Summary

Great UI design is about storytelling. By creating an accurate receipt, you're not just showing a transaction; you're showing a real-world interaction. Our goal at Make a receipt is to provide the tools to make that storytelling effortless.