We wanted to know more about it, so we thought what better way is there than ask a Design at Framer! Meet Benjamin den Boer :-)
Hi Benjamin! Let’s start from the beginning: how did you become a Designer?
I think I started playing with Photoshop when I was about 12 years old. Back then, my brother used to browse these gaming forums, and he needed a signature for his profile. He stumbled upon a site where people were actively requesting and creating these signatures. He thought I might like it. I discovered that I really enjoyed playing around with Photoshop. So much fun.
What project are you working on at the moment?
We’re currently working on the Framer site. We’ve got some really nice updates coming up! Most recently, I worked on the Resources page, where you can find all Framer-related content in one place. From beginner tutorials, to complete Framer.js" target="blank" >video courses, to an eBook on writing CoffeeScript for Framer.
Framer is coming at the right time when Material Design brings a tight relationship between animation and UX. Was it on purpose or is it a pure coincidence?
Well, Framer existed before Material Design, but you can say that both signify an increased emphasis on interaction and motion design.
UI Concept by Shrey Malhotra.
For a long time, we’ve been using visual design tools and static mockups to explore interactive work too. I’m really excited to see a range of new tools emerging that allow you to do much more.
Many people from the MaterialUp community don’t know what prototyping tool they should choose to build Material Design prototypes. How is Framer different from Pixate, Marvel, Atomicor CodePen?
There are many great prototyping tools around. Being able to choose the tool that fits you best is great. Tools like Pixate and Marvel are great because they generally have a lower learning curve. They allow you to define interactions and animations visually.
Framer is based on code. That means that designers can work with real data, include other libraries and much more. It’s really flexible. We believe that writing code doesn’t limit your creativity — it provides new creative opportunities.
People have the luxury now to try out these different tools and to see which one clicks. There’s also some great articles out there that could help you decide. If you’re still on the fence, this post may be really helpful; in it, 5 prototyping tools are compared by trying to re-create the same interaction.
Is FramerJs meant to be used by designers, developers or both?
I’d say both. Product Managers too.
What value is prototyping adding that drawing tools such as Photoshop or Sketch don’t?
Prototyping allows you to quickly explore and validate ideas. It’s a great way to gather feedback, and to make sure that little gets lost in translation.
Exploring and communicating interactive ideas with static mockups can be tricky. For example, defining how something should feel before it gets implemented can really only be done by creating an interactive prototype. Then, you can test it and play with different transitions, animation curves and timing.
KickMaterial — Category, by Grzegorz Oksiuta.
Google was an early adopter of FramerJs to showcase their first Material Design prototypes. Are other big companies using FramerJs internally other than Google?
Yes! Many others. Apple, Facebook, Dropbox, Disney, and much more. Given the nature of prototypes, many internal prototypes aren’t being shared publicly. But there are a few examples that we’ve also included on our site. The on-boarding flow of Carousel by Dropbox, or animations within Google Now for iOS, for example.
What’s your favorite Material Design FramerJs Prototype so far?
There are so many! I really like the Google Now prototypes from Noah Levin.
Voice Onboarding, by Noah Levin.
We’ve also made a few of our own. I’ve recently explored a couple of Material Design Interactions as well, like Floating Labels or the Contacts Scroll. Plus, we see new ones being posted within the Community on Facebook and on Dribbble all the time too.
Contacts Scroll, by Benjamin den Boer.
What’s the long term vision for FramerJs and prototyping in general?
We’re often considering how we can improve the learning process. For example, we recently introduced a new feature, called Layer Inspector. It’s a panel that sits on the right-hand side of your code, showing you a list of all the layers in your prototype, and their hierarchy. It brings a great deal of insight to how your prototype is setup.
In general, we believe that what we consider prototyping today, will simply be design tomorrow. A part of the design process.
Layer Inspector in Framer.
Prototyping can be useful in many stages of the process.
You can use it to quickly validate ideas early on, and consider them disposables.
Or as a way to collaborate and gather feedback. Being able to hand people a functioning prototype is a great way to get user input.
And finally, you can go back-and-forth between a visual design tool and Framer and create a polished, native-feeling prototype.
Thanks Benjamin —that’s a lot of useful information for people to give Framer.js a try and explore it.
Follow Benjamin on MaterialUp, Twitter, Dribbble or Behance.
You can browse beautiful inspiration of Material Design prototypes created with Framer.
And a few great resources to get started:
New to FramerJS? Just 3 Things to Get You Started.
Framer.js for people who think things like Framer.js are weird and hard.