Rapid Prototyping

A large group of designers at Automattic use Sketch for their work. It’s a great design tool, and with the addition of symbols it’s become super powerful. We’ve got a few internal symbol libraries, and each designer likely has a version of their own. Here’s a quick screenshot of the symbols from a recent Sketch file:

I tend to copy/paste the symbols I need, as I need them, from other Sketch files. The beauty of symbols in Sketch is that you can override text and images for each instance. This alone is super powerful and lets you create designs by combining symbols like LEGO blocks. But Sketch doesn’t stop there — you can nest symbols within symbols and set rules for how elements react when the symbol is resized. Here’s a quick GIF to give you an idea for how easy it is to drop symbols into place:

WordPress.com LEGO’s, coming to your local Target this winter.

I won’t get into too much detail about how this all works as there are plenty of resources out there already. My point here is that its never been easier to create a library of components that you can use to build a design system. And I have total faith that this is all going to continue to get better and easier as Sketch is updated.

Thanks to Sketch’s symbols I spend less time designing pixels, and more time designing flows and systems. But plopping symbols onto a static Sketch artboard only tells part of the story. Without interactions and motion your design is incomplete.

Prototyping Tools

I regularly try new tools that promise to help complete the story. Services and apps like Marvel, Invision, Craft, Framer, Principle, and the dozens of others that I’ve tried all have their strong points. However, I always end up with a less-than-ideal prototype with “canned” transitions and unmaintainable source files.

For a while, I felt strongly that using code (JS, CSS, HTML, PHP, etc) was the only way I was ever going to make a prototype that conveyed my ideas sufficiently. As I tried all the visual prototyping tools I could, I found myself often going back to CodePen to visualize my ideas and share them. But I’m a terrible programmer and would often toil away for hours troubleshooting bugs and hacking out code that would make most of my colleagues cringe.

Enter Flinto for Mac

Somewhere along the way I tried Flinto for Mac. And I fell in love. Flinto’s biggest advantage is their transition designer.

Flinto’s transition designer in action.

The other prototype tools I’ve tried have either relied on pre-baked transitions (which only work when transitioning between entire screens) or complicated timelines. Flinto’s transition designer does neither. Instead, Flinto uses a Keynote-like Magic Move; you define where an element starts and ends, and then define the transition timing. It’s really rather brilliant and powerful, while remaining incredible simple.

A Demo of My Workflow

I’ve finally found a great workflow combining Sketch (with its awesome symbols) and Flinto (with its brilliant transition designer) that lets me rapidly prototype ideas and concepts. Using the LEGO blocks I’ve created in Sketch, I can quickly “throw together” a few screens and then sync those designs to Flinto, where I can design the way those screens flow together. I figure the best way to explain my workflow for rapid prototyping is a video of me in action.