When product designers Koen Bok and Jorn van Dijk were working at Facebook in 2013, they often found themselves pitching new app ideas with traditional presentation slides. Trying to convey their responsive, interactive designs to board members through static imagery was counterintuitive and frustrating—but it was also par for the course at the time.
Four years later, things are different. Today, almost all big tech companies require their product designers to build working prototypes of their ideas first, to more accurately convey them to executives. And as the focus of the design world continues to shift toward tech skills, it’s becoming even more necessary for designers to learn how to prototype—and how to code. “I predict that within one or two years it’s going to be really hard to get a job as a product designer at one of these companies without being able to do actual interactive design,” says Bok.
Which is why, shortly after leaving Facebook, Bok and van Dijk cofounded Framer, a startup that creates tools that make it easy for any designer or design team to build out working prototypes of their ideas for apps, features, and interfaces. The first iteration of Framer came out in 2015, and today is used by design teams at tech giants like Uber, Google, Facebook, and Dropbox, among others.
Last week, the company released a more robust and more accessible iteration of Framer. This time, minimal knowledge of code is required.
Framer is not the first tool to consolidate the designer tool kit. Co.Design wrote about Figma’s quest to become the “Github for designers” in 2015, for instance. Adobe XD, which came out last year, offers dual design-prototyping functionality for creating simple apps. But Framer is the first to move beyond just translating graphics into code or simple prototyping in a significant way. It uses simple JavaScript to express interactivity and animation. If a user wants to animate an element of a design, for example, she would create a new layer, switch over to code, chose the “animate” button, and Framer would automatically drop in that line of code.
For Bok and van Dijk, building out the features that are important for interactivity and prototyping is the priority, since that is where they see the design world headed. “The tools that we were seeing [when starting Framer] weren’t for delivering the kind of output for the work that designers do,”says Bok. Vector-based tools work well for things like designing decks, graphics, or icons, but they fall short for any design that requires sound, motion, and other responsive elements. “We saw that as our angle into the market,” says Bok. “We thought, this is really happening and I don’t think Adobe is doing this.”
Even for design agencies, Bok says, a tool for prototyping is helpful. “The interesting challenge agencies have is that their clients are shifting toward wanting prototypes as deliverables,” he says. “They want to actually receive the interactive work, rather than a deck or all the work in total. They don’t want the actual products, and they don’t want a deck—they want something in between.”