Design Handoff
This SOP covers how design work is packaged, communicated, and handed off to the development team. It is part of the Inkblot SOP Library — a reference set of SOPs that are activated selectively as needed.
Overview
Section titled “Overview”A good design handoff at Inkblot ensures that the development team has everything they need to build the design accurately and efficiently, without constant back-and-forth. The goal is a clean, well-documented transfer of design intent — including layouts, interactions, responsive behaviour, and assets — so development can proceed with confidence.
1. Design Review
Section titled “1. Design Review”Before handing off, the design must be reviewed and approved:
- Internal review: Lea (Product Design Lead) reviews all designs for quality, consistency, and adherence to design system standards
- Client approval: The client has signed off on the high-fidelity designs (all feedback rounds are complete)
- Completeness check: All required screens, states (hover, active, error, empty, loading), and responsive breakpoints are designed
- The design status in ClickUp should move from “In Design” to ready for handoff
2. Asset Preparation
Section titled “2. Asset Preparation”The design team prepares all assets needed for development:
- Export assets — Icons, images, and graphics exported in the correct formats (SVG for icons, WebP/PNG for images)
- Naming conventions — All exported assets follow a consistent naming scheme (kebab-case, descriptive names)
- Fonts — Confirm which web fonts are needed and document any licensing requirements
- Favicon and metadata images — Prepare OG images, favicons, and any other meta assets
3. Handoff Documentation
Section titled “3. Handoff Documentation”The designer annotates the design file with development-relevant information:
- Spacing and layout — Use Figma’s auto layout and spacing values consistently so developers can inspect them
- Component mapping — Note which designs correspond to reusable components versus one-off layouts
- Interaction notes — Document animations, transitions, hover states, and interactive behaviours
- Responsive behaviour — Clarify how layouts adapt across breakpoints (mobile, tablet, desktop)
- Content notes — Flag any placeholder content that needs to be replaced, and note where dynamic/CMS content will be used
4. Dev Walkthrough
Section titled “4. Dev Walkthrough”A synchronous handoff meeting between design and development:
- Lea or the assigned designer walks the developer(s) through the designs screen by screen
- Highlight any complex interactions, edge cases, or areas where the design deviates from existing patterns
- Discuss the component structure and how designs map to the development architecture
- The developer(s) ask questions and flag any concerns about feasibility or approach
- Meeting is logged in ClickUp under the project
5. Q&A Period
Section titled “5. Q&A Period”After the walkthrough, there is an open Q&A period:
- Developers can ask follow-up questions asynchronously via Slack or ClickUp comments on specific tasks
- The designer remains available for clarification during the initial development phase
- Any design changes requested during development are discussed with Lea before implementation
- Significant scope changes go back through the client approval process
| Tool | Purpose |
|---|---|
| Figma | Primary design handoff tool — developers inspect designs directly in Figma using Dev Mode |
| ClickUp | Task tracking and handoff documentation |
| Google Drive | Supplementary asset storage if needed |
| Slack | Async Q&A between design and development |
Lea Terblanche (Product Design Lead) owns the design handoff process, ensuring designs are complete, well-documented, and clearly communicated to the development team.