Sketch.systems | Hacker News Reader

Sketch.systems

sketch.systems

333 pointssurprisetalk53 comments

Good lord I could've really used this a few months ago when I was butting heads with product management insisting on building things first rather than prototyping. This might have helped communicate the complexities that I feel were being glossed over, in a way that was approachable to non-programmers and non-designers.

Definitely giving this a go, thanks for sharing!

One thing that tripped me up was the name. I use Sketch[1] quite a lot and the reason I clicked the headline was I immediately though maybe this was something new around implementing design systems using Sketch. This tool is much more interesting to me, but still, thought I should mention it.

Loving the simplicity of the design in this little tool. It'll be interesting to see whether it works beyond simple experiences. The syntax makes me think it ought to be composable, like having larger state charts composed of smaller components, pluggable via open ended transitions either by omitting the target state or having some special syntax saying "plug in your state here".

Anyway, definitely going to give this a go, looks great!

[1]: https://www.sketch.com/

Thought the same. On a side note, the Sketch website is a hot mess. Love the Sketch product, but this... this is something.

Oh wow, they've really... updated it. There are some neat features but man it's confusing.

Wow. You really are not kidding. What a mess. I actually feel stressed looking at their home page. It's overwhelming. THEN they've decided to top the chaos off with animated Figma-cursors that have no apparent relationship to the hero content.

It doesn't get any better as you scroll either. Everything is animated and changes while you're trying to read it.

I tried to give them feedback through there "Contact Us" form and it's broken.

-----

Sketch. If you read this thread, please take this feedback seriously. It's shocking how unusable your marketing website is.

I hear ya ;)

I thought it couldn't get worse until I tried to select text on the front cover and realized the whole thing is draggable. The designs on the side are draggable as well, but they're also images and it conflicts with normal image dragging on Firefox

I’m reading on a tablet. Counter opinion, I like their website. I’m neither a designer nor a user of sketch.

On a side side note... are there good reasons to use Sketch over Figma these days? All the designers I know have moved over. Should they not have?

Interesting product.

This would be useful for more systems than just graphical user interfaces and frontend development.

Backend systems, distributed systems, stateful protocols and microservices are complicated and hard to think about. Raft for example.

I am working on a state machine formulation that is text based and I have an idea which I think would prevent entire classes of bugs.

The idea is that we can see the state machine as a graph and check reachability of states between state machines. If the code literally never fires the event that would cause the reachability of the next state, that's a bug.

The number of times I've been writing some code that uses threads or distributed systems and there is absence of behaviour, it's tricky to debug absence of behaviour.

I've always wanted to "see the future" from my IDE to see what state my code puts everything in.

One of my ideas is the idea of value flow tracing to detect steady state systems, systems that always make forward progress.

I prototyped this using computational tree logic (CTL). You can express the non existence of trap states and reachability of all states quite nicely and fully explore the state space symbolically. The drawback is you can't really do numbers in it.

This is way out of my depth, but you might look into TLA+

Have you read any of Hillel Wayne's stuff? He's got great articles on various formal methods approaches.

https://www.hillelwayne.com/tags/formal-methods/

Check out the sub-topic tags for more. Or just skim his blog.

It's similar to Shape Up's Breadboarding[1] in its simplicity and UI/UX orientation, but unlike the former, it's based on a formal Harel Statecharts[2].

Added bonus, it can be formally verified using Alloy [8].

Another similar FSM-based UI/UX tools are XState[3], XState Visualizer[4], and Stately.ai[5] powered by XState.

But Sketch.systems seems to be easier for fast prototyping using plain text format (what they mistakenly calling "markdown"). While XState generates a JS code, which can be used in React apps.

I guess it's possible to convert Sketch.systems format into XState, or other similar ones, after finishing prototyping and moving to implementation/debugging.

Sketch.systems seems to be much more lightweight, which is important for fast prototyping, and lowering barrier to entry for non-tech people.

Another relevant method is Event Modeling[6], which is somewhat in the middle between Breadboading and EventStorming[7]. Its main advantage is that checks the Information Completeness of the entire flow (both frontend and backend, including external services/systems, not just UI/UX), and that it can map 1:1 to CQRS/ES software design.

[1] https://basecamp.com/shapeup/1.3-chapter-04#breadboarding

