From Wireframe to High-Fidelity Mockup

What You Add in the Mockup Phase

The transition from wireframe to mockup is the transition from structure to style. You keep everything from the wireframe — the layout, the component positions, the annotations — and add:

Real colors: Applied from a design system. Primary background, card background, text colors, accent colors, semantic colors (success green, error red, warning amber).

Real typography: Font family chosen, type scale defined (H1 through body to caption), font weights selected (typically 3 maximum: regular/400, medium/500, bold/700).

Precise spacing: The 8px grid applied consistently. Padding values chosen from the scale: 8, 16, 24, 32, 48, 64px.

Real components: Buttons with proper border-radius, shadow, hover states. Inputs with focus rings. Cards with borders and shadows. Badges with appropriate padding and color variants.

Real or realistic content: Actual placeholder names, realistic data, representative images. "John Smith" not "User Name". "March 15, 2025" not "Date".

Design System Basics for Developers

A design system is a reusable set of design decisions. For developers, the key concepts are:

Design tokens: Named variables for design decisions. Examples:

• --color-bg-primary: #0A0A0F
• --color-accent: #F59E0B
• --spacing-md: 16px
• --radius-card: 12px

Components: Reusable UI elements with defined variants. A Button component has variants: primary, secondary, ghost, destructive. A Badge has variants: success, warning, error, neutral.

Patterns: Repeated compositions — a card layout, a list item with avatar, a form section header.

Developer Handoff: What to Specify

When handing a mockup to a developer, specify:

• Exact hex colors for every element (not "dark blue" — #1E3A5F)
• Font sizes in rem (16px body = 1rem, 24px H2 = 1.5rem)
• Spacing in px from the 8px grid
• Border-radius values (4px for inputs, 8px for cards, 9999px for pills)
• Shadow values (box-shadow: 0 4px 16px rgba(0,0,0,0.3))
• Interaction states: hover, focus, active, disabled for every interactive element
• Animation timing: "button hover transition: all 200ms ease"

Figma's inspect panel shows all these values automatically when a developer selects a layer.

Responsive Mockups

Design at three breakpoints:

• Mobile: 375px — single column, stacked navigation
• Tablet: 768px — two columns, collapsed sidebar
• Desktop: 1280px — full layout

You do not need a mockup at every breakpoint for every screen. Focus on the breakpoints where the layout fundamentally changes.

Tool Spotlight

Figma — The current industry standard for mockup design. Free tier, browser-based, real-time collaboration, and the best developer handoff tools (inspect panel shows CSS). The de facto choice for most teams.

Sketch — macOS only, mature ecosystem of plugins, was the industry standard before Figma. Still used by many Apple-platform teams. Requires macOS and a paid subscription.

Adobe XD — Part of Creative Cloud. Has good prototyping features and integrates with other Adobe tools. Being phased out by Adobe in favor of Figma features.

Framer — The bridge between design and code. Allows real React components inside designs. The best tool for teams where design and development are very close.

Key Takeaways

• Mockups add color, typography, real content, and component styling to wireframe structure
• Design tokens (named variables) make design systems maintainable across large products
• Specify exact values for developer handoff: hex colors, rem sizes, px spacing, shadow values
• Always design interaction states: hover, focus, active, disabled — not just the default state
• Responsive mockups focus on breakpoints where the layout fundamentally changes, not every pixel