We’re living in the golden era of design. Tools like Figma, Framer, After Effects, Webflow, and more make it easier than ever to prototype your designs. The problem is that it’s too easy.
As designers we need to consistently expand our skills. The most valuable way to do that is to code your designs yourself. When you do this, you understand the process more deeply. You develop a better understanding of what is and isn’t possible. You begin to think differently as a designer.
You can see further and further into the product development cycle, all the way to implementation. Implementation is no longer some opaque process where you cross your fingers and hope the final result looks like your mockups. You know what it takes to execute with a high bar of quality.
The trick is to harness your motivation. When you finish your mockup in Figma, you’re proud of your work. You want to show it in the best possible light. So you might prototype it in Figma, and roughly try to produce what you think the best interactions and animations would be.
Take this motivation, and cut off the easy option of handing off a Figma prototype. Instead, you’re going to deliver a React prototype. Now you’re designing in hard mode.
There are a bunch of things that you don’t know how to do in React that you'll have to figure out if you want people to see your prototype. But you’re attached to this design, so you’ll find a way to make it happen.
At first your prototypes might not be as perfect as you envisioned. But by putting yourself in this position over and over, your prototypes will improve. Eventually your prototypes will not just look like the real thing, they’ll be the real thing.
Over time, this becomes part of your process. Where other designers prototype motion in tools like After Effects or Figma, which don’t output anything useful for engineers, you hand off a Codesandbox link. You send engineers real code, with a real example they can try for themselves.
This is useful not only because it’s the highest level of fidelity, but because of the way it opens up a dialogue with engineers. Suddenly you’re designing in their language. If you want something to move a certain way, there’s a way of describing that movement in code, and you know how to do it.
So next time you look at your Figma mockup and feel proud of your work, activate hard mode and bring it to life.