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.

asha

Shana Hu

May 8, 2018

Shana Hu Pinterest office
Shana Hu (left) is a designer at Pinterest’s headquarters in San Francisco (right).

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

Shana Hu
Slow weeks or Fridays are the best times to host workshops or teach a new skill internally.

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.

Pinterest office
“Show, don’t tell” is a great method for convincing teammates of the power of prototyping.

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:

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:

Step 4: Choose a workshop format

image description
Choose a workshop format that works for everyone, be it a four-day bootcamp or Framer Fridays.

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.

Pinterest office Pinterest office
At Pinterest’s annual Knit Con event, employees from all over the world come together to lead talks and workshops that celebrate each other’s talents.

Step 5: Finalize your workshop curriculum

Format

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.

Lessons

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.

When teaching Framer internally, make sure all the exercises relate back to your product, so employees make the connection to their own workflow.

Documentation

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.

By the end of the course, participants should understand how to string together examples into one working prototype.

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.

Get the full workshop curriculum on Github ›

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.

Like this article? Spread the word.

Want more design articles?

Sign up for our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.

Framer X Is Here

Read more ›

Framer X Tour: Behind The Scenes

Read more ›

Closing the Gap Between Ideation and Production

Read more ›

Try Framer X.

The world’s most advanced tool for interactive design has arrived. Get started with Framer X today.

Try it for free ›

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.