Train your Team

Teaching people how to become successful in Framer can be hard, and even harder when you're trying to get an entire team aligned. Understanding how you can enable your team to become Framer Masters will not increase the fidelity of your team’s work, but will also help you level up your team’s individual skills.

This guide will cover practical knowledge in Framer like powerful workflows and tips that reinforce productivity, to more conceptual points like why Framer is the best prototyping/design tool and how using Framer helps teams build better products in the long run.

Where do I start?

If you're reading this guide, chances are you already see the value that interactive design can bring to your team, but you might be wondering about some of the specifics that make Framer the best tool for high fidelity prototyping and building real products.

In this guide, we'll be looking at some of the ways you can train your team on becoming the best prototypers out there, but we also have a guide on the specific tools and workflows that Framer uses to reinforce workflows that make a real difference when building a product. Understanding the how of Framer's mission will help you and the rest of your team understand the why a lot better.

Before you can start training your team in Framer, you'll want to have some things set up already. You're going to be in the lead and want to make it as easy as possible for others to hop into Framer and start working right away. Below are some of the things you'll want to have in place:

A goal in mind

Framer allows your team to go from idea to execution, all in one place. But some teams might only want to use Framer for a specific part of their workflow - and that's totally fine! Having clear goals for what you want out of Framer will help everyone else see the value a lot more clear, right from the start.Here are some of the most common workflows we see in Framer:

• Design → Prototyping → Development
• Prototyping → User Testing
• Design Components → Production Components
• Interactive Design → Development

We know that teams who do all their work in Framer work faster and smarter. Take it from our customers like Spotify or Booking.com for example.

Teams that use Framer for the entire product lifecycle work more closely together, and build products that are more cohesive because of it. Framer is the only tool that allows developers, designers, and the rest of the company to work on the same file, while still enabling them to focus on the work they're best at.

What do I do?

Now that you know what it takes to set your design team apart from the rest, there's a handful of things you can do to make onboarding the rest of the team super easy.

Create building blocks for the rest of your team

There are a lot of things you can do before the rest of your team gets started in Framer. Setting up your account and workspace before will only be beneficial to the rest of the team as they start to explore.

If you're starting from Design, you'll want to provide the rest of the team with their work so they can hit the ground running. You can import your projects from Sketch or Figma and set the stage for interactive designs. Replace static assets with Interactive Components from the Insert Menu, design animations with Magic Motion, or use Framer's built in tools like Page & Scroll on top of the things you've already made. If your team is working on design specs that are commonly used, you can take it a step further and create things like Templates or Design Guides by using Framer's built in Ruler and Guide tools.

If you're coming from Development, you can populate your Team Store with existing components from your Production Design System. Work with your development team to take it a step further, and integrate your components with already existing CI/CD workflows, enable the rest of your design team by exposing Property Controls, or simply invite the development team into any project you're working on to let them code along with you.

If you're starting from anywhere else in the company, there are plenty of other things you can do to make the transition to Framer as smooth as possible. Import your company's custom fonts, set up reusable things like Shared Colors, or help the rest of your team by setting up folders to organize your team's work efficiently.

Help your team find help

Not only will you be the most advanced in Framer, but you'll also be your team's point of contact when it comes to helping them with projects or teaching them valuable workflows. You might be asked questions on simple things like finding team assets in a project, to things on specific interactions or animations.

But we're also here to help. Framer's long standing community has been something that sets us apart, acting as a wealth of knowledge for examples, guides, and even personalized help in places you get stuck. Let your team know that we're here to help, and where to find us if they need it.

Help you team discover all the places they can go to for support. From our community, to documentation and our support hub, to tutorials and examples provided by the Framer team, getting your team familiar with where to find resources will only speed up adoption across the org(and take less off of your plate!).

Run Workshops

Running weekly/bi-weekly workshops on using Framer can be one of the most effective things you can do, and will help Framer unlock new levels of efficiency within your company.

Running a Framer workshop requires a bit of planning up front, but we're here to help you with the concepts we know your team will want to know in order to hit the ground running.

Having your team follow a workshop led by you will help them understand the workflows that make working in Framer better. You know your company better than anyone, and pairing that with Framer's mission results in workshops that are not only engaging, but fun!

CT

“I always had a blast showing the capabilities of Framer to our design community and they were always impressed with the prototyping capabilities. What was really rewarding was able to see what the designers came up with on Framer Fridays. Running these sessions was not just a learning experience for everyone, but gave our designers a chance to get to know each other and see the amazing work they do every day.”

— Chas Turansky, Product Designer at Verizon

Different Framer concepts are presented throughout the following workshop ideas, so it's a good idea to make sure your team has started exploring Framer or taken a look at our Getting Started in Framer tutorial.

