Filippo Tinnirello
Back to resources
Design handoffWorkflowResource

Perfect design handoff: a practical guide for teams preparing files for development.

Most pixel-perfect issues are not coding errors; they are interpretation errors. When a design file is ambiguous, the developer has to guess. And we are terrible guessers.

1. Use a grid system

Web development is governed by rules, usually the CSS Box Model.

  • Stick to a consistent spacing system, such as an 8pt grid.
  • Define container widths clearly, for example 1280px or 1440px.

2. Assets: exportable vs CSS

Help me keep the site fast.

  • Icons and logos should be SVGs, not PNGs.
  • Prepare photos with standard aspect ratios such as 16:9 or 4:3.
  • Shadows and gradients should remain editable styles when possible instead of flattened images.

3. Responsive states

Sending only a desktop view is like sending half a blueprint.

A full set of device-specific mockups is not necessary, but desktop, mobile and any truly different tablet behavior should be defined.

  • Desktop 1440px as the main view.
  • Mobile 375px or 390px for menu behavior and stacking.
  • Tablet only when the layout changes materially.

4. Hover and interaction states

Define what happens to buttons and inputs when state changes occur.

A UI kit page in Figma with buttons, form inputs and typography works as a reliable source of truth.

Next step

Need a developer who speaks design?

I convert Figma designs into WordPress themes with obsessive precision.

Start a project