UX/UI Designer's Pixel-Perfect Toolkit: From Wireframe to Production-Ready Assets

You designed a beautiful interface in Figma. The components are clean, the spacing is precise, the prototypes feel polished. You hand it off to engineering. Six weeks later, the built product looks close but not quite right. The spacing is slightly off. The hover states are missing on half the interactive elements. The mobile breakpoints were not implemented the way you specified. This gap between design and production is the core challenge of UX/UI work, and closing it requires understanding pixel math, device specifications, and the design-to-development handoff process.

The Pixel Math Every Designer Needs

PX to REM Conversion

The rem unit is relative to the root font size, which defaults to 16px in every modern browser. Converting px to rem is the foundation of accessible, scalable design:

rem = px / 16

PX	REM	Common Use
12px	0.75rem	Caption text
14px	0.875rem	Small text, labels
16px	1rem	Body text (base)
18px	1.125rem	Large body text
20px	1.25rem	Small headings
24px	1.5rem	Section headings
32px	2rem	Page headings
48px	3rem	Display text
64px	4rem	Hero display

Using rem for spacing and typography makes your layout scale proportionally when users change their browser font size, which is an accessibility requirement under WCAG 2.2. Use the px to rem converter for instant calculations, and the rem to px converter for the reverse.

PX to EM Conversion

The em unit is relative to the parent element's font size, not the root. This makes em useful for component-level scaling where a component should scale internally based on its own font size. Use the px to em converter for component-level calculations.

Viewport Units

Viewport units are relative to the browser viewport. 1vw equals 1 percent of the viewport width. On a 1440px screen, 1vw = 14.4px. On a 375px phone, 1vw = 3.75px. Use the px to viewport converter for fluid typography and full-bleed layouts.

Device Pixel Calculations

iPhone Pixel Dimensions

Apple's iPhone lineup uses a device pixel ratio (DPR) of 2x or 3x. A 375px CSS viewport on a 3x iPhone has 1125 physical pixels. Designers need to account for this when exporting assets.

Device	CSS Width	DPR	Physical Pixels	Safe Area Top
iPhone SE	375px	2x	750px	0px
iPhone 15	393px	3x	1179px	59px
iPhone 15 Pro Max	430px	3x	1290px	59px
iPhone 16 Pro	402px	3x	1206px	59px

Use the iPhone pixel calculator to compute exact pixel dimensions for any iPhone model. Always account for the safe area inset (notch / Dynamic Island) when designing iOS interfaces.

Android Pixel Dimensions

Android uses density-independent pixels (dp) as its layout unit. 1dp equals 1px on a 160 DPI (mdpi) screen. The conversion factor depends on the screen density:

Density	DPI	Scale	1dp =
mdpi	160	1x	1px
hdpi	240	1.5x	1.5px
xhdpi	320	2x	2px
xxhdpi	480	3x	3px
xxxhdpi	640	4x	4px

Use the Android pixel calculator to convert between dp and physical pixels. Design at 1x (mdpi) and export at 2x, 3x, and 4x for xhdpi, xxhdpi, and xxxhdpi.

Retina Display Calculations

Retina displays have a DPR of 2 or 3, meaning they need 2 to 3 times more pixels to render crisply. A 100px CSS element on a 3x Retina display needs a 300px source image. Use the retina pixel calculator to compute the source resolution needed for any display.

Design Tokens: The Bridge Between Design and Code

Design tokens are the single source of truth for color, typography, spacing, radius, and shadow values. According to the W3C Design Token Community Group, tokens should use a three-tier structure:

Token Hierarchy

Tier	Purpose	Example
Primitive	Raw values	blue-500: #3B82F6
Semantic	Contextual aliases	color/interactive/primary: {blue-500}
Component	Scoped tokens	button/background/default: {color/interactive/primary}

This structure maps directly to CSS custom properties:

:root {
  /* Spacing tokens */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Typography tokens */
  --text-body-md: 400 16px/1.7 var(--font-sans);
  --text-heading-lg: 700 32px/1.2 var(--font-sans);
  --text-display-xl: 800 48px/1.1 var(--font-sans);

  /* Color tokens */
  --color-interactive-primary: #3B82F6;
  --color-text-secondary: #64748B;
}

When Figma variables use the same names as CSS custom properties, the mapping is unambiguous. An engineer reading --color-text-secondary knows exactly what to write in code.

WCAG Contrast and Accessibility

Color contrast is a legal requirement, not a design preference. The WCAG 2.2 contrast requirements:

Text Size	Minimum (AA)	Enhanced (AAA)
Normal text (< 18pt)	4.5:1	7:1
Large text (>= 18pt or 14pt bold)	3:1	4.5:1
UI components and graphics	3:1	N/A