[2] https://www.wisdom.weizmann.ac.il/~harel/papers/Statecharts....

[3] https://xstate.js.org/

[4] https://stately.ai/viz

[5] https://stately.ai/

[6] https://eventmodeling.org/posts/what-is-event-modeling/

[7] https://www.eventstorming.com/

[8] Formally specifying UI https://www.hillelwayne.com/formally-specifying-uis/

I'm a fan of XState. I can definitely see the parallels between Sketch.systems and XState, but the two cater to different use-cases.

Sketch.systems: Has an edge at prototyping UX and understanding the state changes (maybe even) user flows.

XState: Lets you build a working state machine in JS using the definition (and visualize it, of course)

My hope is that XState can become nearly as easy to use for visual/poc prototyping, but you’re right. They’re not quite the same tools and XState is more complex.

The team has awesome plans for the visualizer and V5 is around the corner which simplifies and generally improves the system overall, hopefully making it easier to learn but also to improve the visualizer.

This is a very interesting take on "how can we test/poc a given component. I would be great to see a demo for a full application given this can help system designers build complex systems and track what activities are needed. Looking at the iPhone lock screen example [1], this is very useful. you can see that this is not aiming to do the UI render of the actual components, more about plugging in other resources like images.

[1] https://sketch.systems/tutorials/iphone-lock-screen/

The fact that you can actually try the product without a registration is much appreciated.

A little discussion from earlier, 2018, post. https://news.ycombinator.com/item?id=17270625

I might try this, to see if it immediately solves a problem of helping think through interfaces and workflows. Looks promising, but these kinds of tools can get complicated quickly.

Love sketch.systems!

We built https://www.teampando.com out of a similar love for state-based thinking. We turn natural language requirements into state machines, have a Figma plugin to connect designs to states (didn't realize sketch.systems had embeds that can support that - very cool!), and can export XState state charts.

State-based thinking is already helpful just to get your thoughts organized as you're building something but it's super helpful to give everyone (eng and non-eng) on the team something concrete to talk about and play with.

I absolutely love these kind of browser-based tools without need for server and signup. Another one that I use a lot is https://sequencediagram.org/

Hey, they 'stole' my ideas from 2017. Perhaps inspired, or it just made sense to think about:

I wrote a couple of articles about better UX tools, went into a protype for text command based wireframing:

https://medium.com/proof-of-concept/creating-a-true-ux-tool-...

The other articles [1] go more into this, but it includes ideas about auto-generating flow-charts, easily export your UX source code, generate working front-end, etc.

I once presented this to ~30 UX designers, and they liked the general idea of a more holistic UX tool that does not take the wireframe as the central piece, but the project as a whole. But when I started showing text-commands as a prototype to show how different interfaces could be built for ux source code, I got nothing but blank stares.. haha, they did not want to look at text representing elements.

So while I agree with Sketch that there is value in UX source code, and the tools they have created seem great. I hope they integrate it in their other tools, so you can output the same source code via a GUI.

And then someone could write a script that converts my UX source code, from my mobile wireframing app TinyUX [2] with theirs :D.

[1] First article of series: "A True UX tool" https://medium.com/@JuliusHuijnk/a-true-ux-tool-9e892b0dc1a5)

[2] Wireframing on your phone by tapping icons. Hope to grow that into a more refined and 'holistic' UX tool: https://tinyux.app

Isn't that pretty much how design was done back when people used <table>s...?

That predates your article by roughly 20yrs

While there is some overlap, the article(s) are not about just wireframes, but also a tool for the full UX project, so this includes customer journeys, stakeholders, feedback notes, etc.

The goal would be to figure out a way to capture and manage UX projects in a way that you are not bound by a single tool. So you can import/export parts to other tools in your chain.

I know you were being tongue in cheek, but I am pretty sure this launched right around 2017. In fact, I don't think it's been updated since. I always thought this was a really great idea, but I admit it is strange seeing it crop up again now (looking exactly as it did years ago).

To be clear, I'm not seriously blaming them for stealing my ideas :)

It's funny though because we used to protect our whiteboard sketches from other teams even. And now this company wants us not only to replace something as simple as a whiteboard sketch, but to put it in their database.

