A website design can look finished and still be a nightmare to build. Missing mobile layouts, no hover states, buttons that are slightly different on every page. The developer ends up guessing, and all those guesses add up to a site that doesn’t match the design.

Here’s what a design should include before it goes to development.

A clean, organized Figma file

Figma is the standard for web and app design now, and the file is the main deliverable. A good one is easy to find your way around: pages clearly named, final screens separated from explorations, and nothing called “Frame 482”.

Figma also has Dev Mode, where developers can inspect spacing, colors and fonts and copy the values directly. It works best when the file is built properly in the first place.

Every page, at every size

At minimum, desktop and mobile layouts for every page. Tablet too, if the layout changes in a meaningful way. If the design only shows desktop, the developer ends up designing the mobile version for you, whether they want to or not.

Components and a mini design system

Buttons, form fields, cards, navigation and footers should each be built once as a component, with their variations, and reused everywhere. Along with that:

  • Color and text styles, so every heading and color is defined once
  • Spacing rules, like an 8 pixel grid
  • Icons from one set, in one style

This is what keeps the site consistent when new pages get added later.

States and interactions

Designs usually show everything in its perfect state. Real websites have more going on. The handoff should cover hover and pressed states, form errors and success messages, empty and loading states, and what the menu looks like when it’s open. Animations can be shown in a prototype or described in notes.

Assets, exported properly

  • Logos and icons as SVG
  • Photos compressed and sized for the web, ideally WebP or AVIF
  • Fonts with web licenses, and the files or a link to where they’re hosted
  • A favicon and a social share image

A short handoff call

Even with a perfect file, a 30 minute walkthrough saves days of back and forth. The designer explains how things behave, the developer asks questions, and everyone agrees on what done looks like.

Apps work the same way

App design needs all of the above, plus every screen of each user flow, the conventions of iOS and Android, app icons in all the required sizes, and a splash screen. The flows matter as much as the screens, because an app is mostly moving from one state to another.

Even if your designer also builds the site, this still matters. It’s what lets someone else update or extend it later without starting from scratch.