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.
- Circle Drawing (progress indicator)
- Random Click/Tap Animations (literally that’s it)
- Onboarding Flow 1 (swiping, page indicator)
- Onboarding Flow 2 (swiping, page indicator, subtle animations)
- Floating Action Button (show/hide/animate elements)
- To Do App (scrollable elements, swiping conditionals)
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 and might come with a pretty steep learning curve.
But after spending some time with it, it turns out that all that scary code on the left is actually really, really simple.
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:
New to Framer? The 3 Things to Get You Started
- The best Framer prerequisite I’ve seen. Definitely start here.
Mobile App Prototyping on Skillshare
- An awesome, brief (~50 mins), free class from Noah Levin.
Framer for People Who Think Things Like Framer Are Weird and Hard
- Another great introductory tutorial.
- A fun resource from Jon Bell with daily exercises and challenges.
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