The terms and conditions (as paraphrased here: https://news.ycombinator.com/item?id=17271274), do seem possibly problematic.

As someone who dabbles in both design and development, this is so close to web development that I can't immediately see where it would be useful to me. If I have to write React anyways, why not just build a small prototype?

The video positions this as a tool for designing around edge-cases and offloading work from the developer to the designer, but to me, the main difficulty in development are the edge-cases: "What are the possible errors that can occur when I call this API?", "What would be the most fitting design for the realities of our architecture?" It's as much the developer's job to solve them as it is the designer's.

The example, "What happens if the user backgrounds the app?", is a question that inherently must be solved through back-and-forth between the developer and the designer, because the designer might not understand the realities of the operating system (see iOS multitasking). It's easy to point to loading states or network errors as example edge cases, because they're well-known. But usually, the developer will be the first to discover such problems.

Does anyone know if this tool is still actively developed? This forum post from their site did not give me much comfort: https://talk.sketch.systems/t/saving-loading-sketched-curren...

I try to mistake actively developed on for needs active development.

Some of the tools I like haven’t significantly changed for me in years. There sometimes is a “good enough” to software that I don’t need a developer to work on it endlessly for the rest of their life.

But I will say that my interest in this, it was dashed after your comment. This looks like a tool is complex enough to probably not be perfect.

One of the developers here. Sketch.systems is about 5 years old and we haven't actively worked on since its release––but it's still used fairly regularly by folks and does the job it set out to do! If anything ever seems broken, reach out (our Twitter accounts are in the website footer) and we'll definitely take a look.

"Explore how your product should work, before building it."

I fundamentally disagree with this logic. Talk to any designer and they will tell you "to build any product, you must first build a design system."

This is an overwrought approach that I don't believe will stand the test of time.

I swear this is a campaign for Figma so more designers depend on their software to do their jobs

Getting new users to learn that syntax seems problematic but presumably a NLP interface between that syntax with a big language model would be straight forward to whip up?

There's almost no syntax to learn here.

As a writer of embedded software I'm a big fan of state machines. I always thought they were underused in other domains, so it's good to see things like this.

Paraphrasing I-don't-know-who: State machines are not optional. The only difference is whether you're going to have an explicit one, or a crappy, accidental one.

Love the clean design and the focus on not just the happy path

The URL in the Wayne’s Formally specifying UI blog post link isn't resolving, should be https://www.hillelwayne.com/formally-specifying-uis/

Is this basically dead? Not many posts in the forum in last few years.

Also, what language/framework is that in the code samples?

> Isn't there already a tool that has "Sketch" in the name?

> Yes, there are many!

So the justification for confusingly reusing the name of an existing product in the same space is just "there exists many other products with the same name"? Is it just me or does this not make any sense?

I do love the idea of exploring behavior, though I remember checking this site out a couple years ago and didn't quite understand the state machine language they were introducing. I should give it another shot though because it seems like it could be super useful.

https://statecharts.dev/ is a good place to start for an overview of how the statechart formalization works.

If you want to go straight to the source, David Harel's "Statecharts: A Visual Formalism for Complex Systems" published in 1987 is the original paper: https://www.inf.ed.ac.uk/teaching/courses/seoc/2005_2006/res...

I found the paper a better resource than the site, oddly enough. I think they were going for simple on the site but the result was just incomplete.

I'm free of this pain currently but I could see this saving a huge time pain in the product -> engineering handover step. Very cleanly done. Honestly great just for making sure engineering designs have covered all paths.

Not sure how comfortable I am with the read and write of private gists right out of the gate..

https://d.pr/i/Im80Ok+

Pretty interesting to focus foremost on the state machine.

I'm curious what the use case for the Figma connection is. If you're using Figma for design, wouldn't you use the built in protoyping tools?

fyi a UI prototyping app named Sketch already exists

https://www.sketch.com/

I thought the FA was something related to this Sketch app, but turns out it is not.

Very curious to hear from users - definitely addresses a real pain point, does it do so successfully?

I said out loud, "Damn, this is sick!"

I spot some Clojure code in the promo video!

this is a really interesting product. Is there a newsletter to keep up with the progress?

[Show HN]?

I'm sorry but I have to ask: did you search the word "Sketch" online, visit sketch.com, and then just think "YOLO!" and name your thing Sketch.systems for inexplicable reasons?

Reply on news.ycombinator.com