Diagraming with Figma and Flowkit

To understand a problem fully, I need to visualize it. To map it. I need space to group thing together. I feel like simply writing is very limitating. Keeping it all in your head doesn't help either. That's why I've always been a huge fan of diagraming.

It's a big part of understanding problems for me. The beauty of it is that we can diagram anywhere. Whiteboards, paper, or on software. Then we can share those diagrams with people and it makes it much more easy for them to understand as well. Everyone wins.

Today I have tried Figma, which I wanted to try for a while. What I like about it is its accessibility - we can use it directly from the browser without needing to download anything. But also that it has collaboration and prototyping directly out of the box. Anyway, I wanted to use it for diagraming and sharing those diagrams.

After some research I came across Flowkit. It's a library of flow component available on both Sketch and Figma. It's been very intuitive and fun to use, and I feel like the results are very good looking. I'm looking forward to using that more in the future, and incorporating Figma as a part of my day-to-day whenever I want to visualize something.

Some idea I'd like to explore in the future is to bring together diagrams and prototype. In Figma it's possible to attach different frame together through hot points, and I think this could be a great way explore diagrams and add context. That way, we could have high-level views and allow to dive into specific parts.

It would look a little like that. As you can see, there's one node we can click. When we click on it we are taken to a lower-level diagram. Then I linked the ending node back to the upper level one.