When trying Penpot for the first time I was eager to testdrive the Whiteboarding and Mapping kit from the template library. What I was hoping to find was an intuitive feature that would allow to organize collaborative sticky notes sessions.
There are many use cases, but in general it’d be great to have some brainstorming sessions related to the more detailed work of creating UX designs. And have those brainstorms be associated to the design (i.e. not in a separate tool).
What I found was that the kit isn’t really suited. It’s use case is as a drawing tool to add stickies to a design. It is too involved creating them, adding text, connecting with arrows and shifting them on the canvas. There’s too many distracting tool panels in the UI. What I was hoping for was something with the same ease-of-use as Miro (and likely Mural as well).
Penpot though is very close to providing that already. Note that AFAICS (and I did a lot of search) there is no good FOSS sticky notes whiteboarding tool. An opportunity?
What should the UX be like, more or less?
It should be very basic. Minimalist, hiding all bells and whistles.
There’d be a sidebar tool panel where a set of colored stickies can be dragged on the canvas.
Like this: Drag sticky, place on canvas, type text, done.
(You wouldn’t see internal objects of the sticky. Clicking it gives a cursor, and you type centered text)
Text would auto-scale and the sticky would be resizable.
Tool panel also contains Connector lines tool.
Stickies have anchor points for the line tool to connect to.
Connecting stickies with auto-routed lines, maybe ability to influence the route.
Lines reroute when moving stickies.
Delete sticky tool.
That’s the basics, most of it. There might be additional features over time, eg.
Clicking a sticky shows a right panel with info who created it, ability to add comments, maybe see edit revisions, idk.
Maybe an activity log (so you see who deletes your sticky all the time )
In addition it would be splendid if - besides various image exports - there’d be a data export (e.g. JSON) and maybe an API.
One particular use case I have (and I readily admit this goes beyond the main purpose for Penpot) is to do a data export of a sticky note session and do code generation based on that. This in the context of Domain Driven Design and event-driven architecture. Sticky diagrams are created in an Event Storming session with domain experts. There currently is an Elixir framework called Commanded, that allows sticky note diagrams created in Miro to be exported (see exported JSON examples) and then used to generate application boilerplate code. I’d very much like an all-FOSS way of doing something similar.
In a Fediverse post following up on this topic, and in response to @Ryuno-Ki who considers it beyond scope of Penpot (which is a reasonable argument), I reacted with:
I realize that it is an additional use case that goes beyond the core features a #UX design tool should offer.
Still I feel that collaborative brainstorming before designing are closely related. Now I foresee people spending a lot of time drawing stuff to demonstrate how they see various design aspects. This might be avoided by having an agreed upon sticky notes based UX flow giving raw outlines. And save a lot of time in the process.
I see it as similar as what often happens at the start of a FOSS project, where people are eagerly jumping into code before really knowing what they’d like to code.
I feel it can be a signicant time saver to first focus on the underlying concepts of UX and interaction design flows using just stickies, rather than doing much more work upfront creating UI mockups already, presenting that to others only to hear that they have something completely different in mind.
I know about diagrams.net and it is a fabulous open software. But it is a drawing / diagramming tool first and foremost, and I do not think it is collaborative (i.e. realtime multi-people editing). I tracked some tools (including Penpot) in a wiki post on Fediverse Town some time ago, and discarded many others as unfit for the brainstorm we’d like to do there. Ended up with proprietary Mural, that some people refused to use.
Yeah that’s fair. Diagrams.net isn’t real time which can be a hassle when using.
I wouldn’t be opposed to Penpot having this functionality, but I hope they don’t get distracted from core UI design focused features like component variants etc. That’s the single feature still holding me back from trying to get broader adoption of penpot at my workplace.
This whole conversation is very interesting
It’s true that “Diagrams” feature goes beyond the main purpose for Penpot.
However, it is something that can give us clues as to how far the plugins in Penpot could achieve. It is something that is on our long-term roadmap and in which we have high expectations. That makes it something that we plan to make and will be an experiment in our upcoming work. But with what Penpot has, we hope that with the help of the community, it will eventually allow users to create more amazing plugins.
It would be wonderful to be able to develop new features to create a fully integrated plugin-based ecosystem.
For whatever it’s worth, I see two much smaller features as achieving perhaps 90% of what’s being envisioned here.
Having a sticky-note like object be first-class-ish on the left vertical toolbar, just like comments. Unlike comments, they’d always be visible in all views. In many ways, the object available in the white boarding example file could just be something built in.
The same logic which currently draws the prototype action green arrow flows from object to object is pretty close to the arrows being considered here. Ideally a similar sort of snappable arrow which auto-flows from object anchor point to object anchor point could be also available alongside pen/curve.
It wouldn’t get all the way to the full exportable event modeling stuff being described above, but built-in stickies + arrows that don’t require mucking around in pen and object properties would basically fully replace what Miro does for my employer (architecture/urban planning firm) in terms of flexible and web-based internal collaboration + open up the entire process to all the additional functionality that Penpot provides above and beyond. Illustrator doesn’t provide this either, which makes the crit process involve marking up a PDF or export of a vector file, which is why we need Illustrator for production + Miro for feedback right now.
)
