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.
The big difference with the new version of Framer is that it’s meant to be an end-to-end design tool, in which teams can develop, design, and prototype their ideas without having to integrate other tools or input files created in other programs. While the first version offered swift ways to drop in code and create animation and interactivity, you couldn’t use it alone. For example, users would use vector-based programs Sketch or Figma to design the interface, then import those files into Framer to add in interactive elements.
Another key element of Framer is an algorithm that infers the layout rules of an interface based on where a designer positions the initial objects. The tool will reshape and resize layouts automatically to fit on different devices, by anticipating how the original design will scale.
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.”