InVision2014-2020
Making design intent tangible.
There’s a lot more to a design than the picture on the screen: the spacing, the decisions behind it and the conversations around it. At InVision I worked on tools that helped teams carry those details into what they built.
- My role
- Senior Software Engineer
- Focus
- Frontend engineering
- Products
- Inspect, Conversations, Boards
- Team
- Distributed, cross-functional
I joined InVision in December 2014 and worked on Inspect, Conversations and Boards. They were different products with the same goal: getting designers, developers and stakeholders to work from the same context.
From a picture to something you can build.
A finished mockup tells you what an interface looks like. Inspect shows the structure behind it: layers, dimensions, colors and typography. The engineering problem was showing all that detail without burying the design.
My contribution
The space between two layers.
One of the things I built for Inspect was its measurement engine: the lines and labels that show the distance between a selected layer and a hovered layer.
It looks like a small visual detail, but underneath it’s a geometry problem. 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.
- Separate the logic from the view.
- Compute positions and distances independently, then pass a defined measurement shape to stateless rendering components.
- Treat overlap as its own problem.
- Distinguish overlapping layers from separated layers before calculating the distances to display.
- Keep the geometry true at every zoom.
- Scale the measurement positions for Inspect’s 13% to 800% zoom range, while keeping the displayed distances tied to the design.
Keep the conversation attached to the work.
Feedback is easier to understand when you can see what it refers to. Conversations puts comments right on the design, with pinned threads, mentions and a few different kinds of notes. I worked on this product as part of InVision’s distributed engineering team.
Give early ideas room to take shape.
Plenty of design work starts before there’s a finished screen. Boards is a place for references, assets and visual direction. I worked on it too, and like the others it had to make working on creative projects together feel easy.
Where these tools fit in.
These tools were part of a larger design workflow. This archived Craft Sync screenshot shows the publishing step, where artboards go from the Sketch file into a shared workspace.
Shown for product context, separate from the Inspect contribution described above.
What I took from it.
All three products came down to context. A measurement needs the right edges, a comment needs the right spot on the design, and a collection of references needs a useful structure. Paying attention to how people read an interface is what I’ve kept from that work.
Notes from the team, written in 2019I put this together from archived product images and my own writing from InVision. The products were a team effort; the measurement engine section is the part I built.