Hacker News Reader

Comment by gervwyk | Hacker News Reader

What tools are others using to build these wireflows? We find figma too detailed and mockup does not quite get us there (not sure why).

Any recommendations?

View on HN

I like text-based editing but found plantuml lacking in this regard, so I created my own thing. It's basically a html/css template engine with a library of (hand-drawn-ish) components. You can use it as a VSCode extension ('WireText'), featuring a live preview.

https://gitlab.com/saxion.nl/42/wiretext-code#wiretext-vscod...

A (non-text-based) alternative I kind of like is Quant-UX: https://quant-ux.com/

Your solution is awesome. Thanks for sharing.

Love the indentation based DSL - this looks very intuitive.

I do a lot of quick sketches with excalidraw but I easily see wiretext-code replacing that with a better workflow where I can extract out components and prototype by composing those instead of copy pasting around.

Draw.io (freeware, cross-platform desktop app). I have used it for diagrams mainly, but also for quite a bit of UX mockups. Its strength is diagrams though. But it is quite generic also in a way.

I find balsamiq is quite easy to get to grips with. My biggest complaint (at least for the desktop app, haven't tried the cloud version) is the lack of an "infinite" canvas.

I've used Zeplin on a few projects and it was a good experience.

> mockup does not quite get us there (not sure why)

I can only speak as a dev, but it's incredibly frustrating when design agencies leave out too many details or don't consistently follow guidelines. No tool is going to fix that.

On my side of the fence we generally don't care about the tools used as long as we have a completed design to look at that isn't late and isn't going to be pulled out from under us. I've seen product managers lie about all reviews being completed to "get devs started early" only to see the next revision break a ton of work. They also lie about copy text being final not realizing the impact even one word can have on everything. I've seen designers commit sins ranging from using system or licensed fonts causing them to have to rework an entire layout to not even exporting assets properly or at all before handing off to devs. If you have people like that, the back and forth and pain is endless for everyone.

I use Excalidraw for this kind of stuff. It has the best interface of all the tools in its class and it's easy to create diagrams/flows/mockups that peope recognise are 'in progress', but still look great.

I use excalidraw for almost everything. Brilliant tool. I already mentioned it in another response in this thread but using excalidraw inside obsidian via https://github.com/zsviczian/obsidian-excalidraw-plugin has been a game changer for me.

I use balsamiq for both flows and UX "paper" prototypes. My only gripe is not being able to easily re-use groups of controls

I have no trouble using Figjam for this, or just figma but borrowing the arrow connector objects from Figjam

Figma isn't ugly enough for developers to want to use. /s

Whimsical is amazing.

https://whimsical.com/

excalidraw is my go to for that in-between

Reply on news.ycombinator.com