📺 Display Specifications
Screen Size
65" diagonal
56.64" × 31.86" viewable area
Resolution
4K UHD
3840 × 2160 pixels
Pixel Density
67.8 PPI
Exact 1:1 scale conversion factor
Max Product Size
56.6" × 31.9"
Maximum real-world size that fits at 1:1
🔍 True-to-Life Scale Analysis
✅ Large Products
Cereals
Boxes 8-12" tall display well at 1:1 scale and show realistic proportions
📏 Medium Products
Jars & Bottles
4-6" items show accurate real-world size relationships
🔍 Small Products
Cans & Minis
2-4" items appear small as they do in real life - authentic proportions
🎯 Goal
True Scale
All products sized exactly as they appear in real retail environments
📦 1:1 Scale Converter
🎯 Pure conversion: Enter real product measurements to get exact pixel dimensions for true-to-life display.
🏪 Category Layout Optimizer
📋 Product Box Display Guidelines
Core Formula:
Pixel Size = Real Size (inches) × 80.1 PPI
Scaling Formula:
Display Size = Real Size × Scale Factor
Minimum Readable: 2" wide × 3" tall for text visibility
Pixel Size = Real Size (inches) × 80.1 PPI
Scaling Formula:
Display Size = Real Size × Scale Factor
Minimum Readable: 2" wide × 3" tall for text visibility
Category-Specific Guidelines (Based on Real Display Analysis)
| Category | Typical Box Size | Current Issue | Recommended Scale | Priority Level |
|---|---|---|---|---|
| Breakfast Cereals | 2-4" × 8-12" | ✅ Working well | 1x - 1.2x | Low - maintain current |
| Spreads & Jams | 2-3" × 3-4" | 🚨 Critically small | 3x - 4x | HIGH - immediate fix needed |
| Peanut Butter Jars | 3-4" × 4-5" | ⚠️ Borderline readable | 2x - 2.5x | Medium - needs improvement |
| Nutella/Spreads | 2.5" × 4" | ⚠️ Too small | 2.5x - 3x | Medium-High |
| Beverage Cans | 2.5" × 4.8" | 🚨 Unreadable | 3x - 4x | HIGH - critical for branding |
| Beverage Bottles | 2.5" × 8-12" | 🚨 Labels invisible | 2.5x - 3x | HIGH |
| Mini Products | 1-2" × 2-3" | 🚨 Completely unreadable | 4x - 5x | CRITICAL - consider removal |
| Oatmeal/Hot Cereals | 3-4" × 5-7" | ✅ Acceptable | 1.5x - 2x | Low-Medium |
⚠️ Designer Gut-Check Guidelines
- Text Readability: If original text isn't readable at 4+ feet, scale up 1.5x-3x
- Brand Recognition: Logos should be minimum 1" tall on display
- Product Stacks: Use 3-7 products per stack for visual impact without clutter
- Category Cohesion: Keep similar box sizes together for clean layouts
- Viewing Angles: Test visibility from 2-8 feet depending on location
- Edge Safety: Keep critical info 3+ inches from screen edges
🎨 Figma Layout Guidelines
Canvas & Artboard Setup
Main Artboard
3840 × 2160px
Set up your primary artboard to match the 4K display exactly
Safe Area
3600 × 1920px
Keep critical content within 120px margins from all edges
Grid System
68px columns
Use 68px column grid (matches 1" physical spacing at 67.8 PPI)
Baseline Grid
20px rows
20px baseline grid for consistent vertical spacing
Figma Setup Commands:
1. Create Frame: 3840 × 2160px
2. Layout Grid: Columns = 56 (68px), Rows = 108 (20px)
3. Constraints: Set all product components to "Scale" for responsive behavior
4. Auto Layout: Use for shelf rows with 68px spacing between products
1. Create Frame: 3840 × 2160px
2. Layout Grid: Columns = 56 (68px), Rows = 108 (20px)
3. Constraints: Set all product components to "Scale" for responsive behavior
4. Auto Layout: Use for shelf rows with 68px spacing between products
Component Organization
| Component Type | Naming Convention | Variants Needed | Auto Layout Settings |
|---|---|---|---|
| Product Box | Product/[Category]/[Size] | 1x, 1.5x, 2x, 2.5x, 3x, 4x | Fixed width/height, no auto layout |
| Product Stack | Stack/[Category]/[Count] | 2-stack, 3-stack, 4-stack, 5-stack | Vertical, 0px spacing, center aligned |
| Shelf Row | Shelf/Row/[Height] | Short (814px), Medium (1356px), Tall (1695px) | Horizontal, 68px spacing, top aligned |
| Category Display | Category/[Name]/[Density] | Sparse, Moderate, Dense | Vertical, 160px spacing, center aligned |
| Shelf Background | Background/Shelf/[Style] | Wood, Metal, White, Clear | Fill container, stretch |
Scaling Workflow in Figma
- Master Components: Create product components at actual size (1x scale)
- Scale Variants: Use component variants for 1.5x, 2x, 2.5x, 3x, 4x scales
- Instance Swapping: Allow designers to easily swap between scale variants
- Constraint Settings: Set all product images to "Scale" constraint
- Text Scaling: Product text should scale proportionally with image scaling
Asset Management
📁 File Organization Best Practices
- Master Library: Create shared component library for all product assets
- Category Pages: Separate Figma pages for each product category
- Template System: Pre-built shelf templates for quick category swapping
- Image Imports: Import product photos at 2x resolution (minimum 160 PPI)
- Export Settings: Set up 1x PNG exports for final display output
Layout Grids & Guides
Shelf Height Guide
814px - 1695px
Standard shelf heights: 12"-25" (814-1695px)
Product Spacing
34px - 136px
0.5" - 2" spacing between products
Margin Guidelines
204px sides
3" margins on left/right edges
Stack Spacing
0px - 68px
Tight stacking to 1" separation
Figma Plugins & Tools
- Similayer: Quickly select and modify similar product components
- Content Reel: Batch import and replace product images
- Grid Generator: Create custom shelf grid systems
- Component Utilities: Bulk update component properties
- Export Utilities: Batch export category displays
Export Configuration
Export Settings for Display:
Format: PNG
Scale: 1x (3840 × 2160px)
Color Profile: sRGB
Compression: Minimal (high quality for display)
Naming: [Category]-[Date]-[Version].png
Format: PNG
Scale: 1x (3840 × 2160px)
Color Profile: sRGB
Compression: Minimal (high quality for display)
Naming: [Category]-[Date]-[Version].png
🚀 Product Box Implementation Framework
Step 1: Product Dataset Preparation
- Measure physical boxes with precision calipers or rulers
- Document stack configurations - how products are typically grouped
- Categorize by display type - single boxes vs. multi-packs vs. variety stacks
- Note text readability requirements - which elements must be readable at viewing distance
Step 2: Image Asset Management
- Standardize photography - consistent lighting, angles, backgrounds for each category
- Create stack variations - photograph 2-3-4-5 product stacks for dynamic displays
- Maintain aspect ratios - preserve original box proportions in digital assets
- Optimize for scaling - ensure images remain crisp when scaled 1.5x-3x
Step 3: Category-Based Layout Planning
- Group by viewing requirements - pharmaceuticals need larger scale than frozen foods
- Plan category transitions - how to switch between breakfast, personal care, etc.
- Consider seasonal adjustments - holiday products, seasonal categories
- Design template systems - reusable layouts for each category type
Step 4: Designer Workflow
- Use this calculator for initial sizing - get baseline measurements and scale factors
- Test readability at target viewing distance - validate text can be read clearly
- Verify stack heights fit shelf spacing - ensure no visual collisions
- Check category cohesion - maintain consistent scale within each category display
- Account for edge cases - oversized boxes, unusual aspect ratios, multi-language text
Step 5: Quality Assurance Checklist
- Text Legibility Test: Can key product info be read from intended distance?
- Brand Recognition Test: Are logos and brand elements clearly visible?
- Stack Balance Test: Do product stacks look natural and stable?
- Category Consistency Test: Is scaling consistent within each category?
- Edge Safety Test: Is critical content safe from screen edge truncation?
💡 Pro Tips for Designers
- Start with extremes: Design for your smallest and largest products first
- Use the 4-foot rule: Most retail interactions happen at 3-5 feet - optimize for this
- Stack psychology: 3-5 items suggest variety, 6+ suggests abundance
- Category color coding: Subtle background tints can help distinguish categories
- Dynamic sizing: Consider products that scale based on importance or promotion