Use the contrast checker to verify every text and background combination. A common failure is light gray text (like #999 on #FFF) which has a contrast ratio of 2.85:1, failing WCAG AA at any size.

Typography Spacing

Line height and letter spacing affect readability as much as contrast. Use the line height calculator to set appropriate leading for body text (1.5 to 1.7 for readability) and the letter spacing calculator for tracking adjustments.

Asset Export and Preparation

Image Assets

Export raster images at 1x, 2x, and 3x for different display densities. Use the image resizer for individual files or the batch resize tool for processing multiple assets. Convert to modern formats using the PNG to WebP converter for smaller file sizes.

SVG Icons

Prefer SVG for icons and simple illustrations. SVGs scale infinitely, are easy to theme with CSS, and produce smaller files than raster equivalents. Use the SVG to PNG converter when a raster fallback is needed.

Background Removal

For product shots and lifestyle imagery, use the background removal tool to create transparent PNGs that work on any background color.

Compression

Compress all exported assets before delivery. Use the image compressor to reduce file sizes without visible quality loss. Target under 200 KB for UI elements and under 500 KB for hero images.

The Design-to-Dev Handoff Checklist

Before marking any design as ready for development, verify:

Layout

• All spacing values use design tokens (not arbitrary pixels)
• Typography uses the token scale (not one-off font sizes)
• Grid and layout breakpoints are documented
• Responsive behavior is specified for each breakpoint
• Max-width and container widths are defined

Components

• All interactive states are designed: default, hover, focus, active, disabled, loading, error
• Component variants are documented: sizes, hierarchy levels, icon combinations
• Content edge cases are addressed: long text, empty states, missing images
• Animation and transition timings are specified (e.g., 150ms ease-out)

Accessibility

• Color contrast passes WCAG AA (4.5:1 for normal text)
• Focus states are visible and documented
• Touch targets meet minimum 44x44 px (iOS) or 48x48 dp (Android)
• Keyboard navigation order is defined
• Screen reader labels are specified

Assets

• Images exported at 1x, 2x, 3x
• Icons exported as SVG
• All assets compressed
• File naming follows convention (e.g., icon/home.svg, hero/product-2x.webp)
• Design tokens exported as JSON or CSS variables

Real-World Example

A UX team designed a mobile banking app for iOS and Android. The design system included 47 components, 12 screen layouts, and a token set covering color, typography, spacing, radius, and shadows.

Handoff process:

1. Exported all design tokens as JSON using Tokens Studio for Figma
2. Generated CSS custom properties and Android XML resources using Style Dictionary
3. Exported 156 icon SVGs with semantic naming (icon/transfer.svg, icon/deposit.svg)
4. Exported 23 product images at 1x, 2x, 3x using batch resize
5. Compressed all raster assets using the image compressor (47 percent average reduction)
6. Documented all 47 components with state specs, accessibility notes, and responsive behavior
7. Verified contrast on all 312 color combinations using the contrast checker
8. Calculated px to rem for all spacing values using the px to rem converter

Result: The development team implemented the design with zero spacing discrepancies. All 47 components matched the Figma specs within 1px tolerance. The design tokens synced automatically between Figma and the codebase, so future updates propagated without manual transcription.

Tips for UX/UI Designers

1. Use tokens, not hardcoded values. Every color, spacing, font size, and radius should reference a token. This ensures consistency and makes global updates possible. Use the px to rem converter to convert your spacing scale to rem.

2. Design all states. A button is not just one design. It has default, hover, focus, active, disabled, and loading states. If you do not design them, the developer will guess, and they will guess wrong half the time.

3. Account for safe areas. iOS devices have a safe area inset for the notch and home indicator. Android devices have system bars. Design your layouts to respect these insets. Use the iPhone pixel calculator and Android pixel calculator to get exact dimensions.

4. Verify contrast on every combination. Use the contrast checker on every text and background pair. WCAG AA is the minimum, not the goal. Aim for AAA where possible.

5. Export at multiple densities. Use the batch resize tool to generate 1x, 2x, and 3x variants. Compress with the image compressor. Convert to WebP with the PNG to WebP converter for smaller delivery files.

FAQ

What is the difference between px, rem, and em?

px is an absolute unit. rem is relative to the root font size (16px by default). em is relative to the parent element's font size. Use rem for global spacing and typography. Use em for component-level scaling where elements should scale with their parent.

How do I calculate pixels for Retina displays?

Multiply the CSS pixel width by the device pixel ratio. A 100px element on a 3x Retina display needs a 300px source image. Use the retina pixel calculator for exact calculations.

What is a design token?

A design token is a named value that represents a design decision, like a color, spacing, or font size. Tokens create a shared language between design and code. Instead of hardcoding #3B82F6, you reference --color-interactive-primary. When the design changes, the token updates everywhere.

What contrast ratio do I need for WCAG compliance?

4.5:1 for normal text (AA), 7:1 for enhanced compliance (AAA), 3:1 for large text and UI components. Use the contrast checker to verify every combination.

How do I prepare assets for developer handoff?

Export icons as SVG, images at 1x/2x/3x, compress all files, use semantic naming, and export design tokens as JSON or CSS variables. The batch resize tool and image compressor handle the mechanical work.

Related Tools

• PX to REM Converter - Convert pixels to rem units
• REM to PX Converter - Convert rem back to pixels
• PX to EM Converter - Convert pixels to em units
• PX to Viewport Converter - Convert pixels to vw/vh
• iPhone Pixel Calculator - Calculate iOS device pixels
• Android Pixel Calculator - Calculate Android dp to px
• Retina Pixel Calculator - Calculate Retina display pixels
• Contrast Checker - Verify WCAG color contrast
• Image Compressor - Compress assets for delivery
• Batch Resize Tool - Export at 1x, 2x, 3x
• PNG to WebP Converter - Convert to modern formats
• Background Remover - Create transparent assets

Conclusion

Pixel-perfect design is less about obsessing over a single screenshot and more about building a shared language between design and development. Use design tokens for every value. Design all component states. Calculate px to rem for accessible spacing. Verify contrast for WCAG compliance. Export assets at multiple densities and compress them before delivery. The calculators and tools on this site handle the pixel math: px to rem, iPhone pixels, Android dp, contrast checking. Run the handoff checklist before every handoff, and your built product will match your design down to the pixel.