Making design intent
tangible.
- My role
- Senior Software Engineer
- Focus
- Frontend engineering
- Products
- Inspect, Conversations, Boards
- Team
- Distributed, cross-functional
A design is more than the image on a screen. It’s the spacing, the decisions, and the conversation around it. At InVision, I worked on the tools that helped teams carry those details into what they built.
The shared thread
I joined InVision in December 2014 and worked across Inspect, Conversations, and Boards. Different products, with a shared concern: helping designers, developers, and stakeholders work from the same context.
01 / Inspect
From a picture to something you can build.
A finished mockup tells you what an interface looks like. Inspect exposes the structure behind it: layers, dimensions, colors, and typography. The engineering challenge is to make that detail available without losing the design itself.
A closer look / My contribution
The space between
two layers.
One of my contributions to Inspect was its measurement engine: the lines and labels that show the distance between a selected layer and a hovered layer.
What looks like a small visual detail is a geometry problem underneath. Layers can sit beside each other, overlap, or contain one another. The engine needs to choose the relevant edges, calculate the distances, and position the labels and helper lines.
I broke the work into the calculation logic, the rendering components, and the contract between them. That made the problem easier to reason about and let the view stay focused on drawing the result.
01 / Engineering note
Separate the logic from the view.
Compute positions and distances independently, then pass a defined measurement shape to stateless rendering components.
02 / Engineering note
Treat overlap as its own problem.
Distinguish overlapping layers from separated layers before calculating the distances to display.
03 / Engineering note
Keep the geometry true at every zoom.
Scale the measurement positions for Inspect’s 13%–800% zoom range, while keeping the displayed distances tied to the design.
02 / Conversations
Keep the conversation attached to the work.
Feedback is easier to understand when you can see what it refers to. Conversations brings comments onto the design itself, with pinned threads, mentions, and different kinds of notes. I worked on this product as part of InVision’s distributed engineering team.
03 / Boards
Give early ideas room to take shape.
Not every design conversation begins with a finished screen. Boards offers a space for references, assets, and visual direction. It was another product I worked on, a different kind of interface with the same need to make creative collaboration feel approachable.
The wider workflow
One part of
a bigger picture.
These interfaces lived within a larger design workflow. This archived Craft Sync screenshot shows the publishing step: bringing artboards out of the source file and into a shared workspace.
Shown for product context, separate from the Inspect contribution described above.
What I carry forward
The details
are the product.
Across these products, the common thread was context. A measurement needs the right edges. A comment needs the right location. A collection of references needs a useful structure. That attention to how an interface is understood is the part of this work I carry forward.
Notes from the team, written in 2019 ↗A retrospective using archived product imagery and writing from my time at InVision. Product work was a team effort; the measurement-engine section describes my individual contribution.