Prototyping is easily my favorite part of the design process. It’s the best opportunity to test your vision for an actual product experience (and better understand any assumptions, hypotheses, and decisions made along the way). Plus it’s fun to build out your ideas with a little movement and personality.

TL;DR - thinking about designs ‘as code’ has been an incredibly helpful and powerful tool. Below are some Framer examples that I recently put together…as well as a list of recommended resources to get started.

framer swipe example

More Examples:

At ReadyTalk, our team found a lot of success prototyping with Proto.io and InVision. Overall, these are great design tools – they’re easy to learn and can effectively represent workflows and interactions…but are also somewhat limited in terms of functionality and overall fidelity. Our prototypes often succeeded in getting the point across, but even well-polished protypes required some additional context and explanation with our development teams.

If you want to accurately communicate high-fidelity interactions, a verbal description or napkin sketch isn’t going to cut it. It’s worth learning how to use the tools that communicate your expertise.

So, I knew about Framer for quite a while but always felt a little intimidated to try it – mostly because it relies almost entirely on CODE :scream: and might come with a pretty steep learning curve.

framer-screenshot

But after spending some time with it, it turns out that all that scary code on the left is actually really, really simple.

Framer uses CoffeeScript – which is basically a cleaner, simpler version of JavaScript (and is really just ~2º more complicated than CSS).

They also provide really great documentation, an awesome snippet library (which is like a cheat-sheet for pretty much everything), and tons of additional learning resources to get started. If you’re a designer (or just halfway curious about it), I urge you to give it a shot.

Here’s a list of resources that I found to be helpful so far:

I love this stuff. If you stumble upon this, please feel free to share any additional resources that help you design, prototype, and communicate your ideas as well :beers: