Using 'Whimsical' to Quickly Diagram Pretty Much Everything

I’m a sucker for a good diagram. And I’m pretty sure I’m not alone, in fact I’m POSITIVE I’m not alone. The Internet is lousy with diagrams of all levels of quality. From the “Tufte-esque” skill of the New York Times Upshot, to the apparent crisis of shitty data journalism courtesy of the proliferation of more user-friendly tools coupled with a poor understanding of how to visualize data in the first place—diagrams are all the rage.

Great!

Don’t worry, I’m not gonna waste your time by bashing bad infographics. Shitty art is omnipresent, and it no longer bothers me.

I’d rather talk about my new favorite tool that I like to use to make pretty diagrams and influence people: Whimsical

What is Whimsical?

Whimsical is a browser-based vector design program. Like Sketch but with way fewer features and no desktop application. But stick with me.

Currently, Whimsical only supports four different templates: mind-mapping, flowcharts, sticky notes and wireframes. The design settings are distinctly “Google Material”, and the ability to customize is intentionally limited, but that’s ok as the default settings are pretty attractive without fiddling with any of the knobs.

It is free to a point (you have to pay for multiple projects and team members), works a lot like Omnigraffle or Lucid Chart and is light years ahead of almost any diagram program in terms of user experience and speed.

The hotkeys and controls are very similar to those used in Sketch, so if you’re familiar with them, you’ll be able to pick up a Whimsical workflow in seconds.

Add shapes and connect them via the arrow function and voila’ you’ve got a diagram where the nodes stick to one another like bad press to a (normal) politician.

The main downside of Whimsical is the ability to export your designs. If you just want to share an image or a live link or your diagram then that’s just a couple of clicks. However, if you want to export a layered file so you can tweak and finesse your design in another program like Sketch or Illustrator, that’s a separate process. The best way I’ve found is to do like so.

1. Make Your Diagram

Create a diagram with generally the layout and sizes you want to have in your end product. Once you export the file (or “print” it) the text will be outlined and you can no longer make edits, so I’d stick to text editing in a separate text editor program and then paste it into your final design program (Sketch, AI etc.)

2. Print Your Diagram to PDF

Once you’ve got a design, print your project to a PDF via the top right dropdown. Depending on your operating system, you’ll now be given the option to “print to PDF”. Save it somewhere on your drive.

3. Open PDF in Adobe Illustrator

At this point, if you try and open the program in Sketch, things go “pear-shaped” right away.

As you can kinda see, the text is a complete mess, and the stroke weight of your arrows is ballooned to twice what it was inside the program. Not to mention a lot of the shapes are just b0rked, so there’s not a whole lot to salvage.

However, open the same PDF in Adobe Illustrator, and you’ve got clean vectors, nodes and even outlined text-as-objects to style to your heart’s content.

You’ll have to remove a bunch of arbitrary groups and masks before you can get to the shapes you want to play with, but the amount of time you’ll have saved just getting started in Whimsical makes the migration well worth the effort.

4. (Optional) Save As an Adobe PDF and Open in Sketch

Once you have a clean AI file to work with, save it as an Adobe PDF. You can then open that file in Sketch and it solves all those weird bugs. This is just for those of you who prefer Sketch to illustrator but for some weird reason pay for both subscriptions, so basically every designer on earth now.

I have not figured out how to import into Figma or Framer, but I’m still experimenting, so if I discover something new I’ll update here.

Yes, I pay for all four. I have a problem.

There you have it, Whimsical and how to export a file so you can use it as the skeleton for a more intricate project. Do it soon before they discover this loophole and kill it because you’re probably not supposed to be able to do that.

come to think about it, I probably shouldn’t be blogging about this. Oh well.

Side note: Here’s the diagram of some useful UX Writing resources which somebody made. This was actually the reason I discovered Whimsical in the first place as they linked to the Daily UX Writing Challenge as a helpful resource (god bless you, random Whimsical user). Check it out: Some Helpful UX Writing Resources

TL;DR is a blog about how to write short, effective copy for user interfaces and digital products. Brought to you by Ryan Farrell, maker of Daily UX Writing. Follow on Twitter.