DesignTech
EXP#
11
DevLens
A local-first handoff-documentation tool that detects undocumented interactions, edge cases and responsive rules in a design, turns them into developer questions, and scores overall handoff readiness across four dimensions.
02
Context
A Figma file communicates spacing, typography and layout well, and says almost nothing about what happens when a list is empty, a field fails validation, or a modal needs to respond to Escape. Those gaps usually surface mid-sprint, as a developer's Slack question. DevLens set out to catch them before handoff, by documenting intent alongside the pixels.
03
The Challenge
The product needed to identify what's genuinely missing from a design — interactions, edge cases, responsive behaviour, accessibility — without requiring a Figma plugin or API access, and turn that into documentation a developer would actually read instead of a longer document nobody opens.
04
Research
Catalogued the kinds of questions that actually derail a sprint — empty states, loading behaviour, focus and keyboard handling — and used that list to define what 'documented' needed to mean, rather than treating documentation as a single yes/no checkbox.
05
Insights
The key findings that shaped the direction.
01
Figma explains what things look like, not what they do
Spacing, colour and layout are well covered by a design file — interaction, validation and edge-case behaviour almost never are, and that gap is exactly where handoff friction comes from.
02
The right output is a question list, not a document
A generic 'add more detail' prompt doesn't help — surfacing specific, answerable developer questions per component is what actually gets a design finished before build starts.
03
Readiness has to measure documentation, not design quality
Conflating 'is this documented' with 'is this good design' would have made the score untrustworthy — the readiness score deliberately measures completeness only, leaving design judgement to the reviewer.
06
How decisions were made
01
Detect, document, handoff — as three distinct stages
Structured the product around finding what's missing, capturing the intent behind it, and generating structured documentation, so a project's state is always legible as one of those three.
02
Ask the same questions a developer would
Generated per-component developer questions — does this list paginate, what happens on zero results, does Escape dismiss this — instead of a generic 'incomplete' flag.
03
Score readiness across four independent dimensions
Split the handoff-readiness score into Documentation, Interactions, Responsive and Accessibility, so a team can see exactly which dimension is dragging a project down.
04
Link back to Figma instead of replacing it
Let every documented decision link to its corresponding Figma frame, positioning DevLens as the layer that explains intent rather than a competing source of truth for the visuals.
07
Solution
A local-first handoff-documentation tool that detects undocumented interactions, edge cases and responsive rules in a design, turns them into developer questions, and scores overall handoff readiness across four dimensions.
A four-dimension handoff-readiness score: Documentation, Interactions, Responsive, Accessibility
Per-component developer questions surfaced automatically — loading states, empty states, validation, keyboard behaviour
Exportable, structured documentation in place of a raw Figma link at handoff
Figma frame linking so every documented decision stays traceable to its source design
.png)