Hi 👋

My name is Paweł Ludwiczak and I’m a creator of Handoff. Before I get into explaining what that thing is, let me first say this: it’s an MVP. It has a bare minimum of functionality, it will certianly crash in many cases and you probably shouldn’t have high expectations right now.

There, I warned you.

What is it?

Handoff is an app that let designers write hand off documents and design specs – documents that designers would give to engineering team, PMs, clients etc. to simply hand off their work.

Example 1:

As a product designer working for startup, I want to hand off some project to my engineering team showing them all the design details, interactions ideas, prototypes, maybe even code examples. Thanks to Handoff, everything can live in one place – a single source of truth.

Example 2:

As an interior designer I want to present my work to my client. Usually my work contains 2 or 3 proposals, each having several renderings, some technical drawings and lots of links to websites with furniture, decorations, wallpapers, etc. Previously I’d send long email with doznes of attachemenets ordered randomly. Thanks to Handoff it’s all perfectly structured and easy to parse in one place.

But why?

I worked with engineering teams that always wanted to have a single source of truth with all neccessary mockups, technical specs, references, etc. Normally we’d use Google Docs but it’s linear structure was not ideal for consuming such a document…

There would be a mockup, then several paragraphs of text describing UI & UX, some interactions, etc. And the reader would constantly need to scroll back up to that image to see what the text was describing and then scroll down to continue reading… And obvioulsy each project usually contains more than one image and more than few paragraphs of text.

Linear Strucutre vs Split view

So the first important thing about Handoff is it splits the document into two columns: left with text, and right with assets. And the assets are always visible, even if you’re scrolling (you probably already noticed that :)).

Now cool thing about this is you can reference each individual asset within the text: here’s me linking to and now to !

So every time you try to refrence something you can do so with a click of a button. No scrolling, no losing context!

Assets

When writing a hand off document, you may actually want to reference other assets than just static images. For example:

Embeds – sometimes you may want to link to a specific website, like - which is an iframe . And it can really be any URL - think of some UI exmaples you want to show to your engineering, or codepens, or honestly anything…
Videos – another time you may want to show something on a video… That’s easy too! Screen recording? Prototype? Or an intro video 🙃…
Snippets – and another time you may want to reference a specific piece of code , or explain an effect in code, or even paste an entire react component…

Right now it’s all pretty basic… But I do have a plan to integrate Handoff with other tools like Figma and Sketch, where you would pick a specific artboard and it would automatically insert it into a given section in the handoff document. And if you change anything in that Figma/Sketch design, it would automatically reupload the artboard in the right place. But again, it’s just an MVP right now.

Spotlights

Another feature in progress is the ability for users to create spotlights & annotations on their mockups. User would upload an image and the Handoff would let them reference a specific part of the image (by highlighting it or adding annotation on top of it). Similar thing would be possible for videos (to highlight specific part of the video) or code snippets (to highlight specific part of a code snippet).

The latter would turn Handoff into powerful code-walkthrough tool. Think of Stripe’s Documentation page – different parts of code are being highlighted while scrolling or clicking through the documentation: .

Welcome to Handoff