Machines for Building Machines

If you’re unfamiliar with Framer X then at first glance it might look like a design tool you’ve already seen before; there’s a side bar and a space for drawing rectangles, there’s a pen for drawing shapes and, besides it looking a little more futuristic than Sketch or Figma, there’s nothing immediately life changing about it.

The difference between those apps and Framer is that you can write real-life, honest-to-goodness React components in the latter. And at first I thought “well, okay this is technically neat but it’s also basically Dreamweaver all over again and I don’t want an app to generate code because it’ll always be bad.”

But oh boy was I wrong.

Framer X isn’t supposed to generate markup for you based on a bunch of drawings you make. And that’s because you’re not drawing pictures like in other design tools where you’re merely generating PNGs, JPGs, or SVGs. For example when you make an iOS app in Figma or Sketch it’s really just a painting of an app. You can’t interact with it, you can’t type into a text field, or really see how things might animate or move easily in the final thing that gets built.

In Framer X though, because you can write React components in your designs, the tool becomes something else far beyond drawing pretty pictures. At any moment you can pop open the code of a component in a text editor, change something in a JavaScript file and immediately see your prototype update in real time.

This wasn’t obvious to me immediately though, even as I’d heard excellent things about Framer I ignored it because in the design community it’s often hard to see what warrants genuine enthusiasm. But then I saw the tweets, and they were, well, beautiful. Folks began making applications with state and interactive keyboards and then suddenly the community started making translation tools, a package to redesign the Framer X interface itself and yikes even packages to make synthesizers (!!!) .

I think it’s important to see Framer as less like Sketch or Figma then and something more akin to Lobe or If This Then That. And so I can imagine this tool expanding beyond the confines of the design community and spreading out into other disciplines and fields completely unrelated to mine. It’s great for product designers or engineers for now, sure, but I can see musicians using it to record albums or novelists using Framer to make the perfect writing app. I can see type designers using it to prototype their specimen websites or help typographers build new and crazy interfaces.

That’s because Framer X doesn’t leave you stranded and limited to a static representation of your idea. Instead, you’ll find yourself sitting in front of a rogue-like videogame where you can connect all these simple parts together and make something much more complex.

Framer X is not a design tool then. It’s a machine for building machines. And so of course I’m horribly excited to experiment with the beta for now and can’t wait for the general release soon.