How to Teach Framer
at Your Company
How to Teach Framer at Your Company
Pinterest’s Shana Hu shares her guide to getting buy-in and setting expectations, along with a full Framer workshop curriculum.
I remember when I first fell in love with Framer. As a teaching assistant for a UC Berkeley class on UI Design and Development (CS160), Framer was a natural fit for teaching engineering students how to design. But I quickly realized that the tool’s real potential was in getting designers familiar with a programming mindset, as a gateway into the world of higher-fidelity prototyping.
When I eventually started working at Pinterest, I noticed many designers were still presenting static mockups to express interactive ideas. Though beautiful, this didn't allow them to account for the real-world nature of our product, like an uncurated Pinterest board.
Buoyed by my own passion for Framer, I set out to structure a process for teaching prototyping internally. Below, you’ll find my 5-step guide to teaching Framer (or anything) at your company. Learn the importance of getting stakeholder buy-in, setting workshop expectations and grab my full Framer curriculum, complete with lesson plans and lab exercises.
Step 1: Become a Framer advocate
Framer is my go-to tool for mobile prototyping at Pinterest, since I find it helpful to evaluate my design ideas in a fully-interactive environment. I work on a lot of onboarding flows, so instead of having to link individual layers, I find it faster to use Framer’s code-based approach to dynamically generate layers and attach events.
I knew getting familiar with Framer would be useful for other designers, but the main barrier was that people were either too intimidated or didn’t know where to start.
My goal was to make the learning process more approachable and teach a problem-solving mindset. This allows people to be more self-reliant when it comes to fixing their own bugs.
Step 2: Convince your design team
In my experience, the most compelling way to convince people that Framer is worth learning is to show them. I would share prototypes I made in design crit and presentations. I put together one-off lessons to introduce people to the tool and show them the power of prototyping in general. The more I shared, the more I heard from co-workers that they wanted to learn. The main barrier was not having a starting point, but I knew the interest was there.
Over time, I compiled some points that helped convince fellow designers of Framer’s benefit to their workflow. It’s one of the few design tools that allows you to:
- Explore your own ideas in both a visual and interactive way
- Find and evaluate edge cases prior to development
- Better communicate what the intended experience should feel like to engineering partners
- Build empathy for the development process by understanding the limitations of your design
- Build up self-confidence when it comes to learning new skills and tools
- Continue deepening your design skillset
Step 3: Get buy-in from your managers
Once I realized I needed time at work to teach Framer, I put together a proposal to get buy-in from my manager. I’d recommend outlining why you want to teach and how it benefits not only your personal growth, but also the growth of other designers and the company at large.
Here are a few points to get design decision-makers on board:
- Prototyping helps people do better work, faster and more effectively
- There are more possibilities for qualitative testing with prototypes
- Building a prototyping culture allows teams to explore and evaluate bigger ideas
- It allows design and development teams to be truly collaborative
- It also attracts more technical design talent, which provides a different product perspective
Step 4: Choose a workshop format
In the proposal, I pitched blocking out 20% of my time (Fridays, if possible) to work on developing a curriculum. I would evaluate results by sign-up interest and feedback surveys from attendees. My manager agreed, and I worked on a curriculum whenever I had the time. In the end I repurposed the curriculum into two different formats:
A four-day Framer bootcamp
I initially ran a 4-day workshop in December, when I knew work would be slower. It also coincided with a company-wide hackathon. We did a lesson and exercise each morning, and another set in the afternoon. This bootcamp-style workshop allowed people to dive in and focus on learning Framer and programming without distractions. By the end, one participant was able to string together examples to build a larger prototype.
One participant gave the following feedback in a follow-up survey: “I think a week is extremely tough to get away from work for. I’d recommend a different structure with ~2 hrs. a week in class time with homework.”
6x Framer Friday classes
Some feedback from the bootcamp mentioned that it was maybe too much time for people to dedicate all at once. So this year, I piloted a weekly class called Framer Fridays. Spacing lessons out from week to week can be more flexible for attendees, but I found it harder to ensure people were absorbing and applying the material between lessons.
In the end, I think a mixed approach might be more successful, with 1-2 hour weekly sessions plus mandatory homework. I had about the same number of attendees for both the workshop and the weekly sessions, so I don’t think one format is explicitly better than the other. The more important issue is making sure that people are motivated and have the proper support to set aside the time to learn.
Step 5: Finalize your workshop curriculum
My workshop curriculum was composed of two 2-day tracks: Intro to Framer and More with Framer. The goal was to help people get comfortable with Framer and coding in the first track, while the second track focused on helping them understand the parts of Framer that really shine. Sharing the curriculum early and having clear and separate tracks allowed people who were familiar with the basics to drop in later in the workshop.
I designed the curriculum to be scaffolded, so that each lesson would build on the one before. Each example related to the Pinterest UI, so that it would be immediately clear how participants could use Framer for work. By the end, it should be technically possible for attendees to connect several examples to build more complex prototypes. For instance, they could take an example of transitioning from a grid view to a closeup, which teaches them about parent/child layers, and later use a ‘for loop’ to make that example work for every single Pin.
My main goal was to give people the tools and tips to become self-sufficient in their learning. Throughout the workshop I emphasized the importance of reading Framer’s documentation and using print statements. I also taught them the importance of writing out pseudocode in comments to form a systematic way of thinking through problems. I documented all my example code files so that people would have a thorough reference for later. On top of being useful for designers who attended lessons, these also help designers who are motivated to go through examples and learn on their own time.
A couple of our designers have been able to pick up Framer independently and gone on to build several impressive prototypes using what they’ve learned.
All in all, it’s been rewarding for me to see how the curriculum has become valuable in and of itself, even without in-person instruction. In the hopes that it’ll be helpful to people outside of Pinterest, I’ve uploaded the full workshop curriculum onto GitHub, including presentations, lab exercises and prototypes. Use it to learn Framer yourself, or become an advocate and teach it within your own company.
For any questions or feedback, find Shana Hu on Twitter or read more of her writing on Medium. If you’re looking for Framer training tailored to your team, drop us a line to find out how we help get you started today.
Want more design articles?
5 Ways Facebook Scales Their Design System
Read more ›
Design Systems in Framer X
Read more ›
Creating Code Components
Read more ›