Move from an Excalidraw sketch to a Figma prototype and a GitHub handoff

Who this is for

For teams clarifying a feature that exists only in conversation or scattered screenshots.

Example scenario

Example: an event sign-up flow needs event details, availability, a form, confirmation, and a clear full-capacity state. Agree on the flow before debating visual polish.

A five-step handoff

1. Sketch the main path in Excalidraw

   Draw attendees, the path “browse → fill in → confirm,” and full or failed states. The whiteboard supports quick discussion and PNG or SVG export. ^[1]

2. Turn uncertainties into questions

   Ask who can edit a registration, how duplicates work, and whether a full event has a waitlist. Mark unanswered rules as open.

3. Expand key screens in Figma

   Prototype the event list, detail, form, confirmation, and error states with realistic content. Here, Figma Design communicates intent; review data, permissions, and engineering before generated code or release. Its prototype tools connect frames, components, and variables. ^[2]

4. Write an acceptance checklist in GitHub

   Use observable outcomes: valid submission shows confirmation; a full event blocks submission and explains why; failure keeps entered values and offers a retry. GitHub Issues can record, discuss, and track work. ^[3]

5. Attach context and ownership

   Add the prototype, sketch, fields, states, and open questions to the issue. Split tasks, name an owner and reviewer, and confirm the definition of done together.

The trade-off

Sketches expose flow gaps quickly; detailed prototypes clarify copy and states but take longer to maintain. GitHub makes completion conditions traceable, not a replacement for engineering or device review.

Before handing off

• Label decisions, assumptions, and visual placeholders.
• Check empty, loading, error, permission, and keyboard states.
• Give participants access to the relevant files and issues.