Using the Screen Ruler with the Device Specs Database for Accurate Design Work
A common pain point in mobile UI design: you finish a mockup in Figma at "iPhone 15 Pro" preset, the engineer ships it, and on a real device the touch targets feel cramped, the body text is harder to read than it looked on the laptop, and a button you thought was "thumb-reachable" is anything but. The mockup checked out at desktop preview. The real device tells a different story.
The fix isn't more rounds of revision — it's putting the physical size of the device in front of you while you design. Two free tools on this site, used together, do exactly that:
- The Device Specs Database tells you the exact screen dimensions, resolution, PPI, and panel type of 69 real devices.
- The Screen Ruler renders an accurately calibrated ruler on your laptop or external monitor, so you can lay a printed mockup or your phone next to it and verify physical sizes.
This article walks through three specific design workflows that combine the two: pre-mockup device research, Figma-to-physical sanity check, and post-launch issue diagnosis.
Workflow 1: pre-mockup device research
Before you open Figma, decide which devices your design has to look good on. The mistake here is treating "iPhone 15 Pro" or "Galaxy S24" as the only target. Real users span 4-year-old iPhone SEs, 6.1-inch standard models, 6.7-inch Max models, and a long tail of Android phones at different aspect ratios.
Step 1: build your target device list
Open the Device Specs Database. Filter by:
- OS — narrow to iOS or Android based on your platform.
- Year — set "2022 or later" to cover the realistic upgrade cycle. Don't design for iPhone 7 unless you have analytics evidence that 5% of your users still run it.
- Type — phone vs tablet, since they have radically different layout constraints.
- Size range — use the size buckets (compact / standard / large) to make sure you're covering the full range of physical sizes your users carry.
Example for an iOS-first consumer app: iOS / 2022+ / phone / all sizes → gives you a list spanning iPhone SE 3 (4.7") through iPhone 15 Pro Max (6.7"). That's the matrix you need to design against.
Step 2: note the key specs per target device
For each device on your shortlist, write down:
| Spec | Why it matters for design |
|---|---|
| Diagonal screen size | Determines physical canvas — relates to one-handed reach, comfortable text size |
| Resolution (CSS / logical pixels) | Drives breakpoints and grid systems |
| devicePixelRatio | Asset choice (1x/2x/3x) and crisp rendering |
| Aspect ratio | Layout proportions — 16:9 vs 19.5:9 vs 4:3 (tablet) |
| Refresh rate | Whether to design 60fps or 120fps animations |
| Panel type (OLED vs LCD) | True black UI works on OLED, looks gray on LCD |
Each device's detail page in the Device Specs Database lists all of this. Click any device row to drill into its spec page.
Step 3: design in your smallest target's pixel dimensions, not the largest
Common antipattern: design in iPhone 15 Pro Max canvas (430 × 932 logical px), then "see how it scales down" to smaller phones. The scaled-down version always feels cramped because it was designed at a size with more breathing room.
The right approach is to design in your smallest target device first (e.g., iPhone SE 3 at 375 × 667 logical px). If your UI works there with comfortable touch targets and readable text, it will look spacious on larger devices. The reverse is rarely true.
Workflow 2: Figma-to-physical sanity check
You've finished the mockup. Before you ship to engineering, do a 5-minute sanity check that the design matches reality at physical size.
Step 1: get an accurate ruler on your screen
Open the Screen Ruler on the same laptop you're designing on. The ruler auto-detects your device (most modern laptops are in our database) and renders at the correct physical size. If the auto-detection is off, or you're on an external monitor, calibrate against a physical reference object — a credit card, a coin, or a printed A4 sheet — using the calibration panel.
Once the ruler reads "8.5 cm" and a credit card laid against it actually measures 8.56 cm, you're calibrated.
Step 2: render your mockup at the device's physical size
In Figma, set your mockup's frame to the target device preset (which uses logical / CSS pixel dimensions). Now you need to render the artboard at the device's physical size on your laptop screen.
Math:
zoom% = (target device width in mm / target device CSS-px width) × your laptop PPI / 72 × 100
Easier path: export the mockup as a PNG at 1× and print it on standard A4 paper. The print is automatically rendered at physical size by your printer (use "actual size" / "no scaling" in the print dialog). Lay the print next to the screen ruler and verify dimensions.
Step 3: check the four things that lie at desktop preview
With the printed mockup in front of you and the screen ruler beside it:
- Touch target size. Apple's HIG says minimum 44 × 44 pt; Google says 48 × 48 dp. Use the screen ruler to physically measure your buttons. They should be at least 7 mm on the short side.
- Body text size. iOS body default is 17 pt, Android is 16 sp. Anything smaller than 14 pt for body copy on a phone is a fail. Hold the printed mockup at arm's length — can you read it?
- Bottom-of-screen reach. The thumb's natural reach on a 6.1-inch phone held one-handed extends only about two-thirds up from the bottom. Anything in the top third (back button, notification bar) is a tap-after-shifting-grip.
- Color appearance. A pale gray on a desktop monitor might be invisible on an OLED phone in low light. A vivid red on a desktop might be muted on an LCD. Compare the printed mockup against a real device of the same OS family if possible.
If any of the four fail, fix in Figma before shipping.
Workflow 3: post-launch issue diagnosis
A user reports "the X button is hard to tap on my phone." You don't have their device. How do you debug?
Step 1: identify their device
Ask the user (or check your analytics) for the exact device model. Look it up in the Device Specs Database. Note the screen diagonal, resolution, PPI, and aspect ratio.
Step 2: render the affected screen at their device's physical size
Take a screenshot of your live app at the same logical-pixel resolution as the user's device. Open it in an image viewer. Use the Screen Ruler calibrated on your laptop to overlay-measure the X button's actual physical size.
If the button is < 7 mm on the short side at the user's device's physical size, you've reproduced the bug — the touch target is genuinely too small. If it's adequately sized, the bug is elsewhere (poor contrast, buggy hit-test region, intercepted by an overlay).
Step 3: validate the fix at the user's device size
Once you've shipped a fix, repeat the measurement at the same device's physical size. If the new button is 8+ mm on the short side, you can close the ticket with confidence.
Why this combination works
The reason designers waste rounds on physical-size issues is that desktop tools lie about size. Figma's "iPhone 15 Pro" preset is in CSS pixels at 100% zoom, but your monitor is 24 inches at 109 PPI; the iPhone is 6.1 inches at 460 PPI. The mockup on your screen is twice the actual phone's physical size.
The Device Specs Database tells you what physical size you're targeting. The Screen Ruler gives you a calibrated physical-size reference on the same surface you're designing on. Together they collapse the gap between the design canvas and the production reality.
A note on tablets and larger screens
This workflow scales up for tablet and TV design, but the touch-target / reach concerns shift:
- Tablets (iPad, Galaxy Tab) — body text default jumps to 17-18 pt, touch targets stay at 44 pt minimum but reach is two-handed so any corner of the screen is tappable.
- TV apps (tvOS, Android TV) — focus-ring navigation, no touch targets, and you're designing for 10-foot viewing distance. Rules entirely different.
- Watch screens (Apple Watch, Wear OS) — the Device Specs Database doesn't yet cover wearables. For watch design, fall back to the Apple HIG and Wear OS guidelines directly.
For phones and tablets, the database + ruler combination covers ~95% of the device-aware design issues you'll face.
Related tools
- Aspect Ratio Calculator — when designing for non-standard screen aspect ratios.
- PPI Calculator — when you have a custom screen and need to verify pixel density.
- Screen Size Calculator — convert diagonal screen size into width × height in mm.
- Printable Ruler — print a paper ruler if you prefer the physical version.
The combined Screen Ruler + Device Specs workflow takes a few minutes per design review but catches the kind of issues that otherwise show up in App Store reviews. Worth the time.
Related Articles
15 Questions About Aspect Ratio Calculator Answered
Common questions about aspect ratio calculators — how they work, when to use one, how to interpret outputs, and the edge cases that trip up first-time users.
Aspect Ratio Calculator for Professionals: Advanced Use Cases
How video editors, broadcast engineers, motion designers, and front-end developers use aspect ratio calculators in production workflows — beyond the 16:9 basics.
Using Aspect Ratio Calculator and Screen Ruler Together
A workflow guide for pairing the aspect ratio calculator with the on-screen ruler — matching physical print dimensions to display ratios, verifying device screen ratios, and bridging from pixels to physical inches.