4-myths-busted-about-hi-fi-prototyping

— Ee Venn Soh

As a designer, it’s our job to envision how people experience our products. The best way to do that is to simulate the proposed interaction and put the designs on the hands of our users and see them interacting and engaging with them.

This is where I’d like to talk about the world of hi-fi prototyping from my perspective as a designer, busting some key misconceptions and sharing what I’ve learnt.


… Or do you? I feel we tend to lean on things that are easier and shy away from things that are harder. It’s important that we don’t constrain our creativity subconsciously based on how easy or hard something is to do.

My tool of choice when it comes to prototyping is Framer X. When it first came out, I gave it a good run. With my old, rusty compSci knowledge, I’m able to whip something out but the process wasn’t elegant. It lacked documentation, it was buggy and it was a lot more complicated than I had hoped. I had to learn a lot about React and write many lines of code to achieve something simple.

But fast forward to today. Framer has released a set of customizable interactive patterns like scroll, page and link that designers can use out of the box. It has proven to be a great entry point for me.

Along with their new APIs and the recent React Hooks release, it has made prototyping in Framer X significantly easier. It allows beginners to explore unique interactions with less boundaries and it requires zero setup.

Press and hold > Rotate and scale object
export function WhileTap(): Override {

return {

whileTap: {

rotate: 90,

scale: 0.75

}

}

}

Animate the object by rotating it 360° in 2s
export function Animate(): Override {

return {

animate: { rotate: 360 },

transition: { duration: 2 }

}

}

Drag, scroll, pan, animate… you name it. Download the full set (Created by Benjamin den Boer)

Reality 1: As a designer, you need to learn the basics and know just enough React and Javascript to use the tool sufficiently. All the heavy lifting has been done for your through Framer APIs.

Reality 2: If you’re struggling, use this as an opportunity to chat with your developers. I personally have bugged all the “within one-meter-radius” devs that are around me and I know this cross pollination of thoughts has resulted in better empathy.


When we’re designing screens, it might be useful to create interactive workflows and preview your designs just like how users intend to use them. Sketch, Figma and InVision have great prototyping features that allows you to prototype a click through prototype at ease.

But if you want to satisfy your cravings for interaction design and explore more interactive ideas and still not writing a single line of code, Framer Store provides you with a bunch of packages you can download (contributed by the public) that you can use it to bootstrap your project.

Below is a dummy cooking app that I designed during one of the creative challenges. In order to present the idea more thoroughly, I “cheated” my way by downloading a bunch of packages and assembled them quickly together, directly on the canvas.

Reality: Design fast, iterate fast. It’s just a prototype and you shouldn’t be too precious about it. If there’s something that you think you need, very often it has probably been built already. Reuse as much as possible.


We’ve seen how easy to just drag & drop components and bootstrap them into a prototype. Imagine now we can do the same with every single React-based production component that is polished, tested and built. Porting production ready code and start using them as design ingredients has been one of the biggest selling points for me. A single source of truth is no longer a distant dream!

I’ve created a proof of concept below (I’m into indoor plants ?right now) using Atlaskit that showcases how you can do just that. To make it more “real”, you’re also able to pass data and define logic from screen to screen.

Pass data

Get data from 1 component and set it in another.

Define logic

If this is checked, then do XYZ.

Reality: Developers have spent tons of hours making high value/quality components to help improve your velocity to build features. With code blending in closer with design, production code isn’t just a developer’s territory but can be a designer’s playground too.


The possibilities are limitless. Hi-fi prototyping isn’t just about fancy motion curves and gestural swipes. Once you learn to speak the language of a developer (not only will you know why they’re paid more), you’ll start to discover what is/isn’t possible. Understanding the boundaries and constraints actually made me more creative than starting from a blank canvas which sometimes can be intimidating. The only limit is your imagination!

Creative coding

I’m a big fan of all things processing/p5. Here is an example of a particle system using the flocking algorithm. Download the file

Voice UI

A demo using voice input to control the interface. Built with annyang. Saying “Hello” to reveal ? and “Bye bye” to hide. Download the file

Motion sensors

Wanting to use movement as an input for your device? Using Shiny FX from the Framer store, you could tap into the device’s accelerometer and gyroscope. Download the file (Thanks to Addison Schultz for the file)

Reality: To be able to combine code with design gives you the extra ammo when it comes to creating hi-fi prototypes. When you intersect design, creativity and technology, it can lead you to momentary nirvana ✨



Happy prototyping ✌️

Leave a Reply

Your email address will not be published. Required fields are marked *