Are you tired of tedious manual testing and endless iterations? Swift app development just got a whole lot easier! Introducing Figma-Mobile-Diff - a game-changing web-based tool that compares your Figma designs with mobile app screenshots, providing detailed visual difference reports with pixel-perfect analysis. Say goodbye to guesswork and hello to precision!

What's in the Box?

  • Mobile-First: Designed specifically for mobile app visual testing, this tool is tailored to meet the unique needs of your mobile-first strategy.
  • Figma Integration: Seamlessly compare your designs directly with app screenshots, streamlining your workflow and reducing errors.
  • Batch Processing: Upload multiple image pairs at once, saving you time and effort.
  • Detailed Reports: Comprehensive visual diffs with 9-zone analysis help you pinpoint issues and prioritize fixes.
  • Device Presets: Auto-crop status bars, notches, and navigation bars for a seamless comparison experience.

Getting Started

  1. Export Figma Designs as PNG files
  2. Capture Mobile Screenshots from iOS Simulator or Android Emulator
  3. Make sure design and screenshot dimensions match (or use device presets)
  4. Enter a Project Name
  5. (Optional) Select a Device Preset to auto-crop system UI elements
  6. Adjust Comparison Threshold (default 5%)
  7. Drag & drop or browse to upload:
  • Design images (left column)
  • Mobile screenshots (right column)
  1. Click Start Comparison

Results

The results page shows:

  • Summary: Total pairs, passed/failed counts
  • Side-by-Side Comparison: Design vs screenshot
  • Diff Visualization: Red highlights show differences
  • Detailed Report: 9-zone analysis with issue categorization

Device Presets

iPhone 14 Pro Max (430x932)

iPhone 14 Pro (393x852)

iPhone 14 (390x844)

iPhone 13 (390x844)

iPhone SE 3rd Gen (375x667)

Google Pixel 7 Pro (412x915)

Google Pixel 7 (412x915)

Samsung Galaxy S23 Ultra (360x800)

Samsung Galaxy S23 (360x780)

OnePlus 10 Pro (412x919)

iPad Pro 12.9" (1024x1366)

iPad Air (820x1180)

Configuring Your Tool

  1. Copy .env.example to .env
  2. Customize:
  • PORT=9000 # Server port
  • HOST=localhost # Server host
  • NODE_ENV=development # Environment
  • STORAGE_RETENTION_DAYS=30 # Auto-cleanup after N days
  • MAX_FILE_SIZE=10485760 # 10MB max file size
  • DEFAULT_THRESHOLD=0.05 # 5% default threshold
  • PIXELMATCH_THRESHOLD=0.1 # Pixel matching sensitivity
  • MAX_CONCURRENT_COMPARISONS=10 # Batch processing limit
  • ENABLE_IMAGE_CACHING=true # Performance optimization

Advanced Settings

Edit config/mobile.config.json for advanced settings:

{

"storage": {

"maxFileSize": "10MB",

"allowedFormats": ["png", "jpg", "jpeg", "webp"],

"retentionDays": 30

},

"comparison": {

"defaultThreshold": 0.05,

"pixelmatchThreshold": 0.1

},

"performance": {

"maxConcurrentComparisons": 10,

"enableImageCaching": true

}

}

API Endpoints

POST /api/comparisons

  • Content-Type: multipart/form-data
  • Form fields:

+ projectName: string (required)

+ devicePreset: string (optional)

+ threshold: number (optional, 0-1)

+ pixelmatchThreshold: number (optional, 0-1)

+ autoResize: boolean (optional, default: false)

+ designs: file[] (required)

+ screenshots: file[] (required)

Auto-Resize Feature

When autoResize=true, screenshots are automatically resized to match the Figma design dimensions if they don't match. This is particularly useful for mobile screenshots where the exact pixel dimensions may vary between devices or simulators.

API Responses

GET /api/comparisons/:id

  • Response:

{

"id": "uuid",

"projectName": "My App",

"timestamp": "2026-11-11T18:00:00Z",

"status": "completed",

"pairs": [...],

"totalPairs": 5,

"passedPairs": 4,

"failedPairs": 1

}

GET /api/comparisons?limit=50&offset=0&projectName=search

  • Response:

{

"comparisons": [...],

"total": 100

}

DELETE /api/comparisons/:id

Threshold

The threshold determines how much visual difference is acceptable:

  • 0.01 (1%) - Very strict, catches tiny differences
  • 0.05 (5%) - Recommended default, balanced sensitivity
  • 0.10 (10%) - Lenient, allows minor variations
  • 0.20 (20%) - Very lenient, only major differences

Comparison Grid

Each comparison divides the screen into a 3x3 grid:

┌─────┬─────┬─────┐

│ TL │ TC │ TR │ Top (Header)

├─────┼─────┼─────┤

│ ML │ MC │ MR │ Middle (Content)

├─────┼─────┼─────┤

│ BL │ BC │ BR │ Bottom (Navigation)

└─────┴─────┴─────┘

  • Layout: Element positioning differences
  • Size: Dimension mismatches
  • Color: Color/shade differences
  • Spacing: Padding/margin issues
  • Element: Missing or extra elements
  • 🔴 Critical (>10% difference in zone)
  • 🟠 High (5-10%)
  • 🟡 Medium (2-5%)
  • 🟢 Low (<2%)

Troubleshooting

  • Check file size (max 10MB per file)
  • Ensure files are PNG/JPG/JPEG/WebP
  • Verify design and screenshot counts match
  • Reduce batch size (max 50 pairs)
  • Check server logs for errors
  • Increase MAX_CONCURRENT_COMPARISONS
  • Increase threshold (0.05 → 0.10)

Cleaning Up

Run npm run clean to remove:

  • All uploaded images
  • All generated outputs
  • Comparison database

Set STORAGE_RETENTION_DAYS=30 in .env to automatically delete comparisons older than 30 days.