Bringing markers back to UI design

Many designers know: the best design tool is a marker. Not Figma, not Sketch and no, not a pencil. With markers you draw something once and it’s done. No erasing, no fiddling around, no details. You get your big idea on paper in a few seconds. If it’s not good enough, you try again.

Good: sketching

Freehand sketching means ideating quickly, without the constraints of digital tools and design systems. You can intentionally keep parts of a sketch ambiguous and add a few strokes to emphasize other elements. If images are an essential part of your design, you make them. No need to go online and search a fitting picture first.

Moreover, everybody looking at your sketches understands that making changes is easy and because details simply don’t exist yet, they’ll give you feedback on the high level ideas. During user research, participants understand that they’re not looking at a real product which can help them understand better why they’re even looking at the things you present them.

Cumbersome: combining sketches with digital

There was a period where I used paper prototypes a lot. With the POP app I turned my sketches into tapable prototypes.

Free-hand sketches and pens with an iPhone 5 on top of them with a paper UI prototype on the screen
My client called this one cute.

Although I think apps like POP are great for many use cases, there are two reasons I don’t use them anymore:

  1. Creating variations of views by redrawing or cutting out pieces isn’t fast. It can be quite cumbersome. With digital tools that goes faster.
  2. It doesn’t facilitate collaboration. I love working on Miro and Figma, because that opens up the design process to others on my team.

Now this isn’t a opinion piece about how sketching should become part again of the modern design practice—I have a solution!

Great: a new hybrid workflow

This is my new workflow that combines the benefits of markers and Figma:

  1. Sketch on paper with a black marker
  2. Split up sketches into separate, semi-ready screens
  3. Take pictures of each screen with the Scannable app. It’s the best and fastest for this purpose.
  4. Enhance the sketched screens in Figma
  5. Create prototypes
  6. Share prototypes, collaborate, get feedback as Figma comments

Step 5 used to be tricky. I tried copying and pasting bits of my sketches to improve the screens or to create variants, like variants for logged in/logged out states of the same screens. This is time consuming and messy. I also tried using wireframe UI kits to add elements. But the mix of hand-drawn sketches and geometric UI elements is distracting. It’s impossible not to mess up visual hierarchy that way.

A wireframe kit with hand-sketched components

I created a wireframe kit with each component made by hand to mimic my marker strokes. Not a single straight line in there! In fact, each component has unique lines, with varying stroke widths (they’re all properly scalable though!). All colors can quickly be removed for a pure black and white style. But I also included paper textures to go for that layered cut-out look.

There’s an example of a hybrid marker/digital sketch below. Sure, the font I use here gives away that it’s not entirely hand-made. But can you guess what other parts I added?

A sketched wireframe combined with my Figma components

If you think “that’s all fine and dandy, but I don’t have such a wireframe kit and I probably use a different marker, so my sketches wouldn’t match with yours anyway,” I have good news for you! I’m sharing a free version of this kit via Figma Community.

Within a minute or two, you can adjust the stroke widths of the components to that of your own sketches. And of course you can change the text styles to a font closer to (sidenote: You could make a quick digital version of your handwriting. I used Calligraphr, which is great if you don’t spend more than 2 hours on it. Everything after it is a waste of time. To make a proper handwriting font, you need a more professional tool. I got started with Glyphs, which is awesome. But after spending many, many evenings trying to finish this, I can confidently tell you, it’s not worth it. Unless you want to learn about all the joys and pains of being a type designer. ) .

Although there is in fact a system behind how I set up the components and variants, it’s only there to create a somewhat coherent whole. Unlike with normal design system, you can just take the components, stretch and deform them and (gasp) detach the components to do whatever you please.

Try it yourself

Perhaps I’m taking this idea a bit too far, but by now I made almost 400 components and variants, 170 icons and a bunch of placeholder illustrations. It turned out that building components with wobbly lines and uneven corners is a lot of work if they should properly scale with Auto Layout. You need 9-slice scaling for that (or at least 3-slice scaling). Because it was a stupid amount of work that I’d probably never had done if it weren’t for the lockdowns, I don’t want to keep that all to myself. So I’m sharing a free version:

Screenshot of the figma file

Please, try it! Check out out the map components (scale them!)—I had fun with those in particular.

And let me know how it works for you (leave comments in the file!)—I’m very curious to learn how well the kit works in (sidenote: I also made a pro version with all components. For the same reason I made the free version: the stupid amount of work. Because Figma Community fees are so high, you can get it for less on Gumroad. ) . Also let me know below: do you have other tricks to make sketching part of your workflow?