advertisement
advertisement
  • 06.08.17

Meet Framer, The Prototyping Tool Used By Google, Facebook, And Uber

The tool, built by two Facebook alums, is now used across the industry–and a new version is simple enough for any designer to use.

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.

advertisement

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.

[Image: courtesy Framer]
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.

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.

[Image: courtesy Framer]
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.

advertisement

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.”

About the author

Meg Miller is an associate editor at Co.Design covering art, technology, and design.

More

Video