Explore how your product should work, before building it.

Sketch.systems helps software designers think about complex product behavior. Sketch out states and clarify questions quickly, before investing in production visual design and code.


Work through your product's behavior, step-by-step.

Brainstorm possible states of your system and type them out into a spec. The simple, Markdown-like notation is as easy as jotting down ideas on a whiteboard. It’s great for pairing sessions or team meetings.

Link your states together with transitions, triggered by events. You can click on event names in the generated visualization to walk through the system and make sure you’ve got it right.

As you make changes and improvements to the spec, the visualization is automatically updated. States can be nested to make the system easier to understand and remove repetition.

Envisioning how the UI should look in each state can help makes things less abstract. Add an optional prototype using Javascript, HTML, and CSS. You can make anything from simple visual representations to production-fidelity demos.

Save your sketch and share it with your team. The simple notation and visualization are accessible to everyone involved in designing your software product: engineers, designers, QA, managers, and clients.


Tutorials, sweet tutorials.