React JS for Design Prototyping
There are many tools available for designers to prototype interfaces and user experiences. Here at Geckoboard we’ve tried just about all of them, and there’s a handful we use regularly.
But Geckoboard’s core product experience is a complex, data-intensive web app, rather than a website or consumer mobile app. For example, we have interfaces to build data visualizations that need to handle intricate configurations and varied datasets, as well as provide a live preview reflecting the current options. None of the usual design tools handle that too well.
So since last year, I’ve adopted React as a tool to build some of my design prototypes, and now I’ve started helping the other designers to use it too.
This post is an intro to why and how we use React for design at Geckoboard. I’m also working on a practical tutorial for designers who want to get started learning. So if you’re interested, follow me on Twitter or Geckoboard on Medium to learn when it’s published.
What is React?
Why use React for design?
I initially looked into React so I could collaborate better with the engineers on my product team, Team Taco 🌮. I was unfamiliar with React and wanted to understand how it fits together, and learn any key principles I should keep in mind when designing.
I started by working through a few tutorials, and now React is one of my go-to prototyping tool. It works in a way that really suit some of the more challenging aspects of designing Geckoboard:
- It’s componentized
We try to design with reusable components, and React uses the concept of components at its core. For a single-page web app, components make more sense than pages.
- It’s stateful
With React, an interface’s “state” is described and updated, and can be passed to any component to be used. For example, this is very helpful for building config forms with live previews — the form can update the interface’s state, which is then passed instantly to the preview. Much more elegant than toggling classes with jQuery.
- It handles data
Of course, React isn’t always a great choice of tool, and for some designers it won’t ever be especially useful. It’s overkill for simple interfaces and experiences — page-flow tools like Marvel win out here easily. Transitions and animation can also be tricky to work with. For prototyping highly polished interactions, Framer is going to be much less of a headache.
Using React with ease
CRA just makes it work
React JS is known to require a fair bit of tooling, but Facebook’s Create React App (CRA) has been a game-changer for getting up and running quickly.
CRA handles the scary bits (Webpack 😱), and has some neat features like hot reloading and great error handling.
CRA also makes it easy to deploy your React app to Github Pages, which I use to share and the prototypes I build. Makes user testing easy 🙂.
I’ve put together a version of Tachyons with Geckoboard’s own color and shadow options. It’s easy to include with React, and it’s just CSS so it also can be used in any code-based prototype. Tachyons is an example of a new approach to CSS, where elements are styled by building up single-use functional classes, for example
w-80 white bg-dark-gray pa4 br1. Once you’ve used it a few times you can pretty much design interfaces by writing markup, and you rarely need to write additional CSS.
I would like to thank Shu Uesugi for his excellent tutorial React.js Introduction For People Who Know Just Enough jQuery To Get By, which was the best thing I read when starting out. Unfortunately the post isn’t currently usable because the code snippets are broken.