Figma handoff
Figma to HTML handoff checklist: what developers need before build starts
A polished Figma file is a strong start, but it is not always a build-ready specification. The best handoffs remove guesswork before implementation begins.
1. Confirm the real page list
Design files often contain experiments, old directions and duplicate frames. Before development starts, mark the final pages clearly and name them in launch order.
- Homepage
- Landing page variations
- About, pricing, contact or legal pages
- Thank-you or confirmation pages
- Error, empty or success states where needed
2. Provide desktop and mobile references
If only desktop frames exist, the developer has to make mobile decisions. That is not always bad, but the important choices should be intentional.
At minimum, clarify how navigation, hero sections, pricing cards, forms and long content should adapt on smaller screens.
3. Identify reusable components
Reusable components make the build cleaner and more maintainable. Mark repeated patterns such as buttons, cards, testimonials, pricing blocks, FAQs and form fields.
4. Document interactions
Static screens rarely explain behavior. Add notes for:
- hover and focus states;
- mobile menu behavior;
- accordion or tab interactions;
- form validation messages;
- success and error states;
- animation expectations.
5. Separate real content from placeholders
Placeholder text causes delays when everyone assumes someone else will replace it. Mark what is final, what is draft and what still needs copywriting.
6. Export assets intentionally
Use clear asset names and provide the correct format. Logos and icons are usually best as SVG. Photos should be compressed but large enough for the layout. Transparent images should stay transparent.
A clean handoff does not need to be complicated. It just needs to answer the questions that would otherwise turn into Slack messages halfway through the build.
7. Share constraints early
Tell the developer if the site must use plain HTML/CSS, Tailwind, WordPress, Shopify, Webflow, a specific form provider or a particular hosting environment. Constraints shape the build.
The simple handoff checklist
- Final page list is marked.
- Desktop and mobile behavior is clear.
- Reusable components are named.
- Interactions and states are documented.
- Real content is separated from placeholder content.
- Assets are named and exported properly.
- Technical constraints are known before development starts.