Documentation & Handoff

Design Is Not Done Until It Is Built Well

A beautiful Figma file is worth nothing if what ships looks different. Handoff is the process of giving engineers everything they need to build your design accurately. It is not a single moment. The best teams collaborate throughout, but there is always a point where a design is marked ready for development.

Poor handoff is one of the biggest sources of friction between designers and engineers, in Lagos startups and Silicon Valley giants alike. Good handoff builds trust and speed.

---

Figma Dev Mode

Dev Mode is Figma's space for engineers. Toggle it with Shift + D. Engineers can:

• Inspect any layer to see sizes, spacing, colours, fonts and effects
• See tokens and variables by name (color.action.primary) instead of raw hex, if you used them
• Copy code snippets for CSS, iOS (SwiftUI) and Android (Compose)
• Measure the distance between elements by holding Alt/Option and hovering
• Export assets such as icons and images at the right sizes and formats
• See which component and variant is used, and jump to its documentation
• Track which frames are marked Ready for dev and what changed since last time

Other tools

• Zeplin: a dedicated handoff tool, popular before Dev Mode existed and still used by some teams for its structured specs and style guides.
• Storybook: where engineers document coded components. Linking Figma components to Storybook stories keeps both sides aligned.

---

What a Good Handoff Includes

1. Organised files

• Clear page structure: Cover, Ready for dev, In progress, Archive
• Named frames and layers ("Transfer / Confirm / Error"), not "Frame 482"
• Everything built with components, auto layout and tokens

2. All states and edge cases

• Empty, loading, error, success and partial states
• Long names, large numbers (₦1,250,000,000.00), missing images
• Offline and slow-network behaviour, which matters a lot for Nigerian users on patchy data

3. Responsive behaviour

• How the layout changes between small Android phones, large phones, tablets and desktop
• What stretches, what wraps and what truncates

4. Interactions and motion

• Link the prototype
• Specify durations and easing ("sheet slides up, 250ms, ease-out")

5. Accessibility notes

• Reading and focus order
• Labels for icon-only buttons (screen reader text)
• Minimum touch targets and contrast

6. Content

• Final copy, including error messages and microcopy
• Notes on localisation (English, Pidgin, Hausa) and text expansion

---

Writing Design Specs

For complex features, write a short spec alongside the Figma file. A useful format:

1. Context: the problem and link to the PRD
2. User flow: the screens in order
3. Behaviour rules: "If the transfer is pending for more than 30 seconds, show the 'Still processing' state and send a push notification when it completes."
4. Edge cases and errors
5. Analytics events to track
6. Open questions

Specs capture logic that pixels cannot show.

---

Collaborate, Do Not Throw Over the Wall

• Involve engineers early. They spot technical constraints before you polish a design that cannot be built.
• Run a handoff walkthrough: a 30-minute call to explain the flow and answer questions.
• Do design QA: review the built feature against the design before release, and file clear, kind bug reports with screenshots.
• Keep a changelog in the file so engineers know what changed.

---

Try It in the Lab

The lab shows a design ready for handoff. Toggle redlines to see spacing and size annotations like Dev Mode shows them. Click elements to inspect their tokens and generated CSS, then complete the handoff checklist to see whether your file is truly ready for development.