Trying to lead a workshop for complete newcomers? You can also run a workshop on the Framer basics! For teams coming from other design tools, we've seen success around the following workshop topics and ideas:

Creating interactive designs from scratch

Framer is more than just a tool for Prototyping, giving you all the tools you need to bring your ideas to life. Starting in Framer is easy, and will help your team grasp the basics in Framer faster.

1. Start small, and identify a part of your product you need to create.(Think an onboarding screen, or a sign in flow).
   1. Make the workshop fun! Feel free to structure it in a way that's collaborative and exciting for your team
2. Explain the basics, and introduce all the visual tools Framer gives you.
   1. Frames
   2. Graphics
   3. Text
   4. Previewing
   5. Canvas Pages
   6. Sharing your work
3. Give your team the foundation of using interactive tools in Framer
   1. Page
   2. Scroll
   3. Insert Menu
4. Take your work, and share it with the people who didn't attend!

Supercharging design components in Framer using Variants and Variables

We're all about components in Framer. That’s why we give you all the tools to create interactive ones right out of the box, without any code.

1. Identify your team’s most used components when designing for your day to day. It's a good idea to start with something simple(like a button), so you can lead the whole team through their first component while giving the the foundation to create more.
2. Recreate the component with your team, showing them how using Variants not only lets you organize your components, but will also make them interactive by default.
3. Expose Variables for your components, to make the more useable for the wider team. Think about the teams who would use the components, and the things they'll want to or need to customize per screen.

Creating interactive prototypes from your Sketch/Figma designs

Redoing work is never fun, and in Framer you don't have to. Import your designs and use the power of Framer's built in tools to create high-fi prototypes your users will think are real.

1. Start by importing your work from Sketch/Figma
2. Demonstrate the“Replace with” workflow by replacing static components with interactive ones from Framer's default components or installed in Public Packages.
3. Take a look at some of the things that aren't possible in Figma/Sketch, and train your team to convert/use Framer's built in tools to make your team's work interactive.
4. Scroll, Page, Magic Motion, Variants
5. Teach your team how Variants, Variables, and Design Components work in Framer. Building on top of the work your team has already done is important, and working right in Framer using Variants can help your team understand more about Framer the more they use these features.

Design Systems in Framer

Designing with your Production React Design System is totally possible in Framer, and running a workshop around using the interactive components your team uses is a great way to introduce Framer to the team.

1. In a Framer Desktop file, install your companies Design System and import a few of the main components to the File.
2. Expose Property Controls so your team can easily use and consume the components you set up
3. Upload the Framer Desktop file into Framer Web
4. Invite your team into the file, and build an interactive prototype!

Getting the most out of Framer Motion

We love interaction and animation and have a production ready API ready to use. Framer Web is built on top of this, minimizing the gap between what you design to what you ship.

1. Use Magic Motion to animate shapes or items in Framer Web
2. Build the animation or component alongside the designs, right in the built in code editor
3. Teach your team how to re-create these animations using Framer Motion in Production or a sandbox.
4. Check the handoff panel to make the code you write even faster!

Framer for the rest of the company

How do I convince my entire team? 

Convincing your team can be hard - especially if you're already rooted in a workflow that doesn't support rapid and collaborative product/feature development. If you're all in this together, then why does the product lifecycle feel so segmented?

From a tooling perspective, Framer offers the familiar workflows and tools any designer should be familiar with, plus a ton of tools focused around interactivity. A design with a working input should convince any designer of the value of interactive design over static.

One thing we hear a lot is that Framer requires code in order to get things done, and we're here to help you show your team that thats not the case anymore.

Since the launch of Framer Web, we've introduced a ton of super advanced no code prototyping features like Magic Motion, Variants, Variables, Interactive Components from the Insert Menu, and more.

Running a demo on any of the features above, while tying it to the work your team does should show any product person on your team the value that Framer brings.

How do I convince my product owners / managers?

You know that better products are built when everyone is on the same page, and your PO would most likely agree. But think about your team's current setup - is everyone really on the same page?

Give your product owners and managers something they can feel—something they can interact with right from the get go—and then let them know it was made in Framer.

No other tool comes close when it comes to adding interactivity to your designs, and showing a prototype that proves how real your work can feel is a testament to that. Framer is also a tool for the entire team.

Show your success stories

Don't forget about the wins you make along the way. Take some of your best prototypes, and highlight them across the wider company! See if you can trick someone into thinking a prototype is the real thing.

Share your work with us as well! We love seeing what Framer teams are making, and even have a channel in Discord that you can share your work in to be discovered in our community.

We also work with teams on featured blog posts, around success stories and workflows that turn teams into better product builders. Feel free to let us know how Framer helped your team work faster, and we'd be happy to collaborate!